:root {
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --white: var(--color-card);
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --title-scale: 1;
    --heading-font-size-adjust: 1;
    --heading-font-weight: 700;
    --card-padding: 22px;
    --card-gap: 16px;
    --section-gap: 24px;
    --component-gap: 14px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --responsive-shell-padding: 1.5rem;
    --responsive-main-padding: 1.5rem;
    --responsive-section-gap: var(--section-gap);
    --responsive-component-gap: var(--component-gap);
}

/* Efectivo operativo acumulado: acción compacta y retiro en modal. */
.summary-page.summary-page-redesigned .summary-operational-weekly-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
}

.summary-page.summary-page-redesigned .summary-operational-weekly-header .summary-block-title-group {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.summary-page.summary-page-redesigned .summary-operational-weekly-total {
    min-height: 0 !important;
}

.summary-page.summary-page-redesigned .operational-cash-withdrawal-trigger {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
}

.summary-page.summary-page-redesigned .operational-cash-withdrawal-trigger i {
    font-size: 0.78rem !important;
}

.operational-cash-withdrawal-modal .modal-dialog {
    width: min(100%, 520px) !important;
    height: auto !important;
    max-height: min(90vh, 720px) !important;
}

.operational-cash-withdrawal-modal .modal-body {
    flex: 0 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.operational-cash-withdrawal-available {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid rgba(35, 168, 92, 0.24);
    border-radius: 14px;
    background: rgba(242, 255, 248, 0.9);
}

.operational-cash-withdrawal-available span {
    color: #4D6A5B;
    font-size: 0.82rem;
    font-weight: 600;
}

.operational-cash-withdrawal-available strong {
    color: #006B3F;
    font-size: 1.45rem;
    line-height: 1;
    white-space: nowrap;
}

.operational-cash-withdrawal-helper {
    margin: 0 0 18px !important;
    line-height: 1.35 !important;
}

.operational-cash-withdrawal-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.operational-cash-withdrawal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .summary-page.summary-page-redesigned .summary-operational-weekly-header {
        flex-wrap: wrap !important;
    }

    .summary-page.summary-page-redesigned .operational-cash-withdrawal-trigger {
        margin-left: auto !important;
    }
}

@media (max-width: 767px) {
    .summary-page.summary-page-redesigned .summary-operational-weekly-header {
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-header .summary-block-title-group {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    .summary-page.summary-page-redesigned .operational-cash-withdrawal-trigger {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        gap: 0 !important;
    }

    .summary-page.summary-page-redesigned .operational-cash-withdrawal-trigger span {
        display: none !important;
    }

    .operational-cash-withdrawal-modal {
        z-index: 1300 !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .operational-cash-withdrawal-modal .modal-dialog {
        width: min(100%, 520px) !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        border-radius: 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .operational-cash-withdrawal-modal .modal-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 16px 18px 14px !important;
    }

    .operational-cash-withdrawal-modal .modal-header h3 {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .operational-cash-withdrawal-modal .modal-close-btn {
        position: static !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        margin: -2px 0 0 !important;
    }

    .operational-cash-withdrawal-modal .modal-body {
        padding: 16px 18px 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .operational-cash-withdrawal-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .operational-cash-withdrawal-actions {
        flex-direction: column-reverse;
    }

    .operational-cash-withdrawal-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Estado final del boton, despues de todas las reglas responsive heredadas. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled) {
    background: #db3ca2 !important;
    color: #fff !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled):hover {
    background: #c92f95 !important;
    color: #fff !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled:hover {
    border-color: #e1e5eb !important;
    background: #edf0f3 !important;
    color: #8b929c !important;
    cursor: default !important;
    opacity: 1 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled) {
    background: #db3ca2 !important;
    color: #fff !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled):hover {
    background: #c92f95 !important;
    color: #fff !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled:hover {
    border-color: #e1e5eb !important;
    background: #edf0f3 !important;
    color: #8b929c !important;
    cursor: default !important;
    opacity: 1 !important;
}

/* /admin/dashboard: accion de limpieza en flujo normal, debajo de los filtros. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin: 6px 0 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions .dashboard-pending-orders-clear-action {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8b929c !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: default !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions .dashboard-pending-orders-clear-action:not(:disabled) {
    color: #db3ca2 !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions .dashboard-pending-orders-clear-action:not(:disabled):hover {
    background: transparent !important;
    color: #c92f95 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions .dashboard-pending-orders-clear-action:disabled:hover {
    background: transparent !important;
    color: #8b929c !important;
}

/* Compatibilidad con el bloque antiguo: el boton ya no participa en la grilla. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-action {
    position: static !important;
    z-index: 22 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #8b929c !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    cursor: default !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-action:not(:disabled) {
    color: #db3ca2 !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-action:not(:disabled):hover {
    background: transparent !important;
    color: #c92f95 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-action:disabled:hover {
    background: transparent !important;
    color: #8b929c !important;
}

/* Reporte de cierre diario: documento independiente del dashboard. */
.daily-closure-report-modal .modal-dialog {
    width: min(96vw, 980px) !important;
    height: min(90vh, 900px) !important;
    max-height: 90vh !important;
}

.daily-closure-report-modal .daily-closure-report-modal-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.daily-closure-report-modal .daily-closure-report-modal-header h3 {
    min-width: 0 !important;
    margin: 0 !important;
}

.daily-closure-report-modal .daily-closure-report-modal-body {
    padding: 20px !important;
    background: #eef3f8;
}

.daily-closure-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.daily-closure-report-actions .btn {
    min-height: 38px;
}

.daily-closure-report-feedback {
    margin: 0 0 14px !important;
}

.daily-closure-report-feedback[data-tone="error"] { color: #b42318; }
.daily-closure-report-feedback[data-tone="success"] { color: #087443; }

.daily-closure-report-preview {
    overflow: auto;
    padding: 18px;
    border: 1px solid #d6e0eb;
    border-radius: 16px;
    background: #dfe8f0;
}

.daily-closure-report,
.daily-closure-report * {
    box-sizing: border-box;
}

.daily-closure-report {
    width: min(100%, 794px);
    margin: 0 auto;
    padding: 42px;
    color: #1d2d44;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(24, 53, 87, .12);
}

.daily-report-header {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 3px solid #1c4f86;
}

.daily-report-logo { width: 100%; max-height: 58px; object-fit: contain; object-position: left center; }
.daily-report-heading p, .daily-report-heading h2, .daily-report-heading span { margin: 0; }
.daily-report-heading p { color: #4173a8; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.daily-report-heading h2 { margin: 2px 0 4px; color: #173f6c; font-size: 24px; line-height: 1.1; }
.daily-report-heading span, .daily-report-issued { color: #62758b; }
.daily-report-issued { text-align: right; font-size: 10px; }
.daily-report-issued span { display: block; text-transform: uppercase; letter-spacing: .08em; }
.daily-report-issued strong { color: #274769; font-size: 11px; }

.daily-report-section { margin-top: 26px; }
.daily-report-section h3 { margin: 0 0 10px; color: #173f6c; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.daily-report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.daily-report-kpis > div { min-height: 78px; padding: 13px; border: 1px solid #dce6ef; border-radius: 8px; background: #f8fafc; }
.daily-report-kpis span { display: block; color: #61758a; font-size: 10px; }
.daily-report-kpis strong { display: block; margin-top: 8px; color: #193f6c; font-size: 16px; line-height: 1.1; }
.daily-closure-report .is-positive { color: #087443 !important; }
.daily-closure-report .is-expense { color: #b42318 !important; }

.daily-report-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.daily-report-table th, .daily-report-table td { padding: 9px 10px; border-bottom: 1px solid #dfe7ef; text-align: left; }
.daily-report-table th:last-child, .daily-report-table td:last-child { text-align: right; white-space: nowrap; }
.daily-report-table thead th { color: #49657f; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: #f1f5f9; }
.daily-report-table tfoot th { color: #173f6c; border-top: 2px solid #87a8c8; border-bottom: 0; }
.daily-report-empty, .daily-report-context { margin: 0; color: #61758a; }
.daily-report-extra-expenses { margin: 10px 0 0; color: #61758a; font-size: 11px; }

.daily-report-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.daily-report-two-columns .daily-report-section { padding: 16px; border: 1px solid #dce6ef; border-radius: 8px; background: #fbfcfd; }
.daily-report-two-columns .daily-report-section h3 { margin-bottom: 12px; }
.daily-report-definition-list { margin: 0; }
.daily-report-definition-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e7edf3; }
.daily-report-definition-list > div:last-child { border-bottom: 0; }
.daily-report-definition-list dt { color: #60758c; }
.daily-report-definition-list dd { margin: 0; color: #1d3857; font-weight: 700; text-align: right; }
.daily-report-reconciliation { margin-top: 8px; }
.daily-report-reconciliation .daily-report-total { margin-top: 4px; padding-top: 10px; border-top: 2px solid #87a8c8; }
.daily-report-reconciliation .daily-report-total dt, .daily-report-reconciliation .daily-report-total dd { color: #173f6c; font-size: 13px; }
.daily-report-status { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: 10px; }
.daily-report-status.is-positive { background: #e5f7ed; }
.daily-report-status.is-warning { color: #915f00; background: #fff3d6; }
.daily-report-status.is-neutral { color: #52677c; background: #edf2f6; }
.daily-report-observations { padding: 14px 16px; border-left: 3px solid #6c91b7; background: #f5f8fb; }
.daily-report-observations p { margin: 0; }
.daily-report-footer { margin-top: 30px; padding-top: 14px; border-top: 1px solid #dfe7ef; color: #66798e; font-size: 10px; text-align: center; }

.daily-report-export-stage { position: fixed; top: 0; left: -10000px; width: 794px; background: #fff; }
.daily-closure-report--export { width: 794px !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; }

@media (max-width: 767px) {
    .daily-closure-report-modal .modal-dialog { width: calc(100vw - 20px) !important; max-height: 90dvh !important; }
    .daily-closure-report-modal .daily-closure-report-modal-header { flex-wrap: nowrap !important; align-items: flex-start !important; }
    .daily-closure-report-modal .daily-closure-report-modal-header h3 { flex: 1 1 auto !important; font-size: 17px !important; line-height: 1.2 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
    .daily-closure-report-modal .modal-close-btn { position: static !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; margin: 0 !important; }
    .daily-closure-report-modal .daily-closure-report-modal-body { padding: 12px !important; }
    .daily-closure-report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .daily-closure-report-actions .btn { width: 100%; padding-inline: 8px; font-size: 12px; }
    .daily-closure-report-preview { padding: 10px; }
    .daily-closure-report { padding: 24px 18px; font-size: 11px; }
    .daily-report-header { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
    .daily-report-logo { max-height: 44px; }
    .daily-report-heading h2 { font-size: 18px; }
    .daily-report-issued { grid-column: 1 / -1; text-align: left; }
    .daily-report-kpis { grid-template-columns: 1fr 1fr; }
    .daily-report-kpis > div { min-height: 68px; }
    .daily-report-two-columns { grid-template-columns: 1fr; gap: 12px; }
    .daily-report-table th, .daily-report-table td { padding: 8px 6px; }
}

/* Informe de cierre: composición editorial para vista previa y A4. */
.daily-closure-report { padding: 38px !important; font-size: 12px !important; box-shadow: none !important; }
.daily-report-header { grid-template-columns: 128px 1px minmax(0, 1fr) !important; gap: 22px !important; padding-bottom: 24px !important; border-bottom: 1px solid #d5e1ed !important; }
.daily-report-logo { max-height: 72px !important; }
.daily-report-header-rule { align-self: stretch; background: #c9d9e8; }
.daily-report-heading h2 { margin: 0 0 7px !important; color: #163e6c !important; font-size: 28px !important; letter-spacing: -.02em; }
.daily-report-heading p { margin: 0 0 5px !important; color: #315f8f !important; font-size: 13px !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; }
.daily-report-heading span { color: #72849a; font-size: 11px; }
.daily-report-kpis { margin-top: 26px; }
.daily-report-kpi { display: flex; gap: 11px; min-height: 102px !important; padding: 16px !important; border: 1px solid transparent !important; border-radius: 14px !important; background: #f7fafc !important; }
.daily-report-kpi i { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 34px; border-radius: 50%; font-size: 14px; }
.daily-report-kpi span { display: block; color: #63788e; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.daily-report-kpi strong { margin: 5px 0 4px !important; font-size: 18px !important; }
.daily-report-kpi small { color: #71849a; font-size: 10px; }
.daily-report-kpi.is-income { background: #eefaf3 !important; border-color: #d8eedf !important; }.daily-report-kpi.is-income i { color: #11804d; background: #d9f3e4; }
.daily-report-kpi.is-expense { background: #fff4f5 !important; border-color: #f2dfe2 !important; }.daily-report-kpi.is-expense i { color: #bc3f50; background: #fde0e5; }.daily-report-kpi.is-expense strong { color: #b42335 !important; }
.daily-report-kpi.is-result { background: #f0f6fd !important; border-color: #d9e7f5 !important; }.daily-report-kpi.is-result i { color: #2f68a0; background: #dbeafa; }
.daily-report-kpi.is-operational { background: #f0faf5 !important; border-color: #d8eee1 !important; }.daily-report-kpi.is-operational i { color: #188357; background: #d9f2e4; }.daily-report-kpi.is-operational strong { color: #087443 !important; }
.daily-report-split, .daily-report-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.daily-report-card, .daily-report-cash-control { margin: 0 !important; padding: 18px !important; border: 1px solid #dfe8f1; border-radius: 14px; background: #fff; }
.daily-report-card > header, .daily-report-cash-control > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.daily-report-card > header > i, .daily-report-cash-control > header > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #316a9e; background: #edf5fc; }
.daily-report-card h3, .daily-report-cash-control h3 { margin: 0 0 2px !important; color: #1c416c !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; }
.daily-report-card header p, .daily-report-cash-control header p { margin: 0; color: #73869a; font-size: 10px; }
.daily-report-table { font-size: 10.5px; }.daily-report-table th, .daily-report-table td { padding: 8px 7px !important; }.daily-report-table td:first-child i { width: 15px; color: #527da7; }.daily-report-table thead th { background: #f3f7fb !important; }.daily-report-table tfoot th { background: #f8fafc; }
.daily-report-cash-control { margin-top: 24px !important; background: #fbfdff; }.daily-report-cash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.daily-report-cash-panel { padding: 16px; border-radius: 12px; }.daily-report-cash-panel h4 { margin: 0 0 10px; color: #294b70; font-size: 13px; }.daily-report-cash-panel.is-cashbox { background: #fffaf0; border: 1px solid #f2e6c7; }.daily-report-cash-panel.is-operational { background: #f1f7fd; border: 1px solid #dceaf7; }.daily-report-cash-panel dl { margin: 0; }.daily-report-cash-panel dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(90, 120, 150, .13); }.daily-report-cash-panel dt { color: #687e94; }.daily-report-cash-panel dd { margin: 0; color: #213f60; font-weight: 700; text-align: right; }.daily-report-balance { margin-top: 5px; padding-top: 10px !important; border-top: 2px solid #8ab3d9 !important; }.daily-report-balance dt, .daily-report-balance dd { color: #124d80 !important; font-size: 13px; }
.daily-report-movements { margin: 0; padding: 0; list-style: none; }.daily-report-movements li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e9eff5; }.daily-report-movements li:last-child { border-bottom: 0; }.daily-report-movements time { color: #5c7893; font-weight: 700; }.daily-report-movements span { min-width: 0; }.daily-report-movements b, .daily-report-movements small { display: block; }.daily-report-movements small { overflow: hidden; color: #74879a; text-overflow: ellipsis; white-space: nowrap; }.daily-report-movements strong { white-space: nowrap; }.daily-report-observation-copy { display: grid; gap: 6px; padding: 13px; border-radius: 10px; color: #294967; background: #f3f8fc; }.daily-report-observation-copy span { color: #71849a; }
.daily-report-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 24px !important; padding-top: 16px !important; text-align: left !important; }.daily-report-footer div { display: grid; gap: 3px; }.daily-report-footer span { color: #72849a; }.daily-report-footer > strong { color: #536d87; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.daily-report-cash-panel h4 { display: flex; align-items: center; gap: 8px; }.daily-report-cash-panel h4 i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #b87906; background: #ffedbd; }.daily-report-cash-panel.is-operational h4 i { color: #127451; background: #d8f2e6; }.daily-report-cash-status { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 11px; border-radius: 10px; color: #8a650d; background: #fff6da; }.daily-report-cash-status.is-complete { color: #087443; background: #e8f8ed; }.daily-report-cash-status > i { display: grid; width: 29px; height: 29px; place-items: center; flex: 0 0 29px; border-radius: 50%; color: #fff; background: #d19a18; }.daily-report-cash-status.is-complete > i { background: #35b96e; }.daily-report-cash-status span { display: grid; gap: 2px; }.daily-report-cash-status small { color: currentColor; opacity: .82; }
.daily-report-movements li { grid-template-columns: 50px 10px minmax(0, 1fr) auto !important; }.daily-report-movements time { padding: 7px 5px; border-radius: 9px; color: #27639d; background: #eef7ff; text-align: center; }.daily-report-movement-dot { width: 10px; height: 10px; border-radius: 50%; background: #2dc978; }.daily-report-movement-dot.is-withdrawal { background: #f7ba20; }.daily-report-observation-copy { grid-template-columns: 32px minmax(0, 1fr); align-items: center; color: #087443; background: #e9f8ee; }.daily-report-observation-copy > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #fff; background: #39ba70; }.daily-report-observation-copy span { display: grid; gap: 3px; }.daily-report-observation-copy small { color: #3c6971; }
.daily-report-export-stage { width: 794px !important; }.daily-closure-report--export { width: 794px !important; padding: 38px !important; }
@media (max-width: 767px) { .daily-report-header { grid-template-columns: 88px 1px minmax(0, 1fr) !important; gap: 12px !important; }.daily-report-heading h2 { font-size: 20px !important; }.daily-report-kpis, .daily-report-split, .daily-report-bottom, .daily-report-cash-panels { grid-template-columns: 1fr !important; }.daily-report-kpis { gap: 8px; }.daily-report-kpi { min-height: 76px !important; }.daily-report-footer { align-items: flex-start; flex-direction: column; }.daily-closure-report-actions { grid-template-columns: 1fr !important; } }

/* Responsive foundation / Tablet-first                                       */
/* -------------------------------------------------------------------------- */
/* Breakpoints de referencia obligatoria para cambios futuros:
   - Mobile: hasta 575px
   - Tablet vertical: 576px a 899px
   - Tablet horizontal: 900px a 1199px
   - Desktop: 1200px+

   Nota:
   - Esta base convive con media queries historicas y con `tablet-app-mode`.
   - No reemplaza la logica visual existente; solo normaliza contenedores,
     paddings, gaps y prevencion de overflow horizontal.
   - Antes de agregar nuevos ajustes por pantalla, reutilizar estos rangos.
*/

html,
body,
.dashboard-frame,
.dashboard-shell,
.app-layout,
.dashboard-main,
.main-content,
.content-area,
.page-content,
.page-section,
.page-shell,
.responsive-grid,
.form-grid,
.order-form-grid,
.summary-grid,
.summary-two-columns,
.cards-grid,
.dashboard-grid,
.admin-grid,
.admin-actions-grid,
.general-summary-grid,
.reports-kpi-grid,
.third-party-metrics-grid,
.content-card,
.card,
.table-card,
.modal-dialog,
.modal-content,
.large-modal,
.history-modal.modal-content {
    min-width: 0;
    max-width: 100%;
}

.dashboard-frame {
    padding: var(--responsive-shell-padding);
}

.dashboard-main,
.main-content {
    padding: var(--responsive-main-padding);
}

.content-area,
.page-content,
.page-section,
.page-shell,
.responsive-grid,
.form-grid,
.order-form-grid,
.summary-grid,
.summary-two-columns,
.cards-grid,
.dashboard-grid,
.admin-grid,
.admin-actions-grid,
.general-summary-grid,
.reports-kpi-grid,
.third-party-metrics-grid {
    gap: var(--responsive-section-gap);
}

.content-card,
.card,
.table-card {
    min-width: 0;
}

.table-wrapper,
.table-scroll-area,
.modal-body,
.modal-scroll-area,
.client-search-shell,
.mobile-more-sheet {
    max-width: 100%;
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* TODO responsive-audit:
   Todavia existen reglas por modulo y toggles visuales con `tablet-app-mode`.
   Antes de refactorizar JS o eliminar vistas duplicadas, consolidar primero
   estos cuatro rangos en pantallas reales. */

@media (min-width: 1200px) {
    :root {
        --responsive-shell-padding: 1.5rem;
        --responsive-main-padding: 1.5rem;
        --responsive-section-gap: 24px;
        --responsive-component-gap: 14px;
    }
}

.third-mobile-section-switcher {
    display: none;
}

@media (max-width: 767px) {
    .third-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 12px 0 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .third-mobile-switch-btn {
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 12px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .third-mobile-switch-btn.is-active,
    .third-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    .third-mobile-switch-btn i {
        font-size: 0.86rem !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="register"] {
        display: block !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="records"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="register"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="records"] {
        display: block !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .order-operational-load-card.is-medium .order-operational-load-metrics {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(130px, 1.35fr) !important;
  }

  .order-operational-load-card.is-medium .order-operational-load-metrics > div {
    min-width: 0 !important;
  }

  .order-operational-load-card.is-medium .order-operational-load-metric-suggestion {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding: 4px 10px !important;
    justify-self: start !important;
    align-self: start !important;
    border-radius: 999px !important;
    background: #dff6e8 !important;
    color: #287a52 !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* Critical state: compact recommendation and single disclaimer. */
.order-operational-load-card.is-critical .order-operational-load-context {
  padding: 18px 20px 16px;
  border-color: #f4c8d2;
  border-radius: 14px;
  background: #fff1f4;
}

.order-operational-load-card.is-critical .order-operational-load-context-heading {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.order-operational-load-card.is-critical .order-operational-load-context-heading [data-load-preview-use-date] {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 34px;
  margin-left: auto;
  padding: 7px 12px;
  border-color: #159b61;
  background: #159b61;
  color: #fff;
  white-space: nowrap;
}

.order-operational-load-context-heading [data-load-preview-use-date][hidden] {
  display: none !important;
}

.order-operational-load-card.is-critical .order-operational-load-context-heading > span {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 50%;
  border: 0;
  background: #ffd8e1;
  color: #fff;
  box-shadow: none;
}

.order-operational-load-card.is-critical .order-operational-load-context-heading > span i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #ef4764;
  color: #fff;
  font-size: 0.9rem;
}

.order-operational-load-card.is-critical .order-operational-load-context-heading > div {
  gap: 5px;
  padding-top: 2px;
}

.order-operational-load-card.is-critical .order-operational-load-context-heading strong {
  color: #c92e55;
  font-size: 0.95rem;
}

.order-operational-load-card.is-critical .order-operational-load-status-pill {
  width: fit-content;
  padding: 5px 10px;
  background: #ffd9e2;
  color: #dc3154;
  font-size: 0.72rem;
}

.order-operational-load-card.is-critical .order-operational-load-context > p[data-load-preview-summary] {
  margin: 0 0 13px;
  color: #5c698d;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
}

.order-operational-load-card.is-critical .order-operational-load-details {
  margin-top: 0;
  padding-top: 12px;
  border-top-color: #f4c8d2;
}

.order-operational-load-card.is-critical .order-operational-load-details > strong {
  margin-bottom: 10px;
  color: #173c87;
  font-size: 0.78rem;
}

.order-operational-load-card.is-critical .order-operational-load-metrics {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.5fr);
}

.order-operational-load-card.is-critical .order-operational-load-metrics > div {
  min-height: 52px;
  padding: 0 10px;
  border-left-color: #f4c8d2;
}

.order-operational-load-card.is-critical .order-operational-load-metrics > div:first-child {
  padding-left: 0;
}

.order-operational-load-card.is-critical .order-operational-load-metrics small {
  margin-bottom: 4px;
  color: #6e7897;
  font-size: 0.64rem;
}

.order-operational-load-card.is-critical .order-operational-load-metrics b {
  color: #173c87;
  font-size: 0.76rem;
}

.order-operational-load-card.is-critical .order-operational-load-metric-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 999px;
  background: #dff6e8;
  color: #168451 !important;
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.order-operational-load-card.is-critical .order-operational-load-preview-suggestion {
  display: block;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.order-operational-load-card.is-critical .order-operational-load-preview-suggestion > i,
.order-operational-load-card.is-critical .order-operational-load-preview-suggestion-copy {
  display: none;
}

.order-operational-load-card.is-critical .order-operational-load-preview-suggestion .btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #159b61;
  border-radius: 9px;
  background: #159b61;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.order-operational-load-card.is-critical .order-operational-load-preview-actions {
  margin-top: 7px;
  text-align: center;
}

.order-operational-load-card.is-critical .order-operational-load-preview-actions p {
  justify-content: center;
  color: #727b96;
  font-size: 0.6rem;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .order-operational-load-card.is-critical .order-operational-load-context {
    padding: 16px 14px 14px;
  }

  .order-operational-load-card.is-critical .order-operational-load-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 0;
  }

  .order-operational-load-card.is-critical .order-operational-load-metrics > div:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
}

/* /ingreso mobile - el CTA critico queda en flujo, despues del detalle. */
@media (max-width: 767px) {
  .order-operational-load-card.is-critical .order-operational-load-context {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading {
    display: contents !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading > div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin-left: 58px !important;
    align-self: start !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context > p[data-load-preview-summary] {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context > p[data-load-preview-detail] {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-details {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-preview-suggestion {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading > [data-load-preview-use-date] {
    grid-column: 1 !important;
    grid-row: 6 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    justify-self: stretch !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-preview-actions {
    grid-column: 1 !important;
    grid-row: 7 !important;
  }
}

/* /ingreso iPad - el CTA critico queda debajo del contenido, en flujo. */
@media (min-width: 768px) and (max-width: 1199px) {
  .order-operational-load-card.is-critical .order-operational-load-context {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading {
    display: contents !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading > div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin-left: 58px !important;
    align-self: start !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context > p[data-load-preview-summary] {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context > p[data-load-preview-detail] {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-details {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-preview-suggestion {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-context-heading > [data-load-preview-use-date] {
    grid-column: 1 !important;
    grid-row: 6 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    justify-self: stretch !important;
  }

  .order-operational-load-card.is-critical .order-operational-load-preview-actions {
    grid-column: 1 !important;
    grid-row: 7 !important;
  }
}

@media (max-width: 767px) {
    .third-mobile-section-switcher {
        margin: 8px 0 10px !important;
        padding: 4px !important;
        gap: 4px !important;
    }

    .third-mobile-switch-btn {
        min-height: 40px !important;
    }

    .third-party-form-card,
    .third-party-list-card {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      el espacio grande entre metricas, switch y panel viene del gap del padre.
    */
    .third-party-page.page-shell {
        gap: 10px !important;
    }

    .third-mobile-section-switcher {
        margin: 0 !important;
        padding: 4px !important;
        gap: 4px !important;
    }

    .third-mobile-switch-btn {
        min-height: 40px !important;
    }

    [data-third-mobile-panel="register"],
    [data-third-mobile-panel="records"] {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      reducir espacio vacio inferior al final del scroll.
    */
    .third-party-page.page-shell {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell [data-third-mobile-panel="register"],
    .third-party-page.page-shell [data-third-mobile-panel="records"] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .third-party-page.page-shell .third-party-form-card,
    .third-party-page.page-shell .third-party-list-card {
        margin-bottom: 0 !important;
    }

    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      recuperar padding interno del card del formulario.
    */
    .third-party-page.page-shell .third-party-form-card {
        padding-bottom: 18px !important;
    }

    .third-party-page.page-shell .third-party-form-card form,
    .third-party-page.page-shell .third-party-form-card .form-grid {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell .third-party-form-card .form-actions,
    .third-party-page.page-shell .third-party-form-card button[type="submit"] {
        margin-bottom: 0 !important;
    }

    /*
      Mantener aire visual entre el ultimo elemento y el bottom nav,
      pero sin dejar bloque blanco gigante.
    */
    .third-party-page.page-shell {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    .third-party-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    /*
      Reducir el padding inferior del scroll SOLO en third-parties.
      Antes quedo demasiado alto.
    */
    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      evitar doble espacio inferior entre page, content y main.
    */
    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: 8px !important;
    }

    body:has(.third-party-page) .content-area,
    body:has(.third-party-page) .page-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .third-party-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell [data-third-mobile-panel="register"],
    .third-party-page.page-shell [data-third-mobile-panel="records"] {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell .third-party-form-card,
    .third-party-page.page-shell .third-party-list-card {
        padding-bottom: 18px !important;
        margin-bottom: 0 !important;
    }
}

.third-records-filters-toggle,
.third-records-scroll-top-btn {
    display: none;
}

@media (max-width: 767px) {
    /*
      /third-parties mobile - filtros avanzados y volver arriba en Registros.
    */
    .third-records-filters-toggle {
        width: 100% !important;
        min-height: 44px !important;
        margin: 14px 0 12px !important;
        padding: 0 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .third-records-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .third-records-filters-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-records-advanced-filters {
        display: grid !important;
        gap: 14px !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 14px 12px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        background: rgba(248, 251, 255, 0.72) !important;
    }

    .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-records-advanced-filters .form-field,
    .third-records-advanced-filters .form-group,
    .third-records-advanced-filters label,
    .third-records-advanced-filters input,
    .third-records-advanced-filters select,
    .third-records-advanced-filters button {
        width: 100% !important;
        max-width: none !important;
    }

    .third-records-advanced-filters input,
    .third-records-advanced-filters select {
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    .third-records-advanced-filters .btn,
    .third-records-advanced-filters button[type="submit"],
    .third-records-advanced-filters button[type="reset"] {
        min-height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    .third-records-scroll-top-btn {
        position: fixed !important;
        right: 18px !important;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 60 !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
    }

    body.third-mobile-tab-records .third-records-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}

.third-records-filters-toggle,
.third-records-scroll-top-btn {
    display: none;
}

@media (max-width: 767px) {
    /*
      /third-parties mobile - filtros avanzados y volver arriba en Registros.
    */
    .third-records-filters-toggle {
        width: 100% !important;
        min-height: 44px !important;
        margin: 14px 0 12px !important;
        padding: 0 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .third-records-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .third-records-filters-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-records-advanced-filters {
        display: grid !important;
        gap: 14px !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 14px 12px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        background: rgba(248, 251, 255, 0.72) !important;
    }

    .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-records-advanced-filters .form-field,
    .third-records-advanced-filters .form-group,
    .third-records-advanced-filters label,
    .third-records-advanced-filters input,
    .third-records-advanced-filters select,
    .third-records-advanced-filters button {
        width: 100% !important;
        max-width: none !important;
    }

    .third-records-advanced-filters input,
    .third-records-advanced-filters select {
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    .third-records-advanced-filters .btn,
    .third-records-advanced-filters button[type="submit"],
    .third-records-advanced-filters button[type="reset"] {
        min-height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    .third-records-scroll-top-btn {
        position: fixed !important;
        right: 18px !important;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 60 !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
    }

    body.third-mobile-tab-records .third-records-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}

.third-records-filters-toggle,
.third-records-scroll-top-btn {
    display: none;
}

@media (max-width: 767px) {
    .third-records-filters-toggle {
        width: 100% !important;
        min-height: 44px !important;
        margin: 14px 0 12px !important;
        padding: 0 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .third-records-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .third-records-filters-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-records-advanced-filters {
        display: grid !important;
        gap: 14px !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 14px 12px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        background: rgba(248, 251, 255, 0.72) !important;
    }

    .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-records-advanced-filters .form-field,
    .third-records-advanced-filters .form-group,
    .third-records-advanced-filters label,
    .third-records-advanced-filters input,
    .third-records-advanced-filters select,
    .third-records-advanced-filters button {
        width: 100% !important;
        max-width: none !important;
    }

    .third-records-advanced-filters input,
    .third-records-advanced-filters select {
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    .third-records-advanced-filters .btn,
    .third-records-advanced-filters button[type="submit"],
    .third-records-advanced-filters button[type="reset"] {
        min-height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    .third-records-scroll-top-btn {
        position: fixed !important;
        right: 18px !important;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 60 !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
    }

    body.third-mobile-tab-records .third-records-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    :root {
        --responsive-shell-padding: 1rem;
        --responsive-main-padding: 1rem;
        --responsive-section-gap: 18px;
        --responsive-component-gap: 12px;
    }
}

@media (min-width: 576px) and (max-width: 899px) {
    :root {
        --responsive-shell-padding: 0.875rem;
        --responsive-main-padding: 0.875rem;
        --responsive-section-gap: 16px;
        --responsive-component-gap: 12px;
    }
}

@media (max-width: 575px) {
    :root {
        --responsive-shell-padding: 0.75rem;
        --responsive-main-padding: 0.75rem;
        --responsive-section-gap: 14px;
        --responsive-component-gap: 10px;
    }
}

@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .search-input,
    .clients-table-search-input,
    .summary-orders-modal-search-input,
    .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    .modal select,
    .modal textarea,
    .mobile-service-search input,
    .service-picker-form-grid input,
    .service-picker-form-grid select,
    .service-picker-form-grid textarea,
    .client-dni-input-shell input,
    .order-amounts-row .form-group input,
    .service-price-input-wrap input,
    #service-quantity-input,
    #service-price-input,
    #service-size-select,
    .service-line-add-row input,
    .service-line-add-row select,
    .rug-add-row input,
    .rug-add-row select,
    .carpet-add-row input,
    .carpet-add-row select,
    .duvet-add-row input,
    .duvet-add-row select,
    #allOrdersModal .all-orders-filter-form input,
    #allOrdersModal .all-orders-filter-form select,
    #allOrdersModal .orders-total-filters input,
    #allOrdersModal .orders-total-filters select,
    #otherPendingOrdersModal input,
    #otherPendingOrdersModal select,
    .orders-filters-bar input,
    .orders-filters-bar select,
    .orders-filters-center input,
    .orders-filters-center select,
    .filter-group-inline input,
    .filter-group-inline select,
    .cash-box-form-grid--compact input,
    .cash-box-form-grid--compact select,
    .admin-sequence-form input[type="number"],
    .admin-cash-box-form input[type="number"],
    .admin-whatsapp-textarea-group textarea,
    .legacy-order-form input,
    .legacy-order-form select,
    .legacy-order-form textarea {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
}

.payments-summary-section .summary-payment-action-cell {
    width: 56px;
    text-align: right;
}

.summary-payment-open-btn,
.mobile-payment-open-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 14px;
    background: #F4F3FF;
    color: #4A5BA8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.summary-payment-open-btn:hover,
.mobile-payment-open-btn:hover {
    background: #ECE9FF;
}

.summary-payments-method-modal .summary-orders-modal-search,
.summary-payments-method-modal .summary-empty-state {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mobile-payment-summary-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }

    .mobile-payment-total {
        justify-self: end;
    }

    .mobile-payment-open-btn {
        justify-self: end;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-family-base);
    background: var(--app-background);
    color: var(--text);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

body.modal-open {
    overflow: hidden;
}

a {
    color: var(--primary);
    text-decoration: none;
}

.dashboard-frame {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 1.5rem;
    overflow: hidden;
}

.dashboard-shell,
.app-layout {
    display: flex;
    width: 100%;
    height: calc(100vh - 3rem);
    height: calc(100dvh - 3rem);
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(85, 156, 173, 0.15);
    border-radius: 32px;
    box-shadow: 0 28px 60px rgba(74, 88, 153, 0.12);
    overflow: hidden;
}

.sidebar {
    width: 220px;
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.5rem 12px;
    background: var(--panel-surface);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(85, 156, 173, 0.2);
    position: sticky;
    top: 0;
    height: 100%;
    overflow: hidden;
}

.sidebar-top {
    display: grid;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sidebar-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    height: 88px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    contain: layout paint;
}

.sidebar-logo-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 180px;
    height: 64px;
    max-height: 64px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transition: none !important;
    animation: none !important;
    backface-visibility: hidden;
}

.login-logo {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    object-position: center;
    transition: none !important;
    animation: none !important;
}

.sidebar-divider {
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
}

.sidebar-copy {
    margin: 0;
    padding: 0 0.35rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.sidebar-nav {
    display: grid;
    gap: 0.45rem;
    margin-top: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    align-content: start;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 46px;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    color: var(--text);
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar-link i {
    font-size: 16px;
    opacity: 0.7;
    min-width: 20px;
    text-align: center;
}

.sidebar-link-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: rgba(85, 156, 173, 0.45);
}

.sidebar-link:hover {
    background: var(--color-sidebar-link-hover-bg);
    color: var(--primary);
    transform: translateX(2px);
}

.sidebar-link.active {
    background: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-active-text);
    box-shadow: var(--shadow-soft);
}

.sidebar-link.active .sidebar-link-dot {
    background: rgba(255, 255, 255, 0.92);
}

.sidebar-link.active i {
    opacity: 1;
    color: inherit;
}

.sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
}

.sidebar-user-card {
    display: grid;
    gap: 0.9rem;
    width: 100%;
    margin: 12px 0 0;
    padding: 0.9rem;
    border-radius: 16px;
    background: var(--color-sidebar-card-bg);
    border: 1px solid var(--color-sidebar-card-border);
    box-shadow: var(--shadow-soft);
    box-sizing: border-box;
    transition: border-color 0.18s ease;
}

.sidebar-user-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

.sidebar-user-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sidebar-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(74, 88, 153, 0.16);
}

.sidebar-avatar-button {
    border: none;
    cursor: pointer;
    padding: 0;
}

.sidebar-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.sidebar-user-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.sidebar-user-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.sidebar-user-name .first-name {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

.sidebar-user-name .last-name {
    font-size: 14px;
    color: inherit;
    font-weight: 600;
    opacity: 1;
    word-break: break-word;
}

.sidebar-user-role {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sidebar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--color-border);
    color: var(--secondary);
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.18s ease, transform 0.18s ease;
}

.sidebar-logout:hover {
    background: var(--color-button-outline-hover-bg);
    transform: translateY(-1px);
}

.dashboard-main,
.main-content {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(248, 239, 246, 0.66) 100%);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 24px;
    background: var(--color-topbar-bg);
    border: 1px solid var(--color-topbar-border);
    box-shadow: var(--shadow);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

.topbar.has-brand-header-background {
    background-color: var(--color-topbar-bg);
    background-image: var(--brand-header-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.mobile-page-header.has-brand-header-background {
    background-image: var(--brand-header-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.topbar-copy {
    min-width: 0;
}

.topbar-greeting {
    margin: 0 0 0.35rem;
    color: var(--secondary);
    font-weight: 700;
}

.topbar-title {
    margin: 0;
    color: var(--primary);
    font-size: clamp(1.65rem, 2.4vw, 2.3rem);
}

.topbar-subtitle {
    margin: 0.4rem 0 0;
    color: var(--muted);
    max-width: 54ch;
    line-height: 1.5;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-actions {
    position: relative;
}

.header-top-row {
    display: contents;
}

.header-main-button {
    display: contents;
}

.mobile-header-menu-btn,
.mobile-fab-new-order {
    display: none;
}

.mobile-orders-list {
    display: none;
}

.notifications-shell {
    position: relative;
}

.notification-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(47, 36, 64, 0.12);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-notification-badge-bg);
    color: var(--color-notification-badge-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.notifications-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(74, 88, 153, 0.12);
    box-shadow: 0 24px 48px rgba(47, 36, 64, 0.16);
    display: none;
    z-index: 1200;
}

.notifications-shell.is-open .notifications-dropdown {
    display: block;
}

.notifications-dropdown-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary);
}

.notifications-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.notification-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(248, 239, 246, 0.5);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
}

.notification-item:hover {
    background: rgba(243, 221, 233, 0.7);
}

.notification-item--critical {
    background: rgba(220, 38, 38, 0.08);
}

.notification-item--critical:hover {
    background: rgba(220, 38, 38, 0.12);
}

.notification-item--critical .notification-item-count {
    background: rgba(220, 38, 38, 0.14);
    color: #991b1b;
}

.notification-item--warning {
    background: rgba(245, 158, 11, 0.1);
}

.notification-item--warning:hover {
    background: rgba(245, 158, 11, 0.15);
}

.notification-item--warning .notification-item-count {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
}

.notification-item--positive {
    background: rgba(22, 163, 74, 0.08);
}

.notification-item--positive:hover {
    background: rgba(22, 163, 74, 0.12);
}

.notification-item--positive .notification-item-count {
    background: rgba(22, 163, 74, 0.14);
    color: #166534;
}

.notification-item--neutral .notification-item-count {
    background: rgba(74, 88, 153, 0.12);
    color: var(--primary);
}

.notification-item-icon {
    font-size: 1rem;
}

.notification-item-copy {
    min-width: 0;
    color: var(--primary);
    font-size: 0.94rem;
    line-height: 1.35;
}

.notification-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(74, 88, 153, 0.12);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.notifications-divider {
    height: 1px;
    background: rgba(74, 88, 153, 0.12);
    margin: 12px 0;
}

.notifications-empty {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.notification-item-status {
    margin-top: 0;
}

.mobile-bottom-nav,
.mobile-more-overlay,
.mobile-more-sheet {
    display: none;
}

.mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 999;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 8px;
    border-radius: 22px;
    background: var(--color-mobile-nav-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--color-mobile-sheet-border);
    box-shadow: var(--shadow-card);
}

.mobile-nav-item {
    border: 0;
    background: transparent;
    text-decoration: none;
    color: var(--color-mobile-nav-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 54px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.mobile-nav-item i {
    font-size: 18px;
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
    background: var(--color-mobile-nav-active-bg);
    color: var(--color-mobile-nav-active-text);
}

.mobile-more-overlay {
    position: fixed;
    inset: 0;
    background: rgba(47, 36, 64, 0.3);
    z-index: 1100;
}

.mobile-more-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 84px;
    z-index: 1101;
    padding: 16px;
    border-radius: 24px;
    background: var(--color-mobile-sheet-bg);
    border: 1px solid var(--color-mobile-sheet-border);
    box-shadow: 0 18px 40px rgba(47, 36, 64, 0.18);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
}

.mobile-more-sheet.is-open,
.mobile-more-overlay.is-open {
    display: block;
}

.mobile-more-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.mobile-more-sheet-heading {
    min-width: 0;
    flex: 1;
}

.mobile-more-sheet-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 20px;
    line-height: 1.15;
    font-weight: 700;
}

.mobile-more-sheet-heading p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #7B7188;
}

.mobile-more-close-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: #F4F5FB;
    color: #1F2A5A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.mobile-more-sheet-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    padding-bottom: 4px;
}

.mobile-more-section {
    display: grid;
    gap: 8px;
}

.mobile-more-section-title {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 2px;
}

.mobile-more-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-strong);
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mobile-more-link:hover,
.mobile-more-link:active {
    background: var(--color-surface);
    border-color: var(--color-button-outline-border);
    transform: translateY(-1px);
}

.mobile-more-link-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.mobile-more-link-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mobile-more-link-copy strong {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-title);
}

.mobile-more-link-copy small {
    font-size: 12px;
    line-height: 1.25;
    color: var(--color-text-secondary);
}

.mobile-more-link-danger {
    color: #b42318;
}

.mobile-more-link-danger .mobile-more-link-icon {
    background: #FFF0F0;
    color: #C92A2A;
}

.mobile-more-link-danger .mobile-more-link-copy strong {
    color: #B42318;
}

.mobile-more-link-danger .mobile-more-link-copy small {
    color: #9A6A6A;
}

.header-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    color: var(--primary);
}

.header-datetime .time {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
}

.header-datetime .date {
    font-size: 0.81rem;
    line-height: 1.2;
    color: var(--muted);
    opacity: 0.7;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    width: 100%;
    align-items: stretch;
}

.admin-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.admin-appearance-card {
    grid-column: auto;
}

.admin-cashbox-card {
    grid-column: 1/-1;
}

.admin-management-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: 10px;
}


.admin-management-card__content {
    display: grid;
    gap: 6px;
    margin-bottom: 0;
    flex-grow: 1;
}

.admin-management-card__content .section-subtitle {
    margin-bottom: 0;
    line-height: 1.4;
}

.admin-management-card__actions {
    margin-top: auto;
}

.admin-users-actions {
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.admin-clients-actions,
.admin-sequence-actions {
    justify-content: flex-start;
}

.admin-sequence-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
}

.admin-sequence-stack {
    display: grid;
    gap: 8px;
}

.admin-sequence-panel,
.admin-cash-box-form {
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.72);
    border: 1px solid rgba(180, 207, 221, 0.38);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.admin-sequence-grid,
.admin-cash-box-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 12px;
    min-width: 0;
    max-width: 100%;
}

.admin-sequence-grid .form-group,
.admin-cash-box-grid .form-group {
    margin-bottom: 0;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.admin-sequence-actions,
.admin-cash-box-form .form-actions {
    justify-content: flex-start;
    padding-top: 12px;
    margin-top: 4px;
}

.admin-sequence-grid label,
.admin-cash-box-grid label {
    margin-bottom: 0;
}

.admin-sequence-form input[type="number"],
.admin-cash-box-form input[type="number"] {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

.admin-cash-box-stack {
    display: grid;
    gap: 12px;
}

.admin-cash-box-base-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.admin-cash-box-base-form,
.admin-cash-box-initialization-form {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.admin-cash-box-control-setup,
.admin-cash-box-control-status,
.admin-cash-box-control-disabled {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(180, 207, 221, 0.42);
}

.admin-cash-box-control-setup {
    display: grid;
    gap: 7px;
}

.admin-cash-box-control-setup-heading,
.admin-cash-box-control-status {
    display: flex;
    align-items: center;
    gap: 7px;
}

.admin-cash-box-control-setup-heading h4 {
    margin: 0;
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-cash-box-control-status {
    justify-content: flex-start;
    color: #166534;
}

.admin-cash-box-control-status-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #166534;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-cash-box-control-disabled {
    margin-bottom: 0;
}

@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
    .admin-sequence-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 12px;
    }

    .admin-cash-box-base-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.admin-whatsapp-card {
    padding: 24px;
}

.admin-whatsapp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-whatsapp-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
}

.admin-whatsapp-editor {
    display: grid;
    gap: 18px;
}

.admin-whatsapp-template-list {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-whatsapp-template-pill {
    border: 1px solid rgba(85, 156, 173, 0.2);
    background: #fff;
    color: var(--primary);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-whatsapp-template-pill:hover,
.admin-whatsapp-template-pill.is-active {
    background: rgba(85, 156, 173, 0.08);
    border-color: rgba(85, 156, 173, 0.38);
    box-shadow: 0 8px 18px rgba(85, 156, 173, 0.1);
}

.admin-whatsapp-form {
    display: grid;
    gap: 14px;
}

.admin-whatsapp-create-form {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.82);
    border: 1px solid rgba(180, 207, 221, 0.38);
}

.admin-whatsapp-create-textarea textarea {
    min-height: 104px;
    resize: vertical;
}

.admin-whatsapp-create-actions {
    justify-content: flex-end;
}

.admin-whatsapp-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 2fr);
    gap: 16px;
    align-items: stretch;
}

.admin-whatsapp-variables,
.admin-whatsapp-textarea-group {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.72);
    border: 1px solid rgba(180, 207, 221, 0.38);
}

.admin-whatsapp-variables {
    display: grid;
    gap: 8px;
    align-content: flex-start;
    height: 100%;
}

.admin-whatsapp-variables-label {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.admin-whatsapp-variables-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-whatsapp-variable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-whatsapp-variable-chip {
    border: 1px solid rgba(85, 156, 173, 0.16);
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.admin-whatsapp-variable-chip:hover {
    background: rgba(85, 156, 173, 0.08);
    border-color: rgba(85, 156, 173, 0.34);
    transform: translateY(-1px);
}

.admin-whatsapp-textarea-group {
    margin-bottom: 0;
    gap: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.admin-whatsapp-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-whatsapp-delete-btn {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(211, 72, 109, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: #c1406f;
    box-shadow: none;
}

.admin-whatsapp-delete-btn:hover,
.admin-whatsapp-delete-btn:focus-visible {
    background: rgba(255, 240, 244, 0.96);
    border-color: rgba(211, 72, 109, 0.3);
    color: #b33662;
}

.admin-whatsapp-delete-btn.is-hidden {
    display: none;
}

.admin-whatsapp-textarea-group textarea {
    min-height: 144px;
    resize: vertical;
    flex: 1 1 auto;
}

.admin-whatsapp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-whatsapp-counter {
    color: var(--primary);
    font-size: 0.92rem;
}

.admin-whatsapp-actions {
    justify-content: flex-end;
}

.admin-whatsapp-create-modal {
    width: min(920px, calc(100vw - 32px));
}

.admin-whatsapp-create-modal-body {
    padding-top: 0;
}

.admin-whatsapp-create-form-modal {
    margin-top: 0;
}

.admin-whatsapp-create-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.9fr);
    gap: 16px;
    align-items: stretch;
}

.admin-whatsapp-create-modal-main {
    display: grid;
    gap: 12px;
}

.admin-whatsapp-variables-modal {
    height: 100%;
}

@media (max-width: 1180px) {
    .admin-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-management-grid {
        grid-template-columns: 1fr;
    }

    .admin-appearance-card,
    .admin-sequences-card,
    .admin-cashbox-card {
        grid-column: 1 / -1;
    }

    .admin-whatsapp-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-whatsapp-new-btn {
        width: 100%;
    }

    .admin-whatsapp-shell {
        grid-template-columns: 1fr;
    }

    .admin-whatsapp-create-modal-grid {
        grid-template-columns: 1fr;
    }

    .admin-users-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.metric-card {
    min-height: 148px;
    display: grid;
    align-content: space-between;
}

.chart-shell {
    position: relative;
    width: 100%;
    min-height: 320px;
}

.chart-empty-state {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.88);
    border: 1px dashed rgba(190, 220, 230, 0.95);
    color: #6F6A7F;
    text-align: center;
    font-weight: 700;
    line-height: 1.35;
}

.chart-empty-state[hidden] {
    display: none !important;
}

.chart-external-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    min-width: 176px;
    max-width: 280px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(47, 36, 64, 0.94);
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 42, 90, 0.24);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.12s ease;
}

.chart-external-tooltip.is-visible {
    opacity: 1;
}

.chart-external-tooltip-title {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.chart-external-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    line-height: 1.2;
    min-width: 0;
}

.chart-external-tooltip-row + .chart-external-tooltip-row {
    margin-top: 4px;
}

.chart-external-tooltip-separator {
    height: 1px;
    margin: 8px 0 6px;
    background: rgba(255, 255, 255, 0.18);
}

.chart-external-tooltip-row--footer strong {
    color: #dbe8ff;
}

.chart-external-tooltip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chart-external-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 8px;
}

.chart-external-tooltip-row strong {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.donut-chart-shell {
    min-height: 290px;
}

.order-status-chart-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px 18px;
    overflow: hidden;
}

.order-status-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 272px !important;
    pointer-events: auto;
}

.admin-metrics-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.general-summary-grid,
.kpi-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 16px;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.kpi-card-grid--four {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.general-summary-card {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.dashboard-overview-grid > .content-card,
.dashboard-summary-card,
.dashboard-third-party-card,
.dashboard-status-card {
    height: 100%;
    min-height: unset;
}

.dashboard-audit-card,
.dashboard-third-party-card {
    display: flex;
    flex-direction: column;
}

.dashboard-status-card {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1100px) {
    .dashboard-overview-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dashboard-overview-grid > .content-card,
    .dashboard-summary-card,
    .dashboard-third-party-card,
    .dashboard-status-card {
        height: auto;
    }

}

.general-summary-item,
.kpi-card {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(190, 220, 230, 0.9);
    box-shadow: 0 6px 18px rgba(38, 55, 90, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 88px;
    overflow: hidden;
    position: relative;
}

.general-summary-item .info-chip-label,
.general-summary-item strong {
    word-break: normal;
    overflow-wrap: break-word;
}

.general-summary-item .info-chip-label {
    flex: 1 1 auto;
    line-height: 1.25;
    white-space: normal;
    max-width: 100%;
    hyphens: none;
    color: #736278;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.general-summary-item strong {
    flex: 0 0 auto;
    color: var(--color-title);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.third-party-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.third-party-action-area {
    display: flex;
    align-items: center;
    justify-content: stretch;
    margin-top: auto;
}

.kpi-card-action-area {
    grid-column: 1 / -1;
}

.third-party-action-area .btn {
    width: 100%;
}

.kpi-card::before,
.general-summary-item::before,
.kpi-card::after,
.general-summary-item::after {
    content: none !important;
    display: none !important;
}

.metric-label {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-value {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.7rem);
    color: var(--primary);
}

@media (min-width: 1025px) {
    .dashboard-summary-card .kpi-card-grid,
    .dashboard-summary-card .kpi-card-grid--four,
    .dashboard-audit-card .kpi-card-grid,
    .dashboard-audit-card .kpi-card-grid--four,
    .dashboard-third-party-card .kpi-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .dashboard-summary-card .general-summary-item,
    .dashboard-audit-card .general-summary-item,
    .dashboard-third-party-card .general-summary-item {
        min-width: 240px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .general-summary-grid,
    .kpi-card-grid,
    .kpi-card-grid--four,
    .third-party-dashboard-grid,
    .dashboard-audit-grid,
    .summary-operational-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .general-summary-item,
    .kpi-card,
    .summary-operational-kpi {
        min-height: 104px;
    }

    .dashboard-audit-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .delayed-orders-card {
        display: flex;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
        overflow: visible;
    }

    .delayed-orders-content {
        height: auto;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }

    .delayed-orders-actions {
        width: auto;
        justify-content: flex-end;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .delayed-orders-info h3 {
        margin: 8px 0 10px;
        font-size: clamp(20px, 2.8vw, 22px);
        line-height: 1.2;
    }

    .delayed-orders-info p {
        font-size: 14px;
        line-height: 1.35;
    }

    .alert-label {
        font-size: 12px;
        letter-spacing: 0.06em;
    }

    .delayed-orders-count-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        text-align: right;
    }

    .delayed-orders-count {
        font-size: clamp(36px, 5vw, 40px);
    }

    .delayed-orders-count-label {
        font-size: 13px;
        line-height: 1.2;
        color: #736278;
    }

    .delayed-orders-action-desktop {
        display: none !important;
    }

    .delayed-orders-action-mobile-wrap {
        display: block;
        width: 100%;
        margin-top: 16px;
    }

    .delayed-orders-action-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        min-height: 46px;
        border-radius: 18px;
        font-size: 15px;
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    .general-summary-grid,
    .kpi-card-grid,
    .kpi-card-grid--four,
    .dashboard-audit-grid,
    .summary-operational-kpis {
        grid-template-columns: 1fr;
    }

    .third-party-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .general-summary-item,
    .kpi-card,
    .summary-operational-kpi {
        padding: 14px 16px;
        min-height: 96px;
        gap: 12px;
    }

    .general-summary-item strong,
    .summary-operational-kpi strong {
        font-size: clamp(20px, 6vw, 28px);
    }

    .dashboard-audit-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .delayed-orders-content {
        height: auto;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .delayed-orders-actions {
        width: auto;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
    }

    .delayed-orders-count-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        text-align: right;
    }

    .delayed-orders-count-label {
        margin-top: 0;
        color: #736278;
    }

    .delayed-orders-action-desktop {
        display: none !important;
    }

    .delayed-orders-action-mobile-wrap {
        display: block;
        width: 100%;
        margin-top: 14px;
    }

    .delayed-orders-action-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        min-height: 44px;
        border-radius: 16px;
        font-size: 14px;
    }

    .audit-action-desktop {
        display: none !important;
    }

    .audit-action-mobile-wrap {
        display: block !important;
    }

    .audit-action-mobile {
        display: flex;
    }

    .dashboard-header-action-btn,
    a.dashboard-header-action-btn,
    button.dashboard-header-action-btn {
        justify-self: end;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .third-party-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .delayed-orders-content {
        gap: 12px;
    }

    .delayed-orders-count {
        font-size: 34px;
    }

    .delayed-orders-count-label {
        font-size: 12px;
        line-height: 1.2;
    }

    .delayed-orders-info h3 {
        font-size: 19px;
        line-height: 1.2;
    }

    .delayed-orders-info p {
        font-size: 13px;
        line-height: 1.35;
    }

    .delayed-orders-card {
        padding: 16px;
    }

    .delayed-orders-action-mobile-wrap {
        margin-top: 14px;
    }

    .delayed-orders-action-mobile {
        min-height: 44px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .dashboard-audit-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .audit-action-desktop {
        display: none !important;
    }

    .audit-action-mobile-wrap {
        display: block !important;
    }

    .audit-action-mobile {
        display: flex;
    }
}

.section-header {
    /* margin-bottom: var(--component-gap, 0rem); */
}

.dashboard-audit-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.dashboard-audit-header-copy {
    min-width: 0;
}

.audit-action-desktop {
    display: inline-flex;
}

.audit-action-mobile-wrap {
    display: none !important;
    margin-top: 16px;
}

.audit-action-mobile {
    display: none;
    width: 100%;
}

@media (min-width: 1025px) {
    .audit-action-desktop {
        display: inline-flex !important;
    }

    .audit-action-mobile-wrap,
    .audit-action-mobile {
        display: none !important;
    }
}

.tablet-app-mode .dashboard-audit-header {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.tablet-app-mode .audit-action-desktop {
    display: none !important;
}

.tablet-app-mode .audit-action-mobile-wrap {
    display: block !important;
}

.tablet-app-mode .audit-action-mobile {
    display: flex !important;
    width: 100% !important;
}

.dashboard-header-action-btn,
a.dashboard-header-action-btn,
button.dashboard-header-action-btn {
    width: auto !important;
    min-width: 164px;
    min-height: 46px;
    padding: 0 20px;
    justify-self: end;
    justify-content: center !important;
    white-space: nowrap;
}

.section-title {
    margin: 0 0 0.25rem;
    color: var(--color-title);
    font-weight: var(--heading-font-weight, 700);
    font-size: calc(1em * var(--heading-font-size-adjust, 1));
}

.section-subtitle {
    margin: 0;
    line-height: 1.35;
    color: var(--color-text-secondary);
}

.dashboard-subtitle-plain {
    font-style: normal !important;
    font-family: inherit !important;
}

.business-indicators-card *,
.business-indicators-card .card-description,
.business-indicators-card .section-subtitle,
.business-indicators-card small {
    font-style: normal !important;
}

.dashboard-indicators-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.dashboard-indicators-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.dashboard-indicators-card .section-subtitle,
.dashboard-status-card .section-subtitle {
    font-style: normal !important;
    font-family: inherit !important;
}

.dashboard-indicators-card .chart-shell {
    flex: 1;
    min-height: 320px;
}

.dashboard-indicators-card .chart-shell canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.reports-chart-card,
.reports-chart-shell {
    width: 100%;
    min-width: 0;
}

.reports-chart-card {
    overflow: hidden;
}

.reports-chart-shell {
    position: relative;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    overflow: hidden;
}

.reports-chart-shell canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    pointer-events: auto !important;
}

.reports-chart-shell .chart-empty-state {
    pointer-events: none;
}

.card-title {
    margin: 0 0 0.25rem;
    color: var(--primary);
}

.card-subtitle {
    margin: 0;
    line-height: 1.35;
    color: var(--muted);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.section-head-align-start {
    align-items: flex-start;
}

.section-tools {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.table-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.warning-card {
    border-color: rgba(221, 194, 127, 0.6);
    background: linear-gradient(180deg, rgba(255, 248, 232, 0.95) 0%, rgba(255, 252, 244, 0.98) 100%);
}

.delayed-orders-card {
    width: 100%;
    min-width: 0;
    min-height: 150px;
    padding: 24px;
    overflow: hidden;
}

.delayed-orders-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.delayed-orders-info {
    min-width: 0;
    flex: 1;
}

.delayed-orders-info h3 {
    margin: 4px 0 6px;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--primary);
}

.delayed-orders-info p {
    margin: 0;
    opacity: 0.75;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.alert-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secondary);
    letter-spacing: 0.04em;
}

.client-dni-field-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.client-dni-input-shell {
    position: relative;
}

.client-dni-input-shell input {
    padding-right: 44px;
}

.client-dni-input-shell.is-editing input {
    border-color: rgba(74, 91, 168, 0.42);
    box-shadow: 0 0 0 3px rgba(74, 91, 168, 0.08);
}

.client-dni-inline-trigger {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5a67a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.client-dni-inline-trigger:hover,
.client-dni-inline-trigger:focus-visible {
    background: rgba(74, 91, 168, 0.08);
    color: #304a9a;
    outline: none;
}

.client-dni-edit-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(74, 91, 168, 0.08);
    color: #304a9a;
    font-size: 0.72rem;
    font-weight: 700;
}

.client-dni-warning {
    margin-top: 8px;
    color: #8a5207;
    font-size: 0.82rem;
    line-height: 1.3;
}

.client-dni-warning.is-hidden,
.client-dni-edit-state.is-hidden {
    display: none !important;
}

.delayed-orders-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.delayed-orders-count-stack {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
}

.delayed-orders-count {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-title);
}

.delayed-orders-count-label {
    font-size: 13px;
    opacity: 0.7;
}

.delayed-orders-action-mobile-wrap,
.delayed-orders-action-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .delayed-orders-action-desktop {
        display: none !important;
    }

    .delayed-orders-action-mobile-wrap {
        display: block !important;
        width: 100% !important;
        margin-top: 18px !important;
    }

    .delayed-orders-action-mobile {
        display: inline-flex !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (min-width: 1025px) {
    .delayed-orders-action-desktop {
        display: inline-flex !important;
    }

    .delayed-orders-action-mobile-wrap,
    .delayed-orders-action-mobile {
        display: none !important;
    }
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-card-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.general-summary-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 16px;
}

.general-summary-card-actions .dashboard-card-primary-action {
    width: min(100%, 280px);
}

.dashboard-card-primary-action,
.dashboard-card-primary-action.btn-secondary,
a.dashboard-card-primary-action.btn-secondary,
button.dashboard-card-primary-action.btn-secondary {
    width: 100%;
    min-height: 46px;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-button-primary-strong) !important;
}

.dashboard-card-primary-action:hover,
.dashboard-card-primary-action:focus-visible,
.dashboard-card-primary-action.btn-secondary:hover,
.dashboard-card-primary-action.btn-secondary:focus-visible,
a.dashboard-card-primary-action.btn-secondary:hover,
a.dashboard-card-primary-action.btn-secondary:focus-visible,
button.dashboard-card-primary-action.btn-secondary:hover,
button.dashboard-card-primary-action.btn-secondary:focus-visible {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: var(--shadow-button-primary-hover) !important;
}

.dashboard-card-primary-action:active,
.dashboard-card-primary-action.btn-secondary:active,
a.dashboard-card-primary-action.btn-secondary:active,
button.dashboard-card-primary-action.btn-secondary:active {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: var(--shadow-button-primary-active) !important;
}

.content-area,
.page-content {
    display: grid;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    overflow: auto;
    padding-right: 0.2rem;
}

@media (min-width: 1025px) {
    body:not(.tablet-app-mode) .dashboard-main,
    body:not(.tablet-app-mode) .main-content {
        padding: clamp(12px, 1.2vw, 12px);
    }

    body:not(.tablet-app-mode) .dashboard-main::before,
    body:not(.tablet-app-mode) .main-content::before {
        content: none !important;
        display: none !important;
    }

    body:not(.tablet-app-mode) .topbar {
  position: sticky;
    top: 12px;
    z-index: 1200;

    margin: 0 0 34px;
    padding: 20px 24px;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    border-radius: 30px;
    background: var(--color-topbar-bg);
    border: 1px solid var(--color-topbar-border);

    box-shadow:
        0px -110px 10px 60px var(--color-sticky-topbar-mask),
        0px 10px 24px rgba(38, 55, 90, 0.06),
        0px 1px 4px rgba(38, 55, 90, 0.035);

    backdrop-filter: none;
    overflow: visible;
    isolation: auto;
}

    body:not(.tablet-app-mode) .topbar.has-brand-header-background {
    background-color: var(--color-topbar-bg);
    background-image: var(--brand-header-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

    body:not(.tablet-app-mode) .topbar::before {
    content: none !important;
    display: none !important;
}

    body:not(.tablet-app-mode) .topbar > * {
        position: relative;
        z-index: 2;
    }

    body:not(.tablet-app-mode) .flash-messages,
    body:not(.tablet-app-mode) .toast-container,
    body:not(.tablet-app-mode) .alerts-container,
    body:not(.tablet-app-mode) .toast-message,
    body:not(.tablet-app-mode) .flash-message {
        z-index: 2000;
    }

    body:not(.tablet-app-mode) .topbar-copy {
        display: grid;
        gap: 6px;
    }

    body:not(.tablet-app-mode) .topbar-title,
    body:not(.tablet-app-mode) .page-title {
        font-size: clamp(2.1rem, 2.8vw, 3rem);
        line-height: 1.02;
    }

    body:not(.tablet-app-mode) .topbar-subtitle,
    body:not(.tablet-app-mode) .page-subtitle,
    body:not(.tablet-app-mode) .topbar-copy p {
        max-width: 56ch;
        font-size: 0.98rem;
        line-height: 1.45;
    }

    body:not(.tablet-app-mode) .topbar-actions,
    body:not(.tablet-app-mode) .header-actions {
        gap: 14px;
    }

    body:not(.tablet-app-mode) .notification-button {
        width: 44px;
        height: 44px;
        box-shadow: 0 8px 18px rgba(47, 36, 64, 0.08);
    }

    body:not(.tablet-app-mode) .header-main-button .btn,
    body:not(.tablet-app-mode) .header-main-button > a.btn,
    body:not(.tablet-app-mode) .header-main-button > button.btn {
        min-height: 48px;
        padding-inline: 22px;
        border-radius: 16px;
    }

    body:not(.tablet-app-mode) .dashboard-indicators-card {
        min-height: 0;
    }

    body:not(.tablet-app-mode) .dashboard-indicators-card .chart-shell {
        flex: 0 0 auto;
        height: clamp(300px, 34vh, 340px);
        min-height: 300px;
        max-height: 340px;
    }

    body:not(.tablet-app-mode) .dashboard-indicators-card .chart-shell canvas {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        pointer-events: auto !important;
    }

    body:not(.tablet-app-mode) .dashboard-main,
    body:not(.tablet-app-mode) .main-content,
    body:not(.tablet-app-mode) .sidebar-nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(74, 88, 153, 0.32) transparent;
        scrollbar-gutter: stable;
    }

    body:not(.tablet-app-mode) .dashboard-main,
    body:not(.tablet-app-mode) .main-content {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body:not(.tablet-app-mode) .sidebar-nav {
        padding-right: 8px;
    }

    body:not(.tablet-app-mode) .dashboard-main,
    body:not(.tablet-app-mode) .main-content,
    body:not(.tablet-app-mode) .sidebar-nav {
        scrollbar-gutter: stable both-edges;
    }

    body:not(.tablet-app-mode) .content-area,
    body:not(.tablet-app-mode) .page-content {
        overflow: visible;
        padding-right: 0;
    }

    body:not(.tablet-app-mode) .dashboard-main::-webkit-scrollbar,
    body:not(.tablet-app-mode) .main-content::-webkit-scrollbar,
    body:not(.tablet-app-mode) .sidebar-nav::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    body:not(.tablet-app-mode) .dashboard-main::-webkit-scrollbar-track,
    body:not(.tablet-app-mode) .main-content::-webkit-scrollbar-track,
    body:not(.tablet-app-mode) .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    body:not(.tablet-app-mode) .dashboard-main::-webkit-scrollbar-thumb,
    body:not(.tablet-app-mode) .main-content::-webkit-scrollbar-thumb {
        background: rgba(74, 88, 153, 0.28);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    body:not(.tablet-app-mode) .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(74, 88, 153, 0.18);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    body:not(.tablet-app-mode) .dashboard-main::-webkit-scrollbar-thumb:hover,
    body:not(.tablet-app-mode) .main-content::-webkit-scrollbar-thumb:hover {
        background: rgba(74, 88, 153, 0.46);
        background-clip: padding-box;
    }

    body:not(.tablet-app-mode) .sidebar-nav:hover::-webkit-scrollbar-thumb {
        background: rgba(74, 88, 153, 0.32);
        background-clip: padding-box;
    }
}

.card {
    width: 100%;
    min-width: 0;
    background: var(--panel-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--card-padding, 22px);
    box-shadow: var(--shadow);
}

.card-full,
.table-card,
.wide-card {
    grid-column: 1 / -1;
}

.page-section,
.page-grid {
    display: grid;
    width: 100%;
    gap: var(--section-gap, 1.5rem);
    align-items: start;
    min-height: 0;
}

.page-shell,
.report-page-shell,
.dashboard-page-shell,
.third-party-page,
.summary-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.page-shell > *,
.report-page-shell > *,
.dashboard-page-shell > *,
.third-party-page > *,
.summary-page > * {
    min-width: 0;
}

.dashboard-page-shell {
    display: grid;
    width: 100%;
    gap: var(--section-gap, 1.5rem);
    align-items: start;
}

.page-shell .card,
.page-shell .content-card,
.page-shell .table-card,
.page-shell .wide-card,
.page-shell .full-width,
.page-shell .content-card.full-width,
.page-shell .responsive-grid,
.page-shell .admin-grid,
.page-shell .admin-actions-grid,
.page-shell .general-summary-grid,
.page-shell .reports-kpi-grid,
.page-shell .summary-grid,
.page-shell .summary-two-columns,
.page-shell .third-party-metrics-grid {
    min-width: 0;
    box-sizing: border-box;
}

.responsive-grid {
    width: 100%;
    display: grid;
    gap: var(--section-gap, 1.5rem);
    align-items: stretch;
}

.cards-grid,
.dashboard-grid,
.admin-grid,
.admin-actions-grid,
.summary-grid,
.summary-two-columns,
.reports-kpi-grid {
    gap: var(--section-gap, 24px);
}

.responsive-grid.two-cols:not(.admin-sequence-grid):not(.admin-cash-box-grid),
.two-columns {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.responsive-grid.three-cols {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.full-width,
.content-card.full-width {
    width: 100%;
    grid-column: 1 / -1;
}

.compact-card {
    max-width: none;
}

.content-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: var(--card-padding, 24px);
    border-radius: 24px;
    box-sizing: border-box;
    background: var(--panel-surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.content-card.stretch {
    min-height: 100%;
}

.cards-grid,
.dashboard-grid,
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.summary-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.summary-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

.summary-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.total-day-card {
    width: 100%;
}

.total-day-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.total-day-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    width: 100%;
    margin-top: 10px;
}

.reports-tabs {
    display: grid;
    gap: 1.5rem;
}

.reports-tab-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 16px;
}

.reports-tab-button {
    border: 1px solid var(--color-segmented-border, rgba(85, 156, 173, 0.22));
    background: var(--color-segmented-bg, rgba(255, 255, 255, 0.82));
    color: var(--color-segmented-text, var(--primary));
    border-radius: 999px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.reports-tab-button:not(.active):hover {
    border-color: var(--color-segmented-border, rgba(74, 88, 153, 0.28));
    background: var(--color-segmented-hover-bg, rgba(74, 88, 153, 0.08));
    color: var(--color-segmented-text, var(--primary));
}

.reports-tab-button.active,
.reports-tab-button.active:hover,
.reports-tab-button.active:focus-visible {
    background: var(--color-segmented-active-bg, var(--primary));
    color: var(--color-segmented-active-text, var(--white));
    border-color: var(--color-segmented-active-bg, var(--primary));
    box-shadow: none;
/* outline: 2px solid var(--color-segmented-border, rgba(85, 156, 173, 0.22)); */
    outline-offset: 2px;
}

.reports-tab-panel {
    display: none;
    gap: 1.5rem;
}

.reports-tab-panel.is-active {
    display: grid;
}

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.report-page-shell,
.report-main-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.report-page-shell {
    grid-column: 1 / -1;
    gap: 0;
}

.report-main-shell {
    width: 100%;
}

.report-main-shell .reports-tabs,
.report-main-shell .reports-tab-panel,
.report-main-shell .reports-kpi-grid,
.report-main-shell .admin-grid {
    min-width: 0;
}

.report-main-shell .reports-kpi-grid > .card.content-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: flex-end;
    align-items: flex-start;
}

.reports-kpi-grid--clients {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (min-width: 1025px) {
    .report-main-shell {
        padding: 1.5rem;
    }

    .report-main-shell .section-header {
        min-width: 0;
    }

    .report-main-shell .reports-tab-panel {
        gap: 1.25rem;
    }

    .report-main-shell .reports-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        align-items: stretch;
    }

    .report-main-shell .reports-kpi-grid > .card.content-card,
    .report-main-shell .reports-kpi-grid > .kpi-card {
        min-width: 240px;
        min-height: 0;
    }

    .report-main-shell .kpi-money,
    .report-main-shell .kpi-number,
    .report-main-shell .kpi-percent,
    .report-main-shell .metric-value {
        min-width: 0;
        max-width: 100%;
    }
}

.report-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.report-export-button {
    border: 1px solid var(--line);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

table th,
table td,
.history-table th,
.history-table td,
.reports-table th,
.reports-table td,
.orders-table th,
.orders-table td,
.expenses-table th,
.expenses-table td,
.admin-table th,
.admin-table td,
.clients-table th,
.clients-table td {
    text-align: center;
    vertical-align: middle;
}

.clients-table-card .table-card-header {
    display: block;
}

.clients-table-card-header-copy {
    width: 100%;
}

.clients-table-search {
    margin-top: 14px;
    width: 100%;
    max-width: none;
    margin-bottom: 12px;
}

.clients-table-search-input {
    width: 100%;
}

.clients-table-empty-row td {
    padding: 24px 16px;
    color: var(--text-muted);
    font-weight: 600;
}

.report-export-button .quick-link-icon,
.report-export-button .quick-link-title,
.report-export-button .quick-link-text {
    pointer-events: none;
}

.report-alert-card {
    min-width: 0;
}

.operation-stat-header,
.operation-stat-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    flex-direction: column;
}

.operation-stat-header h3,
.operation-stat-header .info-chip-label,
.operation-stat-title {
    margin: 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.75;
}

.operation-stat-header strong,
.operation-stat-description {
    margin-top: 8px;
    margin-bottom: 0;
}

.report-alert-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.card-header-row .btn {
    align-self: center;
    flex-shrink: 0;
}

.filter-inline-row {
    display: flex;
    align-items: end;
    gap: 0.1rem;
    flex-wrap: wrap;
}

.filter-inline-row .form-group {
    flex: 1 1 260px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    padding: 0;
}

.icon-btn i {
    font-size: 14px;
}

.icon-btn:hover {
    transform: translateY(-1px);
}

.service-view-btn {
    border-color: rgba(85, 156, 173, 0.24);
    background: rgba(221, 244, 248, 0.68);
    color: var(--primary);
}

.order-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.edit-btn {
    color: #4A5899;
}

.edit-btn:hover {
    background: var(--color-button-outline-hover-bg);
}

.delete-btn {
    color: #DC2626;
}

.delete-btn:hover {
    background: rgba(220, 38, 38, 0.12);
}

.filter-btn {
    color: #559CAD;
}

.filter-btn:hover {
    background: rgba(85, 156, 173, 0.14);
}

.actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.actions-cell form,
.order-admin-tools form {
    margin: 0;
}

.actions-cell .inline-form {
    margin-left: 0;
}

.status-chip,
.amount-pill,
.pill-chip {
    margin-left: 16px;
    /* margin-right: auto; */
}

.filter-inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-total-highlight {
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(85, 156, 173, 0.2);
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.summary-total-highlight strong {
    color: var(--primary);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.summary-expenses-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.summary-expenses-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: auto;
    margin-bottom: 16px;
}

.summary-expenses-total {
    margin-top: auto;
    margin-bottom: 0;
}

.summary-total-box {
    margin-top: auto;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.summary-total-box span {
    font-weight: 600;
    opacity: 0.75;
}

.summary-total-box strong {
    white-space: nowrap;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}

.summary-page-redesigned {
    gap: 22px;
}

.summary-header-card {
    overflow: hidden;
}

.summary-header-head {
    align-items: center;
}

.summary-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-outline-primary {
    background: #ffffff;
    color: var(--primary);
    border: 1px solid rgba(74, 88, 153, 0.28);
    box-shadow: none;
}

.btn-outline-primary:hover {
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary-dark);
}

.summary-back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.85rem;
    color: var(--secondary);
    font-weight: 700;
    text-decoration: none;
    font-size: 0;
}

.summary-back-link:hover {
    text-decoration: underline;
}

.summary-back-link::before {
    content: "\2190\00a0Regresar a resumen";
    font-size: 0.95rem;
}

.summary-back-link--inline {
    margin-bottom: 0;
    white-space: nowrap;
}

.summary-page > .summary-back-link {
    display: none;
}

.summary-icon-action {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.summary-table-link {
    color: var(--secondary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.summary-table-link:hover {
    text-decoration: underline;
}

.summary-back-button,
.summary-table-button {
    white-space: nowrap;
}

.summary-table-button {
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
    box-shadow: none;
}

.summary-table-button:hover,
.summary-table-button:focus-visible {
    background: var(--primary-dark);
    color: #ffffff;
    border-color: var(--primary-dark);
}

.summary-header-filters {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.summary-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.summary-kpi-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 138px;
}

.summary-kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    font-size: 1.2rem;
}

.summary-kpi-card.entered .summary-kpi-icon {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.summary-kpi-card.delivered .summary-kpi-icon {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.summary-kpi-card.process .summary-kpi-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.summary-kpi-card.pending .summary-kpi-icon {
    background: rgba(218, 68, 160, 0.12);
    color: #c0267c;
}

.summary-kpi-copy {
    display: grid;
    gap: 6px;
}

.summary-kpi-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.summary-kpi-value {
    color: var(--primary);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
}

.summary-kpi-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.summary-ledger-grid {
    grid-template-columns: 1fr;
}

.summary-ledger-grid--two-columns {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.summary-finance-grid {
    align-items: stretch;
}

.summary-block {
    border: 1px solid rgba(85, 156, 173, 0.18);
}

.summary-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.summary-block-title-group {
    display: grid;
    gap: 4px;
}

.summary-link {
    color: var(--secondary);
    font-weight: 700;
    white-space: nowrap;
}

.summary-link-button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.summary-orders-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.summary-orders-modal-search {
    width: 100%;
}

.summary-orders-modal-search-input {
    width: 100%;
}

.summary-orders-modal-table-shell {
    max-height: 56vh;
}

.summary-orders-modal-table th,
.summary-orders-modal-table td {
    text-align: center;
    vertical-align: middle;
}

.summary-method-note {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.summary-expense-note {
    margin: 10px 0 0;
}

.summary-info-tooltip {
    border: 0;
    background: transparent;
    padding: 0;
    margin-left: 6px;
    vertical-align: middle;
}

.summary-info-tooltip i {
    font-size: 0.82rem;
}

.summary-info-tooltip--title {
    margin-left: 8px;
}

.summary-method-note,
.summary-expense-note,
.cash-box-metric small,
.cash-box-movements-header span,
.cash-box-balance-note {
    display: none !important;
}

.summary-orders-block--entered .section-title {
    color: #15803d;
}

.summary-orders-block--delivered .section-title {
    color: #1d4ed8;
}

.summary-ledger-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.summary-ledger-table-wrapper {
    min-height: 0;
}

.summary-ledger-table tbody tr {
    transition: background 0.18s ease;
}

.summary-ledger-table tbody tr:hover {
    background: rgba(74, 88, 153, 0.06);
}

.summary-code-pill,
.summary-method-pill {
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary);
}

.summary-method-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.summary-method-badge.method-cash {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

.summary-method-badge.method-yape {
    background: rgba(139, 92, 246, 0.14);
    color: #6d28d9;
}

.summary-method-badge.method-plin {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.summary-method-badge.method-card {
    background: rgba(31, 41, 55, 0.12);
    color: #111827;
}

.summary-method-badge.method-transferencia {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.summary-method-badge.method-otro,
.summary-method-badge.method-unspecified {
    background: rgba(74, 88, 153, 0.10);
    color: #4a5899;
}

@media (max-width: 1199px) {
    .summary-page .summary-expenses-day-card .summary-expense-row {
        grid-template-columns: 36px minmax(0, 1fr) max-content !important;
    }

    .summary-page .summary-expenses-day-card .mobile-expense-left {
        grid-column: 1 / 3 !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page .summary-expenses-day-card .summary-expense-row-payment {
        grid-column: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-expenses-day-card .summary-expense-row-payment .summary-expense-row-amount {
        grid-column: auto !important;
        justify-self: auto !important;
        align-self: center !important;
    }
}

.summary-rest-amount {
    font-weight: 700;
    white-space: nowrap;
}

.summary-rest-amount.is-pending {
    color: #b42318;
}

.summary-rest-amount.is-settled {
    color: #15803d;
}

.summary-empty-state {
    min-height: 140px;
    border-radius: 18px;
    border: 1px dashed rgba(85, 156, 173, 0.26);
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: var(--muted);
}

.summary-balance-card .total-day-content {
    align-items: center;
}

.summary-total-box--income {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.16);
}

.summary-total-box--income strong {
    color: #166534;
}

.summary-total-box--expense {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.14);
}

.summary-total-box--expense strong {
    color: #b42318;
}

.summary-balance-strip-card {
    display: grid;
    gap: 20px;
}

.cash-box-card {
    display: grid;
    gap: 14px;
}

.cash-box-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.cash-box-badge.is-complete {
    background: #dcfce7;
    color: #166534;
    border-color: #a7f3d0;
}

.cash-box-badge.is-replenishable {
    background: #fef3c7;
    color: #92400e;
    border-color: #f7d58b;
}

.cash-box-badge.is-insufficient {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cash-box-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cash-box-metric {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.92);
    border: 1px solid rgba(180, 207, 221, 0.48);
    display: grid;
    gap: 6px;
}

.cash-box-metric span,
.cash-box-metric small {
    color: var(--muted);
}

.cash-box-metric span {
    font-size: 0.85rem;
    font-weight: 700;
}

.cash-box-metric strong {
    color: var(--primary);
    font-size: 1.45rem;
    line-height: 1;
}

.cash-box-metric small {
    font-size: 0.8rem;
    line-height: 1.35;
}

.cash-box-metric--featured {
    background: rgba(232, 244, 220, 0.8);
    border-color: rgba(126, 183, 89, 0.35);
}

.cash-box-metric--featured strong {
    color: #2f6b1f;
}

.cash-box-metric--result {
    background: rgba(238, 242, 255, 0.88);
    border-color: rgba(126, 147, 240, 0.3);
}

.cash-box-grid > .cash-box-metric:nth-child(1) {
    order: 1;
}

.cash-box-grid > .cash-box-metric:nth-child(2) {
    order: 2;
    background: rgba(236, 244, 255, 0.96);
    border-color: rgba(101, 146, 240, 0.24);
}

.cash-box-grid > .cash-box-metric:nth-child(4) {
    order: 3;
    background: rgba(254, 249, 195, 0.75);
    border-color: rgba(234, 179, 8, 0.24);
}

.cash-box-grid > .cash-box-metric:nth-child(5) {
    order: 4;
    background: rgba(220, 252, 231, 0.9);
    border-color: rgba(34, 197, 94, 0.22);
}

.cash-box-grid > .cash-box-metric:nth-child(5) strong {
    color: #166534;
    font-size: clamp(1.85rem, 2.7vw, 2.45rem);
}

.cash-box-grid > .cash-box-metric:nth-child(3) {
    order: 5;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.92);
}

.cash-box-grid > .cash-box-metric:nth-child(3)::before {
    content: "\f0d6";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2f6b1f;
    background: rgba(220, 252, 231, 0.9);
    border: 1px solid rgba(34, 197, 94, 0.18);
    flex: 0 0 40px;
}

.cash-box-grid > .cash-box-metric:nth-child(3) span {
    font-size: 0.8rem;
}

.cash-box-grid > .cash-box-metric:nth-child(3) strong {
    margin-left: auto;
    font-size: 1.15rem;
}

.cash-box-grid > .cash-box-metric:nth-child(3) small {
    display: none;
}

.cash-box-movements {
    display: grid;
    gap: 10px;
    padding-top: 2px;
    border-top: 1px solid rgba(180, 207, 221, 0.35);
}

.cash-box-movements-header {
    display: grid;
    gap: 4px;
}

.cash-box-movements-header strong {
    color: var(--primary);
}

.cash-box-movements-header span,
.cash-box-empty-copy {
    color: var(--muted);
    font-size: 0.88rem;
}

.cash-box-movements-list {
    display: grid;
    gap: 8px;
}

.cash-box-movement-item {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 255, 0.92);
    border: 1px solid rgba(180, 207, 221, 0.42);
}

.cash-box-movement-item::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #f4b740;
    box-shadow: 0 0 0 4px rgba(244, 183, 64, 0.15);
}

.cash-box-movement-item--reposicion::before,
.cash-box-movement-item--reposicion_efectivo_dia::before,
.cash-box-movement-item--completar_caja_chica::before {
    background: #4a5ba8;
    box-shadow: 0 0 0 4px rgba(74, 91, 168, 0.15);
}

.cash-box-movement-item--ajuste::before {
    background: #64748b;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14);
}

.cash-box-movement-item--salida_operativa::before,
.cash-box-movement-item--pago_tercero_caja_chica::before {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

.cash-box-movement-copy {
    display: grid;
    gap: 2px;
}

.cash-box-movement-copy strong {
    color: var(--primary);
    font-size: 0.95rem;
}

.cash-box-movement-copy span {
    color: var(--muted);
    font-size: 0.82rem;
}

.cash-box-movement-amount {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.cash-box-history-note {
    margin: -4px 0 0;
}

.cash-box-forms-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.cash-box-form {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.72);
    border: 1px solid rgba(180, 207, 221, 0.4);
}

.cash-box-form-header {
    margin-bottom: 6px;
}

.cash-box-form-grid {
    gap: 10px;
}

.cash-box-form-grid .full-width {
    grid-column: 1 / -1;
}

.cash-box-collapsible {
    padding: 0;
    overflow: hidden;
}

.cash-box-collapsible-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.cash-box-collapsible-summary::-webkit-details-marker {
    display: none;
}

.cash-box-collapsible-summary span {
    color: var(--primary);
    font-weight: 700;
}

.cash-box-collapsible-summary small {
    color: var(--muted);
    font-size: 0.82rem;
}

.cash-box-collapsible-summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--secondary);
    transition: transform 0.2s ease;
}

.cash-box-collapsible[open] .cash-box-collapsible-summary::after {
    transform: rotate(180deg);
}

.cash-box-collapsible-body {
    padding: 0 14px 14px;
}

.cash-box-form-grid--compact input,
.cash-box-form-grid--compact select {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cash-box-form-actions .btn {
    min-height: 38px;
    padding: 10px 14px;
}

.summary-balance-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.summary-balance-box {
    min-height: 124px;
    border-radius: 22px;
    padding: 18px 20px;
    display: grid;
    gap: 8px;
    align-content: center;
    border: 1px solid rgba(85, 156, 173, 0.18);
    background: rgba(255, 255, 255, 0.66);
}

.summary-balance-box span {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.summary-balance-box strong {
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    line-height: 1;
    color: var(--primary);
}

.summary-balance-box.income {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.18);
}

.summary-balance-box.income strong {
    color: #166534;
}

.summary-balance-box.expense {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.16);
}

.summary-balance-box.expense strong {
    color: #b42318;
}

.summary-balance-box.final {
    background: rgba(74, 88, 153, 0.1);
    border-color: rgba(74, 88, 153, 0.18);
}

.summary-balance-box.final.positive strong {
    color: #304a9a;
}

.summary-balance-box.final.negative strong {
    color: #b42318;
}

.summary-balance-box.cash-free {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.22);
}

.summary-balance-box.cash-free strong {
    color: #166534;
    font-size: clamp(1.95rem, 3vw, 2.7rem);
}

.summary-balance-operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 1.8rem;
    font-weight: 700;
}

.cash-box-balance-note,
.cash-box-warning-note {
    margin: 0;
}

.cash-box-warning-note {
    color: #b42318;
    font-weight: 700;
}

.summary-legacy-balance-card,
.summary-legacy-cash-card,
.summary-legacy-operational-balance {
    display: none !important;
}

.summary-balance-strip-card--active {
    border: 1px solid rgba(85, 156, 173, 0.18);
}

.summary-balance-strip-card--active .summary-block-header {
    align-items: center;
}

.summary-operational-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(85, 156, 173, 0.18);
}

.summary-operational-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.summary-operational-kpi {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(190, 220, 230, 0.9);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(38, 55, 90, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 88px;
    position: relative;
    overflow: hidden;
}

.summary-operational-kpi span {
    flex: 1 1 auto;
    color: #736278;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.summary-operational-kpi strong {
    flex: 0 0 auto;
    color: #4a5899;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.summary-operational-kpi::before {
    content: none;
}

.summary-operational-kpi.cash-day {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(190, 220, 230, 0.9);
}

.summary-operational-kpi.cash-day strong {
    color: #4a5899;
}

.summary-operational-kpi.cash-current {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(190, 220, 230, 0.9);
}

.summary-operational-kpi.cash-current strong {
    color: #4a5899;
}

.summary-operational-kpi.cash-reserved {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(190, 220, 230, 0.9);
}

.summary-operational-kpi.cash-reserved strong {
    color: #4a5899;
}

.summary-operational-kpi-action {
    margin-top: 0;
}

.summary-operational-kpi.cash-free {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(190, 220, 230, 0.9);
    box-shadow: 0 6px 18px rgba(38, 55, 90, 0.05);
}

.summary-operational-kpi.cash-free strong {
    color: #4a5899;
    font-size: clamp(20px, 2vw, 28px);
}

.summary-operational-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(180, 207, 221, 0.42);
    background: rgba(248, 250, 255, 0.92);
}

.summary-operational-status--complete {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.98) 0%, rgba(220, 252, 231, 0.86) 100%);
    border-color: rgba(34, 197, 94, 0.22);
}

.summary-operational-status--replenishable {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.16);
}

.summary-operational-status--insufficient {
    background: rgba(254, 226, 226, 0.72);
    border-color: rgba(239, 68, 68, 0.18);
}

.summary-operational-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #b42318;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.summary-operational-status-icon i {
    font-size: 1.18rem;
}

.summary-operational-status--complete .summary-operational-status-icon {
    color: #16a34a;
}

.summary-operational-status--replenishable .summary-operational-status-icon {
    color: #b45309;
}

.summary-operational-status--insufficient .summary-operational-status-icon {
    color: #dc2626;
}

.summary-operational-status-copy {
    display: grid;
    gap: 4px;
}

.summary-operational-status-copy strong {
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.15;
}

.summary-operational-status-copy span {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.summary-operational-status-detail {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: right;
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.summary-operational-status-action {
    display: flex;
    justify-content: flex-end;
}

.summary-operational-meta {
    display: none !important;
}

.summary-operational-meta-item {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.cash-box-actions-row {
    display: none !important;
}

.cash-box-actions-row form {
    display: none !important;
}

.summary-operational-status-action .summary-operational-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(74, 91, 168, 0.3);
    color: #304a9a;
    box-shadow: 0 4px 12px rgba(74, 91, 168, 0.06);
    width: auto;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.summary-operational-status-action .summary-operational-cta:hover,
.summary-operational-status-action .summary-operational-cta:focus-visible {
    background: #f3f6ff;
    color: #304a9a;
    border-color: rgba(48, 74, 154, 0.58);
    box-shadow: 0 8px 18px rgba(74, 91, 168, 0.09);
    transform: none;
}

.summary-operational-status-action .summary-operational-cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(74, 91, 168, 0.16),
        0 8px 18px rgba(74, 91, 168, 0.09);
}

.summary-operational-status-action .summary-operational-cta:active {
    background: #edf2ff;
    color: #304a9a;
    border-color: rgba(48, 74, 154, 0.64);
    box-shadow: 0 4px 10px rgba(74, 91, 168, 0.1);
    transform: scale(0.985);
}

.summary-operational-status-action .summary-operational-cta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.92rem;
    color: currentColor;
    background: transparent;
    border: 1px solid transparent;
    line-height: 1;
    flex-shrink: 0;
}

.summary-operational-status-action .summary-operational-cta .fa,
.summary-operational-status-action .summary-operational-cta .fa-solid,
.summary-operational-status-action .summary-operational-cta .btn-icon,
.summary-operational-status-action .summary-operational-cta .button-icon,
.summary-operational-status-action .summary-operational-cta .icon-circle,
.summary-operational-status-action .summary-operational-cta .btn-icon-circle {
    color: currentColor;
    background: transparent;
    box-shadow: none;
    border-color: transparent;
}

.summary-operational-movements {
    gap: 8px;
}

.summary-operational-weekly {
    display: grid;
    gap: 16px;
    padding: 18px 18px 16px;
    border-radius: 24px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: linear-gradient(180deg, rgba(242, 252, 247, 0.98) 0%, rgba(237, 250, 244, 0.94) 100%);
}

.summary-operational-weekly-header {
    margin-bottom: 0;
    align-items: start;
}

.summary-operational-weekly-body {
    display: grid;
    grid-template-columns: minmax(280px, 304px) minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
}

.summary-operational-weekly-days {
    display: grid;
    gap: 8px;
}

.summary-operational-weekly-total {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 180px;
    padding: 24px 24px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 255, 250, 0.96) 100%);
    border: 1px solid rgba(186, 230, 207, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.summary-operational-weekly-total span {
    color: #2f3c6a;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.summary-operational-weekly-total strong {
    color: #166534;
    font-size: clamp(2.6rem, 3.4vw, 3.35rem);
    line-height: 0.98;
}

.summary-operational-weekly-total small {
    color: #6b7280;
    font-size: 0.98rem;
    line-height: 1.38;
}

.summary-operational-weekly-total.negative {
    border-color: rgba(220, 38, 38, 0.14);
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.07);
}

.summary-operational-weekly-total.negative strong {
    color: #b42318;
}

.summary-operational-weekly-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.summary-operational-weekly-item {
    min-height: 116px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 232, 238, 0.92);
    display: grid;
    align-content: space-between;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.summary-operational-weekly-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.summary-operational-weekly-label {
    color: #2f3c6a;
    font-weight: 700;
    font-size: 1rem;
}

.summary-operational-weekly-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
    font-size: 0.68rem;
    font-weight: 700;
}

.summary-operational-weekly-item small {
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.2;
}

.summary-operational-weekly-item strong {
    color: #166534;
    font-size: 1.08rem;
    line-height: 1.05;
}

.summary-operational-weekly-item.is-negative strong {
    color: #b42318;
}

.summary-operational-weekly-item.is-today {
    background: linear-gradient(180deg, rgba(236, 253, 245, 1) 0%, rgba(248, 255, 251, 0.96) 100%);
    border-color: rgba(134, 239, 172, 0.88);
    box-shadow: 0 0 0 2px rgba(187, 247, 208, 0.82);
}

.summary-operational-weekly-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(247, 255, 250, 0.96);
    border: 1px solid rgba(186, 230, 207, 0.82);
}

.summary-operational-weekly-footer span {
    color: #2f3c6a;
    font-size: 0.96rem;
    font-weight: 700;
    text-transform: none;
}

.summary-operational-weekly-footer strong {
    color: #166534;
    font-size: 1.1rem;
}

.summary-operational-weekly-footer.negative {
    border-color: rgba(220, 38, 38, 0.16);
}

.summary-operational-weekly-footer.negative strong {
    color: #b42318;
}

.summary-closing-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(180, 207, 221, 0.35);
}

.summary-closing-actions .btn {
    font-size: 0.98rem;
    background: #4a5ba8;
    color: #ffffff;
    border: 1px solid rgba(74, 91, 168, 0.72);
    box-shadow: 0 8px 18px rgba(74, 91, 168, 0.16);
}

.summary-closing-actions .btn:hover,
.summary-closing-actions .btn:focus-visible {
    background: #3f4f97;
    color: #ffffff;
    border-color: rgba(63, 79, 151, 0.92);
    box-shadow: 0 10px 22px rgba(74, 91, 168, 0.2);
    transform: translateY(-1px);
}

.summary-closing-actions .btn:active {
    background: #374687;
    color: #ffffff;
    border-color: rgba(55, 70, 135, 0.94);
    box-shadow: 0 6px 14px rgba(74, 91, 168, 0.16);
    transform: scale(0.985);
}

.summary-closing-actions .btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(74, 91, 168, 0.18),
        0 10px 22px rgba(74, 91, 168, 0.2);
}

.summary-closing-actions .btn::after {
    content: none;
}

.expense-cash-box-card,
.expense-cash-box-log-card {
    border: 1px solid rgba(85, 156, 173, 0.18);
}

.expense-records-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.expense-records-grid > .table-card,
.expense-records-grid > .expense-dual-card,
.expense-records-grid > .content-card {
    grid-column: auto !important;
    width: 100%;
}

.expense-entry-card,
.expense-cash-box-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.expense-entry-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.expense-entry-form .form-grid {
    flex: 1;
    align-content: start;
}

.expense-entry-actions {
    margin-top: auto;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 12px;
}

.expense-entry-actions .btn {
    align-self: flex-end;
}

.expense-dual-card {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.expense-cash-box-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-width: 150px;
    min-height: 46px;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: #4a5ba8;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(74, 91, 168, 0.72);
    box-shadow: 0 8px 18px rgba(74, 91, 168, 0.16);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.expense-cash-box-card .expense-cash-box-submit:hover,
.expense-cash-box-card .expense-cash-box-submit:focus-visible {
    background: #3f4f97;
    color: #ffffff;
    border-color: rgba(63, 79, 151, 0.92);
    box-shadow: 0 10px 22px rgba(74, 91, 168, 0.2);
    transform: translateY(-1px);
}

.expense-cash-box-card .expense-cash-box-submit:active {
    background: #374687;
    color: #ffffff;
    border-color: rgba(55, 70, 135, 0.94);
    box-shadow: 0 6px 14px rgba(74, 91, 168, 0.16);
    transform: scale(0.985);
}

.expense-cash-box-card .expense-cash-box-submit:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(74, 91, 168, 0.18),
        0 10px 22px rgba(74, 91, 168, 0.2);
}

.expense-cash-box-card .expense-cash-box-submit {
    background: var(--color-button-primary, var(--color-primary));
    color: var(--color-button-primary-color, #fff);
    border-color: var(--color-button-primary, var(--color-primary));
}

.expense-cash-box-card .expense-cash-box-submit:hover {
    background: var(--color-button-primary-hover, var(--color-primary-hover));
    color: var(--color-button-primary-color, #fff);
    border-color: var(--color-button-primary-hover, var(--color-primary-hover));
}

.expense-cash-box-card .expense-cash-box-submit i,
.expense-cash-box-card .expense-cash-box-submit .fa,
.expense-cash-box-card .expense-cash-box-submit .fa-solid {
    color: currentColor;
}

.expense-cash-box-card .expense-cash-box-submit i {
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.expense-cash-box-timeline {
    display: grid;
    gap: 8px;
    flex: 1;
    min-height: 0;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.expense-cash-box-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(180, 207, 221, 0.42);
    background: rgba(255, 255, 255, 0.9);
}

.expense-cash-box-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 255, 0.92);
    border: 1px solid rgba(180, 207, 221, 0.36);
}

.expense-cash-box-icon i {
    font-size: 0.96rem;
}

.expense-cash-box-copy {
    display: grid;
    gap: 2px;
}

.expense-cash-box-copy strong {
    color: var(--primary);
    font-size: 0.94rem;
    line-height: 1.2;
}

.expense-cash-box-copy span,
.expense-cash-box-copy small {
    color: var(--muted);
}

.expense-cash-box-copy span {
    font-size: 0.84rem;
    line-height: 1.3;
}

.expense-cash-box-copy small {
    font-size: 0.78rem;
    line-height: 1.25;
}

.expense-cash-box-amount {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.expense-cash-box-item--reposicion .expense-cash-box-amount,
.expense-cash-box-item--reposicion_efectivo_dia .expense-cash-box-amount,
.expense-cash-box-item--completar_caja_chica .expense-cash-box-amount {
    color: #15803d;
}

.expense-cash-box-item--reposicion .expense-cash-box-icon,
.expense-cash-box-item--reposicion_efectivo_dia .expense-cash-box-icon,
.expense-cash-box-item--completar_caja_chica .expense-cash-box-icon {
    background: rgba(220, 252, 231, 0.9);
    border-color: rgba(34, 197, 94, 0.18);
    color: #15803d;
}

.expense-cash-box-item--vuelto .expense-cash-box-amount,
.expense-cash-box-item--vuelto_caja_chica .expense-cash-box-amount {
    color: #b45309;
}

.expense-cash-box-item--vuelto .expense-cash-box-icon,
.expense-cash-box-item--vuelto_caja_chica .expense-cash-box-icon {
    background: rgba(255, 247, 237, 0.94);
    border-color: rgba(245, 158, 11, 0.2);
    color: #c2410c;
}

.expense-cash-box-item--salida_operativa .expense-cash-box-amount,
.expense-cash-box-item--pago_tercero_caja_chica .expense-cash-box-amount {
    color: #b42318;
}

.expense-cash-box-item--salida_operativa .expense-cash-box-icon,
.expense-cash-box-item--pago_tercero_caja_chica .expense-cash-box-icon {
    background: rgba(254, 242, 242, 0.94);
    border-color: rgba(239, 68, 68, 0.18);
    color: #dc2626;
}

.expense-latest-expenses-card .table-scroll-area {
    display: flex;
    flex: 1;
    min-height: 0;
}

.expense-latest-table-shell {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

.expense-latest-table-shell .data-table {
    height: 100%;
}

.expense-latest-expenses-card .data-table th,
.expense-latest-expenses-card .data-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.expense-latest-expenses-card .data-table td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}

.expense-latest-expenses-card {
    gap: 12px;
    min-height: 0;
}

.expense-latest-legacy-views {
    display: none !important;
}

.expense-latest-list-shell {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 88, 153, 0.24) transparent;
}

.expense-latest-list-shell::-webkit-scrollbar {
    width: 8px;
}

.expense-latest-list-shell::-webkit-scrollbar-track {
    background: transparent;
}

.expense-latest-list-shell::-webkit-scrollbar-thumb {
    background: rgba(74, 88, 153, 0.22);
    border-radius: 999px;
}

.expense-latest-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.expense-latest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(201, 220, 233, 0.95);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(40, 55, 90, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.expense-latest-item:hover {
    transform: translateY(-1px);
    border-color: rgba(164, 194, 230, 0.95);
    box-shadow: 0 14px 26px rgba(40, 55, 90, 0.08);
}

.expense-latest-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.expense-latest-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.expense-latest-icon--detergent {
    color: #3059c8;
    background: #edf3ff;
}

.expense-latest-icon--gas {
    color: #d97706;
    background: #fff4df;
}

.expense-latest-icon--rent {
    color: #7c3aed;
    background: #f3ebff;
}

.expense-latest-icon--third-party {
    color: #0f766e;
    background: #e7fbf7;
}

.expense-latest-icon--light {
    color: #ca8a04;
    background: #fff7db;
}

.expense-latest-icon--default {
    color: #4a5899;
    background: #eef2ff;
}

.expense-latest-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.expense-latest-title {
    font-size: 1rem;
    line-height: 1.25;
    color: #1f2a5a;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.expense-latest-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #736278;
    font-size: 0.9rem;
    line-height: 1.35;
}

.expense-latest-laundry-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #4a5899;
    font-size: 0.82rem;
    font-weight: 700;
}

.expense-latest-item-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.expense-latest-amount {
    color: #4a5899;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.expense-latest-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.expense-latest-actions form {
    margin: 0;
}

.expense-latest-empty-state {
    flex: 1;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #736278;
    border: 1px dashed rgba(196, 214, 231, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    padding: 20px;
}

.expense-modal-legacy-views {
    display: none !important;
}

.expense-modal-list-shell {
    margin-top: 8px;
}

.expense-modal-expense-list {
    gap: 10px;
}

.expense-modal-expense-item {
    padding: 15px 16px;
}

.expenses-history-card {
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.expenses-history-table-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.expenses-history-table {
    width: 100%;
}

.expenses-bottom-grid {
    align-items: stretch;
}

.expenses-bottom-grid .expenses-history-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.expenses-bottom-grid .expenses-history-card .expenses-history-table-wrap,
.expenses-bottom-grid .expenses-history-card .table-scroll-area,
.expenses-bottom-grid .expenses-history-card .table-responsive,
.expenses-bottom-grid .expenses-history-card .expenses-list-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto;
}

.expenses-bottom-grid .expenses-history-card table {
    width: 100%;
}

@media (max-width: 1080px) {
    .expense-latest-item {
        padding: 15px 16px;
    }
}

@media (max-width: 767px) {
    .expense-latest-list-shell {
        padding-right: 4px;
        margin-right: 0;
    }

    .expense-latest-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        border-radius: 20px;
    }

    .expense-latest-item-side {
        width: 100%;
        align-items: flex-start;
        gap: 10px;
    }

    .expense-latest-amount {
        width: 100%;
        text-align: left;
        font-size: 1.45rem;
    }

    .expense-latest-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.summary-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
}

.summary-legend-item {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1080px) {
    .expense-records-grid {
        grid-template-columns: 1fr;
    }

    .cash-box-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cash-box-forms-grid {
        grid-template-columns: 1fr;
    }

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

    .summary-operational-status {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .summary-operational-status-detail {
        justify-items: start;
        text-align: left;
    }

    .summary-operational-status-action {
        justify-content: flex-start;
    }

    .summary-operational-weekly-total {
        justify-items: start;
        text-align: left;
    }

    .summary-operational-weekly-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .summary-operational-weekly-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .summary-operational-weekly-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .expense-records-grid {
        gap: 14px;
    }

    .cash-box-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cash-box-movement-item {
        grid-template-columns: 14px minmax(0, 1fr);
    }

    .cash-box-movement-amount {
        grid-column: 2;
    }

    .cash-box-grid > .cash-box-metric:nth-child(3) {
        grid-column: 1 / -1;
    }

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

    .summary-operational-kpi {
        padding: 14px 16px;
    }

    .summary-operational-kpi.cash-reserved {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .summary-operational-kpi.cash-reserved strong,
    .summary-operational-kpi-action {
        grid-column: 1;
    }

    .summary-operational-kpi-action {
        margin-top: 8px;
    }

    .summary-operational-kpi.cash-free strong {
        font-size: 2.2rem;
    }

    .summary-operational-status {
        padding: 14px;
        gap: 10px;
    }

    .summary-operational-weekly {
        padding: 18px 16px;
    }

    .summary-operational-weekly-body {
        gap: 14px;
    }

    .summary-operational-weekly-total {
        padding: 18px 18px 16px;
    }

    .summary-operational-status-icon {
        width: 40px;
        height: 40px;
    }

    .summary-closing-actions {
        justify-content: stretch;
    }

    .summary-closing-actions > * {
        width: 100%;
    }

    .expense-cash-box-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
    }

    .expense-cash-box-amount {
        grid-column: 2;
    }

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

.daily-total-result {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.daily-total-result strong {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.daily-total-result span {
    font-size: 12px;
    opacity: 0.7;
}

.daily-total-result.positive strong {
    color: #16a34a;
}

.daily-total-result.negative strong {
    color: #dc2626;
}

.closure-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
}

.closure-type-summary {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.closure-type-badge {
    font-weight: 700;
}

.closure-type-badge--manual {
    background: rgba(220, 252, 231, 0.95);
    color: #166534;
}

.closure-type-badge--automatico {
    background: rgba(254, 243, 199, 0.98);
    color: #92400e;
}

.closure-automatic-note {
    margin: 0 0 14px;
    color: #7c5a16;
}

.closure-summary-item {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.closure-summary-item span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: 6px;
}

.closure-summary-item strong {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--primary);
}

.closure-summary-item.total.positive strong {
    color: #16a34a;
}

.closure-summary-item.total.negative strong {
    color: #dc2626;
}

.search-info-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

.search-info-grid--client {
    margin-top: 24px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.client-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 16px 20px;
    width: 100%;
    margin-top: 16px;
}

.client-info-grid .info-item {
    width: 100%;
}

.search-info-grid--order {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

[data-search-order-card] > .section-header:has(+ .search-info-grid--order) {
    margin-bottom: 12px;
}

.section-header-title-stack {
    display: flex;
    align-items: center;
    gap: var(--component-gap, 10px);
    flex-wrap: wrap;
}

.legacy-chip {
    background: #fff2e2;
    color: #9a5a14;
    border: 1px solid #f4d4aa;
}

.header-orden-antigua {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.header-orden-antigua .btn {
    margin-top: 4px;
    flex-shrink: 0;
}

.code-with-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.code-with-chip--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.legacy-order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

[data-search-order-card] .search-order-special-marks {
    display: contents;
}

.legacy-order-card-header .section-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.legacy-order-card-header .legacy-chip,
.legacy-order-card-header .rectification-chip,
.legacy-order-card-header .order-voided-chip,
.legacy-order-card-header .order-regularized-chip,
.legacy-order-card-header .administrative-closure-chip,
.legacy-order-card-header .order-detail-audit-menu {
    flex-shrink: 0;
    align-self: center;
}

.legacy-order-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 999px;
    background: #fff4e5;
    color: #b7791f;
    border: 1px solid #f3d7b6;
    font-size: 11px;
    vertical-align: middle;
    flex-shrink: 0;
}

.legacy-order-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff4e5;
    border: 1px solid #f3d7b6;
    color: #b7791f;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.legacy-order-pill i {
    font-size: 12px;
    opacity: 0.8;
    color: inherit;
}

.order-code-with-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-voided-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ececec;
    border: 1px solid #d5d5d5;
    color: #5f6368;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.order-voided-pill i {
    font-size: 12px;
    color: #6b7280;
    opacity: 0.82;
}

.order-code-special-pill,
.order-code-pill--regularized {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

.order-code-pill--regularized {
    background: #eaf2ff;
    border: 1px solid #bfd4ff;
    color: #3156a3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.order-code-pill--regularized .order-code-pill__text {
    line-height: 1;
}

.order-code-pill--regularized .order-code-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #4f6fb8;
    line-height: 1;
    opacity: 0.82;
}

.order-voided-chip {
    background: #ececec;
    color: #5f6368;
    border: 1px solid #d5d5d5;
}

.order-regularized-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #3156a3;
    border: 1px solid #bfd4ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-chip.order-anulada {
    background: #ececec;
    color: #5f6368;
}

.rectification-chip {
    background: #f1e8ff;
    color: #7b3fc6;
    border: 1px solid #d9c2ff;
}

.administrative-closure-chip,
.administrative-closure-order-pill {
    background: #fff0f2;
    color: #9f283d;
    border: 1px solid #efb7c1;
}

.administrative-closure-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.administrative-closure-order-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
}

.administrative-closure-banner {
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 18px 12px 12px;
    border: 1px solid #efb7c1;
    border-radius: 12px;
    background: #fff5f6;
    color: #782033;
    box-sizing: border-box;
}

.administrative-closure-banner > .pill-chip {
    justify-self: center;
}

[data-search-order-card] .administrative-closure-banner {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 14px;
    margin-top: 8px;
    padding-left: 12px;
}

[data-search-order-card] .administrative-closure-banner > .pill-chip {
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    padding-inline: 8px;
}

.administrative-closure-banner > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.administrative-closure-banner p,
.administrative-closure-banner strong,
.administrative-closure-banner small {
    margin: 0;
}

.administrative-closure-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 8px;
}

.administrative-closure-confirmation input {
    flex: 0 0 auto;
    margin-top: 3px;
}

@media (max-width: 767px) {
    .administrative-closure-banner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }

    .administrative-closure-banner > .pill-chip {
        justify-self: start;
    }

    [data-search-order-card] .administrative-closure-banner {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }
}

.rectification-order-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1e8ff;
    border: 1px solid #d9c2ff;
    color: #7b3fc6;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rectification-order-pill i {
    font-size: 12px;
    opacity: 0.82;
    color: inherit;
}

.rectification-order-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f8f1ff;
    border: 1px solid #ddcbff;
    color: #67527f;
}

.rectification-order-banner--card {
    margin-top: 12px;
    margin-bottom: 0;
}

.rectification-banner-chip {
    flex-shrink: 0;
    background: #ebddff;
    color: #7b3fc6;
    border: 1px solid #d5bbff;
}

.legacy-order-banner,
.banner-orden-antigua {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    background: #fff6e9;
    border: 1px solid #f3d7b6;
    margin-bottom: 20px;
}

.legacy-order-banner .legacy-chip,
.banner-orden-antigua .chip {
    flex-shrink: 0;
    background: #ffe7c7;
    color: #b7791f;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: none;
}

.legacy-order-banner .legacy-text,
.banner-orden-antigua .texto {
    flex: 1;
    text-align: left;
    font-size: 13px;
    color: #7a6a58;
    line-height: 1.4;
}

.legacy-order-actions {
    margin-top: 18px;
}

.legacy-order-form {
    gap: 0;
}

.legacy-order-case-block {
    margin-bottom: 24px;
}

.rectification-page-card {
    display: grid;
    gap: 16px;
}

.rectification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.rectification-header-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.rectification-header-chip {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(122, 99, 214, 0.12);
    color: #6a46c1;
    border: 1px solid rgba(122, 99, 214, 0.22);
    box-shadow: none;
}

.rectification-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(122, 99, 214, 0.12);
    border: 1px solid rgba(122, 99, 214, 0.22);
}

.rectification-banner-text {
    flex: 1;
    color: #7a6a58;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.rectification-banner-chip {
    background: rgba(122, 99, 214, 0.12);
    color: #6a46c1;
    border: 1px solid rgba(122, 99, 214, 0.22);
    box-shadow: none;
    width: fit-content !important;
    min-width: auto !important;
    max-width: fit-content !important;

    padding: 6px 12px !important;

    margin: 0 !important;

    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rectification-form {
    display: grid;
    gap: 22px;
}

.rectification-block {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(85, 156, 173, 0.16);
}

.rectification-inline-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.rectification-client-search {
    position: relative;
    max-width: 760px;
}

.client-search-empty {
    display: grid;
    gap: 10px;
    padding: 14px;
    color: var(--muted);
}

.client-search-empty-action {
    width: fit-content;
    border: 1px solid rgba(74, 88, 153, 0.28);
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
}

.rectification-form-grid,
.rectification-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.rectification-linked-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 16px;
    align-items: end;
    padding-bottom: 2px;
}

.rectification-client-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rectification-client-grid[hidden] {
    display: none !important;
}

#rectification-client-details[hidden] {
    display: none !important;
}

.rectification-preview-box {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 255, 0.85);
    border: 1px solid rgba(180, 207, 221, 0.48);
    width: 100%;
    text-align: center;
}

.rectification-preview-box > * {
    margin-left: auto;
    margin-right: auto;
}

.rectification-original-action-group .btn {
    width: 100%;
}

.rectification-original-action-group .btn.is-disabled-soft {
    opacity: 0.62;
}

.rectification-linked-order-field {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(180, 207, 221, 0.78);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
}

.rectification-linked-order-placeholder {
    color: var(--muted);
    font-size: 14px;
}

.rectification-linked-order-pill {
    max-width: 100%;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: rgba(74, 88, 153, 0.09);
    border: 1px solid rgba(74, 88, 153, 0.18);
    color: var(--primary);
    font-weight: 700;
}

.rectification-linked-order-pill[hidden],
.rectification-linked-order-placeholder[hidden] {
    display: none !important;
}

.rectification-linked-order-pill button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.rectification-linked-order-pill button:hover {
    background: rgba(74, 88, 153, 0.14);
}

.rectification-original-preview {
    min-height: 24px;
}

.rectification-original-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(241, 248, 255, 0.9);
    border: 1px solid rgba(180, 207, 221, 0.58);
    color: var(--primary);
}

.rectification-original-pill--muted {
    color: var(--muted);
    background: rgba(248, 239, 246, 0.48);
}

.rectification-orders-modal-shell {
    max-width: 980px;
}

.rectification-orders-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 440px;
}

.rectification-orders-search {
    position: relative;
    width: 100%;
    display: block;
    flex: 0 0 auto;
}

.rectification-orders-search .filter-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #7f88b3;
    pointer-events: none;
    z-index: 2;
}

.rectification-orders-search input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px 12px 44px;
    border-radius: 14px;
    box-sizing: border-box;
}

.rectification-orders-list {
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
    align-content: start;
}

.rectification-orders-list[hidden] {
    display: none !important;
}

.rectification-orders-empty[hidden] {
    display: none !important;
}

.rectification-orders-results-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rectification-order-card {
    border: 1px solid rgba(190, 220, 230, 0.9);
    border-radius: 18px;
    background: #fff;
    padding: 15px 16px;
    box-shadow: 0 6px 18px rgba(38, 55, 90, 0.05);
}

.rectification-order-card-head,
.rectification-order-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.rectification-order-card-head strong {
    color: var(--primary);
    font-size: 16px;
    line-height: 1.2;
}

.rectification-order-card-copy {
    min-width: 0;
}

.rectification-order-card-meta {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.rectification-order-card-meta span,
.rectification-order-card-body span {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
}

.rectification-order-card-body {
    margin-top: 12px;
    align-items: flex-end;
}

.rectification-order-services {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.rectification-order-services-label {
    color: #736278;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rectification-order-services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rectification-order-service-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(74, 88, 153, 0.08);
    border: 1px solid rgba(74, 88, 153, 0.14);
    color: #4a5899;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 700;
}

.rectification-order-service-chip.is-empty {
    color: var(--muted);
    background: rgba(248, 250, 255, 0.92);
    border-color: rgba(190, 220, 230, 0.9);
}

.rectification-order-select-btn {
    width: auto;
    min-width: 132px;
    justify-content: center;
}

.rectification-orders-empty {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.rectification-orders-empty-state {
    width: min(100%, 560px);
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 28px 24px;
    border-radius: 24px;
    border: 1px solid rgba(190, 220, 230, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.94) 100%);
    box-shadow: 0 16px 34px rgba(74, 88, 153, 0.08);
    text-align: center;
}

.rectification-orders-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary);
    border: 1px solid rgba(85, 156, 173, 0.18);
    font-size: 22px;
}

.rectification-orders-empty-state h4 {
    margin: 0;
    color: var(--primary);
    font-size: 1.16rem;
    line-height: 1.3;
}

.rectification-orders-empty-state p {
    margin: 0;
    max-width: 44ch;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.rectification-orders-empty-hint {
    width: 100%;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(241, 248, 255, 0.92);
    border: 1px solid rgba(190, 220, 230, 0.78);
    color: #5f6f93;
    text-align: left;
}

.rectification-orders-empty-hint i {
    color: var(--primary);
    margin-top: 2px;
}

.rectification-orders-empty-hint span {
    font-size: 13px;
    line-height: 1.5;
}

#rectification-client-orders-modal .modal-header {
    text-align: left;
    align-items: flex-start;
}

#rectification-client-orders-modal .modal-header > div {
    min-width: 0;
    text-align: left;
}

#rectification-client-orders-modal .modal-header h3,
#rectification-client-orders-modal .modal-header p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767px) {
    .rectification-orders-modal-body {
        min-height: 360px;
    }

    .rectification-orders-empty-state {
        width: 100%;
        padding: 24px 18px;
    }
}

.rectification-service-trigger {
    width: 100%;
    border: 1px dashed rgba(85, 156, 173, 0.45);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.rectification-service-trigger:hover {
    border-color: rgba(74, 88, 153, 0.38);
    box-shadow: 0 14px 28px rgba(74, 88, 153, 0.08);
    transform: translateY(-1px);
}

.rectification-service-trigger-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.rectification-service-trigger-copy strong {
    color: var(--primary);
    font-size: 16px;
}

.rectification-service-trigger-copy small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.rectification-service-trigger-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rectification-service-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 38px;
}

.rectification-service-empty {
    color: var(--muted);
    font-size: 13px;
}

.rectification-service-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(248, 250, 255, 0.92);
    border: 1px solid rgba(194, 204, 232, 0.42);
}

.rectification-service-chip strong {
    color: var(--primary);
    font-size: 14px;
}

.rectification-finance-copy {
    margin: 0;
}

.rectification-services-modal-shell {
    width: min(900px, 94vw);
    height: auto !important;
    max-height: min(88vh, 820px) !important;
}

.rectification-services-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    overflow-x: hidden;
}

.rectification-service-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rectification-service-option-card {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 247, 251, 0.98) 100%);
    border: 1px solid rgba(85, 156, 173, 0.16);
    box-shadow: 0 10px 20px rgba(74, 88, 153, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}

.rectification-service-option-card:hover {
    border-color: var(--color-button-outline-border);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.rectification-service-option-card.is-active {
    border-color: var(--color-button-outline-border);
    background: color-mix(in srgb, var(--color-surface) 76%, white 24%);
    box-shadow: var(--shadow-soft);
}

.rectification-service-option-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

.rectification-service-option-check {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(85, 156, 173, 0.22);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.rectification-service-option-card.is-active .rectification-service-option-check {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.rectification-service-option-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: var(--color-button-outline-hover-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.rectification-service-option-card.is-active .rectification-service-option-icon {
    background: var(--color-button-outline-hover-bg);
    color: var(--primary);
}

.rectification-service-option-copy {
    display: grid;
    gap: 4px;
}

.rectification-service-option-copy strong {
    color: var(--primary);
    font-size: 15px;
}

.rectification-service-option-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.rectification-service-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 36px;
}

.rectification-service-option-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(74, 88, 153, 0.08);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.rectification-service-modal-actions {
    justify-content: flex-end;
}

.legacy-resolution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.legacy-resolution-card {
    border: 1px solid rgba(85, 156, 173, 0.18);
    background: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.legacy-resolution-card:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 58, 153, 0.28);
    box-shadow: 0 12px 24px rgba(79, 91, 170, 0.08);
}

.legacy-resolution-card.is-active {
    background: rgba(255, 240, 248, 0.85);
    border-color: rgba(214, 58, 153, 0.42);
    box-shadow: 0 16px 28px rgba(214, 58, 153, 0.12);
}

.legacy-resolution-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 91, 170, 0.08);
    color: var(--primary);
    flex-shrink: 0;
    font-size: 1rem;
}

.legacy-resolution-card.is-active .legacy-resolution-icon {
    background: rgba(214, 58, 153, 0.14);
    color: var(--accent);
}

.legacy-resolution-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legacy-resolution-copy strong {
    color: var(--primary);
    font-size: 1rem;
}

.legacy-resolution-copy small {
    color: var(--muted);
    line-height: 1.45;
    font-size: 0.92rem;
}

.legacy-order-grid {
    margin-top: 8px;
}

.legacy-order-summary-card {
    margin-top: 24px;
    padding: 20px 22px;
    border-radius: 20px;
    background: rgba(79, 91, 170, 0.06);
    border: 1px solid rgba(85, 156, 173, 0.18);
}

.legacy-order-summary-card h4 {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 1rem;
}

.legacy-order-summary-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.legacy-service-trigger {
    width: 100%;
    border: 1px dashed rgba(85, 156, 173, 0.34);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.legacy-service-trigger:hover {
    border-color: rgba(214, 58, 153, 0.34);
    background: rgba(255, 248, 252, 0.88);
    box-shadow: 0 10px 22px rgba(79, 91, 170, 0.08);
}

.legacy-service-trigger-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legacy-service-trigger-copy strong {
    color: var(--primary);
}

.legacy-service-trigger-copy small {
    color: var(--muted);
    line-height: 1.4;
}

.legacy-service-trigger-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(79, 91, 170, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.legacy-service-summary-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.legacy-service-summary-empty {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(245, 247, 252, 0.75);
    color: var(--muted);
    border: 1px solid rgba(85, 156, 173, 0.12);
}

.legacy-service-summary-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(85, 156, 173, 0.16);
}

.legacy-service-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legacy-service-summary-copy strong {
    color: var(--primary);
}

.legacy-service-summary-copy span {
    color: var(--muted);
    font-size: 0.92rem;
}

.legacy-order-form [readonly],
.legacy-order-form input:disabled,
.legacy-order-form select:disabled {
    background: rgba(245, 247, 252, 0.92);
    color: var(--muted);
}

.legacy-service-selector-modal {
    width: min(900px, 94vw);
    height: auto !important;
    max-height: min(88vh, 820px) !important;
}

.legacy-service-selector-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    overflow-x: hidden;
}

.legacy-service-selector-head {
    margin-bottom: 0;
}

.legacy-service-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.legacy-service-select-card {
    width: 100%;
    border: 1px solid rgba(85, 156, 173, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 247, 251, 0.98) 100%);
    box-shadow: 0 10px 20px rgba(74, 88, 153, 0.06);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.legacy-service-select-card:hover {
    border-color: var(--color-button-outline-border);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.legacy-service-select-card.is-active {
    border-color: var(--color-button-outline-border);
    background: color-mix(in srgb, var(--color-surface) 76%, white 24%);
    box-shadow: var(--shadow-soft);
}

.legacy-service-select-card-check {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(85, 156, 173, 0.22);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.legacy-service-select-card.is-active .legacy-service-select-card-check {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.legacy-service-selector-actions {
    justify-content: flex-end;
}

.info-item {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-item span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.info-item strong {
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pill-chip,
.status-chip,
.amount-pill,
.loyalty-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-chip.order-pendiente {
    background: #fef3c7;
    color: #7c2d12;
}

.status-chip.order-listo {
    background: #ddf4f8;
    color: #164e63;
}

.status-chip.order-entregado {
    background: #e7e9f8;
    color: #2e3a8c;
}

.status-chip.payment-pendiente {
    background: #fef3c7;
    color: #7c2d12;
}

.status-chip.payment-cancelado {
    background: #dcfce7;
    color: #14532d;
}

.status-chip.pendiente {
    background: #fef3c7;
    color: #7c2d12;
}

.status-chip.cancelado {
    background: #dcfce7;
    color: #14532d;
}

.status-chip.listo {
    background: #ddf4f8;
    color: #164e63;
}

.status-chip.entregado {
    background: #e7e9f8;
    color: #2e3a8c;
}

.status-chip.third-party-pendiente {
    background: #fef3c7;
    color: #7c2d12;
}

.status-chip.third-party-pending-alert {
    background: #fee2e2;
    color: #991b1b;
}

.status-chip.third-party-entregado {
    background: #ddf4f8;
    color: #164e63;
}

.status-chip.third-party-pagado {
    background: #dcfce7;
    color: #14532d;
}

.payment-alert {
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.pending-payment {
    background: #fff7e6;
    color: #92400e;
    border: 1px solid #fad7a0;
    border-radius: 14px;
    padding: 10px 12px;
}

.paid-payment {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 10px 12px;
}

.payment-alert strong,
.table-payment-status {
    font-weight: 700;
}

.payment-alert span,
.payment-alert strong {
    color: inherit;
}

.payment-alert .status-chip {
    margin-top: auto;
    align-self: flex-start;
}

.payment-alert .pill-chip,
.payment-alert .amount-pill {
    margin-left: 0;
    margin-right: auto;
}

.payment-summary-chip {
    font-size: 11px;
    font-weight: 700;
}

.order-detail-actions {
    margin-top: 24px;
}

.order-detail-actions .btn-mark-ready-soft,
.order-detail-actions .whatsapp-quick-trigger,
.order-detail-actions .btn-secondary,
.order-detail-actions .btn[type="submit"] {
    min-height: 46px;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.delayed-orders-modal .history-table {
    min-width: 1080px;
}

.delayed-orders-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.delayed-orders-table-shell,
.orders-total-table-shell {
    flex: 1;
    min-height: 0;
}

.orders-modal-standard {
    width: min(1280px, 94vw);
    height: auto;
    display: block;
    max-height: 88vh;
}

.orders-modal-standard .modal-body {
    display: block;
    height: auto;
    flex: unset;
    min-height: 0;
    padding-bottom: 0;
}

.orders-modal-standard .table-scroll-area {
    max-height: 67.3vh;
    overflow-x: auto;
    overflow-y: auto;
    height: auto;
    min-height: 0;
}

.orders-modal-standard table {
    margin-bottom: 0;
}

.orders-modal-standard .delayed-orders-modal-body {
    display: block;
    flex: unset;
}

.orders-modal-standard .delayed-orders-table-shell {
    flex: unset;
}

#otherPendingOrdersModal .modal-dialog.modal-content.delayed-orders-modal.orders-modal-standard {
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#otherPendingOrdersModal .delayed-orders-modal-body {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

#otherPendingOrdersModal .history-filters {
    flex: 0 0 auto;
}

#otherPendingOrdersModal .pending-other-filters {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr auto;
    gap: 14px 16px;
    align-items: end;
}

#otherPendingOrdersModal .pending-other-filters .history-filter-group {
    min-width: 0;
}

#otherPendingOrdersModal .pending-other-filter-search input {
    width: 100%;
}

#otherPendingOrdersModal .pending-other-filter-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#otherPendingOrdersModal .pending-other-filter-actions .btn {
    width: auto;
    min-width: 180px;
    white-space: nowrap;
}

#otherPendingOrdersModal .pending-other-filters--no-laundry {
    grid-template-columns: 1.6fr 1fr 1fr auto;
}

#otherPendingOrdersModal .delayed-orders-table-shell {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    overflow-x: auto;
    overflow-y: auto;
}

#otherPendingOrdersModal .table-wrapper {
    width: 100%;
}

#allOrdersModal .modal-dialog.modal-content.modal-orders-wide {
    width: 95vw !important;
    max-width: 1400px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#allOrdersModal .modal-header {
    padding-inline: 1.75rem 4.5rem;
}

#allOrdersModal .modal-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px;
    overflow: hidden !important;
    overflow-x: hidden !important;
    padding-top: 16px !important;
    padding-inline: 1.75rem;
}

#allOrdersModal .orders-total-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 16px;
    flex: 0 0 auto;
    align-items: end;
    padding: 2px 0 4px;
    grid-auto-flow: row;
}

#allOrdersModal .orders-total-filters .history-filter-group,
#allOrdersModal .orders-total-filters .orders-filter-actions {
    min-width: 0;
}

#allOrdersModal .orders-filter-search {
    grid-column: span 2;
}

#allOrdersModal .orders-filter-search > label {
    padding-top: 0 !important;
}

#allOrdersModal .orders-filter-date {
    grid-column: span 1;
}

#allOrdersModal .orders-filter-sort {
    grid-column: span 1;
}

#allOrdersModal .orders-filter-status {
    grid-column: span 1;
}

#allOrdersModal .orders-filter-payment,
#allOrdersModal .orders-filter-laundry {
    grid-column: span 2;
}

#allOrdersModal .orders-filter-actions {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    align-self: end;
}

#allOrdersModal .orders-filter-actions .btn {
    width: 100%;
    min-width: 210px;
    margin-left: auto;
}

#allOrdersModal .orders-total-filters--no-laundry .orders-filter-payment {
    grid-column: span 2;
}

#allOrdersModal .orders-total-filters--no-laundry .orders-filter-actions {
    grid-column: span 1;
    justify-content: flex-start;
}

#allOrdersModal .orders-total-filters--no-laundry {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#allOrdersModal .orders-total-filters--no-laundry .orders-filter-search {
    grid-column: 1 / span 2;
}

#allOrdersModal .orders-total-filters--no-laundry .orders-filter-date {
    grid-column: span 1;
}

#allOrdersModal .orders-total-filters--no-laundry .orders-filter-sort,
#allOrdersModal .orders-total-filters--no-laundry .orders-filter-status,
#allOrdersModal .orders-total-filters--no-laundry .orders-filter-payment,
#allOrdersModal .orders-total-filters--no-laundry .orders-filter-actions {
    grid-column: span 1;
}

#allOrdersModal .orders-filter-void-status {
    display: none !important;
}

#allOrdersModal .orders-total-filters--no-laundry .orders-filter-actions .btn {
    width: 100%;
    min-width: 0;
    margin-left: 0;
}

#allOrdersModal .orders-total-filters label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(67, 79, 137, 0.82);
}

#allOrdersModal .orders-total-filters input,
#allOrdersModal .orders-total-filters select {
    min-height: 48px;
}

#allOrdersModal .table-container,
#allOrdersModal .orders-total-table-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 55vh;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

#allOrdersModal .table-wrapper {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

#allOrdersModal table {
    width: 100%;
    min-width: 1200px;
}

#allOrdersModal .history-empty-state {
    flex: 0 0 auto;
}

.table-payment-status {
    display: inline-flex;
    align-items: center;
    border-radius: 14px;
    white-space: nowrap;
}

.history-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: 14px 12px;
    vertical-align: middle;
    text-align: center;
    line-height: 1.35;
}

.history-table th {
    font-weight: 700;
}

.history-table td {
    overflow-wrap: break-word;
}

.history-table .status-cell,
.history-table .amount-cell,
.history-table .action-cell {
    white-space: nowrap;
    overflow: visible;
}

.order-actions-menu {
    position: relative;
    display: inline-flex;
}

.order-actions-trigger {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid #d8e7ef;
    background: #ffffff;
    color: #44539a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.order-actions-trigger:hover {
    background: #f7f5ff;
    border-color: #c8c1f0;
}

.order-actions-dropdown {
    position: fixed;
    width: 210px;
    max-height: min(320px, calc(100vh - 32px));
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(55, 48, 90, 0.16);
    padding: 8px;
    z-index: 9999;
}

.order-actions-dropdown.order-actions-dropdown--up {
    transform-origin: bottom right;
}

.order-actions-dropdown[hidden] {
    display: none;
}

.order-actions-item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #33427f;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.order-actions-item:hover {
    background: #f7f5ff;
}

.order-actions-divider {
    height: 1px;
    margin: 6px 4px;
    background: rgba(148, 163, 184, 0.24);
}

.order-row-voided {
    opacity: 1;
}

.orders-void-filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.orders-void-filter-btn {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.88);
    color: #4b5563;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.orders-void-filter-btn.is-active {
    background: rgba(74, 88, 153, 0.12);
    border-color: rgba(74, 88, 153, 0.32);
    color: #2e3a8c;
    box-shadow: 0 10px 18px rgba(74, 88, 153, 0.12);
}

.order-actions-item i {
    width: 16px;
    text-align: center;
    color: #5563a8;
}

.order-actions-dropdown .whatsapp-quick-trigger,
.order-actions-dropdown .whatsapp-quick-trigger:hover,
.order-actions-dropdown .whatsapp-quick-trigger:focus-visible,
.order-actions-dropdown .whatsapp-quick-trigger:active {
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 10px 12px;
    justify-content: flex-start;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #33427f;
    box-shadow: none;
    transform: none;
}

.order-actions-dropdown .whatsapp-quick-trigger:hover,
.order-actions-dropdown .whatsapp-quick-trigger:focus-visible {
    background: rgba(37, 211, 102, 0.10);
    color: #12733c;
    outline: none;
}

.order-actions-dropdown .whatsapp-quick-trigger i {
    width: 16px;
    text-align: center;
    color: #5563a8;
}

.order-actions-dropdown .whatsapp-quick-trigger:hover i,
.order-actions-dropdown .whatsapp-quick-trigger:focus-visible i {
    color: #159447;
}

.order-actions-dropdown form {
    margin: 0;
}

.order-actions-item-danger {
    color: #b8426d;
}

.order-actions-item-danger i {
    color: #b8426d;
}

.order-actions-item-danger:hover {
    background: rgba(184, 66, 109, 0.08);
}

.history-table .status-cell .status-chip,
.history-table .amount-cell .amount-pill {
    vertical-align: middle;
}

.amount-pill {
    min-width: 78px;
    font-size: 13px;
}

.amount-pill.pending {
    background: #fef3c7;
    color: #7c2d12;
}

.amount-pill.paid {
    background: #dcfce7;
    color: #14532d;
}

.history-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    align-items: end;
}

.modal-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
    grid-auto-flow: column;
}

.modal-filters-grid .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-filters-grid label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
}

.filter-actions {
    display: flex;
    align-items: end;
}

.filter-actions .btn {
    height: 48px;
    width: 100%;
}

.search-history-modal-body {
    padding-bottom: 20px;
}

.search-history-modal-content .history-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 18px;
    margin-bottom: 20px;
    grid-auto-flow: row;
}

.search-history-modal-content .search-history-filter,
.search-history-modal-content .search-history-filter-search {
    min-width: 0;
}

.search-history-modal-content .search-history-filter-actions {
    width: 100%;
    justify-content: flex-end;
    align-items: end;
}

.search-history-modal-content .search-history-filter-actions .btn,
.client-orders-history-modal .history-filter-clear,
.client-orders-history-modal [data-history-clear] {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    height: 50px;
    align-self: end;
}

.search-history-table-wrapper {
    overflow-x: auto;
}

.search-history-table-wrapper .history-table {
    table-layout: auto;
    min-width: 1280px;
}

.search-history-table-wrapper .history-table th,
.search-history-table-wrapper .history-table td {
    padding: 14px 14px;
}

.search-history-table-wrapper .history-table th:nth-child(2),
.search-history-table-wrapper .history-table td:nth-child(2),
.search-history-table-wrapper .history-table th:nth-child(5),
.search-history-table-wrapper .history-table td:nth-child(5),
.search-history-table-wrapper .history-table th:nth-child(6),
.search-history-table-wrapper .history-table td:nth-child(6),
.search-history-table-wrapper .history-table th:nth-child(7),
.search-history-table-wrapper .history-table td:nth-child(7),
.search-history-table-wrapper .history-table th:nth-child(8),
.search-history-table-wrapper .history-table td:nth-child(8) {
    white-space: nowrap;
}

.search-history-table-wrapper .history-table th:nth-child(2),
.search-history-table-wrapper .history-table td:nth-child(2) {
    min-width: 180px;
}

.search-history-table-wrapper .history-table th:nth-child(5),
.search-history-table-wrapper .history-table td:nth-child(5),
.search-history-table-wrapper .history-table th:nth-child(6),
.search-history-table-wrapper .history-table td:nth-child(6) {
    min-width: 150px;
}

.search-history-table-wrapper .history-table th:nth-child(7),
.search-history-table-wrapper .history-table td:nth-child(7),
.search-history-table-wrapper .history-table th:nth-child(8),
.search-history-table-wrapper .history-table td:nth-child(8) {
    min-width: 150px;
}

.search-history-table-wrapper .history-table th:nth-child(9),
.search-history-table-wrapper .history-table td:nth-child(9) {
    min-width: 120px;
}

.dashboard-delayed-filters {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
}

.dashboard-delayed-filter-search {
    grid-column: 1 / span 6;
}

.dashboard-delayed-filter-laundry {
    grid-column: 7 / span 4;
}

.dashboard-delayed-filter-start {
    grid-column: 1 / span 3;
}

.dashboard-delayed-filter-end {
    grid-column: 4 / span 3;
}

.dashboard-delayed-filter-sort {
    grid-column: 7 / span 2;
    min-width: 0;
}

.dashboard-delayed-filter-actions {
    grid-column: 9 / span 2;
    display: flex;
    align-items: end;
}

.dashboard-delayed-filter-actions .btn {
    width: 100%;
    min-width: 0;
}

.dashboard-delayed-filter-sort select {
    min-width: 0;
    width: 100%;
    padding-right: 2.5rem;
}

.dashboard-delayed-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.4rem;
    border-radius: 16px;
    border: 1px solid var(--primary-dark);
    background: var(--primary-dark);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 16px 32px rgba(71, 86, 158, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.dashboard-delayed-detail-btn:hover,
.dashboard-delayed-detail-btn:focus-visible {
    background: #43509a;
    border-color: #43509a;
    color: #fff;
    box-shadow: 0 18px 34px rgba(67, 80, 154, 0.22);
    transform: translateY(-1px);
}

.dashboard-delayed-detail-btn:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(67, 80, 154, 0.18);
}

@media (min-width: 1025px) {
    #reportDelayedOrdersModal .orders-card-list,
    #reportDelayedOrdersModal .pending-orders-mobile-results {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    #reportDelayedOrdersModal .modal-dialog.modal-content.delayed-orders-modal.orders-modal-standard {
        width: min(980px, 94vw) !important;
        max-width: min(980px, 94vw) !important;
        max-height: calc(100vh - 36px) !important;
        border-radius: 24px !important;
    }

    #reportDelayedOrdersModal .modal-header {
        position: relative;
        min-height: 68px !important;
        padding: 16px 20px !important;
        justify-content: center !important;
    }

    #reportDelayedOrdersModal .modal-header h3 {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: 22px !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        color: #304A9A !important;
    }

    #reportDelayedOrdersModal .modal-close-btn {
        position: absolute;
        top: 13px;
        right: 16px;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    #reportDelayedOrdersModal .delayed-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 16px 18px 20px !important;
        display: block !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filters {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 16px !important;
        align-items: end;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-search { order: 1; }
    #reportDelayedOrdersModal .dashboard-delayed-filter-laundry { order: 2; }
    #reportDelayedOrdersModal .dashboard-delayed-filter-sort { order: 3; }
    #reportDelayedOrdersModal .dashboard-delayed-filter-start { order: 4; }
    #reportDelayedOrdersModal .dashboard-delayed-filter-end { order: 5; }
    #reportDelayedOrdersModal .dashboard-delayed-filter-actions { order: 6; }

    #reportDelayedOrdersModal label {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 700;
        color: #8B82A0;
    }

    #reportDelayedOrdersModal input,
    #reportDelayedOrdersModal select {
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
        font-size: 14px;
        padding: 10px 12px;
        box-sizing: border-box;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-actions .btn {
        width: 100%;
        min-height: 46px;
    }

    #reportDelayedOrdersModal .orders-table-desktop,
    #reportDelayedOrdersModal table,
    #reportDelayedOrdersModal .history-table,
    #reportDelayedOrdersModal .delayed-orders-table-shell {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
    }

    #reportDelayedOrdersModal .pending-orders-mobile-results {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
        overflow: visible !important;
    }

    #reportDelayedOrdersModal .pending-orders-mobile-results[style] {
        display: flex !important;
    }

    #reportDelayedOrdersModal .history-empty-state {
        margin-top: 6px;
    }
}

@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-delayed-filters {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #reportDelayedOrdersModal .modal-dialog.modal-content.delayed-orders-modal.orders-modal-standard {
        width: min(96vw, 640px) !important;
        max-width: min(96vw, 640px) !important;
    }
}

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

.history-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-filter-group label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
}

.history-empty-state {
    display: none;
    padding: 18px;
    text-align: center;
    opacity: 0.7;
}

.orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.orders-header-left {
    max-width: 60%;
}

.orders-header-right {
    display: flex;
    align-items: center;
}

.orders-inline-filters,
.orders-inline-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.orders-quick-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.orders-quick-toggle-btn {
    min-height: 42px;
    padding: 0.68rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(191, 214, 238, 0.95);
    background: #ffffff;
    color: #4a5899;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.orders-quick-toggle-btn:hover,
.orders-quick-toggle-btn:focus-visible {
    background: rgba(237, 242, 255, 0.92);
    border-color: rgba(109, 136, 220, 0.85);
    color: #3f4f98;
    box-shadow: 0 10px 22px rgba(74, 88, 153, 0.14);
}

.orders-quick-toggle-btn.is-active {
    background: #fff5cf;
    border-color: rgba(244, 213, 105, 0.9);
    color: #9a6700;
    box-shadow: 0 10px 22px rgba(194, 153, 44, 0.16);
}

.orders-quick-toggle-count {
    min-width: 24px;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.orders-quick-toggle-btn:not(.is-active) .orders-quick-toggle-count {
    background: rgba(233, 240, 255, 0.92);
    color: #4a5899;
}

.orders-pending-today-empty-state {
    margin-top: 16px;
}

.orders-total-filters {
    margin-bottom: 16px;
}

.filter-group-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group-inline label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
}

.filter-group-inline select {
    min-width: 150px;
}

.orders-filters-bar,
.orders-filters-center {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    margin: 12px 0 18px;
    flex-wrap: wrap;
}

.third-party-filters-grid {
    margin-bottom: 18px;
}

.third-parties-table .actions-cell {
    flex-wrap: wrap;
}

.third-party-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.third-party-form-card,
.third-party-list-card {
    width: 100%;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(180, 207, 221, 0.55);
    box-shadow: 0 18px 40px rgba(74, 88, 153, 0.08);
}

.third-party-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 18px 20px;
    align-items: end;
    width: 100%;
}

.third-party-form-grid .full-width {
    grid-column: 1 / -1;
}

.third-party-form-actions {
    margin-top: 0;
}

.third-party-metrics-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    align-items: stretch;
}

.third-party-metrics-grid > .metric-card {
    grid-column: span 3;
}

.third-party-metrics-grid > .metric-card:nth-child(5) {
    grid-column: 2 / span 3;
}

.third-party-metrics-grid > .metric-card:nth-child(6) {
    grid-column: 5 / span 3;
}

.third-party-metrics-grid > .metric-card:nth-child(7) {
    grid-column: 8 / span 3;
}

.metric-card {
    min-height: 120px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(180, 207, 221, 0.55);
    box-shadow: 0 18px 40px rgba(74, 88, 153, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}

.metric-card span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.metric-card strong {
    font-size: 28px;
    font-weight: 700;
    color: #4A5899;
    line-height: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.metric-card.metric-card-primary {
    background: rgba(231, 233, 248, 0.72);
    border-color: rgba(74, 88, 153, 0.18);
}

.metric-card.metric-card-primary strong {
    color: #4A5899;
}

.metric-card.metric-card-warning {
    background: rgba(254, 243, 199, 0.72);
    border-color: rgba(245, 158, 11, 0.22);
}

.metric-card.metric-card-warning strong {
    color: #92400e;
}

.metric-card.metric-card-danger {
    background: rgba(254, 226, 226, 0.72);
    border-color: rgba(220, 38, 38, 0.18);
}

.metric-card.metric-card-danger strong {
    color: #b91c1c;
}

.third-party-alert-action {
    color: #991b1b;
    background: rgba(254, 226, 226, 0.72);
}

.third-party-alert-action:hover {
    background: rgba(254, 202, 202, 0.88);
}

.metric-card.metric-card-success {
    background: rgba(220, 252, 231, 0.72);
    border-color: rgba(22, 163, 74, 0.18);
}

.metric-card.metric-card-success strong {
    color: #166534;
}

.third-party-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
    margin-top: 16px;
}

.orders-filter-group,
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.orders-filters-bar label,
.orders-filters-center label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
}

.orders-filters-bar select,
.orders-filters-bar .form-select,
.orders-filters-center select {
    min-width: 180px;
    max-width: 200px;
}

.orders-filters-bar .btn,
.orders-filters-center .filter-btn {
    height: 42px;
    padding: 0 20px;
    min-width: auto;
}

.loyalty-chip.nuevo {
    background: #e8f0ff;
    color: #3152a0;
}

.loyalty-chip.ocasional {
    background: #f2e8fb;
    color: #7a3fa0;
}

.loyalty-chip.mensual {
    background: #ddf4f8;
    color: #22606d;
}

.loyalty-chip.habitual {
    background: #e7f8ee;
    color: #1f6a43;
}

.loyalty-chip.frecuente {
    background: #fff4d8;
    color: #92400e;
}

.loyalty-chip.inactivo {
    background: #eef1f5;
    color: #5b6472;
}

.loyalty-chip.sin-pedidos {
    background: #f3f4f6;
    color: #6b7280;
}

.closure-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.kpi-card {
    overflow: hidden;
    min-width: 0;
}

.kpi-money {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.kpi-currency {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 500;
    line-height: 1;
    color: var(--primary);
    flex: 0 0 auto;
}

.kpi-value {
    font-size: clamp(26px, 2.4vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--primary);
    min-width: 0;
}

.kpi-number,
.kpi-percent {
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    font-size: clamp(26px, 2.4vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--primary);
}

.kpi-money.is-long .kpi-value,
.kpi-number.is-long,
.kpi-percent.is-long {
    font-size: clamp(24px, 2vw, 36px);
}

.kpi-money.is-very-long .kpi-value,
.kpi-number.is-very-long,
.kpi-percent.is-very-long {
    font-size: clamp(20px, 1.7vw, 30px);
}

.kpi-money.is-long .kpi-currency {
    font-size: clamp(16px, 1.6vw, 24px);
}

.quick-link-card {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    min-height: 100%;
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quick-link-card:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 88, 153, 0.3);
    box-shadow: 0 20px 34px rgba(74, 88, 153, 0.16);
}

.quick-link-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(74, 88, 153, 0.12);
    font-size: 1.45rem;
}

.quick-link-title {
    margin: 0;
    color: var(--primary);
    font-size: 1.08rem;
}

.quick-link-text {
    margin: 0;
    color: var(--muted);
}

.client-card {
    display: flex;
    flex-direction: column;
}

.client-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.client-edit-btn {
    flex-shrink: 0;
}

.client-card-actions {
    margin-top: auto;
    padding-top: 16px;
}

.admin-actions-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-info-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1.5rem;
    align-items: stretch;
}

.dashboard-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.dashboard-user-card {
    display: flex;
    align-items: center;
    padding: 0.95rem 1.2rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(85, 156, 173, 0.2);
}

.dashboard-user-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-user-meta strong {
    color: var(--primary);
    font-size: 0.98rem;
}

.dashboard-user-meta .divider {
    width: 1px;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.2);
    flex: 0 0 1px;
}

.info-chip {
    min-width: 160px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(85, 156, 173, 0.2);
    display: grid;
    gap: 0.25rem;
}

.info-chip-label {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.auth-card {
    width: min(100%, 430px);
}

.card h2,
.card h3 {
    margin-top: 0;
    color: var(--primary);
}

.card p {
    line-height: 1.55;
}

.form {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.125rem 1.25rem;
    align-items: start;
}

.order-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px 20px;
    align-items: end;
    width: 100%;
}

@media (max-width: 1200px) {
    .order-form-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .order-amounts-row {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 1100px) {
    .legacy-resolution-grid {
        grid-template-columns: 1fr;
    }

    .legacy-service-selector-grid {
        grid-template-columns: 1fr;
    }

    .third-party-form-grid,
    .third-party-filters {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .third-party-metrics-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .third-party-metrics-grid > .metric-card,
    .third-party-metrics-grid > .metric-card:nth-child(5),
    .third-party-metrics-grid > .metric-card:nth-child(6),
    .third-party-metrics-grid > .metric-card:nth-child(7) {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .legacy-resolution-card {
        padding: 16px;
    }

    .header-orden-antigua {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-orden-antigua .btn {
        align-self: flex-end;
    }

    .legacy-order-banner,
    .banner-orden-antigua {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rectification-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rectification-header .btn {
        align-self: flex-end;
    }

    .rectification-banner,
    .rectification-order-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rectification-inline-search,
    .rectification-linked-order-row,
    .rectification-client-search,
    .rectification-client-grid,
    .rectification-form-grid,
    .rectification-finance-grid,
    .rectification-service-option-grid,
    .rectification-service-option-fields {
        grid-template-columns: 1fr;
    }

    .rectification-order-card-head,
    .rectification-order-card-body {
        align-items: stretch;
        flex-direction: column;
    }

    .rectification-order-card-body .btn {
        width: 100%;
    }

    .order-form-grid {
        grid-template-columns: 1fr;
    }

    .order-amounts-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.125rem;
}

label {
    font-weight: 700;
    color: var(--text);
    padding-top: 16px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(85, 156, 173, 0.55);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    margin-top: 4px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 2.75rem;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%232f3f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

input[readonly] {
    background: rgba(255, 255, 255, 0.55);
    color: var(--muted);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 150px;
    min-height: 46px;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    background: var(--color-button-primary);
    color: var(--white);
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition: transform 0.18s ease, background 0.18s ease;
}

.btn:hover {
    background: var(--color-button-primary-hover);
    transform: translateY(-1px);
}

.btn i,
.btn .fa,
.btn .fas,
.btn .far,
.btn .fa-solid,
.btn .btn-icon,
.btn .button-icon,
.btn .icon,
.btn .btn-action-icon {
    color: currentColor;
}

.btn .btn-icon,
.btn .button-icon,
.btn .icon,
.btn .btn-action-icon,
.btn .icon-circle,
.btn .btn-icon-circle {
    color: currentColor;
    border-color: currentColor;
}

body.has-custom-theme-overrides .btn .icon-circle,
body.has-custom-theme-overrides .btn .btn-icon-circle {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

body.has-custom-theme-overrides .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.order-detail-header-void-btn) .icon-circle,
body.has-custom-theme-overrides .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.order-detail-header-void-btn) .btn-icon-circle {
    background: rgba(255, 255, 255, 0.16);
}

body.has-custom-theme-overrides .btn.btn-secondary .icon-circle,
body.has-custom-theme-overrides .btn.btn-secondary .btn-icon-circle {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.btn-secondary {
    background: var(--color-button-secondary);
    box-shadow: var(--shadow-button);
}

.btn-secondary:hover {
    background: var(--color-button-secondary-hover);
}

.btn-danger {
    background: #b8426d;
    box-shadow: 0 14px 26px rgba(184, 66, 109, 0.22);
}

.btn-danger:hover {
    background: #9e345d;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.75);
    color: var(--primary);
    border: 1px solid var(--color-button-outline-border);
    box-shadow: none;
    gap: 8px;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.95);
}

.btn:disabled {
    background: #b7b0c3;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.order-form-toolbar,
.order-admin-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    margin-top: 16px;
}

.order-form-toolbar {
    margin-bottom: 0;
}

.order-form-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.receipt-code-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.expected-order-code-trigger {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.expected-order-code-trigger:hover,
.expected-order-code-trigger:focus-visible {
    color: var(--primary-dark);
    opacity: 1;
    outline: none;
}

.expected-order-code-action,
.expected-order-code-chip,
.expected-order-code-chip--legacy,
.expected-order-code-feedback {
    display: none;
}

.btn-secondary-action-outline {
    background: var(--color-button-tertiary-bg, var(--color-button-outline-bg));
    color: var(--color-button-tertiary-text, var(--primary));
    border: 1px solid var(--color-button-tertiary-border, var(--color-button-outline-border));
    box-shadow: none;
}

.btn-secondary-action-outline:hover {
    background: var(--color-button-tertiary-hover, var(--color-button-outline-hover-bg));
    color: var(--color-button-tertiary-text, var(--primary-dark));
}

.whatsapp-quick-trigger,
.order-detail-whatsapp-link,
.search-whatsapp-action,
.orders-whatsapp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #188b4c;
    border: 1px solid rgba(37, 211, 102, 0.28);
    box-shadow: 0 6px 16px rgba(23, 122, 67, 0.06);
}

.whatsapp-quick-trigger:hover,
.whatsapp-quick-trigger:focus-visible,
.order-detail-whatsapp-link:hover,
.order-detail-whatsapp-link:focus-visible,
.search-whatsapp-action:hover,
.search-whatsapp-action:focus-visible,
.orders-whatsapp-action-btn:hover,
.orders-whatsapp-action-btn:focus-visible {
    background: rgba(37, 211, 102, 0.08);
    color: #12733c;
    border-color: rgba(23, 139, 76, 0.44);
    box-shadow: 0 10px 20px rgba(23, 122, 67, 0.10);
    transform: translateY(-1px);
}

.whatsapp-quick-trigger:active,
.order-detail-whatsapp-link:active,
.search-whatsapp-action:active,
.orders-whatsapp-action-btn:active {
    background: rgba(37, 211, 102, 0.12);
    color: #12733c;
    border-color: rgba(23, 139, 76, 0.5);
    box-shadow: 0 4px 10px rgba(23, 122, 67, 0.08);
    transform: translateY(0);
}

.whatsapp-quick-trigger:focus-visible,
.order-detail-whatsapp-link:focus-visible,
.search-whatsapp-action:focus-visible,
.orders-whatsapp-action-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(37, 211, 102, 0.16),
        0 10px 20px rgba(23, 122, 67, 0.10);
}

.orders-whatsapp-action-btn {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
}

.secondary-top-action-btn {
    background: var(--color-button-tertiary-bg, var(--color-button-outline-bg));
    color: var(--color-button-tertiary-text, var(--primary));
    border: 1px solid var(--color-button-tertiary-border, var(--color-button-outline-border));
    border-radius: 14px;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.secondary-top-action-btn:hover,
.secondary-top-action-btn:focus-visible {
    background: var(--color-button-tertiary-hover, var(--color-button-outline-hover-bg));
    color: var(--color-button-tertiary-text, var(--primary-dark));
    border-color: var(--color-button-tertiary-border, var(--color-button-outline-border));
    box-shadow: var(--shadow-soft);
    transform: none;
}

.secondary-top-action-btn:active {
    background: var(--color-button-tertiary-hover, var(--color-button-outline-hover-bg));
    color: var(--color-button-tertiary-text, var(--primary-dark));
    border-color: var(--color-button-tertiary-border, var(--color-button-outline-border));
    box-shadow: var(--shadow-soft);
    transform: none;
}

.secondary-top-action-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--color-focus-ring),
        var(--shadow-soft);
}

.orders-secondary-action-btn {
    background: var(--color-button-tertiary-bg, var(--color-button-outline-bg));
    color: var(--color-button-tertiary-text, var(--primary));
    border: 1px solid var(--color-button-tertiary-border, var(--color-button-outline-border));
    box-shadow: var(--shadow-soft);
}

.orders-secondary-action-btn:hover,
.orders-secondary-action-btn:focus-visible {
    background: var(--color-button-tertiary-hover, var(--color-button-outline-hover-bg));
    color: var(--color-button-tertiary-text, var(--primary-dark));
    border-color: var(--color-button-tertiary-border, var(--color-button-outline-border));
    box-shadow: var(--shadow-soft);
}

.orders-secondary-action-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--color-focus-ring),
        var(--shadow-soft);
}

.orders-detail-action-btn {
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-button-primary-strong);
}

.orders-detail-action-btn:hover,
.orders-detail-action-btn:focus-visible {
    background: var(--primary-dark);
    color: #ffffff;
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-button-primary-hover);
    transform: translateY(-1px);
}

.orders-detail-action-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--color-focus-ring),
        var(--shadow-button-primary-hover);
}

.btn-secondary-action-ghost {
    background: var(--color-button-tertiary-bg, transparent);
    color: var(--color-button-tertiary-text, rgba(47, 36, 64, 0.82));
    border: 1px solid var(--color-button-tertiary-border, transparent);
    box-shadow: none;
}

.btn-secondary-action-ghost:hover {
    background: var(--color-button-tertiary-hover, rgba(47, 36, 64, 0.06));
    color: var(--color-button-tertiary-text, var(--text));
}

body.has-custom-theme-overrides,
.appearance-page-shell,
.appearance-modal,
.appearance-live-preview {
    --color-button-outline-bg: var(--color-button-tertiary-bg);
    --color-button-outline-border: var(--color-button-tertiary-border);
    --color-button-outline-hover-bg: var(--color-button-tertiary-hover);
}

body.has-custom-theme-overrides .btn-secondary-action-outline:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn),
body.has-custom-theme-overrides .secondary-top-action-btn:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn),
body.has-custom-theme-overrides .orders-secondary-action-btn,
body.has-custom-theme-overrides .mobile-view-all-button,
body.has-custom-theme-overrides .btn-outline-primary,
body.has-custom-theme-overrides .btn-secondary-action-ghost,
body.has-custom-theme-overrides .btn-secondary-action {
    color: var(--color-button-tertiary-text, var(--color-primary));
    border-color: var(--color-button-tertiary-border, var(--color-button-outline-border));
    background: var(--color-button-tertiary-bg, #ffffff);
    border-radius: var(--button-radius, var(--radius-sm));
    padding: var(--button-padding-y, 13px) var(--button-padding-x, 24px);
    font-size: var(--button-font-size, 0.95rem);
}

body.has-custom-theme-overrides .btn-secondary-action-outline:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn):hover,
body.has-custom-theme-overrides .btn-secondary-action-outline:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn):focus-visible,
body.has-custom-theme-overrides .secondary-top-action-btn:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn):hover,
body.has-custom-theme-overrides .secondary-top-action-btn:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn):focus-visible,
body.has-custom-theme-overrides .orders-secondary-action-btn:hover,
body.has-custom-theme-overrides .orders-secondary-action-btn:focus-visible,
body.has-custom-theme-overrides .mobile-view-all-button:hover,
body.has-custom-theme-overrides .mobile-view-all-button:focus-visible,
body.has-custom-theme-overrides .btn-outline-primary:hover,
body.has-custom-theme-overrides .btn-outline-primary:focus-visible,
body.has-custom-theme-overrides .btn-secondary-action-ghost:hover,
body.has-custom-theme-overrides .btn-secondary-action-ghost:focus-visible,
body.has-custom-theme-overrides .btn-secondary-action:hover,
body.has-custom-theme-overrides .btn-secondary-action:focus-visible {
    background: var(--color-button-tertiary-hover, var(--color-surface-soft));
    color: var(--color-button-tertiary-text, var(--color-primary));
    border-color: var(--color-button-tertiary-border, var(--color-primary));
}

body.has-custom-theme-overrides .btn-secondary-action-outline i,
body.has-custom-theme-overrides .secondary-top-action-btn i,
body.has-custom-theme-overrides .orders-secondary-action-btn i,
body.has-custom-theme-overrides .mobile-view-all-button i,
body.has-custom-theme-overrides .btn-outline-primary i,
body.has-custom-theme-overrides .btn-secondary-action-ghost i,
body.has-custom-theme-overrides .btn-secondary-action i {
    color: currentColor;
}

.actions-dropdown {
    position: relative;
    flex-shrink: 0;
}

.actions-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
}

.actions-dropdown-toggle i {
    font-size: 12px;
    transition: transform 0.18s ease;
}

.actions-dropdown.is-open .actions-dropdown-toggle i {
    transform: rotate(180deg);
}

.actions-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(85, 156, 173, 0.18);
    box-shadow: 0 18px 34px rgba(47, 36, 64, 0.12);
    display: none;
    z-index: 50;
}

.actions-dropdown.is-open .actions-dropdown-menu {
    display: grid;
    gap: 4px;
}

.actions-dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
}

.actions-dropdown-item:hover {
    background: rgba(47, 36, 64, 0.05);
}

.actions-dropdown-item:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.actions-dropdown-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.actions-dropdown-item-copy {
    display: grid;
    gap: 3px;
}

.actions-dropdown-item-copy strong {
    color: var(--primary);
    font-size: 14px;
    line-height: 1.2;
}

.actions-dropdown-item-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.client-search-group {
    position: relative;
}

.client-search-shell {
    position: relative;
}

.client-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d8e7ef;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(55, 48, 90, 0.12);
    padding: 8px;
}

.client-search-results[hidden] {
    display: none;
}

.client-search-result-item {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    color: #33427f;
}

.client-search-result-item:hover,
.client-search-result-item.is-active {
    background: #f9fafb;
}

.client-search-result-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.client-search-result-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #25315d;
}

.client-search-result-name mark,
.client-search-result-dni mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
}

.client-search-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: #6b7280;
}

.client-search-result-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.client-search-result-phone i {
    font-size: 11px;
    color: #8b97ab;
}

.client-search-frequency-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.client-search-frequency-chip.chip-low {
    background: #f3f0ff;
    color: #6b5aa6;
}

.client-search-frequency-chip.chip-medium {
    background: #fff6dc;
    color: #b7791f;
}

.client-search-frequency-chip.chip-high {
    background: #eaf8ef;
    color: #1f7a45;
}

.client-search-result-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.client-dni-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f3f0ff;
    color: #44539a;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.client-search-result-item:hover .client-dni-pill,
.client-search-result-item.is-active .client-dni-pill,
.client-results-modal-item:hover .client-dni-pill {
    background: #e9e5ff;
}

.client-search-result-dni {
    letter-spacing: 0.01em;
}

.client-search-empty {
    padding: 12px 14px;
    color: #6e7b94;
    font-size: 0.9rem;
}

.client-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 4px;
    border-top: 1px solid #edf1f6;
    margin-top: 6px;
}

.client-search-footer-copy {
    color: #6b7280;
    font-size: 0.78rem;
}

.client-search-footer-action {
    border: 0;
    background: transparent;
    color: #44539a;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}

.client-search-footer-action:hover {
    background: #f7f5ff;
}

.client-results-modal-card {
    width: min(92vw, 760px);
    max-width: 760px;
}

.client-results-modal-body {
    max-height: 70vh;
    overflow: hidden;
}

.client-results-list {
    display: grid;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.client-results-modal-empty {
    padding: 18px;
    border: 1px dashed #d8e7ef;
    border-radius: 14px;
    color: #6e7b94;
    text-align: center;
}

.client-results-modal-item {
    width: 100%;
    border: 1px solid #e5ebf2;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.client-results-modal-item:hover {
    background: #f9fafb;
    border-color: #d7deea;
}

.client-results-modal-left {
    display: grid;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.client-results-modal-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-results-modal-name {
    color: #25315d;
    font-size: 0.96rem;
    font-weight: 700;
}

.client-results-modal-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-results-modal-dni {
    white-space: nowrap;
}

.client-results-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: #6b7280;
    font-size: 0.84rem;
}

.client-results-modal-select {
    flex-shrink: 0;
    align-self: center;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.order-entry-card.is-locked {
    opacity: 0.92;
}

.order-entry-blocked-copy {
    margin: 0 0 16px;
    color: var(--muted);
    font-weight: 600;
}

.order-entry-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.order-entry-fieldset:disabled {
    opacity: 0.62;
    pointer-events: none;
}

.order-services-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.field-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.field-help-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--primary);
    cursor: help;
    opacity: 0.78;
}

.field-help-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(47, 36, 64, 0.78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: pre-line;
    box-shadow: 0 18px 28px rgba(47, 36, 64, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 20;
}

.field-help-tooltip:hover::after,
.field-help-tooltip:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.client-register-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.client-register-tooltip {
    flex: 0 0 auto;
    color: rgba(74, 91, 168, 0.78);
}

.client-register-tooltip i {
    font-size: 0.88rem;
}

.order-services-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(85, 156, 173, 0.16);
    margin-bottom: 16px;
    margin-top: 16px;
}

.order-services-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.info-item-service-detail .info-item-service-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.info-item-service-detail .info-item-service-name {
    min-width: 0;
    margin: 0;
}

.service-inline-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(74, 88, 153, 0.72);
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
    flex: 0 0 auto;
}

.service-inline-view-btn:hover,
.service-inline-view-btn:focus-visible {
    color: var(--primary);
    transform: scale(1.04);
}

.service-inline-view-btn i {
    font-size: 15px;
}

.order-services-table-shell {
    max-height: 260px;
}

.order-services-table td:last-child,
.order-services-table th:last-child {
    width: 120px;
}

.order-services-empty-row td {
    color: var(--muted);
}

.order-services-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.order-services-alert,
.order-overpay-alert,
.service-picker-error {
    color: #991b1b;
}

.order-amounts-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 18px 20px;
    align-items: start;
    margin-top: 18px;
}

.order-amounts-row .form-group {
    align-self: stretch;
}

.order-amounts-row .form-group input {
    min-height: 48px;
}

.order-operational-load-preview {
    --load-preview-accent: #4a5899;
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid rgba(74, 88, 153, 0.18);
    border-radius: 12px;
    background: rgba(245, 247, 255, 0.86);
    color: #5d5668;
    font-size: 0.78rem;
    line-height: 1.35;
}

.order-operational-load-preview[hidden],
.order-operational-load-preview-suggestion[hidden],
.order-operational-load-preview-actions[hidden] {
    display: none;
}

.order-operational-load-preview.is-low { --load-preview-accent: #3c9564; }
.order-operational-load-preview.is-medium { --load-preview-accent: #a87917; }
.order-operational-load-preview.is-high { --load-preview-accent: #c06a37; }
.order-operational-load-preview.is-critical {
    --load-preview-accent: #b33f56;
    border-color: rgba(179, 63, 86, 0.28);
    background: rgba(255, 244, 247, 0.92);
}

.order-operational-load-preview-heading {
  display: grid;
  gap: 2px;
}

.order-operational-load-preview-heading strong {
  color: var(--load-preview-accent);
  font-size: 0.84rem;
}

.order-operational-load-preview-heading span {
  color: #514b60;
  font-weight: 700;
}

.order-operational-load-preview p,
.order-operational-load-preview-suggestion {
    margin: 0;
}

.order-operational-load-preview-suggestion,
.order-operational-load-preview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.order-operational-load-preview-suggestion {
  color: var(--load-preview-accent);
  font-weight: 700;
}

.order-operational-load-preview-suggestion {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(60, 149, 100, 0.2);
  border-radius: 10px;
  background: rgba(235, 249, 240, 0.82);
  color: #357b56;
}

.order-operational-load-preview-suggestion > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #3c9564;
}

.order-operational-load-preview-suggestion-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.order-operational-load-preview-suggestion-copy small {
  color: #6f8c79;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-operational-load-preview-suggestion-copy strong {
  color: #2f7250;
  font-size: 0.9rem;
}

.order-operational-load-preview-suggestion-copy em {
  color: #5f806c;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 600;
}

.order-operational-load-preview .btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.75rem;
}

@media (max-width: 767px) {
    .order-operational-load-preview-suggestion,
    .order-operational-load-preview-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .order-operational-load-preview .btn {
        width: 100%;
    }
}

.payment-rounding-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 34px;
    margin-top: 12px;
}

.payment-rounding-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.18s ease;
}

.payment-rounding-toggle.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.payment-rounding-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.payment-rounding-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(180, 189, 220, 0.9);
    transition: background 0.2s ease;
}

.payment-rounding-toggle-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(53, 64, 116, 0.18);
    transition: transform 0.2s ease;
}

.payment-rounding-toggle-copy {
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.payment-rounding-toggle input:checked + .payment-rounding-toggle-switch {
    background: rgba(85, 156, 173, 0.95);
}

.payment-rounding-toggle input:checked + .payment-rounding-toggle-switch::after {
    transform: translateX(20px);
}

@media (max-width: 768px) {
    .payment-rounding-row {
        justify-content: flex-start;
        margin-top: 10px;
    }
}

.service-picker-modal {
    width: min(1180px, 96vw);
    height: auto;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.service-picker-modal-body {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* The correction mode reuses the picker layout without adding a wrapper row. */
.service-picker-correction-form {
    display: contents;
}

.service-picker-reason-group {
    margin-top: 16px;
}

.service-picker-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
}

.service-picker-sidebar {
    padding: 24px;
    border-right: 1px solid rgba(85, 156, 173, 0.16);
    background: rgba(248, 239, 246, 0.42);
    background-image: none !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    padding-top: 20px;
    border-radius: 22px 0 0 22px;
}

.service-picker-list {
    display: grid;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 6px 12px 0;
    border-radius: 18px;
}

.service-picker-item {
    width: 100%;
    border: 1px solid rgba(85, 156, 173, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 247, 251, 0.98) 100%);
    background-image: none !important;
    box-shadow: 0 10px 20px rgba(74, 88, 153, 0.06);
    padding: 15px 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    position: relative;
}

.service-picker-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(74, 88, 153, 0.08);
    background-image: none !important;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.service-picker-item-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.service-picker-item-copy strong {
    color: var(--primary);
    font-size: 15px;
}

.service-picker-item-copy span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.service-picker-item:hover {
    border-color: rgba(85, 156, 173, 0.28);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 14px 28px rgba(74, 88, 153, 0.1);
    transform: translateY(-1px);
}

.service-picker-item.is-active {
    border-color: var(--color-button-outline-border);
    background: color-mix(in srgb, var(--color-surface) 76%, white 24%);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.service-picker-item.is-active .service-picker-item-icon {
    background: var(--color-button-outline-hover-bg);
    color: var(--primary);
}

.service-picker-detail {
    padding: 24px;
    display: grid;
    gap: 18px;
    align-content: start;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

.service-picker-detail-header {
    display: grid;
    gap: 6px;
}

.service-picker-heading {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.service-picker-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(74, 88, 153, 0.1);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.service-picker-heading-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.service-picker-heading-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.service-picker-kicker {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secondary);
    letter-spacing: 0.05em;
}

.service-picker-detail-header h4 {
    margin: 0;
    color: var(--primary);
    font-size: 24px;
}

.service-picker-detail-header p {
    margin: 0;
    color: var(--muted);
}

.service-price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(74, 88, 153, 0.1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.service-picker-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: start;
}

.service-picker-form-grid .form-group:not(.service-detail-group) input,
.service-picker-form-grid .form-group:not(.service-detail-group) select {
    min-height: 52px;
    height: 52px;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    line-height: 1.2;
    border-radius: 16px;
}

.service-detail-group {
    grid-column: 1 / -1;
}

.service-price-group {
    gap: 8px;
}

.service-price-group label i {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.7;
}

.service-price-input-wrap {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 52px;
    height: 52px;
    border: 1px solid rgba(85, 156, 173, 0.55);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
    align-content: center;
}

.service-price-prefix {
    height: 52px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 88, 153, 0.08);
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
}

.service-price-input-wrap input {
    border: none;
    border-radius: 0;
    height: 52px;
    min-height: 52px;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    line-height: 1.2;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    box-shadow: none;
}

#service-quantity-input {
    height: 52px;
    min-height: 52px;
}

#service-size-select {
    height: 52px;
    min-height: 52px;
}

.order-submit-actions {
    margin-top: 24px;
}

.service-price-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(74, 88, 153, 0.14);
}

.service-price-input-wrap input:focus {
    box-shadow: none;
}

.service-total-card {
    display: grid;
    gap: 4px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(231, 233, 248, 0.52);
    border: 1px solid rgba(74, 88, 153, 0.18);
}

.service-total-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.05em;
}

.service-total-card strong {
    color: var(--primary);
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1;
}

.service-summary-line {
    margin: 8px 0px 0px 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    padding-bottom: 16px;
}

.service-picker-actions {
    padding-top: 6px;
    justify-content: flex-end;
}

.service-compound-section {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 16px;
    margin-top: 16px;
    background: rgba(248, 239, 246, 0.38);
    border: 1px solid rgba(85, 156, 173, 0.16);
}

.service-compound-section[hidden],
#service-size-group[hidden] {
    display: none !important;
}

.service-compound-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.service-compound-toolbar h5 {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 16px;
}

.service-compound-table-shell {
    max-height: 180px;
}

.service-compound-empty-row td {
    color: var(--muted);
}

.order-services-detail-meta {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.order-detail-modal-shell {
    width: min(1120px, 94vw);
}

.order-detail-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-detail-modal-shell .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.order-detail-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.order-detail-section-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.order-detail-section-copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.order-detail-section-copy .section-title,
.order-detail-section-copy .section-subtitle {
    margin: 0;
}

.btn-mark-ready-soft {
    background: #eaf8ef;
    color: #1f7a45;
    border: 1px solid #bde8cc;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 14px;
    min-height: 40px;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none;
}

.btn-mark-ready-soft:hover {
    background: #ddf3e6;
    color: #1b6c3d;
    border-color: #b0dfc0;
}

.btn-mark-ready-soft i {
    font-size: 0.82rem;
    color: inherit;
}

.btn-mark-ready-soft:disabled {
    opacity: 0.7;
    cursor: wait;
}

.confirm-status-modal {
    padding: 1rem;
}

.confirm-status-modal .modal-dialog.modal-content.confirm-status-dialog {
    width: min(92vw, 480px) !important;
    max-width: 480px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    margin: auto;
    display: block !important;
    overflow: hidden !important;
}

.confirm-status-modal .modal-header,
.order-ready-confirm-shell .modal-header {
    padding: 1rem 1.1rem 0;
    border-bottom: 0;
    align-items: flex-start;
}

.confirm-modal-header-copy h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
}

.confirm-status-modal .confirm-status-content,
.confirm-status-modal .confirm-status-body,
.confirm-modal-card,
.order-ready-confirm-body {
    height: auto !important;
    min-height: unset !important;
    flex: unset !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 0 28px 28px;
}

.confirm-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf8ef;
    color: #1f7a45;
    font-size: 1.6rem;
    margin-top: 24px;
}

.order-ready-confirm-title {
    margin: 0;
    color: var(--primary);
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 700;
}

.order-ready-confirm-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    max-width: 34ch;
}

.confirm-modal-actions,
.order-ready-confirm-actions,
.confirm-status-modal .confirm-status-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
}

.confirm-modal-actions .btn,
.order-ready-confirm-actions .btn {
    min-height: 40px;
    padding: 10px 14px;
}

.order-detail-modal-code {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.order-detail-subtitle,
.order-detail-modal-code {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.legacy-order-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFF4E5;
    border: 1px solid #F3D7B6;
    color: #B7791F;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.order-voided-tag {
    background: #ececec;
    border: 1px solid #d5d5d5;
    color: #5f6368;
}

.order-regularized-tag {
    background: #eaf2ff;
    border: 1px solid #bfd4ff;
    color: #3156a3;
}

.order-detail-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.order-detail-search-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(180, 207, 221, 0.7);
    background: rgba(246, 248, 255, 0.9);
    color: var(--primary);
    box-shadow: none;
}

.order-detail-search-link:hover {
    background: rgba(232, 238, 255, 0.95);
    color: var(--primary-strong);
}

.whatsapp-quick-modal-shell {
    width: min(94vw, 560px);
    border-radius: 24px;
}

.whatsapp-quick-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 22px 18px;
}

.whatsapp-quick-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.whatsapp-quick-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 42px;
    padding: 11px 42px 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(37, 211, 102, 0.22);
    background: #ffffff;
    color: #166f3b;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    box-shadow: 0 8px 18px rgba(23, 122, 67, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.whatsapp-quick-option:hover,
.whatsapp-quick-option:focus-visible {
    background: rgba(37, 211, 102, 0.08);
    color: #12733c;
    border-color: rgba(23, 139, 76, 0.4);
    box-shadow: 0 12px 20px rgba(23, 122, 67, 0.09);
    outline: none;
}

.whatsapp-quick-option:active {
    background: rgba(37, 211, 102, 0.12);
    box-shadow: 0 6px 12px rgba(23, 122, 67, 0.07);
}

.whatsapp-quick-option.is-active {
    background: rgba(37, 211, 102, 0.12);
    color: #12733c;
    border-color: rgba(23, 139, 76, 0.44);
    box-shadow: 0 12px 20px rgba(23, 122, 67, 0.10);
}

.whatsapp-quick-option .whatsapp-template-check {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
    color: #159447;
    font-size: 13px;
}

.whatsapp-quick-option.is-active .whatsapp-template-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-quick-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(194, 204, 232, 0.38);
}

.whatsapp-quick-preview-label {
    margin: 0;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.whatsapp-quick-preview-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.96);
    border: 1px solid rgba(194, 204, 232, 0.48);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.whatsapp-quick-preview-card.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--muted);
    font-weight: 400;
    text-align: center;
}

.whatsapp-quick-preview-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.whatsapp-quick-preview-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.whatsapp-quick-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    background: #1a7f43;
    color: #ffffff;
    border: 1px solid #1a7f43;
    box-shadow: 0 12px 22px rgba(26, 127, 67, 0.18);
}

.whatsapp-quick-open-btn:hover,
.whatsapp-quick-open-btn:focus-visible {
    background: #166d39;
    color: #ffffff;
    border-color: #166d39;
}

.whatsapp-quick-open-btn:disabled {
    background: #d4dbe8;
    color: #7c889f;
    border-color: #d4dbe8;
    box-shadow: none;
}

@media (min-width: 768px) {
    .whatsapp-quick-options {
        flex-wrap: nowrap;
    }

    .whatsapp-quick-option {
        flex: 1 1 0;
    }
}

@media (max-width: 640px) {
    .whatsapp-quick-modal-shell {
        width: min(94vw, 420px);
    }

    .whatsapp-quick-option {
        flex: 1 1 calc(50% - 4px);
    }

    .order-detail-audit-trigger span {
        display: none;
    }

    .order-detail-audit-popover {
        right: auto;
        left: 0;
        width: min(320px, calc(100vw - 48px));
    }
}

@media (max-width: 480px) {
    .whatsapp-quick-modal-body {
        padding: 2px 18px 16px;
    }

    .whatsapp-quick-option {
        flex: 1 1 100%;
    }
}

.order-detail-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.order-detail-modal-heading {
    min-width: 0;
}

.order-detail-modal-header-actions .modal-close-btn {
    flex-shrink: 0;
}

.order-detail-modal-header-actions .btn {
    flex-shrink: 0;
}

.order-detail-modal-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.order-detail-search-link i {
    font-size: 13px;
}

.order-detail-search-link span {
    white-space: nowrap;
}

.order-detail-modal-toolbar {
    justify-content: flex-end;
}

.order-detail-section-card {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(180, 207, 221, 0.45);
    box-shadow: 0 16px 34px rgba(74, 88, 153, 0.08);
}

.order-voided-banner {
    background: #f7f7f7;
    border-color: #d5d5d5;
    color: #5f6368;
}

.order-voided-banner-chip {
    background: #ececec;
    border-color: #d5d5d5;
    color: #5f6368;
}

.order-voided-banner-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: inherit;
}

.order-voided-banner-copy p {
    margin: 0;
}

.order-regularized-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f3f7ff;
    border: 1px solid #c9d9ff;
    color: #40527a;
}

.order-regularized-banner--card {
    margin-top: 2px;
}

.order-regularized-banner-chip {
    flex-shrink: 0;
    background: #eaf2ff;
    color: #3156a3;
    border: 1px solid #bfd4ff;
}

.order-regularized-banner-text {
    flex: 1;
    color: inherit;
    text-align: left;
}

.order-historical-regularization-banner--compact {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.order-historical-regularization-banner--compact .order-historical-regularization-copy {
    display: block;
    flex: 1;
    color: inherit;
    text-align: left;
    margin: 0;
}

.order-historical-regularization-banner--compact .order-historical-regularization-copy p {
    margin: 0;
    text-align: left;
}

.order-historical-regularization-banner--compact .order-historical-regularization-copy p:not(:first-child) {
    display: none;
}

@media (max-width: 640px) {
    .order-regularized-banner,
    .order-historical-regularization-banner--compact {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .order-historical-regularization-banner--compact .order-historical-regularization-copy {
        width: 100%;
    }
}

.order-detail-audit-menu {
    position: relative;
    flex-shrink: 0;
}

.order-detail-audit-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-detail-audit-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: min(320px, 78vw);
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(180, 207, 221, 0.68);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(74, 88, 153, 0.16);
    backdrop-filter: blur(14px);
}

.order-detail-audit-popover[hidden] {
    display: none !important;
}

.order-detail-audit-row {
    display: grid;
    gap: 4px;
}

.order-detail-audit-row + .order-detail-audit-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(180, 207, 221, 0.34);
}

.order-detail-audit-row span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.order-detail-audit-row strong {
    font-size: 14px;
    line-height: 1.45;
    color: var(--primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-detail-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.order-detail-status-pill {
    flex-shrink: 0;
}

.order-detail-inline-void-action {
    display: none;
}

.order-void-warning {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(180, 207, 221, 0.45);
    background: rgba(248, 250, 252, 0.96);
    color: #4b5563;
    font-weight: 600;
}

.order-void-actions {
    align-items: center;
}

.order-void-confirm-btn {
    background: #4b5563;
    border-color: #4b5563;
    color: #ffffff;
}

.order-void-confirm-btn:hover {
    background: #374151;
    border-color: #374151;
}

.mobile-order-code-pill-wrap {
    margin-top: 6px;
}

.order-detail-info-grid {
    margin-top: 14px;
}

.order-detail-totals-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.order-detail-services-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.order-detail-services-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.92);
    border: 1px solid rgba(194, 204, 232, 0.38);
    color: var(--muted);
}

.order-detail-services-summary-copy,
.order-detail-services-summary-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-detail-services-summary strong {
    color: var(--primary);
    font-size: 14px;
}

.order-detail-services-summary span {
    font-size: 13px;
    text-align: right;
}

.order-detail-services-summary-copy span,
.order-detail-services-summary-progress span,
.order-detail-services-summary-progress small {
    font-size: 13px;
}

.order-detail-services-summary-progress {
    min-width: min(100%, 320px);
    align-items: flex-end;
}

.order-detail-services-global-status {
    width: fit-content;
}

.order-detail-progress-track {
    width: min(100%, 240px);
    height: 8px;
    border-radius: 999px;
    background: rgba(194, 204, 232, 0.55);
    overflow: hidden;
}

.order-detail-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c93f0 0%, #4d63b5 100%);
}

.order-detail-service-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.92);
    border: 1px solid rgba(194, 204, 232, 0.42);
}

.order-detail-service-row--ready {
    border-color: rgba(102, 126, 234, 0.42);
    box-shadow: 0 10px 22px rgba(102, 126, 234, 0.10);
}

.order-detail-service-row--delivered {
    border-color: rgba(74, 201, 138, 0.32);
    background: rgba(242, 253, 247, 0.9);
}

.order-detail-service-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(224, 232, 252, 0.72);
    color: var(--primary);
    font-size: 18px;
    flex: 0 0 44px;
}

.order-detail-service-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-detail-service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-detail-service-copy strong {
    color: var(--primary);
    font-size: 16px;
}

.order-detail-service-status {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: rgba(224, 232, 252, 0.72);
    border: 1px solid rgba(176, 194, 232, 0.6);
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0;
}

.order-detail-service-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.order-detail-service-action {
    margin: 0;
}

.order-detail-service-action .btn {
    white-space: nowrap;
}

.order-detail-service-detail,
.order-detail-service-meta {
    color: var(--muted);
    font-size: 13px;
}

.order-detail-service-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-detail-service-amount {
    text-align: right;
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.order-operational-in-progress {
    background: #eef2ff;
    color: #4256a6;
    border: 1px solid #ced7ff;
}

.order-operational-partial {
    background: #fff4db;
    color: #996300;
    border: 1px solid #f2d39a;
}

.order-operational-completed {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #a7f3d0;
}

.order-operational-pending,
.order-operational-ready,
.order-operational-delivered {
    text-transform: none;
    letter-spacing: 0;
}

.order-operational-pending {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.order-operational-ready {
    background: #e0ecff;
    color: #315aa6;
    border: 1px solid #bfd3ff;
}

.order-operational-delivered {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #a7f3d0;
}

.order-operational-summary-inline {
    display: block;
    margin-top: 4px;
}

.history-service-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-detail-payments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.order-detail-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.9);
    border: 1px solid rgba(180, 207, 221, 0.55);
}

.order-detail-payment-main,
.order-detail-payment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-detail-payment-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-detail-payment-copy,
.order-detail-payment-meta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.order-detail-payment-copy strong {
    color: var(--primary);
    font-size: 18px;
}

.order-detail-payment-amount-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-detail-payment-tooltip {
    width: 16px;
    height: 16px;
    color: #c7922f;
    opacity: 1;
    flex: 0 0 auto;
}

.order-detail-payment-tooltip::after {
    min-width: 220px;
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(47, 36, 64, 0.94);
    color: #f8f8fc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-line;
    box-shadow: 0 18px 28px rgba(47, 36, 64, 0.18);
}

.order-detail-payment-copy span,
.order-detail-payment-meta span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.25;
}

.order-detail-payment-method {
    margin: 0;
    font-weight: 700;
}

.payment-method-edit-inline {
    margin-top: 12px;
}

.payment-method-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: auto;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.2;
}

.payment-method-edit-btn-icon {
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 12px;
}

.payment-method-edit-btn-icon i {
    margin: 0;
}

.payment-method-edit-summary {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.9);
    border: 1px solid rgba(180, 207, 221, 0.55);
}

.payment-method-edit-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.payment-method-edit-summary-row span {
    color: var(--muted);
    font-size: 13px;
}

.payment-method-edit-summary-row strong {
    color: var(--primary);
    font-size: 14px;
}

.payment-method-efectivo {
    background: #dcfce7;
    color: #15803d;
}

.payment-method-plin {
    background: #dcfce7;
    color: #166534;
}

.payment-method-yape {
    background: #f3e8ff;
    color: #7e22ce;
}

.payment-method-tarjeta {
    background: #1f2937;
    color: #ffffff;
}

.price-config-board {
    display: grid;
    gap: 18px;
}

.price-configs-simple-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.price-config-quick-card,
.price-config-group-card {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(249, 250, 255, 0.98) 100%);
    border: 1px solid rgba(180, 207, 221, 0.55);
    box-shadow: 0 16px 32px rgba(74, 88, 153, 0.08);
}

.price-config-quick-card {
    padding: 18px 18px 16px;
    display: grid;
    gap: 14px;
}

.price-config-quick-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.price-config-quick-head h4,
.price-config-group-head h4 {
    margin: 0;
    color: var(--primary);
    font-size: 22px;
    line-height: 1.1;
}

.price-config-unit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(224, 232, 252, 0.78);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.price-config-value {
    margin: 0;
    color: var(--primary);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.price-config-quick-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.price-config-caption,
.price-config-group-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.price-config-btn {
    min-width: 120px;
}

.price-config-group-card {
    padding: 20px;
    display: grid;
    gap: 18px;
}

.price-config-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.price-config-chip-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.price-config-chip {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.96);
    border: 1px solid rgba(194, 204, 232, 0.42);
}

.price-config-chip-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.price-config-chip-value {
    color: var(--primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.price-config-edit-list {
    display: grid;
    gap: 14px;
}

.price-config-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto;
    gap: 14px;
    align-items: end;
    padding: 16px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.92);
    border: 1px solid rgba(194, 204, 232, 0.42);
}

.price-config-edit-meta {
    display: grid;
    gap: 4px;
}

.price-config-edit-meta strong {
    color: var(--primary);
    font-size: 16px;
    padding-left: 8px
}

.price-config-edit-meta span {
    color: var(--muted);
    font-size: 13px;
    padding-bottom: 16px;
    padding-left: 8px
}

.price-config-edit-input {
    display: grid;
    gap: 6px;
}

.price-config-edit-actions {
    display: flex;
    align-items: end;
}

@media (max-width: 700px) {
    .order-detail-services-summary,
    .order-detail-service-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-detail-services-summary span {
        text-align: left;
    }

    .order-detail-services-summary-progress {
        min-width: 100%;
        align-items: flex-start;
    }

    .order-detail-progress-track {
        width: 100%;
    }

    .order-detail-service-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .order-detail-service-icon {
        margin-bottom: 2px;
    }

    .order-detail-service-amount {
        text-align: left;
    }

    .order-detail-service-side {
        align-items: flex-start;
    }

    .order-detail-payment-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-detail-modal-shell .modal-header {
        align-items: flex-start;
    }

    .order-detail-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .order-detail-modal-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .order-detail-payment-side,
    .order-detail-payment-main,
    .order-detail-payment-meta {
        width: 100%;
        justify-content: space-between;
    }

    .order-detail-payment-side {
        flex-direction: column;
        align-items: stretch;
    }

    .confirm-modal-actions,
    .order-ready-confirm-actions,
    .confirm-status-modal .confirm-status-actions {
        flex-direction: column-reverse;
    }

    .confirm-status-modal .confirm-status-content,
    .confirm-status-modal .confirm-status-body,
    .confirm-modal-card,
    .order-ready-confirm-body {
        padding: 0 20px 20px;
    }

    #allOrdersModal .modal-dialog.modal-content.modal-orders-wide {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 88vh !important;
        max-height: 88vh !important;
    }

    #allOrdersModal .modal-header,
    #allOrdersModal .modal-body {
        padding-inline: 1rem;
    }

    #allOrdersModal .orders-total-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #allOrdersModal .orders-filter-search,
    #allOrdersModal .orders-filter-date,
    #allOrdersModal .orders-filter-sort,
    #allOrdersModal .orders-filter-status,
    #allOrdersModal .orders-filter-payment,
    #allOrdersModal .orders-filter-laundry,
    #allOrdersModal .orders-filter-actions {
        grid-column: auto;
    }

    #allOrdersModal .orders-filter-actions .btn {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    #allOrdersModal .table-container,
    #allOrdersModal .orders-total-table-shell {
        max-height: 50vh;
    }

    .dashboard-delayed-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-delayed-filter-search,
    .dashboard-delayed-filter-laundry,
    .dashboard-delayed-filter-start,
    .dashboard-delayed-filter-end,
    .dashboard-delayed-filter-sort,
    .dashboard-delayed-filter-actions {
        grid-column: auto;
    }

    #otherPendingOrdersModal .pending-other-filters,
    #otherPendingOrdersModal .pending-other-filters--no-laundry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #otherPendingOrdersModal .pending-other-filter-actions {
        justify-content: stretch;
    }

    #otherPendingOrdersModal .pending-other-filter-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .price-configs-simple-grid {
        grid-template-columns: 1fr;
    }

    .price-config-group-head,
    .price-config-quick-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .price-config-chip-grid {
        grid-template-columns: 1fr;
    }

    .price-config-edit-row {
        grid-template-columns: 1fr;
    }

    .price-config-quick-card,
    .price-config-group-card {
        padding: 18px;
    }
}

.delivery-debt-copy {
    margin: 0 0 16px;
    color: var(--text);
    line-height: 1.5;
}

.dashboard-audit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.audit-notes-row td {
    background: rgba(248, 239, 246, 0.32);
    font-size: 14px;
    text-align: left;
}

.audit-modal-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.audit-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.audit-filter-pills {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.audit-filter-pill {
    border: 1px solid rgba(85, 156, 173, 0.22);
    background: #fff;
    color: var(--primary);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.audit-filter-pill span {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(85, 156, 173, 0.12);
    color: inherit;
    font-size: 12px;
}

.audit-filter-pill:hover,
.audit-filter-pill.is-active {
    background: rgba(85, 156, 173, 0.1);
    border-color: rgba(85, 156, 173, 0.38);
    box-shadow: 0 10px 22px rgba(85, 156, 173, 0.12);
}

.audit-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.audit-modal-shell.is-resolved-view .audit-toolbar-actions,
.audit-modal-shell.is-resolved-view .audit-pending-only {
    display: none !important;
}

.audit-selection-count {
    font-weight: 600;
}

.audit-bulk-resolve-btn {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    box-shadow: 0 10px 24px rgba(74, 88, 153, 0.18);
}

.audit-bulk-resolve-btn:hover:not(:disabled) {
    background: #3f4d8f;
    border-color: #3f4d8f;
    color: #fff;
}

.audit-bulk-resolve-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.audit-history-table tbody tr[data-audit-row] {
    transition: background 0.2s ease;
}

.audit-history-table tbody tr[data-audit-row]:hover {
    background: rgba(85, 156, 173, 0.06);
}

.audit-history-table tbody tr[data-audit-row].is-selected td,
.audit-history-table tbody tr[data-audit-notes-row].is-selected td {
    background: rgba(248, 239, 246, 0.7);
}

.audit-check-col {
    width: 44px;
}

.audit-check-cell,
.audit-check-master {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audit-check-cell input,
.audit-check-master input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.audit-status-chip.is-pending {
    background: rgba(236, 193, 68, 0.18);
    color: #8f6a05;
}

.audit-status-chip.is-resolved {
    background: rgba(46, 157, 87, 0.14);
    color: #1f7b49;
}

.audit-empty-state {
    border: 1px dashed rgba(85, 156, 173, 0.24);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    color: var(--muted);
}

.toast-container {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: grid;
    gap: 0.8rem;
    width: min(100%, 420px);
    pointer-events: none;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-12px); }
}

.toast-message {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(85, 156, 173, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 34px rgba(47, 36, 64, 0.12);
    font-weight: 600;
    color: var(--text);
    animation: toastIn 0.25s ease forwards;
    pointer-events: auto;
}

.toast-message.toast-hide {
    animation: toastOut 0.35s ease forwards;
}

.toast-success {
    background: var(--success);
    border-color: #98c8a9;
}

.toast-warning {
    background: var(--warning);
    border-color: #ddc27f;
}

.toast-danger,
.toast-error {
    background: var(--danger);
    border-color: #dfa8be;
}

.toast-info {
    background: var(--info);
    border-color: #8db9c6;
}

.helper-text {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.context-disclaimer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(74, 91, 168, 0.14);
    background: linear-gradient(180deg, rgba(246, 248, 255, 0.96) 0%, rgba(252, 253, 255, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.context-disclaimer .helper-text {
    color: rgba(77, 88, 132, 0.92);
    line-height: 1.5;
}

.context-disclaimer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    flex: 0 0 32px;
    background: rgba(74, 91, 168, 0.1);
    color: var(--primary);
    font-size: 14px;
}

.context-disclaimer-order {
    margin-bottom: 16px;
    border-color: rgba(221, 194, 127, 0.48);
    background: linear-gradient(180deg, rgba(255, 249, 236, 0.96) 0%, rgba(255, 253, 246, 0.98) 100%);
}

.context-disclaimer-order .context-disclaimer-icon {
    background: rgba(221, 194, 127, 0.18);
    color: #a46a15;
}

.context-disclaimer-order .helper-text {
    color: #b27a1a;
    font-weight: 500;
}

.current-avatar-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.current-avatar-preview img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(85, 156, 173, 0.2);
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.table-scroll,
.table-scroll-area {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
    padding-right: 0.2rem;
}

.users-table-shell {
    max-height: calc(100vh - 260px);
}

.audit-modal .modal-body {
    display: flex;
    flex-direction: column;
}

.audit-table-shell {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
}

.audit-modal .modal-scroll-area {
    overflow-y: auto;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .audit-toolbar,
    .audit-toolbar-actions {
        align-items: stretch;
    }

    .audit-toolbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .audit-bulk-resolve-btn {
        width: 100%;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.9rem;
    background: rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    overflow: hidden;
    table-layout: auto;
}

.data-table th,
.data-table td {
    padding: 0.95rem 0.8rem;
    text-align: center;
    border-bottom: 1px solid rgba(85, 156, 173, 0.2);
}

.data-table th {
    background: rgba(255, 255, 255, 0.38);
    color: var(--primary);
    font-weight: 700;
}

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

.inline-form {
    display: inline-flex;
    margin-left: 0.5rem;
}

.checkbox-group {
    align-items: flex-start;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(47, 36, 64, 0.86);
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    min-width: 20px;
    min-height: 20px;
    margin-top: 0.2rem;
}

.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 2rem;
}

.auth-shell {
    width: min(100%, 980px);
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
    gap: 1.5rem;
    align-items: center;
}

.auth-panel {
    padding: 2rem;
}

.login-left {
    max-width: 420px;
    width: 100%;
}

.login-logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.login-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 24px;
}

.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInLogin 0.6s ease-out forwards;
}

@keyframes fadeInLogin {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-description {
    margin-top: 0;
    line-height: 1.4;
}

.login-footer-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.login-version {
    font-size: 12px;
    opacity: 0.6;
}

.login-disclaimer {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    opacity: 0.5;
    text-align: center;
    pointer-events: none;
}

.auth-panel h1 {
    margin: 0.35rem 0 0.75rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: var(--primary);
}

.auth-panel p {
    max-width: 34ch;
}

.modal,
.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(47, 36, 64, 0.42);
    z-index: 1300;
}

.modal.is-open,
.modal-overlay.is-open {
    display: flex;
}

.modal-dialog,
.modal-content {
    position: relative;
    width: min(100%, 1120px);
    height: min(86vh, 860px);
    max-height: 86vh;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    box-shadow: 0 24px 48px rgba(47, 36, 64, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-content.large-modal,
#historyModal .modal-content,
.history-modal.modal-content {
    width: min(1400px, 96vw);
}

.search-history-modal-content {
    width: min(96vw, 1440px);
    max-width: 1440px;
}

.client-orders-history-modal {
    width: min(98vw, 1560px);
    max-width: 1560px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 4.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(85, 156, 173, 0.16);
}

.modal-header h3 {
    margin: 0;
    color: var(--primary);
}

.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close-btn i {
    font-size: 16px;
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.05);
}

.modal-body,
.modal-scroll-area {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

.profile-avatar-modal {
    width: min(100%, 560px);
    height: auto;
    max-height: min(86vh, 720px);
}

.avatar-preview {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #da44a0;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-preview-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    color: var(--white);
    font-size: 3rem;
    font-weight: 700;
}

@media (min-width: 1441px) {
    .sidebar {
        width: 236px;
        flex-basis: 236px;
    }

    .dashboard-main,
    .main-content {
        padding: 1.75rem;
    }

    .content-area,
    .page-content,
    .page-section,
    .responsive-grid {
        gap: 1.75rem;
    }
}

@media (max-width: 1200px) {
    .dashboard-frame {
        padding: 1rem;
    }

    .dashboard-shell,
    .app-layout {
        height: calc(100vh - 2rem);
    }

    .sidebar {
        width: 190px;
        flex-basis: 190px;
        padding: 18px 14px;
        height: 100%;
    }

    .sidebar-logo {
        min-height: 78px;
        height: 78px;
        padding: 10px 12px;
    }

    .sidebar-logo-img {
        max-width: 160px;
        height: 52px;
        max-height: 52px;
    }

    .sidebar-nav {
        gap: 8px;
        margin-top: 1rem;
    }

    .sidebar-link {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .dashboard-main,
    .main-content {
        padding: 16px;
    }

    .content-area,
    .page-content,
    .page-section,
    .responsive-grid {
        gap: 16px;
    }

    .topbar {
        padding: 18px 22px;
        gap: 16px;
    }

    .topbar-title,
    .page-title {
        font-size: clamp(28px, 3vw, 36px);
    }

    .header-actions,
    .topbar-actions {
        gap: 10px;
    }

    .header-datetime .time {
        font-size: 18px;
    }

    .content-card,
    .card {
        padding: 20px;
        border-radius: 20px;
    }

    .order-form-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 1100px) {
    .sidebar {
        width: 164px;
        flex-basis: 164px;
        padding: 16px 10px;
    }

    .sidebar-copy,
    .sidebar-user-copy {
        display: none;
    }

    .sidebar-user-card {
        justify-items: center;
        padding: 0.75rem;
    }

    .sidebar-user-main {
        justify-content: center;
    }

    .sidebar-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sidebar-link {
        justify-content: center;
        padding-inline: 10px;
    }

    .sidebar-link-dot {
        display: none;
    }
}

@media (max-width: 900px) {
    .modal-filters-grid {
        grid-template-columns: 1fr;
    }

    .service-picker-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .service-picker-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(85, 156, 173, 0.16);
        max-height: min(34vh, 280px);
        min-height: 0;
        padding-top: 16px;
        border-radius: 22px 22px 0 0;
    }

    .service-picker-detail {
        padding: 18px;
    }

    .service-picker-form-grid,
    .service-picker-heading {
        grid-template-columns: 1fr;
    }

    .service-compound-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-shell,
    .app-layout {
        display: block;
        height: calc(100vh - 2rem);
    }

    .sidebar {
        display: none;
    }

    .dashboard-main,
    .main-content {
        width: 100%;
        padding: 14px;
        padding-bottom: 80px !important;
        min-height: 0;
    }

    .content-area,
    .page-content {
        padding-bottom: 0 !important;
    }

    .flash-messages,
    .toast-container,
    .alerts-container {
        position: fixed !important;
        top: calc(14px + env(safe-area-inset-top, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(92vw, 420px) !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        pointer-events: none !important;
    }

    .mobile-toast,
    .toast-message,
    .flash-message,
    .alert {
        width: 100% !important;
        min-height: 58px !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0,1fr) 38px !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        box-shadow: 0 12px 30px rgba(38,55,90,.14) !important;
        backdrop-filter: blur(12px) !important;
        pointer-events: auto !important;
        animation: mobileToastIn .22s ease-out both !important;
    }

    .mobile-toast-success,
    .toast-success,
    .alert-success,
    .flash-success {
        background: rgba(234,248,239,.96) !important;
        border: 1px solid rgba(180,230,195,.95) !important;
        color: #166534 !important;
    }

    .mobile-toast-danger,
    .mobile-toast-error,
    .toast-danger,
    .toast-error,
    .alert-danger,
    .flash-error {
        background: rgba(255,241,241,.97) !important;
        border: 1px solid rgba(255,195,195,.95) !important;
        color: #B91C1C !important;
    }

    .mobile-toast-warning,
    .toast-warning,
    .alert-warning,
    .flash-warning {
        background: rgba(255,248,224,.97) !important;
        border: 1px solid rgba(255,226,160,.95) !important;
        color: #9A5B00 !important;
    }

    .mobile-toast-info,
    .toast-info,
    .alert-info,
    .flash-info {
        background: rgba(238,244,255,.97) !important;
        border: 1px solid rgba(200,215,255,.95) !important;
        color: #304A9A !important;
    }

    .mobile-toast-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,.7) !important;
        font-size: 17px !important;
        flex-shrink: 0 !important;
    }

    .mobile-toast-content {
        min-width: 0 !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    .mobile-toast-close,
    .toast-message .btn-close {
        width: 36px !important;
        height: 36px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.7) !important;
        color: inherit !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    @keyframes mobileToastIn {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(.98);
        }

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

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        border-radius: 20px;
        gap: 8px;
        margin-bottom: 1rem;
    }

    .topbar-title,
    .page-title {
        font-size: 24px;
        line-height: 1.1;
    }

    .topbar-subtitle,
    .page-subtitle,
    .topbar-copy p {
        font-size: 12px;
        line-height: 1.35;
        margin-top: 2px;
    }

    .topbar-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .header-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .header-main-button {
        display: block;
        width: 100%;
    }

    .notifications-shell {
        width: auto;
    }

    .notification-button {
        align-self: flex-start;
    }

    .notifications-dropdown {
        position: fixed;
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 92px;
        width: auto;
        max-height: 55vh;
        overflow-y: auto;
        border-radius: 24px;
        z-index: 1001;
    }

    .notification-item {
        display: grid;
        grid-template-columns: 32px 1fr auto;
        gap: 10px;
        align-items: center;
        min-height: 52px;
    }

    .notification-item span,
    .notification-item p,
    .notification-item-copy {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .mobile-bottom-nav {
        display: grid;
    }

    .header-datetime {
        align-items: flex-end;
        min-width: 0;
    }

    .header-datetime .time {
        font-size: 14px;
    }

    .header-datetime .date {
        font-size: 10px;
    }

    .header-main-button .btn,
    .header-main-button > a.btn,
    .header-main-button > button.btn {
        width: 100%;
        min-height: 44px;
    }

    .auth-shell,
    .admin-grid,
    .admin-actions-grid,
    .general-summary-grid,
    .form-grid,
    .cards-grid,
    .dashboard-grid,
    .summary-grid,
    .summary-two-columns,
    .content-area,
    .responsive-grid,
    .responsive-grid.two-cols,
    .responsive-grid.three-cols,
    .two-columns,
    .client-info-grid,
    .order-form-grid,
    .dashboard-hero {
        grid-template-columns: 1fr;
    }

    .section-head,
    .report-alert-head,
    .card-header-row,
    .filter-inline-row,
    .table-card-header,
    .table-card-controls,
    .operation-stat-header,
    .operation-stat-title-row,
    .dashboard-info-row,
    .total-day-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .closure-actions,
    .total-day-actions {
        justify-content: flex-start;
    }

    .total-day-actions,
    .delayed-orders-actions {
        width: 100%;
    }

    .delayed-orders-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        align-items: center;
    }

    .delayed-orders-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .delayed-orders-count-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        text-align: right;
    }

    .delayed-orders-count-label {
        margin-top: 0;
    }

    .delayed-orders-action-desktop {
        display: none !important;
    }

    .delayed-orders-action-mobile-wrap {
        display: block;
        width: 100%;
        margin-top: 18px;
    }

    .delayed-orders-action-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }

    .card-header-row .btn {
        align-self: flex-start;
    }

    .admin-actions-row {
        width: 100%;
        flex-direction: column;
    }

    .modal {
        padding: 1rem;
    }

    .modal-content {
        width: 94vw;
        max-height: 86vh;
    }

    .modal-content.large-modal,
    #historyModal .modal-content,
    .history-modal.modal-content {
        width: 94vw;
    }

    .modal-scroll-area {
        max-height: 65vh;
        overflow-y: auto;
    }

    .modal-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-close-btn {
        top: 12px;
        right: 12px;
    }

    .table-scroll-area {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll-area table,
    .table-wrapper table {
        min-width: 760px;
    }

    .content-card,
    .card {
        padding: 16px;
        border-radius: 22px;
    }

    .info-item {
        padding: 14px;
    }
}

@media (max-height: 800px) {
    .sidebar {
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .sidebar-logo-img {
        max-width: 148px;
        height: 48px;
        max-height: 48px;
    }

    .sidebar-copy {
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .sidebar-nav {
        gap: 6px;
    }

    .sidebar-link {
        padding: 9px 12px;
        font-size: 14px;
        min-height: 42px;
    }

    .sidebar-user-card {
        padding: 10px;
    }

    .sidebar-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .sidebar-logout {
        padding: 8px 10px;
        font-size: 12px;
    }

    .sidebar-user-name,
    .sidebar-user-name .first-name,
    .sidebar-user-name .last-name {
        font-size: 13px;
    }

    .sidebar-user-role {
        font-size: 12px;
    }

    .dashboard-main,
    .main-content {
        padding: 16px;
    }

    .topbar {
        padding: 18px 22px;
        margin-bottom: 16px;
    }

    .topbar-title,
    .page-title {
        font-size: 32px;
        line-height: 1.1;
    }

    .topbar-subtitle,
    .page-subtitle {
        font-size: 14px;
    }

    .content-card,
    .card {
        padding: 18px 20px;
        border-radius: 20px;
    }

    .page-content,
    .content-area,
    .page-section {
        gap: 16px;
    }

    input,
    select,
    textarea {
        min-height: 42px;
        padding: 10px 14px;
    }

    .btn {
        min-height: 42px;
        padding: 10px 18px;
    }
}

@media (max-width: 700px) {
    .actions-dropdown {
        width: 100%;
    }

    .actions-dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    .actions-dropdown-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .order-form-toolbar-actions {
        width: 100%;
    }

    .order-form-toolbar-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .orders-header {
        flex-direction: column;
    }

    .orders-inline-filters {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .orders-quick-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    .orders-inline-filter-form {
        width: 100%;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .filter-group-inline {
        flex: 1 1 100%;
    }

    .filter-group-inline select {
        width: 100%;
    }

    .order-form-grid,
    .client-info-grid,
    .form-grid,
    .third-party-form-grid,
    .third-party-filters,
    .third-party-metrics-grid,
    .responsive-grid.two-cols,
    .responsive-grid.three-cols {
        grid-template-columns: 1fr;
    }

    .third-party-form-card,
    .third-party-list-card,
    .metric-card {
        padding: 16px;
    }

    .order-services-card,
    .service-picker-sidebar,
    .service-picker-detail {
        padding: 16px;
    }

    .form-actions .btn,
    .content-card form .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .client-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .orders-header {
        flex-direction: column;
        gap: 10px;
    }

    .orders-header-left,
    .orders-header-right {
        width: 100%;
        max-width: none;
    }

    .orders-header-right {
        justify-content: flex-start;
    }

    .orders-inline-filters {
        width: 100%;
        justify-content: space-between;
    }

    .orders-quick-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    .orders-inline-filter-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group-inline select,
    .orders-inline-filter-form .filter-btn {
        width: 100%;
        max-width: none;
    }

    .orders-filters-bar,
    .orders-filters-center {
        flex-direction: column;
        align-items: stretch;
    }

    .orders-filters-bar select,
    .orders-filters-bar .btn,
    .orders-filters-center select,
    .orders-filters-center .filter-btn {
        width: 100%;
        max-width: none;
    }
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard-frame {
        padding: 10px;
        min-height: 100vh;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .dashboard-shell,
    .app-layout {
        min-height: calc(100vh - 20px);
        height: auto;
        min-height: calc(100vh - 20px);
        overflow: visible;
    }

    .dashboard-main,
    .main-content {
        min-height: 100vh;
        height: auto;
        padding: 12px;
        padding-bottom: 88px !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page-section,
    .page-content,
    .content-area,
    .responsive-grid,
    .responsive-grid.two-cols,
    .responsive-grid.three-cols,
    .client-info-grid,
    .order-form-grid,
    .order-amounts-row,
    .form-grid,
    .third-party-form-grid,
    .third-party-filters,
    .third-party-metrics-grid,
    .admin-management-grid,
    .admin-sequence-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .page-content,
    .content-area {
        padding-bottom: 96px !important;
        overflow: visible;
    }

    .topbar {
        padding: 14px 14px 16px;
        gap: 10px;
    }

    .topbar-copy,
    .topbar-actions,
    .header-actions,
    .header-main-button {
        width: 100%;
    }

    .header-top-row {
        width: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }

    .header-datetime {
        margin-left: auto;
    }

    .content-card,
    .card,
    .summary-card,
    .general-summary-card,
    .admin-management-card,
    .total-day-card {
        padding: 16px;
        border-radius: 18px;
    }

    .section-head,
    .table-card-header,
    .orders-header,
    .order-services-header-actions,
    .order-form-toolbar,
    .service-compound-toolbar,
    .legacy-order-header,
    .header-orden-antigua {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .section-head .btn,
    .table-card-header .btn,
    .form-actions .btn,
    .order-submit-actions .btn,
    .header-main-button .btn,
    .header-main-button > a.btn,
    .header-main-button > button.btn,
    .order-services-header-actions .btn,
    .service-compound-toolbar .btn,
    .admin-actions-row .btn,
    .summary-actions .btn {
        width: 100%;
    }

    input,
    select,
    textarea,
    button.btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .modal,
    .modal-overlay {
        padding: 12px;
    }

    .modal-dialog,
    .modal-content,
    .large-modal,
    .history-modal.modal-content,
    .order-detail-modal-shell,
    .orders-modal-standard,
    .profile-avatar-modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        height: auto;
        max-height: calc(100vh - 24px);
    }

    .modal-body,
    .modal-scroll-area {
        padding: 14px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .table-scroll-area,
    .table-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll-area table,
    .table-wrapper table,
    .data-table {
        min-width: 720px;
    }

    .data-table th,
    .data-table td {
        padding: 12px 10px;
        font-size: 13px;
    }

    .order-services-table-shell .data-table,
    .service-compound-table-shell .data-table {
        min-width: 640px;
    }

    .service-picker-modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .service-picker-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .service-picker-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(85, 156, 173, 0.16);
        border-radius: 22px 22px 0 0;
        padding: 14px 14px 10px;
        max-height: none;
        background: rgba(248, 239, 246, 0.55);
    }

    .service-picker-list {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 6px;
        scroll-snap-type: x proximity;
    }

    .service-picker-item {
        min-width: 220px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 12px 14px;
    }

    .service-picker-detail {
        padding: 16px;
    }

    .service-picker-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .order-actions-dropdown,
    .actions-dropdown-menu {
        max-width: min(92vw, 280px);
    }

    .mobile-bottom-nav {
        padding-bottom: max(10px, var(--safe-area-bottom));
    }

    .chart-shell {
        min-height: 240px;
    }

    .dashboard-indicators-card .chart-shell,
    .donut-chart-shell {
        min-height: 230px;
    }

    .chart-empty-state {
        min-height: 180px;
        font-size: 13px;
    }

    .reports-chart-shell {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }

    .fab-button {
        pointer-events: auto;
    }
}

@media (max-width: 480px) {
    .dashboard-frame {
        padding: 8px;
    }

    .dashboard-main,
    .main-content {
        min-height: 100vh;
        height: auto;
        padding: 10px;
        padding-bottom: 92px !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .topbar {
        padding: 12px;
        border-radius: 16px;
    }

    .topbar-title,
    .page-title {
        font-size: 22px;
    }

    .topbar-subtitle,
    .page-subtitle,
    .topbar-copy p {
        font-size: 12px;
    }

    .content-card,
    .card,
    .summary-card,
    .general-summary-card,
    .admin-management-card,
    .total-day-card {
        padding: 14px;
        border-radius: 16px;
    }

    .section-title {
        font-size: 1.05rem;
    }

    .section-subtitle,
    .helper-text {
        font-size: 12px;
    }

    .btn {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .auth-page {
        padding: 14px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }

    .auth-panel,
    .login-left {
        max-width: none;
        width: 100%;
        padding: 18px 16px;
    }

    .login-logo {
        margin-bottom: 18px;
    }

    .login-disclaimer {
        position: static;
        transform: none;
        margin-top: 10px;
        opacity: 0.7;
    }

    .table-scroll-area table,
    .table-wrapper table,
    .data-table {
        min-width: 640px;
    }

    .client-search-results,
    .actions-dropdown-menu,
    .order-actions-dropdown {
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
    }

    .service-picker-item {
        min-width: 200px;
    }

    .client-results-modal-card,
    .service-picker-modal,
    .history-modal.modal-content,
    .order-detail-modal-shell {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .client-search-card,
    .client-search-card .form,
    .client-search-card .form-grid,
    .client-search-card .client-search-group,
    .client-search-card .client-search-shell {
        overflow: visible !important;
    }

    .client-search-card .client-search-group {
        position: relative;
        z-index: 60;
    }

    .client-search-card .client-search-results {
        top: calc(100% + 6px);
        max-height: min(34vh, 240px);
        padding: 6px;
        border-radius: 14px;
        z-index: 1300;
    }

    .client-search-card .client-search-result-item {
        padding: 9px 10px;
        gap: 10px;
    }

    .client-search-card .client-search-result-name {
        font-size: 0.9rem;
    }

    .client-search-card .client-search-result-meta {
        gap: 6px;
        font-size: 0.78rem;
    }

    .client-search-card .client-search-result-right {
        flex-shrink: 0;
    }

    .client-search-card .client-dni-pill {
        min-width: 84px;
        padding: 5px 10px;
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .dashboard-frame {
        padding: 6px;
    }

    .dashboard-main,
    .main-content {
        min-height: 100vh;
        height: auto;
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .topbar,
    .content-card,
    .card {
        padding: 12px;
        border-radius: 14px;
    }

    .topbar-title,
    .page-title {
        font-size: 20px;
    }

    .btn,
    input,
    select,
    textarea {
        font-size: 13px;
    }

    .mobile-bottom-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
        padding-inline: 6px;
    }

    .mobile-nav-item {
        font-size: 10px;
    }

    .service-picker-item {
        min-width: 184px;
    }

    .client-dni-pill,
    .legacy-order-tag,
    .pill-chip {
        min-width: 0;
        padding-inline: 10px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .topbar.dashboard-mobile-compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "greeting notifications"
            "title time"
            "cta cta";
        align-items: center;
        gap: 8px 10px;
        padding: 12px 14px;
    }

    .topbar.dashboard-mobile-compact .topbar-copy,
    .topbar.dashboard-mobile-compact .topbar-actions,
    .topbar.dashboard-mobile-compact .header-top-row,
    .topbar.dashboard-mobile-compact .header-main-button {
        display: contents;
    }

    .topbar.dashboard-mobile-compact .topbar-greeting {
        grid-area: greeting;
        margin: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    .topbar.dashboard-mobile-compact .notifications-shell {
        grid-area: notifications;
        justify-self: end;
    }

    .topbar.dashboard-mobile-compact .topbar-title {
        grid-area: title;
        font-size: 18px;
        line-height: 1.2;
    }

    .topbar.dashboard-mobile-compact .topbar-subtitle {
        display: none;
    }

    .topbar.dashboard-mobile-compact .header-datetime {
        grid-area: time;
        justify-self: end;
        text-align: right;
        margin: 0;
    }

    .topbar.dashboard-mobile-compact .header-datetime .time {
        font-size: 14px;
        line-height: 1.2;
    }

    .topbar.dashboard-mobile-compact .header-datetime .date {
        font-size: 11px;
        line-height: 1.2;
    }

    .topbar.dashboard-mobile-compact .header-main-button {
        grid-area: cta;
    }

    .topbar.dashboard-mobile-compact .header-main-button .btn,
    .topbar.dashboard-mobile-compact .header-main-button > a.btn,
    .topbar.dashboard-mobile-compact .header-main-button > button.btn {
        width: 100%;
        min-height: 44px;
        margin-top: 2px;
        border-radius: 12px;
        font-size: 14px;
    }

    .topbar.dashboard-mobile-compact .notification-button {
        width: 38px;
        height: 38px;
    }

    .topbar.dashboard-mobile-compact .notification-badge {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .topbar.dashboard-mobile-compact {
        padding: 12px;
        gap: 7px 8px;
    }

    .topbar.dashboard-mobile-compact .topbar-greeting {
        font-size: 12px;
    }

    .topbar.dashboard-mobile-compact .topbar-title {
        font-size: 18px;
    }
}

.fab-button {
    position: fixed;
    right: 16px;
    bottom: 80px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #e91e63;
    color: #ffffff;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.fab-button.show {
    display: inline-flex;
}

@media (max-width: 768px) {
    .topbar.dashboard-mobile-collapsible {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.96);
        transition: padding 0.3s ease, gap 0.3s ease, box-shadow 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .topbar.dashboard-mobile-collapsible.expanded {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .topbar.dashboard-mobile-collapsible.collapsed {
        padding: 8px 12px;
        gap: 6px 10px;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.1);
    }

    .topbar.dashboard-mobile-collapsible .topbar-greeting {
        transition: opacity 0.2s ease;
    }

    .topbar.dashboard-mobile-collapsible.collapsed .topbar-greeting {
        display: none;
    }

    .topbar.dashboard-mobile-collapsible.collapsed .topbar-title {
        font-size: 16px;
    }

    .topbar.dashboard-mobile-collapsible.collapsed .header-datetime .time {
        font-size: 12px;
    }

    .topbar.dashboard-mobile-collapsible.collapsed .header-main-button .btn,
    .topbar.dashboard-mobile-collapsible.collapsed .header-main-button > a.btn,
    .topbar.dashboard-mobile-collapsible.collapsed .header-main-button > button.btn {
        display: none;
    }

    .topbar.dashboard-mobile-collapsible .header-main-button .btn-nueva-orden,
    .topbar.dashboard-mobile-collapsible .header-main-button > a.btn-nueva-orden {
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
        font-size: 14px;
        margin-top: 8px;
    }

    .fab-button {
        display: none;
    }
}

@media (min-width: 768px) {
    .fab-button {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --mobile-nav-height: 72px;
        --mobile-nav-bottom: 8px;
        --mobile-final-gap: 16px;
    }

    .topbar.has-brand-header-background,
    .mobile-page-header.has-brand-header-background {
        background-image: var(--brand-header-bg-image);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard-main,
    .main-content,
    main,
    .dashboard-content,
    .app-content,
    .dashboard-wrapper,
    .dashboard-page,
    .dashboard-layout,
    .content-wrapper {
        min-height: auto !important;
        height: auto !important;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: calc(
            var(--mobile-nav-height) +
            var(--mobile-nav-bottom) +
            var(--mobile-final-gap)
        ) !important;
        margin-bottom: 0 !important;
    }

    .page-content,
    .content-area {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .dashboard-frame,
    .dashboard-shell,
    .app-layout,
    .dashboard-wrapper,
    .dashboard-page,
    .dashboard-layout {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .bottom-nav,
    .mobile-bottom-nav,
    .bottom-menu {
        height: var(--mobile-nav-height);
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: var(--mobile-nav-bottom);
        z-index: 1000;
    }

    .dashboard-stats,
    .stats-grid,
    .kpi-section,
    .dashboard-kpis,
    .admin-grid,
    .quick-access-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .dashboard-stats > :last-child,
    .stats-grid > :last-child,
    .kpi-section > :last-child,
    .dashboard-kpis > :last-child,
    .admin-grid > :last-child,
    .quick-access-section > :last-child,
    .kpi-card:last-child,
    .dashboard-kpi-card:last-child,
    .metric-card:last-child,
    .stat-card:last-child {
        margin-bottom: 0 !important;
    }

    .bottom-spacer,
    .mobile-spacer,
    .nav-spacer,
    .safe-area-spacer,
    .footer-spacer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main::after,
    .main-content::after,
    .page-content::after,
    .dashboard-content::after,
    .app-content::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
    }

    .card:last-child,
    .dashboard-card:last-child,
    .kpi-card:last-child {
        margin-bottom: 0;
    }

    .mobile-page-header {
        position: sticky;
        top: 8px;
        z-index: 900;
        margin: 8px 0 12px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 24px rgba(38, 55, 90, 0.08);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "greeting notification"
            "title time"
            "subtitle time"
            "cta cta";
        align-items: start;
        gap: 0;
    }

    .mobile-page-header .topbar-copy,
    .mobile-page-header .topbar-actions,
    .mobile-page-header .header-top-row {
        display: contents;
    }

    .mobile-greeting,
    .mobile-header-eyebrow {
        grid-area: greeting;
        margin: 0 0 6px;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 700;
        color: #E02D8A;
    }

    .mobile-page-title {
        grid-area: title;
        margin: 0;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 700;
        color: #304A9A;
        min-width: 0;
    }

    .mobile-header-subtitle {
        grid-area: subtitle;
        margin: 2px 0 0;
        font-size: 11px;
        line-height: 1.2;
        color: #7B7188;
        min-width: 0;
    }

    .mobile-header-notification {
        grid-area: notification;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        margin-top: -2px;
    }

    .mobile-header-time-block {
        grid-area: time;
        flex: 0 0 auto;
        text-align: right;
        margin-top: 2px;
    }

    .mobile-header-time {
        display: block;
        font-size: 13px;
        line-height: 1.1;
        font-weight: 700;
        color: #304A9A;
        white-space: nowrap;
    }

    .mobile-header-date {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.1;
        color: #8B8297;
        white-space: nowrap;
    }

    .mobile-primary-cta-shell {
        grid-area: cta;
    }

    .mobile-primary-cta,
    .btn-nueva-orden,
    .mobile-page-header .header-main-button .btn,
    .mobile-page-header .header-main-button > a.btn,
    .mobile-page-header .header-main-button > button.btn {
        width: 100%;
        min-height: 42px;
        margin-top: 12px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-page-header.is-collapsed {
        padding: 8px 12px;
        min-height: 56px;
        grid-template-areas: "title notification";
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .mobile-page-header.is-collapsed .mobile-header-expanded-only,
    .mobile-page-header.is-collapsed .mobile-header-subtitle,
    .mobile-page-header.is-collapsed .mobile-header-time-block,
    .mobile-page-header.is-collapsed .mobile-primary-cta,
    .mobile-page-header.is-collapsed .btn-nueva-orden,
    .mobile-page-header.is-collapsed .header-main-button {
        display: none !important;
    }

    .mobile-page-header.is-collapsed .mobile-page-title {
        font-size: 17px;
    }

    .mobile-page-header,
    .mobile-page-header .topbar-actions,
    .mobile-page-header .notifications-shell {
        overflow: visible;
    }

    .mobile-page-header .notifications-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        bottom: auto;
        width: min(320px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: min(50vh, 420px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.99);
        border: 1px solid rgba(74, 88, 153, 0.12);
        box-shadow: 0 18px 36px rgba(47, 36, 64, 0.18);
        z-index: 1400;
    }

    .mobile-page-header .notifications-list {
        margin-top: 10px;
    }

    .mobile-page-header .notification-item {
        padding: 12px;
        border-radius: 14px;
    }

    .mobile-page-header .notification-item-copy {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .fab-button {
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 10px);
        pointer-events: auto;
    }

    .card,
    .dashboard-card,
    .quick-card,
    .kpi-card,
    .info-card,
    .content-card,
    .metric-card {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 14px;
        padding: 16px;
    }

    .quick-link-card,
    .quick-card {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: auto;
    }

    .quick-link-card .quick-link-icon,
    .quick-card-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }

    .quick-link-card > div,
    .quick-card-content {
        flex: 1;
        min-width: 0;
    }

    .quick-link-title,
    .quick-card-title {
        font-size: 17px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .quick-link-text,
    .quick-card-description {
        font-size: 14px;
        line-height: 1.35;
    }

    .admin-grid > .metric-card {
        min-height: 72px !important;
        padding: 16px 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .admin-grid > .metric-card .metric-label {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase;
        flex: 1;
    }

    .admin-grid > .metric-card .metric-value {
        margin: 0 !important;
        font-size: 32px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        flex: 0 0 auto;
    }

    .dashboard-hero {
        gap: 12px !important;
    }

    .dashboard-hero .section-header {
        gap: 4px;
        margin-bottom: 0;
    }

    .dashboard-hero .section-subtitle {
        margin-top: 2px;
    }

    .dashboard-user-card {
        padding: 0.7rem 0.9rem;
        border-radius: 18px;
    }

    .dashboard-user-meta {
        gap: 8px;
    }

    .dashboard-user-meta strong {
        font-size: 0.94rem;
    }

    .dashboard-user-meta .divider {
        height: 14px;
    }

    button,
    .btn,
    .button,
    .primary-button,
    .secondary-button {
        min-height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }

    .btn-sm,
    .small-button {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    :root {
        --mobile-nav-height: 72px;
        --mobile-nav-bottom: 8px;
        --mobile-final-gap: 16px;
        --mobile-safe-bottom: var(--safe-area-bottom);
    }

    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }

    .dashboard-frame,
    .dashboard-shell,
    .app-layout,
    .dashboard-wrapper,
    .dashboard-page,
    .dashboard-layout,
    main,
    .dashboard-main,
    .main-content,
    .content-wrapper {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }

    .dashboard-frame,
    .dashboard-shell,
    .app-layout {
        min-height: 100dvh !important;
    }

    .dashboard-main,
    .main-content {
        overflow: hidden !important;
        padding: 12px 12px 0 !important;
    }

    .page-content,
    .content-area,
    .dashboard-content,
    .app-content {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 1 1 auto !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
        gap: 12px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: calc(
            var(--mobile-nav-height) +
            var(--mobile-nav-bottom) +
            var(--mobile-final-gap) +
            var(--mobile-safe-bottom)
        ) !important;
        margin-bottom: 0 !important;
    }

    .page-content > *,
    .content-area > * {
        min-width: 0;
    }

    .bottom-spacer,
    .mobile-spacer,
    .nav-spacer,
    .safe-area-spacer,
    .footer-spacer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    main::after,
    .main-content::after,
    .page-content::after,
    .dashboard-content::after,
    .app-content::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
    }

    .mobile-page-header {
        position: sticky;
        top: 8px;
        z-index: 900;
        margin: 8px 0 12px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 24px rgba(38, 55, 90, 0.08);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "greeting notification"
            "title time"
            "subtitle time"
            "cta cta";
        align-items: start;
        gap: 0;
        transition: padding 0.24s ease, border-radius 0.24s ease, box-shadow 0.24s ease;
        overflow: visible !important;
    }

    .mobile-page-header .topbar-copy,
    .mobile-page-header .topbar-actions,
    .mobile-page-header .header-main-button,
    .mobile-page-header .mobile-header-top-row {
        display: contents !important;
    }

    .mobile-title-inline {
        grid-area: title;
        display: flex;
        align-items: flex-start;
        gap: 0;
        min-width: 0;
    }

    .mobile-greeting,
    .mobile-header-eyebrow {
        grid-area: greeting;
        margin: 0 0 6px;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 700;
        color: #E02D8A;
    }

    .mobile-page-title {
        margin: 0;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 700;
        color: #304A9A;
        min-width: 0;
        flex: 1;
    }

    .mobile-header-subtitle {
        grid-area: subtitle;
        margin: 2px 0 0;
        font-size: 11px;
        line-height: 1.2;
        color: #7B7188;
        min-width: 0;
    }

    .mobile-header-time-block {
        grid-area: time;
        flex: 0 0 auto;
        text-align: right;
        margin-top: 2px;
    }

    .mobile-header-time {
        display: block;
        font-size: 13px;
        line-height: 1.1;
        font-weight: 700;
        color: #304A9A;
        white-space: nowrap;
    }

    .mobile-header-date {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.1;
        color: #8B8297;
        white-space: nowrap;
    }

    .mobile-header-notification {
        grid-area: notification;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: -2px;
    }

    .mobile-page-header .notification-button {
        width: 40px;
        height: 40px;
    }

    .mobile-primary-cta-shell {
        grid-area: cta;
    }

    .mobile-primary-cta,
    .btn-nueva-orden,
    .mobile-page-header .header-main-button .btn,
    .mobile-page-header .header-main-button > a.btn,
    .mobile-page-header .header-main-button > button.btn {
        width: 100%;
        min-height: 42px;
        margin-top: 12px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-header-menu-btn {
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        color: #304A9A;
        font-size: 24px;
        display: none;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        margin: -8px 0 0 -8px;
    }

    .mobile-page-header.is-collapsed {
        padding: 8px 12px;
        min-height: 56px;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.14);
        grid-template-areas:
            "title notification";
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .mobile-page-header.is-collapsed .mobile-greeting,
    .mobile-page-header.is-collapsed .mobile-header-subtitle,
    .mobile-page-header.is-collapsed .mobile-header-time-block,
    .mobile-page-header.is-collapsed .mobile-primary-cta,
    .mobile-page-header.is-collapsed .btn-nueva-orden,
    .mobile-page-header.is-collapsed .header-main-button {
        display: none !important;
    }

    .mobile-page-header.is-collapsed .mobile-page-title {
        font-size: 17px;
    }

    .mobile-page-header.is-collapsed .mobile-title-inline {
        align-items: center;
        gap: 8px;
    }

    .mobile-page-header.is-collapsed .mobile-header-menu-btn {
        display: inline-flex;
    }

    .mobile-page-header .notifications-shell,
    .mobile-page-header .notifications-dropdown {
        overflow: visible;
    }

    .mobile-page-header .notifications-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        width: min(320px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: min(50vh, 420px);
        overflow-y: auto;
        border-radius: 18px;
        z-index: 1400;
    }

    .mobile-fab-new-order {
        position: fixed;
        right: 18px;
        bottom: calc(72px + 24px + env(safe-area-inset-bottom, 0px));
        width: 56px;
        height: 56px;
        border-radius: 999px;
        border: 0;
        background: #4A5BA8;
        color: #fff;
        font-size: 32px;
        line-height: 1;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        box-shadow: 0 10px 24px rgba(38, 55, 90, 0.24);
    }

    .mobile-fab-new-order.is-visible {
        display: flex;
    }

    .bottom-nav,
    .mobile-bottom-nav,
    .bottom-menu {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(var(--mobile-nav-bottom) + var(--mobile-safe-bottom));
        height: var(--mobile-nav-height);
        z-index: 1000;
    }

    .admin-grid > .metric-card {
        min-height: 68px !important;
        padding: 14px 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .admin-grid > .metric-card .metric-label {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase;
        flex: 1;
    }

    .admin-grid > .metric-card .metric-value {
        margin: 0 !important;
        font-size: 32px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        flex: 0 0 auto;
    }

    .card,
    .dashboard-card,
    .quick-card,
    .info-card,
    .content-card {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-radius: 14px;
    }

    .quick-link-card,
    .quick-card {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: auto;
    }

    .quick-link-card .quick-link-icon,
    .quick-card-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }

    .quick-link-card > div,
    .quick-card-content {
        flex: 1;
        min-width: 0;
    }

    .quick-link-title,
    .quick-card-title {
        font-size: 17px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .quick-link-text,
    .quick-card-description {
        font-size: 14px;
        line-height: 1.35;
    }

    button,
    .btn,
    .button,
    .primary-button,
    .secondary-button {
        min-height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }

    .btn-sm,
    .small-button {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .autocomplete-wrapper,
    .search-wrapper,
    .input-search-wrapper {
        position: relative;
        overflow: visible !important;
    }

    .autocomplete-dropdown,
    .autocomplete-results,
    .search-suggestions {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 9999;
        max-height: 240px;
        overflow-y: auto;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .mobile-stack {
        display: grid;
        gap: 12px;
    }

    .mobile-section {
        display: grid;
        gap: 16px;
        margin-bottom: 24px;
    }

    .mobile-card,
    .mobile-list-item,
    .mobile-order-card,
    .mobile-payment-item,
    .mobile-expense-item,
    .mobile-summary-card,
    .mobile-movement-item {
        display: grid;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06);
    }

    .mobile-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-quick-actions,
    .mobile-bottom-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .mobile-bottom-actions > * {
        flex: 1 1 140px;
    }

    .mobile-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-filter-sheet {
        display: grid;
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(210, 225, 235, 0.9);
    }

    .mobile-empty-state {
        display: grid;
        gap: 6px;
        justify-items: start;
        padding: 16px;
        border-radius: 14px;
        background: rgba(248, 245, 255, 0.72);
        border: 1px dashed rgba(74, 91, 168, 0.22);
        color: #6f6780;
        text-align: left;
    }

    .modal-filters-grid,
    .history-filters,
    .orders-total-filters,
    .dashboard-delayed-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .modal-filters-grid .filter-group,
    .history-filters .filter-group,
    .modal-filters-grid .history-filter-group,
    .history-filters .history-filter-group {
        min-width: 0;
    }

    .modal-filters-grid .btn,
    .history-filters .btn {
        width: 100%;
    }

    .table-wrapper,
    .table-scroll-area {
        overflow: visible !important;
    }

    .data-table.mobile-card-table,
    .data-table.mobile-card-table thead,
    .data-table.mobile-card-table tbody,
    .data-table.mobile-card-table tr,
    .data-table.mobile-card-table th,
    .data-table.mobile-card-table td {
        display: block;
        width: 100%;
    }

    .data-table.mobile-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .data-table.mobile-card-table tbody {
        display: grid;
        gap: 12px;
    }

    .data-table.mobile-card-table tbody tr {
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06);
    }

    .data-table.mobile-card-table tbody td {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 10px;
        min-width: 0;
    }

    .data-table.mobile-card-table tbody td:last-child {
        margin-bottom: 0;
    }

    .data-table.mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8b8297;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--primary {
        font-size: 15px;
        font-weight: 700;
        color: #304A9A;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--primary .pill-chip,
    .data-table.mobile-card-table tbody td.mobile-cell--primary strong {
        font-size: 15px;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--amount {
        font-weight: 700;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .data-table.mobile-card-table tbody td.mobile-cell--amount .pill-chip {
        display: inline-flex;
        width: auto;
        max-width: 100%;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action {
        margin-top: 4px;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action::before {
        margin-bottom: 8px;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action > *,
    .data-table.mobile-card-table tbody td.mobile-cell--action .action-cell,
    .data-table.mobile-card-table tbody td.mobile-cell--action form {
        width: 100%;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action button.btn {
        width: 100%;
        justify-content: center;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action .order-actions-dropdown-toggle,
    .data-table.mobile-card-table tbody td.mobile-cell--action .actions-dropdown-toggle {
        width: 44px !important;
    }

    .data-table.mobile-card-table tbody td .actions-dropdown-menu {
        right: 0;
        left: auto;
    }

    .clients-table-search,
    .summary-orders-modal-search,
    .client-search-group,
    .filter-group {
        width: 100%;
        max-width: none;
    }

    .history-modal .modal-body,
    .large-modal .modal-body,
    .order-detail-modal-body,
    .client-results-modal-body {
        padding: 14px !important;
    }

.history-modal .modal-header,
.large-modal .modal-header {
        padding: 14px 14px 0 !important;
    }
}

@media (max-width: 1100px) {
    .search-history-modal-content .history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .mobile-fab-new-order {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .search-history-modal-content .history-filters {
        grid-template-columns: 1fr;
    }

    .search-history-modal-content .search-history-filter-actions .btn {
        width: 100%;
        min-width: 0;
    }

    main,
    .main-content,
    .page-content,
    .orders-page,
    .orders-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    .card,
    .dashboard-card,
    .orders-card {
        max-width: 100%;
        overflow: hidden;
    }

    .orders-pending-desktop-table,
    .orders-total-desktop-table {
        display: none !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .mobile-order-card {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06);
        overflow: hidden;
    }

    .mobile-order-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }

    .mobile-order-code {
        min-width: 0;
        font-size: 16px;
        font-weight: 700;
        color: #304A9A;
        line-height: 1.2;
        word-break: break-word;
    }

    .mobile-order-status {
        flex: 0 0 auto;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-order-body {
        display: grid;
        gap: 6px;
    }

    .mobile-order-line {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        font-size: 13px;
        line-height: 1.3;
    }

    .mobile-order-label {
        color: #7B7188;
        flex: 0 0 auto;
    }

    .mobile-order-value {
        color: #2F3260;
        font-weight: 700;
        text-align: right;
        word-break: break-word;
        min-width: 0;
    }

    .mobile-order-value .pill-chip {
        max-width: 100%;
    }

    .mobile-order-actions {
        margin-top: 12px;
    }

    .mobile-order-actions .btn,
    .mobile-order-actions button,
    .mobile-order-actions a {
        width: 100%;
        min-height: 40px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .orders-total-mobile-list .mobile-order-card-airy {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07);
        overflow: hidden;
        gap: 0;
    }

    .orders-total-mobile-list .mobile-order-header,
    .orders-total-mobile-list .mobile-order-card-airy .mobile-order-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 0;
    }

    .orders-total-mobile-list .mobile-order-code {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        word-break: break-word;
    }

    .orders-total-mobile-list .mobile-order-summary-topline,
    .orders-total-mobile-list .mobile-order-subline {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    .orders-total-mobile-list .mobile-order-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .orders-total-mobile-list .mobile-status-pill,
    .orders-total-mobile-list .mobile-order-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .orders-total-mobile-list .mobile-order-client-box {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin: 12px 0;
        border-radius: 16px;
        background: #F4F3FF;
    }

    .orders-total-mobile-list .mobile-order-client-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .orders-total-mobile-list .mobile-order-client-info {
        min-width: 0;
        flex: 1;
    }

    .orders-total-mobile-list .mobile-order-client-info strong {
        display: block;
        font-size: 16px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    .orders-total-mobile-list .mobile-order-client-info span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    .orders-total-mobile-list .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .orders-total-mobile-list .mobile-order-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210, 225, 235, 0.8);
    }

    .orders-total-mobile-list .mobile-order-metric-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .orders-total-mobile-list .metric-total {
        background: #E8F1FF;
        color: #2563EB;
    }

    .orders-total-mobile-list .metric-debt {
        background: #FFF1D6;
        color: #F97316;
    }

    .orders-total-mobile-list .metric-payment {
        background: #E2FBEA;
        color: #16A34A;
    }

    .orders-total-mobile-list .mobile-order-metric span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 4px;
    }

    .orders-total-mobile-list .mobile-order-metric strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        color: #1F2A5A;
        font-weight: 600;
        word-break: break-word;
    }

    .orders-total-mobile-list .mobile-order-footer,
    .orders-total-mobile-list .mobile-order-actions {
        margin-top: 12px;
    }

    .orders-total-mobile-list .mobile-order-detail-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
    }

    .orders-pending-mobile-list .mobile-order-card-airy {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07);
        overflow: hidden;
        gap: 0;
    }

    .orders-pending-mobile-list .mobile-order-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 0;
    }

    .orders-pending-mobile-list .mobile-order-card-airy .mobile-order-code {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        word-break: break-word;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .orders-pending-mobile-list .mobile-order-summary-topline,
    .orders-pending-mobile-list .mobile-order-subline {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    .orders-pending-mobile-list .mobile-status-pill,
    .orders-pending-mobile-list .mobile-order-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .orders-pending-mobile-list .mobile-order-client-box {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin: 12px 0;
        border-radius: 16px;
        background: #F4F3FF;
    }

    .orders-pending-mobile-list .mobile-order-client-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .orders-pending-mobile-list .mobile-order-client-info {
        min-width: 0;
        flex: 1;
    }

    .orders-pending-mobile-list .mobile-order-client-info strong {
        display: block;
        font-size: 16px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    .orders-pending-mobile-list .mobile-order-client-info span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    .orders-pending-mobile-list .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .orders-pending-mobile-list .mobile-order-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210, 225, 235, 0.8);
    }

    .orders-pending-mobile-list .mobile-order-metric-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .orders-pending-mobile-list .metric-total {
        background: #E8F1FF;
        color: #2563EB;
    }

    .orders-pending-mobile-list .metric-debt {
        background: #FFF1D6;
        color: #F97316;
    }

    .orders-pending-mobile-list .metric-debt-paid,
    .orders-pending-mobile-list .metric-payment {
        background: #E2FBEA;
        color: #16A34A;
    }

    .orders-pending-mobile-list .metric-payment-pending {
        background: #FFF1D6;
        color: #F97316;
    }

    .orders-pending-mobile-list .mobile-order-metric span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 4px;
    }

    .orders-pending-mobile-list .mobile-order-metric strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        color: #1F2A5A;
        font-weight: 700;
        word-break: break-word;
    }

    .orders-pending-mobile-list .mobile-order-payment,
    .orders-pending-mobile-list .mobile-order-meta,
    .orders-pending-mobile-list .mobile-order-card-airy > .mobile-order-body:last-of-type,
    .orders-pending-mobile-list .mobile-order-subline {
        display: none !important;
    }

    .orders-pending-mobile-list .mobile-order-detail-btn,
    .orders-pending-mobile-list .mobile-order-actions .orders-detail-action-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        margin-top: 12px;
    }

    .orders-pending-mobile-list .mobile-order-card {
        border-radius: 18px;
        box-shadow: 0 6px 16px rgba(38, 55, 90, 0.07);
    }

    .orders-pending-mobile-list .mobile-order-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .orders-pending-mobile-list .mobile-order-code {
        min-width: 0;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
        color: #304A9A;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .orders-pending-mobile-list .mobile-status-pill,
    .orders-pending-mobile-list .mobile-order-status {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .orders-pending-mobile-list .mobile-order-client {
        font-size: 18px;
        line-height: 1.2;
        font-weight: 700;
        color: #2F3260;
        margin-bottom: 4px;
    }

    .orders-pending-mobile-list .mobile-order-subline {
        font-size: 13px;
        line-height: 1.3;
        color: #776F86;
        margin-bottom: 12px;
    }

    .orders-pending-mobile-list .mobile-order-money-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 12px 0;
    }

    .orders-pending-mobile-list .mobile-money-box {
        padding: 10px 12px;
        border-radius: 14px;
        background: #F7F8FF;
        border: 1px solid rgba(210, 225, 235, 0.8);
    }

    .orders-pending-mobile-list .mobile-money-box span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #7B7188;
        margin-bottom: 4px;
    }

    .orders-pending-mobile-list .mobile-money-box strong {
        display: block;
        font-size: 16px;
        line-height: 1.1;
        color: #304A9A;
    }

    .orders-pending-mobile-list .mobile-money-box.is-debt {
        background: #FFF7EA;
    }

    .orders-pending-mobile-list .mobile-money-box.is-debt strong {
        color: #A85B00;
    }

    .orders-pending-mobile-list .mobile-order-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 10px 0;
        font-size: 12px;
        line-height: 1.2;
        color: #7B7188;
    }

    .orders-pending-mobile-list .mobile-order-meta span {
        padding: 5px 8px;
        border-radius: 999px;
        background: #F4F5FB;
    }

    .orders-pending-mobile-list .mobile-order-payment {
        margin: 8px 0 12px;
    }

    .orders-pending-mobile-list .mobile-order-body,
    .orders-pending-mobile-list .mobile-order-summary-topline {
        display: none;
    }

    .orders-pending-mobile-list .mobile-order-actions {
        margin-top: 0;
    }

    .orders-pending-mobile-list .mobile-order-actions .btn,
    .orders-pending-mobile-list .mobile-order-actions a,
    .orders-pending-mobile-list .mobile-order-actions button {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    html,
    body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    main,
    .main-content,
    .page-content,
    .app-content,
    .dashboard-content,
    .content-area,
    .content-wrapper,
    .dashboard-wrapper,
    .dashboard-layout,
    .dashboard-page {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-page-header {
        position: static !important;
        top: auto !important;
        background: rgba(255, 255, 255, 0.96) !important;
        transition: transform 0.18s ease, opacity 0.18s ease !important;
        transform: translateZ(0);
        will-change: transform;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .mobile-page-header .header-main-button,
    .mobile-page-header .mobile-primary-cta-shell {
        display: block !important;
        grid-area: cta !important;
        width: 100% !important;
    }

    .mobile-page-header .header-main-button .btn,
    .mobile-page-header .header-main-button > a.btn,
    .mobile-page-header .header-main-button > button.btn,
    .mobile-page-header .mobile-primary-cta,
    .mobile-page-header .btn-nueva-orden {
        display: inline-flex !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .mobile-page-header.is-collapsed {
        transform: translateY(0);
        padding: 14px !important;
        min-height: auto !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .mobile-page-header,
    .bottom-nav,
    .mobile-bottom-nav,
    .bottom-menu,
    .card,
    .dashboard-card,
    .mobile-card {
        transition-property: transform, opacity, background-color, border-color !important;
    }

    .bottom-nav,
    .mobile-bottom-nav,
    .bottom-menu {
        position: fixed;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .mobile-fab-new-order {
        bottom: calc(
            var(--mobile-nav-height) +
            42px +
            env(safe-area-inset-bottom, 0px)
        ) !important;
        background: rgba(74, 91, 168, 0.98) !important;
        transform: translateZ(0);
        will-change: transform, opacity;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        display: none !important;
    }

    .card,
    .dashboard-card,
    .mobile-card,
    .mobile-order-card,
    .quick-card,
    .info-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .table-card-header.card-header-row,
    .general-summary-card-actions,
    .third-party-action-area,
    .delayed-orders-actions {
        width: 100%;
    }

    .orders-secondary-action-btn,
    .dashboard-card-primary-action,
    .general-summary-card-actions .btn,
    .third-party-action-area .btn,
    .delayed-orders-actions .btn {
        display: inline-flex !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .notifications-shell,
    .notifications-dropdown,
    .table-wrapper,
    .table-scroll-area {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 767px) {
    .orders-filter-row,
    .mobile-filter-row,
    .filter-inline-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 10px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    .orders-filter-field,
    .mobile-filter-field,
    .filter-field {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .orders-filter-field select,
    .mobile-filter-field select,
    .filter-field select {
        width: 100% !important;
    }

    .orders-filter-button,
    .mobile-filter-button,
    .filter-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        background: #fff !important;
        color: #5AA6B8 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .register-order-card,
    .order-entry-card,
    .page-section,
    .content-area {
        overflow: visible !important;
    }

    .actions-dropdown,
    .more-actions-wrapper,
    .mobile-more-actions,
    .actions-dropdown-wrapper {
        position: relative !important;
        z-index: 1200 !important;
        overflow: visible !important;
    }

    .actions-dropdown-menu,
    .more-actions-menu,
    .mobile-more-actions-menu,
    .actions-dropdown-wrapper .actions-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1300 !important;
        min-width: 0 !important;
        background: #fff !important;
        border-radius: 14px !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 12px 28px rgba(38, 55, 90, 0.18) !important;
        overflow: hidden !important;
    }

    .register-order-card.dropdown-open,
    .order-entry-card.dropdown-open {
        position: relative !important;
        z-index: 1100 !important;
        overflow: visible !important;
    }

    .client-data-card,
    .dashboard-card,
    .info-card {
        position: relative;
        z-index: 1;
    }

    .total-orders-section .mobile-view-all-button {
        margin-bottom: 16px !important;
    }

    .modal-dialog.all-orders-modal-content,
    .all-orders-modal-content {
        height: 88vh !important;
        max-height: 88vh !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .all-orders-modal-content > .modal-header,
    .all-orders-modal-content > .all-orders-modal-header {
        flex: 0 0 auto !important;
    }

    .all-orders-modal-content > .modal-body,
    .all-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px !important;
    }

    .all-orders-mobile-results {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .all-orders-mobile-results > *:last-child {
        margin-bottom: 0 !important;
    }

    #allOrdersModal,
    .all-orders-modal-overlay {
        z-index: 2000 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    #allOrdersModal .all-orders-modal,
    #allOrdersModal .all-orders-modal-content,
    #allOrdersModal .modal-orders-wide {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: min(88vh, 760px) !important;
        max-height: 88vh !important;
        margin: 0 !important;
        border-radius: 24px 24px 18px 18px !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 2001 !important;
    }

    #allOrdersModal .all-orders-modal-header,
    #allOrdersModal .modal-header {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 16px 10px !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.7);
    }

    #allOrdersModal .all-orders-modal-header h3,
    #allOrdersModal .all-orders-modal-title {
        margin: 0;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 700;
        color: #304A9A;
    }

    #allOrdersModal .all-orders-modal-close,
    #allOrdersModal .modal-close-btn {
        width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 999px;
        border: 0;
        background: #F4F5FB;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        padding: 0;
    }

    #allOrdersModal .all-orders-modal-body,
    #allOrdersModal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 18px !important;
        display: block !important;
    }

    #allOrdersModal .all-orders-filter-form,
    #allOrdersModal .orders-total-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    #allOrdersModal .orders-filter-search {
        grid-column: 1 / -1 !important;
    }

    #allOrdersModal .orders-filter-actions {
        grid-column: 1 / -1 !important;
        display: block !important;
    }

    #allOrdersModal .all-orders-filter-form label,
    #allOrdersModal .orders-total-filters label {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 700;
        color: #8B82A0;
    }

    #allOrdersModal .all-orders-filter-form input,
    #allOrdersModal .all-orders-filter-form select,
    #allOrdersModal .orders-total-filters input,
    #allOrdersModal .orders-total-filters select {
        width: 100%;
        min-height: 42px;
        border-radius: 12px;
        font-size: 13px;
        padding: 9px 12px;
        box-sizing: border-box;
    }

    #allOrdersModal .orders-filter-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    #allOrdersModal .modal-search-autocomplete {
        position: relative;
        overflow: visible !important;
        z-index: 30;
    }

    #allOrdersModal .modal-smart-search-input {
        width: 100%;
    }

    #allOrdersModal .modal-search-suggestions {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 9999;
        max-height: 220px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.95);
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(38, 55, 90, 0.16);
        padding: 6px;
    }

    #allOrdersModal .modal-search-suggestion-item {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 10px 12px;
        border-radius: 10px;
        text-align: left;
        display: grid;
        gap: 2px;
    }

    #allOrdersModal .modal-search-suggestion-item:active,
    #allOrdersModal .modal-search-suggestion-item:hover {
        background: #F4F3FF;
    }

    #allOrdersModal .modal-search-suggestion-title {
        font-size: 13px;
        font-weight: 700;
        color: #304A9A;
    }

    #allOrdersModal .modal-search-suggestion-meta {
        font-size: 12px;
        color: #6F6A7F;
    }

    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .orders-total-table-shell,
    .all-orders-modal-content table,
    .all-orders-modal-content .desktop-table,
    .all-orders-modal-content .desktop-results,
    .all-orders-modal-content .bottom-spacer,
    .all-orders-modal-content .mobile-spacer,
    .all-orders-modal-content .footer-spacer,
    #allOrdersModal .orders-total-table-shell table,
    #allOrdersModal .orders-total-table-shell thead,
    #allOrdersModal .orders-total-table-shell tbody {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 0 12px !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-card-airy,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card-airy {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07);
        overflow: hidden;
        gap: 0;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-header,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 0;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-code,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-code {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        word-break: break-word;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-subline,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-subline {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-status-pill,
    #allOrdersModal .orders-modal-results-mobile .mobile-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-client-box,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-box {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin: 12px 0;
        border-radius: 16px;
        background: #F4F3FF;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-client-icon,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-client-info,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-info {
        min-width: 0;
        flex: 1;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-client-info strong,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-info strong {
        display: block;
        font-size: 16px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-client-info span,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-info span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-metrics-grid,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-metric,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210, 225, 235, 0.8);
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-metric-icon,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    #allOrdersModal .all-orders-mobile-results .metric-total,
    #allOrdersModal .orders-modal-results-mobile .metric-total {
        background: #E8F1FF;
        color: #2563EB;
    }

    #allOrdersModal .all-orders-mobile-results .metric-debt,
    #allOrdersModal .orders-modal-results-mobile .metric-debt {
        background: #FFF1D6;
        color: #F97316;
    }

    #allOrdersModal .all-orders-mobile-results .metric-payment,
    #allOrdersModal .orders-modal-results-mobile .metric-payment {
        background: #E2FBEA;
        color: #16A34A;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-metric span,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 4px;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-metric strong,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        color: #1F2A5A;
        font-weight: 700;
        word-break: break-word;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-detail-btn,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-detail-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        background: #4A5BA8;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    #allOrdersModal .all-orders-modal-body::after,
    #allOrdersModal .modal-body::after,
    .all-orders-modal-body::after,
    #allOrdersModal .all-orders-mobile-results::after,
    #allOrdersModal .orders-modal-results-mobile::after,
    .all-orders-mobile-results::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
    }

    #allOrdersModal .all-orders-modal-body > .all-orders-desktop-results,
    #allOrdersModal .all-orders-modal-body > .orders-total-table-shell {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
    }

    .all-orders-modal-content .history-empty-state {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    #otherPendingOrdersModal,
    .other-pending-orders-modal-overlay {
        z-index: 2000 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    #otherPendingOrdersModal .modal-dialog,
    #otherPendingOrdersModal .pending-orders-modal,
    #otherPendingOrdersModal .pending-orders-modal-content {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 88vh !important;
        max-height: 88vh !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 24px 24px 18px 18px !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 2001 !important;
    }

    #otherPendingOrdersModal .modal-header,
    #otherPendingOrdersModal .pending-orders-modal-header {
        flex: 0 0 auto !important;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 16px 10px !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.7);
    }

    #otherPendingOrdersModal .modal-header h3,
    #otherPendingOrdersModal .pending-orders-modal-title {
        margin: 0;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 700;
        color: #304A9A;
    }

    #otherPendingOrdersModal .modal-close-btn,
    #otherPendingOrdersModal .pending-orders-modal-close {
        width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 999px;
        border: 0;
        background: #F4F5FB;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        padding: 0;
    }

    #otherPendingOrdersModal .modal-body,
    #otherPendingOrdersModal .pending-orders-modal-body,
    #otherPendingOrdersModal .delayed-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 18px !important;
        display: block !important;
    }

    #otherPendingOrdersModal .pending-orders-filter-form,
    #otherPendingOrdersModal .pending-other-filters,
    #otherPendingOrdersModal .modal-filter-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px !important;
    }

    #otherPendingOrdersModal .filter-search,
    #otherPendingOrdersModal .modal-search-autocomplete,
    #otherPendingOrdersModal .pending-other-filter-search {
        grid-column: 1 / -1;
    }

    #otherPendingOrdersModal .filter-full,
    #otherPendingOrdersModal .filter-laundry,
    #otherPendingOrdersModal .pending-other-filter-laundry {
        grid-column: 1 / -1;
    }

    #otherPendingOrdersModal label {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 700;
        color: #8B82A0;
    }

    #otherPendingOrdersModal input,
    #otherPendingOrdersModal select {
        width: 100%;
        min-height: 42px;
        border-radius: 12px;
        font-size: 13px;
        padding: 9px 12px;
        box-sizing: border-box;
    }

    #otherPendingOrdersModal .pending-other-filter-actions,
    #otherPendingOrdersModal .pending-orders-clear-btn {
        grid-column: 1 / -1;
    }

    #otherPendingOrdersModal .clear-filters-btn,
    #otherPendingOrdersModal .pending-orders-clear-btn {
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 16px !important;
    }

    #otherPendingOrdersModal .modal-search-autocomplete {
        position: relative;
        overflow: visible !important;
        z-index: 30;
    }

    #otherPendingOrdersModal .modal-search-suggestions {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 9999;
        max-height: 220px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.95);
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(38, 55, 90, 0.16);
        padding: 6px;
    }

    #otherPendingOrdersModal .modal-search-suggestion-item {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 10px 12px;
        border-radius: 10px;
        text-align: left;
        display: grid;
        gap: 2px;
    }

    #otherPendingOrdersModal .modal-search-suggestion-item:active,
    #otherPendingOrdersModal .modal-search-suggestion-item:hover {
        background: #F4F3FF;
    }

    #otherPendingOrdersModal .modal-search-suggestion-title {
        font-size: 13px;
        font-weight: 700;
        color: #304A9A;
    }

    #otherPendingOrdersModal .modal-search-suggestion-meta {
        font-size: 12px;
        color: #6F6A7F;
    }

    #otherPendingOrdersModal table,
    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .desktop-table,
    #otherPendingOrdersModal .desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results[style] {
        display: flex !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results > :last-child {
        margin-bottom: 0 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card-airy {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07);
        overflow: hidden;
        gap: 0;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 0;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-code {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        word-break: break-word;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-subline {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-box {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin: 12px 0;
        border-radius: 16px;
        background: #F4F3FF;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-info {
        min-width: 0;
        flex: 1;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-info strong {
        display: block;
        font-size: 16px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-info span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210, 225, 235, 0.8);
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 4px;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        color: #1F2A5A;
        font-weight: 700;
        word-break: break-word;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-detail-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        background: #4A5BA8;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    #otherPendingOrdersModal .bottom-spacer,
    #otherPendingOrdersModal .mobile-spacer,
    #otherPendingOrdersModal .nav-spacer,
    #otherPendingOrdersModal .footer-spacer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #otherPendingOrdersModal .modal-body::after,
    #otherPendingOrdersModal .pending-orders-mobile-results::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
    }

    #allOrdersModal .history-empty-state {
        flex: 0 0 auto;
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    #allOrdersModal .all-orders-filter-form,
    #allOrdersModal .orders-total-filters {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .register-order-card .actions-dropdown,
    .register-order-card .more-actions-wrapper,
    .register-order-card .mobile-more-actions,
    .register-order-card .actions-dropdown-wrapper {
        margin-bottom: 16px !important;
    }

    .register-order-card .client-search-group,
    .register-order-card .client-dni-field,
    .register-order-card .dni-field,
    .register-order-card .client-search-field {
        margin-top: 0 !important;
    }

    .order-services-card,
    .services-added-card,
    .order-services-section,
    .services-section-card,
    .mobile-services-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .order-services-card .table-card-header {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .order-services-card .order-services-header-actions,
    .order-services-card .services-added-header-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .order-services-card .order-services-header-actions .btn,
    .order-services-card .add-service-btn,
    .order-services-card .mobile-add-service-btn,
    .order-services-card .btn-add-service {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        margin: 12px 0 14px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .order-services-card .order-services-table,
    .order-services-card .services-table,
    .order-services-card .services-added-table,
    .order-services-card .table-scroll-area {
        display: none !important;
    }

    .mobile-services-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mobile-empty-services {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px dashed rgba(190, 220, 230, 0.95);
        color: #7B7188;
        font-size: 13px;
        line-height: 1.35;
        text-align: center;
    }

    .mobile-service-card {
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 16px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.06) !important;
        overflow: hidden !important;
    }

    .mobile-service-card-top {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    .mobile-service-icon {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        background: #F4F3FF;
        color: #4A5BA8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex: 0 0 32px;
    }

    .mobile-service-card-top strong,
    .mobile-service-name {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
        color: #304A9A;
    }

    .mobile-service-card-top span,
    .mobile-service-subtotal {
        flex: 0 0 auto;
        max-width: 88px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
        color: #2F3260;
        white-space: nowrap;
        text-align: right;
    }

    .mobile-service-card-detail {
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 1.35;
        color: #7B7188;
    }

    .mobile-service-card-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 10px;
    }

    .mobile-service-card-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        padding: 5px 8px;
        border-radius: 999px;
        background: #F4F5FB;
        color: #6F6A7F;
        font-size: 12px;
        line-height: 1.2;
    }

    .mobile-service-card-meta span i {
        color: #4A5BA8;
        font-size: 11px;
    }

    .mobile-service-card-actions {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .mobile-service-card-actions button,
    .mobile-service-card-actions a {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .service-picker-modal,
    .add-service-modal,
    .service-picker-modal-body,
    .service-picker-detail,
    .service-picker-layout,
    .service-picker-detail * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-picker-modal,
    .add-service-modal,
    .service-picker-modal-body,
    .service-picker-detail {
        overflow-x: hidden !important;
    }

    .service-compound-section,
    .rug-list-section,
    .carpet-list-section,
    .duvet-list-section,
    .service-lines-section,
    .service-subitems-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .service-compound-toolbar,
    .service-line-add-row,
    .rug-add-row,
    .carpet-add-row,
    .duvet-add-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .service-compound-toolbar > *,
    .service-compound-toolbar .btn,
    #service-size-group,
    #service-quantity-input,
    #service-price-input,
    .service-price-input-wrap,
    .service-line-add-row input,
    .service-line-add-row select,
    .rug-add-row input,
    .rug-add-row select,
    .carpet-add-row input,
    .carpet-add-row select,
    .duvet-add-row input,
    .duvet-add-row select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .service-compound-toolbar .btn,
    .service-line-add-row button,
    .rug-add-row button,
    .carpet-add-row button,
    .duvet-add-row button,
    .btn-add-service-line,
    .btn-add-rug-line,
    .btn-add-duvet-line,
    #service-compound-add-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .service-compound-table,
    .rug-list-table,
    .carpet-list-table,
    .duvet-list-table,
    .service-lines-table,
    .service-subitems-table,
    .service-compound-table-shell {
        display: none !important;
    }

    .mobile-service-lines-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 12px !important;
    }

    .mobile-service-lines-empty {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px dashed rgba(190, 220, 230, 0.95);
        color: #7B7188;
        font-size: 13px;
        text-align: center;
    }

    .mobile-service-line-card {
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38,55,90,.06);
    }

    .mobile-service-line-top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .mobile-service-line-top strong {
        min-width: 0;
        font-size: 14px;
        font-weight: 700;
        color: #304A9A;
    }

    .mobile-service-line-top span {
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 700;
        color: #2F3260;
    }

    .mobile-service-line-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .mobile-service-line-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        border-radius: 999px;
        background: #F4F3FF;
        color: #6F6A7F;
        font-size: 12px;
        max-width: 100%;
    }

    .mobile-remove-line-btn {
        width: 100%;
        min-height: 36px;
        margin-top: 10px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .service-total-card,
    .service-total-box,
    .modal-total-box,
    .rug-total-box,
    .duvet-total-box {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 14px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .service-total-card .service-total-label,
    .service-total-box .total-label,
    .modal-total-box .total-label {
        font-size: 11px !important;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .service-total-card strong,
    .service-total-box .total-value,
    .modal-total-box .total-value {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .service-picker-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        height: calc(100vh - 16px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .service-picker-modal-header {
        position: sticky;
        top: 0;
        z-index: 35;
        background: #fff;
        padding: 18px 18px 12px !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.7);
    }

    .service-picker-modal-header h3 {
        margin: 0;
        font-size: 24px;
        line-height: 1.1;
        font-weight: 700;
        color: #304A9A;
    }

    .service-picker-modal-header .modal-close-btn {
        width: 42px;
        height: 42px;
        min-height: 42px;
        border-radius: 14px;
        background: #F5F5F7;
        color: #1F2A5A;
    }

    .service-picker-modal-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .mobile-service-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0px 12px;
        padding: 0 14px;
        min-height: 52px;
        border-radius: 16px;
        border: 1px solid rgba(190,220,230,.9);
        background: #fff;
        flex: 0 0 auto;
    }

    .mobile-service-search i {
        color: #7B86B7;
        font-size: 15px;
    }

    .mobile-service-search input {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        padding: 3px;
        border: 0;
        background: transparent;
        outline: none;
        font-size: 15px;
        color: #2F3260;
    }

    .service-picker-layout {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 12px 0px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-service-step-selector,
    .mobile-service-step-form {
        display: none;
    }

    .mobile-service-step-selector.is-active,
    .mobile-service-step-form.is-active {
        display: block;
    }

    .service-picker-detail {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .service-picker-detail-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
        margin-bottom: 16px;
        border-radius: 18px;
        background: linear-gradient(180deg, #FFF5FA 0%, #FFF9FC 100%);
        border: 1px solid rgba(236, 164, 202, 0.45);
    }

    .service-picker-heading {
        align-items: center;
        gap: 12px;
    }

    .service-picker-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: #FFE4F1;
        color: #D7448C;
        font-size: 20px;
    }

    .service-picker-heading-copy {
        min-width: 0;
    }

    .service-picker-kicker {
        font-size: 11px;
        font-weight: 700;
        color: #B83B72;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .service-picker-heading-main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .service-picker-detail-header h4 {
        font-size: 18px;
        line-height: 1.1;
        font-weight: 700;
        color: #304A9A;
    }

    .service-price-badge {
        min-height: 32px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #fff;
        color: #D7448C;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        border: 1px solid rgba(236, 164, 202, 0.45);
    }

    .service-picker-detail-header p {
        margin-top: 5px;
        font-size: 14px;
        line-height: 1.25;
        color: #6F6A7F;
    }

    .mobile-change-service-btn {
        width: 100%;
        min-height: 42px;
        border: none;
        border-radius: 12px;
        background: #fff;
        color: #D7448C;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
    }

    .service-picker-form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 18px;
    }

    .service-picker-sidebar {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .service-picker-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .mobile-service-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .service-picker-item {
        width: 100%;
        min-width: 0 !important;
        padding: 14px !important;
        border-radius: 16px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 4px 12px rgba(38,55,90,.06);
        scroll-snap-align: unset !important;
    }

    .service-picker-item.is-active {
        border-color: rgba(215, 68, 140, 0.35);
        box-shadow: 0 6px 18px rgba(215, 68, 140, 0.12);
        background: #FFF8FC;
    }

    .service-picker-item-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #F4F3FF;
        color: #4A5BA8;
        font-size: 18px;
    }

    .service-picker-item-copy strong {
        font-size: 15px;
        line-height: 1.18;
        font-weight: 700;
        color: #304A9A;
    }

    .service-picker-item-copy span {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.25;
        color: #6F6A7F;
    }

    .service-picker-empty-state {
        padding: 14px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px dashed rgba(190, 220, 230, 0.95);
        color: #7B7188;
        font-size: 13px;
        text-align: center;
    }

    .service-picker-actions {
        position: sticky;
        bottom: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 18px;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 35%);
    }

    .service-picker-actions .btn {
        min-height: 50px;
        border-radius: 16px;
        font-size: 15px;
        font-weight: 700;
    }

    .modal-header,
    .mobile-modal-header,
    .service-modal-header,
    .orders-modal-header,
    .pending-orders-modal-header,
    .all-orders-modal-header,
    .service-picker-modal-header {
        min-height: 64px !important;
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(210,225,235,.75) !important;
        box-sizing: border-box !important;
    }

    .modal-header h2,
    .modal-header h3,
    .modal-title,
    .mobile-modal-title,
    .service-modal-header h2,
    .service-picker-modal-header h2,
    .service-picker-modal-header h3,
    .orders-modal-title,
    .pending-orders-modal-title,
    .all-orders-modal-title {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #304A9A !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .modal-close,
    .btn-close,
    .mobile-close-btn,
    .modal-close-btn,
    .service-modal-close,
    .orders-modal-close,
    .pending-orders-modal-close,
    .all-orders-modal-close {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        flex: 0 0 42px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #F5F5F7 !important;
        color: #1F2A5A !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        line-height: 1 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-summary-orders-list,
    .summary-orders-mobile-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden] {
        display: flex !important;
    }

    .summary-orders-mobile-list .mobile-summary-order-card {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 4px 12px rgba(38,55,90,.07);
        overflow: hidden;
    }

    .mobile-summary-order-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 10px;
    }

    .mobile-summary-order-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mobile-summary-order-side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        flex: 0 0 auto;
    }

    .mobile-order-code-pill {
        min-height: 30px;
        padding: 0 10px;
        border-radius: 999px;
        background: #F3F1FF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #4A5BA8;
        white-space: nowrap;
    }

    .mobile-order-client {
        min-width: 0;
        font-size: 15px;
        line-height: 1.15;
        font-weight: 700;
        color: #1F2A5A;
        overflow-wrap: anywhere;
    }

    .mobile-order-status {
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-order-status.pending {
        background: #FFF0C9;
        color: #A66300;
    }

    .mobile-order-status.cancelado,
    .mobile-order-status.done {
        background: #DDF7E7;
        color: #147A3F;
    }

    .mobile-summary-order-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 8px;
    }

    .mobile-summary-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210,225,235,.75);
    }

    .mobile-summary-metric span {
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1;
        color: #7D7891;
    }

    .mobile-summary-metric strong {
        display: block;
        font-size: 13px;
        line-height: 1.15;
        font-weight: 700;
        color: #1F2A5A;
        overflow-wrap: anywhere;
    }

    .mobile-summary-metric.danger strong {
        color: #D91F11;
    }

    .mobile-summary-metric.success strong {
        color: #008A3D;
    }

    .mobile-payment-pill {
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        background: #F1F2F7;
        color: #4A5BA8;
    }

    .mobile-payment-pill.yape {
        background: #EEE5FF;
        color: #6F2BD9;
    }

    .mobile-payment-pill.efectivo {
        background: #DDF7E7;
        color: #147A3F;
    }

    .mobile-payment-pill.plin {
        background: #DFF6F4;
        color: #0F766E;
    }

    .mobile-payment-pill.tarjeta {
        background: #E8F1FF;
        color: #2563EB;
    }

    .mobile-summary-order-bottom,
    .mobile-summary-detail-btn {
        display: none !important;
    }

    .payments-summary-section .table-wrapper,
    .payments-summary-section table,
    .payments-summary-section .summary-total-box--income,
    .summary-expenses-card .summary-expenses-list,
    .summary-expenses-card table,
    .summary-expenses-card .summary-total-box--expense,
    .payment-summary-table,
    .summary-payments-table,
    .daily-payments-table {
        display: none !important;
    }

    .mobile-payment-summary-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .mobile-payment-summary-list[hidden] {
        display: flex !important;
    }

    .mobile-payment-summary-card {
        width: 100%;
        min-height: 84px;
        padding: 14px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 4px 12px rgba(40,55,90,.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        box-sizing: border-box;
    }

    .mobile-payment-summary-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .mobile-payment-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .mobile-payment-summary-card.efectivo .mobile-payment-icon {
        background: #E8F8EE;
        color: #15803D;
    }

    .mobile-payment-summary-card.yape .mobile-payment-icon {
        background: #F2E8FF;
        color: #7C3AED;
    }

    .mobile-payment-summary-card.plin .mobile-payment-icon {
        background: #DFF7F4;
        color: #0F766E;
    }

    .mobile-payment-summary-card.tarjeta .mobile-payment-icon {
        background: #F2F3F7;
        color: #4B5563;
    }

    .mobile-payment-info {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mobile-payment-info small {
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    .mobile-payment-total {
        flex-shrink: 0;
        font-size: 24px;
        line-height: 1;
        font-weight: 700;
        color: #304A9A;
        text-align: right;
        margin-left: auto;
    }

    .mobile-payment-grand-total {
        margin-top: 16px;
        padding: 18px;
        border-radius: 22px;
        background: linear-gradient(180deg, #F5FFF8 0%, #F2FBF5 100%);
        border: 1px solid rgba(180,230,195,.9);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-payment-grand-total[hidden] {
        display: flex !important;
    }

    .mobile-expenses-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .mobile-expenses-list[hidden] {
        display: flex !important;
    }

    .summary-expenses-card .summary-empty-state {
        min-height: auto !important;
    }

    .mobile-expense-card {
        width: 100%;
        padding: 16px;
        border-radius: 22px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 6px 18px rgba(40,55,90,.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mobile-expense-left {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
        flex: 1;
    }

    .mobile-expense-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        background: #F4EAFF;
        color: #7C3AED;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 22px;
    }

    .mobile-expense-info {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
    }

    .mobile-expense-label {
        font-size: 11px;
        line-height: 1;
        text-transform: uppercase;
        color: #8B86A3;
    }

    .mobile-expense-title {
        font-size: 18px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-expense-meta {
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    .mobile-expense-amount {
        flex-shrink: 0;
        font-size: 24px;
        line-height: 1;
        font-weight: 700;
        color: #304A9A;
        text-align: right;
        margin-left: auto;
        white-space: nowrap;
    }

    .mobile-expense-total-card {
        margin-top: 18px;
        padding: 18px;
        border-radius: 24px;
        background: linear-gradient(180deg, #FFF4F4 0%, #FFF8F8 100%);
        border: 1px solid rgba(255,190,190,.9);
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-expense-total-card[hidden] {
        display: flex !important;
    }

    .mobile-expense-total-icon {
        width: 68px;
        height: 68px;
        border-radius: 22px;
        background: #FFE5E5;
        color: #D91F11;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 28px;
    }

    .mobile-expense-total-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    .mobile-expense-total-info span {
        font-size: 16px;
        line-height: 1.2;
        font-weight: 700;
        color: #1F2A5A;
    }

    .mobile-expense-total-info strong {
        font-size: 52px;
        line-height: 1;
        font-weight: 700;
        color: #D91F11;
        overflow-wrap: anywhere;
    }

    .mobile-payment-grand-total span {
        font-size: 16px;
        line-height: 1.2;
        font-weight: 700;
        color: #166534;
    }

    .mobile-payment-grand-total strong {
        font-size: 34px;
        line-height: 1;
        font-weight: 700;
        color: #047857;
        margin-left: auto;
        text-align: right;
    }

    .third-party-section .table-wrapper,
    .third-party-section .table-scroll-area,
    .terceros-section .table-wrapper,
    .terceros-section .table-scroll-area,
    .expenses-section .table-wrapper,
    .expenses-section .table-scroll-area,
    .gastos-section .table-wrapper,
    .gastos-section .table-scroll-area,
    .closures-section .table-wrapper,
    .closures-section .table-scroll-area,
    .otros-cierres-section .table-wrapper,
    .otros-cierres-section .table-scroll-area,
    .summary-orders-block .summary-ledger-table-wrapper,
    .summary-section .summary-orders-modal-table-shell,
    .resumen-section .summary-orders-modal-table-shell {
        display: none !important;
    }

    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .summary-orders-modal-body {
        padding-bottom: calc(72px + 24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .third-party-mobile-list[hidden],
    .thirdparty-mobile-list[hidden],
    .terceros-mobile-list[hidden],
    .expenses-mobile-list[hidden],
    .gastos-mobile-list[hidden],
    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden] {
        display: flex !important;
    }

    .terceros-section,
    .third-party-section,
    .gastos-section,
    .expenses-section,
    .summary-section,
    .resumen-section {
        padding-bottom: calc(72px + 24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-card-secondary-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .mobile-card-secondary-actions form,
    .mobile-card-secondary-actions .btn {
        width: 100% !important;
    }

    .third-party-mobile-list,
    .thirdparty-mobile-list,
    .terceros-mobile-list,
    .expenses-mobile-list,
    .gastos-mobile-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .mobile-card-title-wrap {
        min-width: 0;
        flex: 1;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .mobile-card-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 12px;
        background: #F4F3FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
    }

    .expense-icon {
        background: #F4F7FF;
        color: #304A9A;
    }

    .mobile-meta-pill,
    .mobile-status-pill,
    .mobile-method-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 26px;
        padding: 6px 9px;
        border-radius: 999px;
        background: #F4F5FB;
        color: #6F6A7F;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
    }

    .status-delivered {
        background: #DDFBEA;
        color: #167A45;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
    }

    .status-pending {
        background: #FFF1C7;
        color: #9A5B00;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-card-action {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        background: #4A5BA8;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-secondary-action,
    .mobile-danger-action {
        width: 100% !important;
        min-height: 40px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-decoration: none;
        box-sizing: border-box;
    }

    .mobile-secondary-action {
        background: #fff;
        border: 1px solid rgba(74, 91, 168, 0.35);
        color: #4A5BA8;
    }

    .mobile-danger-action {
        background: #BF3D6B;
        border: 1px solid #BF3D6B;
        color: #fff;
    }

    .mobile-third-party-card,
    .mobile-thirdparty-card,
    .mobile-thirdparty-card-airy {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38,55,90,0.07);
        overflow: hidden;
    }

    .mobile-third-party-card .mobile-card-top,
    .mobile-thirdparty-card .mobile-card-top,
    .mobile-thirdparty-card-airy .mobile-card-header,
    .mobile-thirdparty-card-airy .mobile-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mobile-third-party-card .mobile-card-title-wrap,
    .mobile-thirdparty-card .mobile-card-title-wrap {
        display: block;
        min-width: 0;
        flex: 1;
    }

    .mobile-third-party-card .mobile-card-icon,
    .mobile-thirdparty-card .mobile-card-icon {
        display: none;
    }

    .mobile-third-party-card .mobile-card-title,
    .mobile-thirdparty-card .mobile-card-title,
    .mobile-thirdparty-card-airy .mobile-card-title {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
    }

    .mobile-third-party-card .mobile-card-subtitle,
    .mobile-thirdparty-card .mobile-card-subtitle,
    .mobile-thirdparty-card-airy .mobile-card-subtitle {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    .mobile-third-party-card .mobile-card-amount,
    .mobile-thirdparty-card .mobile-card-amount {
        display: none;
    }

    .mobile-third-party-card .mobile-card-meta,
    .mobile-thirdparty-card .mobile-card-meta {
        margin: 0 0 12px;
        gap: 8px;
    }

    .mobile-third-party-card .mobile-status-pill,
    .mobile-thirdparty-card .mobile-status-pill {
        order: -2;
    }

    .mobile-third-party-card .mobile-meta-pill,
    .mobile-thirdparty-card .mobile-meta-pill {
        position: relative;
        width: 100%;
        min-height: 68px;
        padding: 12px 12px 12px 68px;
        margin-bottom: 4px;
        border-radius: 16px;
        background: #F4F3FF;
        color: #2F3260;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        font-size: 0;
    }

    .mobile-third-party-card .mobile-meta-pill::before,
    .mobile-thirdparty-card .mobile-meta-pill::before {
        content: "\f2b5";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .mobile-third-party-card .mobile-meta-pill i,
    .mobile-thirdparty-card .mobile-meta-pill i {
        display: none;
    }

    .mobile-third-party-card .mobile-meta-pill::after,
    .mobile-thirdparty-card .mobile-meta-pill::after {
        content: "Entrega programada";
        display: block;
        margin-bottom: 2px;
        font-size: 15px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    .mobile-third-party-card .mobile-meta-pill,
    .mobile-thirdparty-card .mobile-meta-pill {
        font-size: 12px;
        line-height: 1.25;
        color: #6F6A7F;
    }

    .mobile-third-party-card .mobile-card-action,
    .mobile-thirdparty-card .mobile-card-action {
        position: relative;
        margin-top: 0;
    }

    .mobile-third-party-card .mobile-card-top,
    .mobile-thirdparty-card .mobile-card-top,
    .mobile-thirdparty-card-airy .mobile-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
        position: static;
        padding-right: 0;
    }

    .mobile-third-party-card .mobile-card-top::after,
    .mobile-thirdparty-card .mobile-card-top::after,
    .mobile-third-party-card .mobile-card-action::before,
    .mobile-thirdparty-card .mobile-card-action::before,
    .mobile-third-party-card .mobile-card-action::after,
    .mobile-thirdparty-card .mobile-card-action::after {
        content: none !important;
        display: none !important;
    }

    .mobile-third-party-card .mobile-card-top .mobile-status-pill,
    .mobile-thirdparty-card .mobile-card-top .mobile-status-pill {
        position: static;
    }

    .mobile-third-party-card .mobile-card-title,
    .mobile-thirdparty-card .mobile-card-title,
    .mobile-thirdparty-card-airy .mobile-card-title,
    .mobile-third-party-card .mobile-thirdparty-main-box strong,
    .mobile-thirdparty-card .mobile-thirdparty-main-box strong,
    .mobile-thirdparty-card-airy .mobile-thirdparty-main-box strong,
    .mobile-third-party-card .mobile-card-action,
    .mobile-thirdparty-card .mobile-card-action,
    .mobile-thirdparty-card-airy .mobile-card-action {
        font-weight: 700 !important;
    }

    .mobile-third-party-card .mobile-card-amount,
    .mobile-thirdparty-card .mobile-card-amount {
        display: none;
    }

    .mobile-third-party-card .mobile-card-title-wrap,
    .mobile-thirdparty-card .mobile-card-title-wrap {
        display: block;
        min-width: 0;
        flex: 1;
    }

    .mobile-third-party-card .mobile-card-icon,
    .mobile-thirdparty-card .mobile-card-icon {
        display: none;
    }

    .mobile-third-party-card .mobile-meta-pill,
    .mobile-thirdparty-card .mobile-meta-pill {
        width: 100%;
        min-height: 68px;
        padding: 12px 12px 12px 68px;
        margin: 0;
        border-radius: 16px;
        background: #F4F3FF;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;
        color: #6F6A7F;
        font-size: 12px;
        line-height: 1.25;
    }

    .mobile-third-party-card .mobile-meta-pill i,
    .mobile-thirdparty-card .mobile-meta-pill i {
        display: none;
    }

    .mobile-third-party-card .mobile-meta-pill::before,
    .mobile-thirdparty-card .mobile-meta-pill::before {
        content: "\f2b5";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .mobile-third-party-card .mobile-meta-pill::after,
    .mobile-thirdparty-card .mobile-meta-pill::after {
        content: "Entrega programada";
        display: block;
        margin-bottom: 2px;
        font-size: 15px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    .mobile-thirdparty-metrics-grid:empty,
    .mobile-thirdparty-metric:empty {
        display: none !important;
    }

    .mobile-third-party-card,
    .mobile-thirdparty-card {
        display: none !important;
    }

    .mobile-thirdparty-card-v1[hidden] {
        display: block !important;
    }

    .mobile-thirdparty-card-v1 {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 4px 12px rgba(38,55,90,0.07);
        overflow: hidden;
    }

    .mobile-thirdparty-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mobile-thirdparty-title {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
    }

    .mobile-thirdparty-subtitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    .mobile-thirdparty-highlight {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 16px;
        background: #F4F3FF;
    }

    .mobile-thirdparty-highlight-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .mobile-thirdparty-highlight-content {
        min-width: 0;
    }

    .mobile-thirdparty-highlight-content span {
        display: block;
        font-size: 12px;
        line-height: 1.2;
        color: #6F6A7F;
        margin-bottom: 4px;
    }

    .mobile-thirdparty-highlight-content strong {
        display: block;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
        color: #2F3260;
        word-break: break-word;
    }

    .mobile-thirdparty-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-thirdparty-metrics:empty {
        display: none !important;
    }

    .mobile-thirdparty-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210,225,235,.8);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-thirdparty-metric:empty {
        display: none !important;
    }

    .metric-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .metric-blue {
        background: #E8F1FF;
        color: #2563EB;
    }

    .metric-green {
        background: #E2FBEA;
        color: #16A34A;
    }

    .mobile-thirdparty-metric span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 3px;
    }

    .mobile-thirdparty-metric strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        font-weight: 700;
        color: #1F2A5A;
        word-break: break-word;
    }

    .mobile-thirdparty-action {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        background: #4A5BA8;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-expense-card {
        display: none !important;
    }

    .mobile-expense-card-v2 {
        display: none !important;
    }

    .mobile-expense-card-v3[hidden] {
        display: block !important;
    }

    .mobile-expense-card-v2 {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 4px 12px rgba(38,55,90,.07);
        overflow: hidden;
    }

    .mobile-expense-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-expense-title-wrap {
        min-width: 0;
        flex: 1;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .mobile-expense-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #F4F3FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .mobile-expense-title {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        word-break: break-word;
    }

    .mobile-expense-subtitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    .mobile-expense-amount-pill {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 14px;
        background: #FCE7F1;
        color: #B83B72;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
    }

    .mobile-expense-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-expense-meta-box {
        min-width: 0;
        padding: 12px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210,225,235,.8);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .meta-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 999px;
        background: #EEF2FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .mobile-expense-meta-box span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 3px;
    }

    .mobile-expense-meta-box strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        font-weight: 700;
        color: #1F2A5A;
        word-break: break-word;
    }

    .mobile-expense-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-expense-actions form {
        width: 100%;
    }

    .mobile-expense-edit,
    .mobile-expense-delete {
        width: 100%;
        min-height: 42px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        box-sizing: border-box;
    }

    .mobile-expense-edit {
        background: #fff;
        border: 1px solid rgba(74,91,168,.35);
        color: #4A5BA8;
    }

    .mobile-expense-delete {
        background: #BF3D6B;
        border: 1px solid #BF3D6B;
        color: #fff;
    }

    .mobile-expense-card-v3 {
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190,220,230,.9);
        box-shadow: 0 4px 12px rgba(38,55,90,.07);
        overflow: hidden;
    }

    .mobile-expense-card-v3 .mobile-expense-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-expense-card-v3 .mobile-expense-title-wrap {
        min-width: 0;
        flex: 1;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .mobile-expense-card-v3 .mobile-expense-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #F4F3FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .mobile-expense-card-v3 .mobile-expense-main-text {
        min-width: 0;
    }

    .mobile-expense-card-v3 .mobile-expense-title {
        font-size: 15px;
        line-height: 1.18;
        font-weight: 700;
        color: #304A9A;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .mobile-expense-card-v3 .mobile-expense-subtitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.25;
        color: #6F6A7F;
    }

    .mobile-expense-card-v3 .mobile-expense-amount-pill {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 14px;
        background: #FCE7F1;
        color: #B83B72;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
    }

    .mobile-expense-card-v3 .mobile-expense-single-meta {
        margin-bottom: 12px;
    }

    .mobile-expense-card-v3 .mobile-expense-single-meta .mobile-expense-meta-box {
        width: 100%;
        min-width: 0;
        padding: 12px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210,225,235,.8);
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .mobile-expense-card-v3 .meta-icon {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        background: #EEF2FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .mobile-expense-card-v3 .meta-icon-pink {
        background: #FCE7F1;
        color: #B83B72;
    }

    .mobile-expense-card-v3 .mobile-expense-meta-box span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 3px;
    }

    .mobile-expense-card-v3 .mobile-expense-meta-box strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        font-weight: 700;
        color: #1F2A5A;
        overflow-wrap: anywhere;
    }

    .mobile-expense-card-v3 .mobile-expense-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-expense-card-v3 .mobile-expense-actions form {
        width: 100%;
    }

    .mobile-expense-card-v3 .mobile-expense-edit,
    .mobile-expense-card-v3 .mobile-expense-delete {
        width: 100%;
        min-height: 42px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        box-sizing: border-box;
    }

    .mobile-expense-card-v3 .mobile-expense-edit {
        background: #fff;
        border: 1px solid rgba(74,91,168,.35);
        color: #4A5BA8;
    }

    .mobile-expense-card-v3 .mobile-expense-delete {
        background: #BF3D6B;
        border: 1px solid #BF3D6B;
        color: #fff;
    }

    .third-party-section .mobile-data-card,
    .terceros-section .mobile-data-card,
    .expenses-section .mobile-data-card,
    .gastos-section .mobile-data-card,
    .closures-section .mobile-data-card,
    .otros-cierres-section .mobile-data-card,
    .summary-section .mobile-data-card,
    .resumen-section .mobile-data-card {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
        overflow: hidden !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td,
    .terceros-section .data-table.mobile-card-table tbody td,
    .expenses-section .data-table.mobile-card-table tbody td,
    .gastos-section .data-table.mobile-card-table tbody td,
    .closures-section .data-table.mobile-card-table tbody td,
    .otros-cierres-section .data-table.mobile-card-table tbody td,
    .summary-section .data-table.mobile-card-table tbody td,
    .resumen-section .data-table.mobile-card-table tbody td {
        margin-bottom: 10px !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--primary,
    .resumen-section .data-table.mobile-card-table tbody td.mobile-cell--primary {
        font-size: 16px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        color: #304A9A !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--meta,
    .resumen-section .data-table.mobile-card-table tbody td.mobile-cell--meta {
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: #6F6A7F !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .resumen-section .data-table.mobile-card-table tbody td.mobile-cell--amount {
        font-size: 17px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: #304A9A !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .resumen-section .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--status [class*="payment-method"],
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--status [class*="payment-method"],
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--status [class*="payment-method"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 24px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--action .icon-btn,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--action .icon-btn,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--action .icon-btn,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--action .icon-btn,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--action .icon-btn,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--action .icon-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .third-party-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .terceros-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .expenses-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .gastos-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .closures-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .otros-cierres-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .summary-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .resumen-section .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .resumen-section .data-table.mobile-card-table tbody td.mobile-cell--action a.btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .summary-section .summary-balance-strip,
    .resumen-section .summary-balance-strip,
    .summary-section .summary-operational-kpis,
    .resumen-section .summary-operational-kpis {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .summary-section .summary-balance-box,
    .resumen-section .summary-balance-box,
    .summary-section .summary-operational-kpi,
    .resumen-section .summary-operational-kpi {
        padding: 14px !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190,220,230,.9) !important;
        box-shadow: 0 4px 12px rgba(38,55,90,.07) !important;
    }

    .summary-balance-strip-card--active .summary-balance-strip {
        display: none !important;
    }

    .summary-balance-strip-card--active {
        padding: 18px !important;
    }

    .summary-balance-strip-card--active .summary-block-header {
        margin-bottom: 18px !important;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(210,225,235,.75);
    }

    .mobile-balance-card {
        width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    .mobile-balance-card[hidden] {
        display: block !important;
    }

    .mobile-balance-header {
        display: none;
    }

    .mobile-balance-header h3 {
        margin: 0 0 6px;
        font-size: 24px;
        line-height: 1.1;
        font-weight: 700;
        color: #1F2A5A;
    }

    .mobile-balance-header p {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: #6F6A7F;
    }

    .mobile-balance-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 18px;
    }

    .mobile-balance-row {
        width: 100%;
        min-height: 72px;
        padding: 0;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        box-sizing: border-box;
    }

    .mobile-balance-row.success {
        background: transparent;
        border: 0;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(210,225,235,.75);
    }

    .mobile-balance-row.danger {
        background: transparent;
        border: 0;
        padding-bottom: 14px;
        border-bottom: 1px dashed rgba(190,200,220,.9);
    }

    .mobile-balance-row-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1;
    }

    .mobile-balance-icon {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0;
    }

    .mobile-balance-row.success .mobile-balance-icon {
        background: #16A34A;
        color: transparent;
    }

    .mobile-balance-row.danger .mobile-balance-icon {
        background: #DC2626;
        color: transparent;
    }

    .mobile-balance-row span {
        font-size: 16px;
        line-height: 1.2;
        color: #1F2A5A;
    }

    .mobile-balance-row strong {
        flex-shrink: 0;
        font-size: 26px;
        line-height: 1;
        font-weight: 700;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .mobile-balance-row.success strong {
        color: #15803D;
    }

    .mobile-balance-row.danger strong {
        color: #D91F11;
    }

    .mobile-balance-total-card {
        width: 100%;
        padding: 22px;
        border-radius: 24px;
        background: linear-gradient(180deg, #F8F8FF 0%, #F3F4FF 100%);
        border: 1px solid rgba(205,210,255,.9);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
    }

    .mobile-balance-total-icon {
        display: none;
    }

    .mobile-balance-total-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        flex: 1;
        align-items: center;
    }

    .mobile-balance-total-content span {
        font-size: 16px;
        line-height: 1.1;
        color: #4B5675;
    }

    .mobile-balance-total-content strong {
        font-size: clamp(34px, 8vw, 54px);
        line-height: .95;
        font-weight: 700;
        color: #3046C9;
        overflow-wrap: anywhere;
    }

    .mobile-balance-total-content small {
        width: fit-content;
        min-height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
    }

    .mobile-balance-total-content small.is-positive {
        background: #E7F8EC;
        color: #15803D;
    }

    .mobile-balance-total-content small.is-negative {
        background: #FFE8E8;
        color: #D91F11;
    }

.mobile-empty-state,
    .third-party-section .helper-text,
    .terceros-section .helper-text,
    .expenses-section .helper-text,
    .gastos-section .helper-text,
    .closures-section .helper-text,
    .otros-cierres-section .helper-text {
        padding: 16px;
        border-radius: 16px;
        background: #F8FAFF;
        border: 1px dashed rgba(190,220,230,.95);
        text-align: center;
        color: #6F6A7F;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden;
    }

    .dashboard-frame {
        padding: 16px;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .dashboard-shell,
    .app-layout {
        display: block;
        min-height: calc(100vh - 32px);
        min-height: calc(100dvh - 32px);
        height: auto;
        overflow: visible;
        border-radius: 30px;
    }

    .sidebar {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: grid !important;
        left: 16px;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        padding: 10px;
        border-radius: 24px;
    }

    .mobile-nav-item {
        min-height: 58px;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
    }

    .mobile-nav-item i {
        font-size: 19px;
    }

    .dashboard-main,
    .main-content {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 18px 18px calc(108px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: visible;
    }

    .content-area,
    .page-content,
    .page-section,
    .responsive-grid {
        gap: 18px;
        padding-right: 0;
        overflow: visible;
    }

    .content-area,
    .page-content {
        padding-bottom: 0;
    }

    .topbar {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 20px;
        border-radius: 24px;
        margin-bottom: 18px;
    }

    .topbar-copy {
        flex: 1 1 340px;
        min-width: 0;
    }

    .topbar-title,
    .page-title {
        font-size: clamp(30px, 4vw, 36px);
        line-height: 1.08;
    }

    .topbar-subtitle,
    .page-subtitle,
    .topbar-copy p {
        font-size: 13px;
        line-height: 1.4;
    }

    .topbar-actions,
    .header-actions {
        width: auto;
        max-width: 100%;
        display: flex;
        flex: 0 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .header-top-row {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .header-main-button,
    .mobile-primary-cta-shell {
        width: auto;
        min-width: 200px;
    }

    .header-main-button .btn,
    .header-main-button > a.btn,
    .header-main-button > button.btn {
        width: auto;
        min-width: 180px;
    }

    .dashboard-hero,
    .dashboard-overview-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid,
    .summary-two-columns,
    .summary-ledger-grid--two-columns,
    .summary-finance-grid,
    .quick-links-grid,
    .general-summary-grid,
    .expenses-bottom-grid,
    .responsive-grid.two-cols:not(.admin-sequence-grid):not(.admin-cash-box-grid),
    .responsive-grid.three-cols,
    .admin-grid,
    .admin-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .dashboard-indicators-card,
    .dashboard-audit-card,
    .delayed-orders-card,
    .summary-balance-strip-card--active,
    .payments-summary-section,
    .summary-expenses-card,
    .full-width,
    .content-card.full-width,
    .table-card,
    .wide-card {
        grid-column: 1 / -1;
    }

    .card,
    .content-card,
    .summary-card,
    .general-summary-card,
    .dashboard-card,
    .table-card,
    .order-services-card {
        padding: 20px;
        border-radius: 22px;
    }

    .dashboard-indicators-card .chart-shell {
        min-height: 300px;
    }

    .dashboard-status-card .chart-shell,
    .donut-chart-shell {
        min-height: 240px;
    }

    .chart-empty-state {
        min-height: 200px;
    }

    .section-head,
    .card-header-row,
    .table-card-header,
    .orders-header,
    .order-form-toolbar,
    .service-compound-toolbar,
    .delayed-orders-content,
    .summary-block-header,
    .dashboard-info-row,
    .total-day-content {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .orders-header-right,
    .delayed-orders-actions,
    .total-day-actions {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .orders-inline-filters {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .orders-inline-filter-form {
        flex: 1 1 420px;
        flex-wrap: wrap;
        gap: 12px;
        align-items: end;
    }

    .filter-group-inline,
    .orders-filter-field {
        flex: 1 1 220px;
    }

    .form-grid,
    .third-party-form-grid,
    .cash-box-form-grid,
    .summary-header-filters,
    .client-info-grid,
    .search-info-grid--client,
    .search-info-grid--order {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
    }

    .form-grid .full-width,
    .third-party-form-grid .full-width,
    .cash-box-form-grid .full-width,
    .search-info-grid .full-width {
        grid-column: 1 / -1;
    }

    .order-form-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
        gap: 16px 18px !important;
        align-items: end;
    }

    .order-amounts-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
    }

    .payment-rounding-row {
        justify-content: flex-start;
    }

    .payments-summary-section .table-wrapper,
    .payments-summary-section table,
    .payments-summary-section .summary-total-box--income,
    .summary-expenses-card .summary-expenses-list,
    .summary-expenses-card table,
    .summary-expenses-card .summary-total-box--expense,
    .summary-orders-block .summary-ledger-table-wrapper,
    .summary-balance-strip-card--active .summary-balance-strip {
        display: none !important;
    }

    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .mobile-payment-summary-list[hidden],
    .mobile-expenses-list[hidden],
    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden] {
        display: grid !important;
    }

    .mobile-payment-grand-total,
    .mobile-expense-total-card,
    .mobile-balance-card {
        display: flex !important;
    }

    .mobile-payment-grand-total {
        margin-top: 18px;
    }

    .mobile-balance-card[hidden] {
        display: block !important;
    }

    .mobile-balance-card {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mobile-balance-list {
        gap: 16px;
    }

    .mobile-balance-row strong {
        font-size: clamp(24px, 3.3vw, 30px);
    }

    .mobile-balance-total-card {
        padding: 24px;
    }

    .mobile-balance-total-content strong {
        font-size: clamp(40px, 6vw, 56px);
    }

    .modal,
    .modal-overlay {
        padding: 22px;
    }

    .modal-dialog,
    .modal-content,
    .large-modal,
    .history-modal.modal-content,
    .order-detail-modal-shell,
    .orders-modal-standard,
    .profile-avatar-modal {
        width: min(900px, calc(100vw - 44px));
        max-width: min(900px, calc(100vw - 44px));
        height: auto;
        max-height: calc(100vh - 44px);
        border-radius: 26px;
    }

    .service-picker-modal,
    .add-service-modal {
        width: min(900px, calc(100vw - 44px));
        max-width: min(900px, calc(100vw - 44px));
        max-height: calc(100vh - 44px);
    }

    .modal-header,
    .mobile-modal-header,
    .service-modal-header,
    .orders-modal-header,
    .pending-orders-modal-header,
    .all-orders-modal-header,
    .service-picker-modal-header {
        min-height: 68px !important;
        padding: 16px 20px !important;
        align-items: start !important;
        gap: 14px !important;
    }

    .modal-header h2,
    .modal-header h3,
    .modal-title,
    .mobile-modal-title,
    .service-modal-header h2,
    .service-picker-modal-header h2,
    .service-picker-modal-header h3,
    .orders-modal-title,
    .pending-orders-modal-title,
    .all-orders-modal-title {
        font-size: 22px !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    .modal-close,
    .btn-close,
    .mobile-close-btn,
    .modal-close-btn,
    .service-modal-close,
    .orders-modal-close,
    .pending-orders-modal-close,
    .all-orders-modal-close {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    .modal-body,
    .modal-scroll-area,
    .summary-orders-modal .modal-body,
    .all-orders-modal-body,
    .pending-orders-modal-body,
    .delayed-orders-modal-body,
    .client-results-modal-body {
        padding: 18px 20px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .table-scroll-area,
    .table-wrapper,
    .summary-ledger-table-wrapper,
    .summary-orders-modal-table-shell {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll-area table,
    .table-wrapper table,
    .data-table {
        min-width: 680px;
    }

    .service-picker-layout {
        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
        min-height: min(72vh, 760px);
    }

    .service-picker-sidebar {
        padding: 20px;
        max-height: none;
        border-radius: 22px 0 0 22px;
    }

    .service-picker-detail {
        padding: 20px;
    }

    .service-picker-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 18px;
    }

    .service-picker-form-grid .service-detail-group,
    .service-picker-form-grid .service-price-group,
    .service-compound-section,
    .service-total-card,
    .service-summary-line,
    .service-picker-error,
    .service-picker-actions {
        grid-column: 1 / -1;
    }

    .service-compound-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .service-compound-table-shell {
        max-height: 240px;
    }

    .data-table.mobile-card-table,
    .data-table.mobile-card-table thead,
    .data-table.mobile-card-table tbody,
    .data-table.mobile-card-table tr,
    .data-table.mobile-card-table th,
    .data-table.mobile-card-table td {
        display: block;
        width: 100%;
    }

    .data-table.mobile-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .data-table.mobile-card-table tbody {
        display: grid;
        gap: 14px;
    }

    .data-table.mobile-card-table tbody tr {
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06);
    }

    .data-table.mobile-card-table tbody td {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 10px;
        min-width: 0;
    }

    .data-table.mobile-card-table tbody td:last-child {
        margin-bottom: 0;
    }

    .data-table.mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8b8297;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--primary {
        font-size: 16px;
        line-height: 1.2;
        font-weight: 700;
        color: #304A9A;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--primary .pill-chip,
    .data-table.mobile-card-table tbody td.mobile-cell--primary strong {
        font-size: 16px;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--amount {
        font-weight: 700;
        color: #304A9A;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .data-table.mobile-card-table tbody td.mobile-cell--amount .pill-chip {
        display: inline-flex;
        width: auto;
        max-width: 100%;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action {
        margin-top: 4px;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action > *,
    .data-table.mobile-card-table tbody td.mobile-cell--action .action-cell,
    .data-table.mobile-card-table tbody td.mobile-cell--action form {
        width: 100%;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action button.btn {
        width: 100%;
        justify-content: center;
    }

    .orders-pending-desktop-table,
    .orders-total-desktop-table,
    #allOrdersModal .all-orders-modal-body > .all-orders-desktop-results,
    #allOrdersModal .all-orders-modal-body > .orders-total-table-shell,
    #otherPendingOrdersModal table,
    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .desktop-table,
    #otherPendingOrdersModal .desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell,
    .third-party-section .table-wrapper,
    .third-party-section .table-scroll-area,
    .terceros-section .table-wrapper,
    .terceros-section .table-scroll-area,
    .expenses-section .table-wrapper,
    .expenses-section .table-scroll-area,
    .gastos-section .table-wrapper,
    .gastos-section .table-scroll-area,
    .closures-section .table-wrapper,
    .closures-section .table-scroll-area,
    .otros-cierres-section .table-wrapper,
    .otros-cierres-section .table-scroll-area,
    .summary-orders-block .summary-ledger-table-wrapper,
    .summary-section .summary-orders-modal-table-shell,
    .resumen-section .summary-orders-modal-table-shell {
        display: none !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .third-party-mobile-list[hidden],
    .thirdparty-mobile-list[hidden],
    .terceros-mobile-list[hidden],
    .expenses-mobile-list[hidden],
    .gastos-mobile-list[hidden],
    .closures-mobile-list[hidden],
    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .orders-pending-mobile-list .mobile-order-card-airy,
    .orders-total-mobile-list .mobile-order-card-airy,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card-airy,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card-airy {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(190, 220, 230, 0.9);
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07);
        overflow: hidden;
    }

    .orders-pending-mobile-list .mobile-order-header,
    .orders-total-mobile-list .mobile-order-header,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-header,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-header,
    .orders-total-mobile-list .mobile-order-card-airy .mobile-order-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 0;
    }

    .orders-pending-mobile-list .mobile-order-card-airy .mobile-order-code,
    .orders-total-mobile-list .mobile-order-code,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-code,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-code {
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        color: #304A9A;
        word-break: break-word;
    }

    .orders-pending-mobile-list .mobile-order-summary-topline,
    .orders-total-mobile-list .mobile-order-summary-topline,
    .orders-pending-mobile-list .mobile-order-subline,
    .orders-total-mobile-list .mobile-order-subline,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-subline,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-subline {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
        color: #6F6A7F;
    }

    .orders-pending-mobile-list .mobile-status-pill,
    .orders-pending-mobile-list .mobile-order-status,
    .orders-total-mobile-list .mobile-status-pill,
    .orders-total-mobile-list .mobile-order-status,
    #allOrdersModal .orders-modal-results-mobile .mobile-status-pill,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .orders-pending-mobile-list .mobile-order-client-box,
    .orders-total-mobile-list .mobile-order-client-box,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-box,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-box {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin: 12px 0;
        border-radius: 16px;
        background: #F4F3FF;
    }

    .orders-pending-mobile-list .mobile-order-client-icon,
    .orders-total-mobile-list .mobile-order-client-icon,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-icon,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: #E7E6FF;
        color: #4A5BA8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .orders-pending-mobile-list .mobile-order-client-info,
    .orders-total-mobile-list .mobile-order-client-info,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-info,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-info {
        min-width: 0;
        flex: 1;
    }

    .orders-pending-mobile-list .mobile-order-client-info strong,
    .orders-total-mobile-list .mobile-order-client-info strong,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-info strong,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-info strong {
        display: block;
        font-size: 16px;
        line-height: 1.2;
        color: #2F3260;
        font-weight: 700;
    }

    .orders-pending-mobile-list .mobile-order-client-info span,
    .orders-total-mobile-list .mobile-order-client-info span,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-client-info span,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-client-info span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.2;
        color: #6F6A7F;
    }

    .orders-pending-mobile-list .mobile-order-metrics-grid,
    .orders-total-mobile-list .mobile-order-metrics-grid,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metrics-grid,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .orders-pending-mobile-list .mobile-order-metric,
    .orders-total-mobile-list .mobile-order-metric,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: #F8FAFF;
        border: 1px solid rgba(210, 225, 235, 0.8);
    }

    .orders-pending-mobile-list .mobile-order-metric-icon,
    .orders-total-mobile-list .mobile-order-metric-icon,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric-icon,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .orders-pending-mobile-list .mobile-order-metric span,
    .orders-total-mobile-list .mobile-order-metric span,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric span,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric span {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        color: #6F6A7F;
        margin-bottom: 4px;
    }

    .orders-pending-mobile-list .mobile-order-metric strong,
    .orders-total-mobile-list .mobile-order-metric strong,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-metric strong,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-metric strong {
        display: block;
        font-size: 14px;
        line-height: 1.15;
        color: #1F2A5A;
        font-weight: 700;
        word-break: break-word;
    }

    .orders-pending-mobile-list .mobile-order-payment,
    .orders-pending-mobile-list .mobile-order-meta,
    .orders-pending-mobile-list .mobile-order-card-airy > .mobile-order-body:last-of-type,
    .orders-pending-mobile-list .mobile-order-subline,
    .orders-pending-mobile-list .mobile-order-body,
    .orders-total-mobile-list .mobile-order-footer,
    .orders-total-mobile-list .mobile-order-actions,
    .orders-total-mobile-list .mobile-order-subline {
        display: none !important;
    }

    .orders-pending-mobile-list .mobile-order-detail-btn,
    .orders-pending-mobile-list .mobile-order-actions .orders-detail-action-btn,
    .orders-total-mobile-list .mobile-order-detail-btn,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-detail-btn,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-detail-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .orders-total-mobile-list .mobile-order-detail-btn,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-detail-btn {
        background: #4A5BA8;
        color: #fff;
        text-decoration: none;
    }

    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        gap: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 860px) {
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list,
    .quick-links-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid,
    .summary-two-columns,
    .summary-ledger-grid--two-columns,
    .summary-finance-grid,
    .dashboard-overview-grid,
    .dashboard-hero,
    .expenses-bottom-grid {
        grid-template-columns: 1fr !important;
    }

    .order-amounts-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .modal-dialog,
    .modal-content,
    .large-modal,
    .history-modal.modal-content,
    .orders-modal-standard,
    .service-picker-modal {
        width: calc(100vw - 36px);
        max-width: calc(100vw - 36px);
    }

    .service-picker-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .service-picker-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(85, 156, 173, 0.16);
        border-radius: 22px 22px 0 0;
    }
}

@media (min-width: 900px) and (max-width: 1024px) {
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list,
    .data-table.mobile-card-table tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .orders-pending-desktop-table,
    .orders-total-desktop-table,
    .third-party-section .table-wrapper,
    .third-party-section .table-scroll-area,
    .terceros-section .table-wrapper,
    .terceros-section .table-scroll-area,
    .expenses-section .table-wrapper,
    .expenses-section .table-scroll-area,
    .gastos-section .table-wrapper,
    .gastos-section .table-scroll-area,
    .closures-section .table-wrapper,
    .closures-section .table-scroll-area,
    .otros-cierres-section .table-wrapper,
    .otros-cierres-section .table-scroll-area,
    .summary-orders-block .summary-ledger-table-wrapper,
    .summary-section .summary-orders-modal-table-shell,
    .resumen-section .summary-orders-modal-table-shell,
    .payments-summary-section .table-wrapper,
    .payments-summary-section table,
    .payments-summary-section .summary-total-box--income,
    .summary-expenses-card .summary-expenses-list,
    .summary-expenses-card table,
    .summary-expenses-card .summary-total-box--expense,
    .summary-balance-strip-card--active .summary-balance-strip,
    #allOrdersModal .all-orders-modal-body > .all-orders-desktop-results,
    #allOrdersModal .all-orders-modal-body > .orders-total-table-shell,
    #otherPendingOrdersModal table,
    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .desktop-table,
    #otherPendingOrdersModal .desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell {
        display: none !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .mobile-payment-grand-total,
    .mobile-expense-total-card,
    .mobile-balance-card,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results {
        display: grid !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .third-party-mobile-list[hidden],
    .thirdparty-mobile-list[hidden],
    .terceros-mobile-list[hidden],
    .expenses-mobile-list[hidden],
    .gastos-mobile-list[hidden],
    .closures-mobile-list[hidden],
    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden],
    .mobile-payment-summary-list[hidden],
    .mobile-expenses-list[hidden],
    .mobile-payment-grand-total[hidden],
    .mobile-expense-total-card[hidden],
    .mobile-balance-card[hidden] {
        display: grid !important;
    }

    .mobile-payment-grand-total[hidden],
    .mobile-expense-total-card[hidden],
    .mobile-balance-card[hidden] {
        display: flex !important;
    }

    .table-wrapper,
    .table-scroll-area,
    html,
    body {
        overflow-x: hidden !important;
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list,
    .data-table.mobile-card-table tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .orders-pending-desktop-table,
    .orders-total-desktop-table,
    #allOrdersModal .all-orders-modal-body > .all-orders-desktop-results,
    #allOrdersModal .all-orders-modal-body > .orders-total-table-shell,
    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell,
    .summary-orders-block .summary-ledger-table-wrapper,
    .summary-section .summary-orders-modal-table-shell,
    .resumen-section .summary-orders-modal-table-shell,
    .payments-summary-section .table-wrapper,
    .payments-summary-section table,
    .payments-summary-section .summary-total-box--income,
    .summary-expenses-card .summary-expenses-list,
    .summary-expenses-card table,
    .summary-expenses-card .summary-total-box--expense,
    .summary-balance-strip-card--active .summary-balance-strip,
    .third-party-section .table-wrapper,
    .terceros-section .table-wrapper,
    .expenses-section .table-wrapper,
    .gastos-section .table-wrapper,
    .closures-section .table-wrapper,
    .otros-cierres-section .table-wrapper {
        display: none !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-mobile-list[hidden],
    .thirdparty-mobile-list[hidden],
    .terceros-mobile-list[hidden],
    .expenses-mobile-list[hidden],
    .gastos-mobile-list[hidden],
    .closures-mobile-list[hidden],
    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden],
    .mobile-payment-summary-list[hidden],
    .mobile-expenses-list[hidden] {
        display: grid !important;
    }

    .mobile-payment-grand-total,
    .mobile-expense-total-card,
    .mobile-balance-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-payment-grand-total[hidden],
    .mobile-expense-total-card[hidden] {
        display: flex !important;
    }

    .mobile-balance-card[hidden] {
        display: block !important;
    }

    .data-table.mobile-card-table,
    .data-table.mobile-card-table thead,
    .data-table.mobile-card-table tbody,
    .data-table.mobile-card-table tr,
    .data-table.mobile-card-table th,
    .data-table.mobile-card-table td {
        display: block;
        width: 100%;
    }

    .data-table.mobile-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .data-table.mobile-card-table tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .data-table.mobile-card-table tbody tr {
        padding: 18px 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06);
    }

    .data-table.mobile-card-table tbody td {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 10px;
        min-width: 0;
    }

    .data-table.mobile-card-table tbody td:last-child {
        margin-bottom: 0;
    }

    .data-table.mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8b8297;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--primary {
        font-size: 16px;
        line-height: 1.22;
        font-weight: 700;
        color: #304A9A;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--amount,
    .data-table.mobile-card-table tbody td.mobile-cell--status .pill-chip,
    .data-table.mobile-card-table tbody td.mobile-cell--amount .pill-chip {
        font-weight: 700;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action,
    .data-table.mobile-card-table tbody td.mobile-cell--action > *,
    .data-table.mobile-card-table tbody td.mobile-cell--action .action-cell,
    .data-table.mobile-card-table tbody td.mobile-cell--action form {
        width: 100%;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action button.btn {
        width: 100%;
        justify-content: center;
    }

    .service-picker-modal .service-picker-layout,
    .add-service-modal .service-picker-layout {
        display: block !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .service-picker-modal .service-picker-sidebar,
    .add-service-modal .service-picker-sidebar {
        padding: 0 !important;
        background: transparent !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
    }

    .service-picker-modal .mobile-service-step-selector,
    .service-picker-modal .mobile-service-step-form,
    .add-service-modal .mobile-service-step-selector,
    .add-service-modal .mobile-service-step-form {
        display: none;
    }

    .service-picker-modal .mobile-service-step-selector.is-active,
    .service-picker-modal .mobile-service-step-form.is-active,
    .add-service-modal .mobile-service-step-selector.is-active,
    .add-service-modal .mobile-service-step-form.is-active {
        display: block;
    }

    .service-picker-modal .service-picker-search,
    .service-picker-modal .mobile-service-search,
    .add-service-modal .service-picker-search,
    .add-service-modal .mobile-service-search {
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 0 16px;
    }

    .service-picker-modal .service-picker-list,
    .add-service-modal .service-picker-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .service-picker-modal .service-picker-item,
    .add-service-modal .service-picker-item {
        min-height: 84px;
        padding: 14px 16px;
        border-radius: 18px;
    }

    .service-picker-modal .service-picker-detail,
    .add-service-modal .service-picker-detail {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .service-picker-modal .service-picker-detail-header,
    .add-service-modal .service-picker-detail-header {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 18px;
    }

    .service-picker-modal .service-picker-form-grid,
    .add-service-modal .service-picker-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 18px;
        padding-bottom: 16px;
    }

    .service-picker-modal .service-compound-toolbar,
    .add-service-modal .service-compound-toolbar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .service-picker-modal .service-compound-table-shell,
    .add-service-modal .service-compound-table-shell {
        display: none !important;
    }

    .service-picker-modal .mobile-service-lines-list,
    .add-service-modal .mobile-service-lines-list {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        margin-top: 14px;
    }

    .mobile-more-sheet {
        left: max(18px, env(safe-area-inset-left, 0px)) !important;
        right: max(18px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: 560px;
        margin: 0 auto;
    }

    html,
    body,
    .table-wrapper,
    .table-scroll-area,
    .modal-body,
    .service-picker-layout {
        overflow-x: hidden !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .service-picker-modal .service-picker-form-grid,
    .add-service-modal .service-picker-form-grid,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .data-table.mobile-card-table tbody {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .data-table.mobile-card-table tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse),
       (min-width: 1025px) and (max-width: 1366px) and (hover: none) {
    .sidebar {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: grid !important;
        left: 16px;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        padding: 10px;
        border-radius: 24px;
    }

    .dashboard-frame {
        padding: 16px;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .dashboard-shell,
    .app-layout {
        display: block;
        min-height: calc(100vh - 32px);
        min-height: calc(100dvh - 32px);
        height: auto;
        overflow: visible;
        border-radius: 30px;
    }

    .dashboard-main,
    .main-content {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 18px 18px calc(108px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: visible;
    }

    .orders-pending-desktop-table,
    .orders-total-desktop-table,
    #allOrdersModal .all-orders-modal-body > .all-orders-desktop-results,
    #allOrdersModal .all-orders-modal-body > .orders-total-table-shell,
    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell,
    .summary-orders-block .summary-ledger-table-wrapper,
    .summary-section .summary-orders-modal-table-shell,
    .resumen-section .summary-orders-modal-table-shell,
    .payments-summary-section .table-wrapper,
    .payments-summary-section table,
    .payments-summary-section .summary-total-box--income,
    .summary-expenses-card .summary-expenses-list,
    .summary-expenses-card table,
    .summary-expenses-card .summary-total-box--expense,
    .summary-balance-strip-card--active .summary-balance-strip,
    .third-party-section .table-wrapper,
    .terceros-section .table-wrapper,
    .expenses-section .table-wrapper,
    .gastos-section .table-wrapper,
    .closures-section .table-wrapper,
    .otros-cierres-section .table-wrapper {
        display: none !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results,
    .third-party-section .mobile-card-list,
    .terceros-section .mobile-card-list,
    .expenses-section .mobile-card-list,
    .gastos-section .mobile-card-list,
    .closures-section .mobile-card-list,
    .otros-cierres-section .mobile-card-list,
    .summary-section .mobile-card-list,
    .resumen-section .mobile-card-list,
    .mobile-payment-summary-list,
    .mobile-expenses-list,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        box-sizing: border-box !important;
    }

    .orders-pending-mobile-list,
    .orders-total-mobile-list,
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results,
    .summary-orders-mobile-list,
    .mobile-summary-orders-list {
        grid-template-columns: 1fr !important;
    }

    .third-party-mobile-list[hidden],
    .thirdparty-mobile-list[hidden],
    .terceros-mobile-list[hidden],
    .expenses-mobile-list[hidden],
    .gastos-mobile-list[hidden],
    .closures-mobile-list[hidden],
    .summary-orders-mobile-list[hidden],
    .mobile-summary-orders-list[hidden],
    .mobile-payment-summary-list[hidden],
    .mobile-expenses-list[hidden] {
        display: grid !important;
    }

    .mobile-payment-grand-total,
    .mobile-expense-total-card {
        display: flex !important;
        width: 100% !important;
    }

    .mobile-balance-card,
    .mobile-balance-card[hidden] {
        display: block !important;
        width: 100% !important;
    }

    .data-table.mobile-card-table,
    .data-table.mobile-card-table thead,
    .data-table.mobile-card-table tbody,
    .data-table.mobile-card-table tr,
    .data-table.mobile-card-table th,
    .data-table.mobile-card-table td {
        display: block;
        width: 100%;
    }

    .data-table.mobile-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .data-table.mobile-card-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .data-table.mobile-card-table tbody tr {
        padding: 18px 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(210, 225, 235, 0.9);
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06);
    }

    .data-table.mobile-card-table tbody td {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 10px;
        min-width: 0;
    }

    .data-table.mobile-card-table tbody td:last-child {
        margin-bottom: 0;
    }

    .data-table.mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8b8297;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--primary {
        font-size: 16px;
        line-height: 1.22;
        font-weight: 700;
        color: #304A9A;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action,
    .data-table.mobile-card-table tbody td.mobile-cell--action > *,
    .data-table.mobile-card-table tbody td.mobile-cell--action .action-cell,
    .data-table.mobile-card-table tbody td.mobile-cell--action form {
        width: 100%;
    }

    .data-table.mobile-card-table tbody td.mobile-cell--action .btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action a.btn,
    .data-table.mobile-card-table tbody td.mobile-cell--action button.btn {
        width: 100%;
        justify-content: center;
    }

    .service-picker-modal .service-picker-layout,
    .add-service-modal .service-picker-layout {
        display: block !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 22px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .service-picker-modal .service-picker-sidebar,
    .add-service-modal .service-picker-sidebar {
        padding: 0 !important;
        background: transparent !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
    }

    .service-picker-modal .mobile-service-step-selector,
    .service-picker-modal .mobile-service-step-form,
    .add-service-modal .mobile-service-step-selector,
    .add-service-modal .mobile-service-step-form {
        display: none;
    }

    .service-picker-modal .mobile-service-step-selector.is-active,
    .service-picker-modal .mobile-service-step-form.is-active,
    .add-service-modal .mobile-service-step-selector.is-active,
    .add-service-modal .mobile-service-step-form.is-active {
        display: block;
    }

    .service-picker-modal .service-picker-search,
    .service-picker-modal .mobile-service-search,
    .add-service-modal .service-picker-search,
    .add-service-modal .mobile-service-search {
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 0 16px;
    }

    .service-picker-modal .service-picker-list,
    .add-service-modal .service-picker-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .service-picker-modal .service-picker-detail,
    .add-service-modal .service-picker-detail {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .service-picker-modal .service-compound-table-shell,
    .add-service-modal .service-compound-table-shell {
        display: none !important;
    }

    .service-picker-modal .mobile-service-lines-list,
    .add-service-modal .mobile-service-lines-list {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        margin-top: 14px;
    }

    .mobile-more-sheet {
        left: max(18px, env(safe-area-inset-left, 0px)) !important;
        right: max(18px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: 560px;
        margin: 0 auto;
    }

    html,
    body,
    .table-wrapper,
    .table-scroll-area,
    .modal-body,
    .service-picker-layout {
        overflow-x: hidden !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px),
       (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse),
       (min-width: 1025px) and (max-width: 1366px) and (hover: none) {
    .tablet-card-hide {
        display: none !important;
    }

    .tablet-card-show-column {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
    }

    .tablet-card-show-grid {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tablet-card-show-flex {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tablet-card-show-block {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 901px) and (max-width: 1024px),
       (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (orientation: landscape) {
    .expenses-mobile-list.tablet-card-show-grid,
    .gastos-mobile-list.tablet-card-show-grid,
    .third-party-mobile-list.tablet-card-show-grid,
    .thirdparty-mobile-list.tablet-card-show-grid,
    .terceros-mobile-list.tablet-card-show-grid,
    .closures-mobile-list.tablet-card-show-grid,
    .mobile-payment-summary-list.tablet-card-show-grid,
    .mobile-expenses-list.tablet-card-show-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .orders-pending-mobile-list.tablet-card-show-column,
    .orders-total-mobile-list.tablet-card-show-column,
    .mobile-summary-orders-list.tablet-card-show-column,
    .summary-orders-mobile-list.tablet-card-show-column {
        display: flex !important;
        flex-direction: column !important;
    }
}

.tablet-app-mode .tablet-card-hide {
    display: none !important;
}

.tablet-app-mode .tablet-card-show-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
}

.tablet-app-mode .tablet-card-show-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.tablet-app-mode .tablet-card-show-flex {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tablet-app-mode .tablet-card-show-block {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tablet-app-mode .sidebar {
    display: none !important;
}

.tablet-app-mode .mobile-bottom-nav {
    display: grid !important;
}

.tablet-app-mode .orders-pending-mobile-list.tablet-card-show-column,
.tablet-app-mode .orders-total-mobile-list.tablet-card-show-column,
.tablet-app-mode .mobile-summary-orders-list.tablet-card-show-column,
.tablet-app-mode .summary-orders-mobile-list.tablet-card-show-column {
    display: flex !important;
    flex-direction: column !important;
}

.tablet-app-mode .expenses-mobile-list.tablet-card-show-grid,
.tablet-app-mode .gastos-mobile-list.tablet-card-show-grid,
.tablet-app-mode .third-party-mobile-list.tablet-card-show-grid,
.tablet-app-mode .thirdparty-mobile-list.tablet-card-show-grid,
.tablet-app-mode .terceros-mobile-list.tablet-card-show-grid,
.tablet-app-mode .closures-mobile-list.tablet-card-show-grid,
.tablet-app-mode .mobile-payment-summary-list.tablet-card-show-grid,
.tablet-app-mode .mobile-expenses-list.tablet-card-show-grid {
    grid-template-columns: 1fr !important;
}

@media (orientation: landscape) {
    .tablet-app-mode .expenses-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .gastos-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .third-party-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .thirdparty-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .terceros-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .closures-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .mobile-payment-summary-list.tablet-card-show-grid,
    .tablet-app-mode .mobile-expenses-list.tablet-card-show-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tablet-app-mode .orders-pending-mobile-list.tablet-card-show-column,
    .tablet-app-mode .orders-total-mobile-list.tablet-card-show-column,
    .tablet-app-mode .mobile-summary-orders-list.tablet-card-show-column,
    .tablet-app-mode .summary-orders-mobile-list.tablet-card-show-column {
        display: flex !important;
        flex-direction: column !important;
    }
}

.tablet-app-mode .dashboard-frame {
    padding: 12px !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
}

.tablet-app-mode,
.tablet-app-mode body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.tablet-app-mode .dashboard-shell,
.tablet-app-mode .app-layout {
    display: block !important;
    height: auto !important;
    min-height: calc(100vh - 24px) !important;
    min-height: calc(100dvh - 24px) !important;
    overflow: visible !important;
}

.tablet-app-mode .dashboard-main,
.tablet-app-mode .main-content {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.tablet-app-mode .content-area,
.tablet-app-mode .page-content {
    padding-bottom: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
}

.tablet-app-mode .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "copy actions"
        "cta cta" !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 22px !important;
}

.tablet-app-mode .topbar-copy {
    grid-area: copy !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tablet-app-mode .topbar-actions {
    display: contents !important;
}

.tablet-app-mode .header-top-row {
    grid-area: actions !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    align-self: start !important;
}

.tablet-app-mode .delayed-orders-content {
    height: auto !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.tablet-app-mode .delayed-orders-actions {
    width: auto !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

.tablet-app-mode .delayed-orders-count-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    text-align: right !important;
}

.tablet-app-mode .delayed-orders-count {
    font-size: clamp(36px, 5vw, 40px) !important;
}

.tablet-app-mode .delayed-orders-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    border-radius: 24px !important;
    overflow: visible !important;
}

.tablet-app-mode .delayed-orders-info h3 {
    margin: 8px 0 10px !important;
    font-size: clamp(20px, 2.8vw, 22px) !important;
    line-height: 1.2 !important;
}

.tablet-app-mode .delayed-orders-info p {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.tablet-app-mode .alert-label {
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}

.tablet-app-mode .delayed-orders-count-label {
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #736278 !important;
}

.tablet-app-mode .delayed-orders-action-desktop {
    display: none !important;
}

.tablet-app-mode .delayed-orders-action-mobile-wrap {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
}

.tablet-app-mode .delayed-orders-action-mobile {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

@media (max-width: 1024px) {
    .delayed-orders-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 18px 20px !important;
        border-radius: 22px !important;
        overflow: visible !important;
    }

    .delayed-orders-content {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 16px !important;
    }

    .delayed-orders-info {
        min-width: 0 !important;
    }

    .delayed-orders-info h3 {
        margin: 8px 0 10px !important;
        font-size: clamp(20px, 2.7vw, 22px) !important;
        line-height: 1.2 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .delayed-orders-info p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .alert-label {
        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.04em !important;
        font-weight: 700 !important;
    }

    .delayed-orders-actions {
        width: auto !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }

    .delayed-orders-count-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
        gap: 4px !important;
    }

    .delayed-orders-count {
        font-size: clamp(36px, 5vw, 40px) !important;
        line-height: 1 !important;
        color: #4a5899 !important;
        font-weight: 700 !important;
    }

    .delayed-orders-count-label {
        margin-top: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #736278 !important;
        opacity: 1 !important;
    }

    .delayed-orders-action-desktop {
        display: none !important;
    }

    .delayed-orders-action-mobile-wrap {
        display: block !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    .delayed-orders-action-mobile {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 18px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 430px) {
    .delayed-orders-card {
        padding: 16px !important;
    }

    .delayed-orders-content {
        gap: 12px !important;
    }

    .delayed-orders-info h3 {
        font-size: 19px !important;
    }

    .delayed-orders-info p {
        font-size: 13px !important;
    }

    .delayed-orders-count {
        font-size: 34px !important;
    }

    .delayed-orders-count-label {
        font-size: 12px !important;
    }

    .delayed-orders-action-mobile {
        min-height: 44px !important;
        font-size: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .dashboard-main,
    .main-content {
        padding: 16px 16px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .content-area,
    .page-content,
    .dashboard-overview-grid,
    .admin-actions-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid,
    .general-summary-grid {
        gap: 14px !important;
    }

    .topbar {
        padding: 16px 18px !important;
        margin-bottom: 14px !important;
    }

    .card,
    .content-card,
    .summary-card,
    .general-summary-card,
    .dashboard-card,
    .table-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .dashboard-audit-card {
        padding: 18px !important;
    }

    .dashboard-audit-header {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-audit-grid,
    .dashboard-audit-card .kpi-card-grid,
    .dashboard-audit-card .kpi-card-grid--four {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .dashboard-audit-card .general-summary-item,
    .dashboard-audit-card .kpi-card {
        min-height: 82px !important;
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    .dashboard-audit-card .general-summary-item .info-chip-label,
    .dashboard-audit-card .kpi-card .info-chip-label {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .dashboard-audit-card .general-summary-item strong,
    .dashboard-audit-card .kpi-card strong {
        font-size: clamp(22px, 3vw, 26px) !important;
        line-height: 1 !important;
    }

    .audit-action-mobile-wrap {
        margin-top: 12px !important;
    }

    .audit-action-mobile {
        min-height: 46px !important;
    }

    .delayed-orders-card {
        padding: 18px !important;
        min-height: 0 !important;
    }

    .delayed-orders-content {
        gap: 14px !important;
    }

    .delayed-orders-info h3 {
        margin: 6px 0 8px !important;
        font-size: 21px !important;
        line-height: 1.18 !important;
    }

    .delayed-orders-info p {
        font-size: 14px !important;
        line-height: 1.32 !important;
    }

    .delayed-orders-count {
        font-size: 37px !important;
    }

    .delayed-orders-count-label {
        font-size: 12px !important;
    }

    .delayed-orders-action-mobile-wrap {
        margin-top: 14px !important;
    }

    .delayed-orders-action-mobile {
        min-height: 46px !important;
    }
}

.tablet-app-mode .mobile-header-notification {
    flex: 0 0 auto !important;
    justify-self: auto !important;
}

.tablet-app-mode .header-datetime,
.tablet-app-mode .mobile-header-time-block {
    flex: 0 0 auto !important;
    justify-self: auto !important;
    text-align: right !important;
    min-width: max-content !important;
}

.tablet-app-mode .mobile-primary-cta,
.tablet-app-mode .btn-nueva-orden,
.tablet-app-mode .header-main-button .btn,
.tablet-app-mode .header-main-button > a.btn,
.tablet-app-mode .header-main-button > button.btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
}

.tablet-app-mode .header-main-button {
    grid-area: cta !important;
    width: 100% !important;
    margin-top: 2px !important;
}

.tablet-app-mode .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.tablet-app-mode .form-actions .btn,
.tablet-app-mode .form-actions a.btn,
.tablet-app-mode .form-actions button.btn,
.tablet-app-mode .secondary-top-action-btn,
.tablet-app-mode .orders-secondary-action-btn,
.tablet-app-mode .mobile-view-all-button,
.tablet-app-mode .btn-secondary-action-outline,
.tablet-app-mode .orders-detail-action-btn,
.tablet-app-mode .mobile-card-action,
.tablet-app-mode .mobile-thirdparty-action,
.tablet-app-mode .mobile-order-detail-btn,
.tablet-app-mode .mobile-secondary-action,
.tablet-app-mode .mobile-danger-action,
.tablet-app-mode .mobile-expense-edit,
.tablet-app-mode .mobile-expense-delete {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.tablet-app-mode .table-card-header .btn,
.tablet-app-mode .summary-block-header .btn,
.tablet-app-mode .orders-header-right .btn,
.tablet-app-mode .delayed-orders-actions .btn {
    width: 100% !important;
}

.tablet-app-mode .mobile-order-actions,
.tablet-app-mode .mobile-card-secondary-actions,
.tablet-app-mode .mobile-expense-actions,
.tablet-app-mode .mobile-service-card-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.tablet-app-mode .card,
.tablet-app-mode .content-card,
.tablet-app-mode .summary-card,
.tablet-app-mode .table-card,
.tablet-app-mode .dashboard-card,
.tablet-app-mode .order-services-card {
    padding: 16px !important;
    border-radius: 20px !important;
    gap: 16px;
}

.tablet-app-mode .section-title,
.tablet-app-mode .page-title,
.tablet-app-mode .topbar-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

.tablet-app-mode .section-subtitle,
.tablet-app-mode .topbar-subtitle,
.tablet-app-mode .page-subtitle {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.tablet-app-mode .mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px !important;
}

.tablet-app-mode input,
.tablet-app-mode select,
.tablet-app-mode textarea {
    min-height: 44px !important;
}

.tablet-app-mode .mobile-data-card,
.tablet-app-mode .mobile-summary-order-card,
.tablet-app-mode .mobile-payment-summary-card,
.tablet-app-mode .mobile-expense-card,
.tablet-app-mode .mobile-expense-card-v3,
.tablet-app-mode .mobile-thirdparty-card-v1,
.tablet-app-mode .mobile-closure-card,
.tablet-app-mode .mobile-order-card-airy {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(190, 220, 230, 0.9) !important;
    box-shadow: 0 4px 12px rgba(38,55,90,.07) !important;
    overflow: hidden !important;
}

.tablet-app-mode .mobile-summary-orders-list,
.tablet-app-mode .summary-orders-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.tablet-app-mode .mobile-summary-orders-list[hidden],
.tablet-app-mode .summary-orders-mobile-list[hidden] {
    display: flex !important;
}

.tablet-app-mode .mobile-summary-order-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.tablet-app-mode .mobile-summary-order-main {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.tablet-app-mode .mobile-summary-order-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

.tablet-app-mode .mobile-order-code-pill,
.tablet-app-mode .mobile-order-status,
.tablet-app-mode .mobile-payment-pill,
.tablet-app-mode .mobile-status-pill,
.tablet-app-mode .mobile-meta-pill,
.tablet-app-mode .mobile-method-pill {
    font-weight: 700 !important;
}

.tablet-app-mode .mobile-summary-order-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.tablet-app-mode .mobile-summary-metric {
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: #F8FAFF !important;
    border: 1px solid rgba(210,225,235,.75) !important;
}

.tablet-app-mode .mobile-payment-summary-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

.tablet-app-mode .mobile-payment-summary-list[hidden] {
    display: flex !important;
}

.tablet-app-mode .mobile-payment-summary-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 88px !important;
}

.tablet-app-mode .mobile-payment-summary-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.tablet-app-mode .mobile-payment-info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.tablet-app-mode .mobile-payment-total {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #304A9A !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

.tablet-app-mode .mobile-payment-grand-total,
.tablet-app-mode .mobile-payment-grand-total[hidden] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #F5FFF8 0%, #F2FBF5 100%) !important;
    border: 1px solid rgba(180,230,195,.9) !important;
}

.tablet-app-mode .mobile-payment-grand-total strong {
    margin-left: auto !important;
    text-align: right !important;
}

.tablet-app-mode .mobile-expenses-list,
.tablet-app-mode .mobile-expenses-list[hidden] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.tablet-app-mode .register-order-card,
.tablet-app-mode .order-entry-card,
.tablet-app-mode .client-search-card,
.tablet-app-mode .summary-block,
.tablet-app-mode .summary-card,
.tablet-app-mode .payments-summary-section,
.tablet-app-mode .summary-expenses-card,
.tablet-app-mode .summary-balance-strip-card--active,
.tablet-app-mode .third-party-section,
.tablet-app-mode .expenses-section,
.tablet-app-mode .closures-section {
    overflow: hidden !important;
}

.tablet-app-mode .mobile-expense-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.tablet-app-mode .mobile-expense-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.tablet-app-mode .mobile-expense-title {
    color: #304A9A !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.tablet-app-mode .mobile-expense-amount {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #304A9A !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.tablet-app-mode .mobile-expense-total-card,
.tablet-app-mode .mobile-expense-total-card[hidden] {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 18px !important;
    padding: 18px !important;
    border-radius: 24px !important;
}

.tablet-app-mode .mobile-expense-total-info strong {
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.tablet-app-mode .mobile-third-party-card,
.tablet-app-mode .mobile-thirdparty-card {
    display: none !important;
}

.tablet-app-mode .mobile-thirdparty-card-v1,
.tablet-app-mode .mobile-thirdparty-card-v1[hidden] {
    display: block !important;
}

.tablet-app-mode .mobile-thirdparty-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.tablet-app-mode .mobile-thirdparty-title {
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #304A9A !important;
}

.tablet-app-mode .mobile-thirdparty-subtitle {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #6F6A7F !important;
}

.tablet-app-mode .mobile-thirdparty-highlight {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
    background: #F4F3FF !important;
}

.tablet-app-mode .mobile-thirdparty-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.tablet-app-mode .mobile-thirdparty-metric {
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: #F8FAFF !important;
    border: 1px solid rgba(210,225,235,.8) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.tablet-app-mode .mobile-thirdparty-action {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    background: #4A5BA8 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.tablet-app-mode .mobile-balance-card,
.tablet-app-mode .mobile-balance-card[hidden] {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tablet-app-mode .mobile-balance-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.tablet-app-mode .mobile-balance-row {
    width: 100% !important;
    min-height: 84px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.tablet-app-mode .mobile-balance-total-card {
    width: 100% !important;
    padding: 22px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #F8F8FF 0%, #F3F4FF 100%) !important;
    border: 1px solid rgba(205,210,255,.9) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
}

.tablet-app-mode .mobile-balance-total-icon {
    display: none !important;
}

.tablet-app-mode .mobile-balance-total-content strong {
    font-size: clamp(34px, 7vw, 52px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #3046C9 !important;
}

.tablet-app-mode .mobile-balance-total-content small {
    margin: 0 auto !important;
}

.tablet-app-mode .mobile-card-list,
.tablet-app-mode .third-party-mobile-list,
.tablet-app-mode .thirdparty-mobile-list,
.tablet-app-mode .terceros-mobile-list,
.tablet-app-mode .expenses-mobile-list,
.tablet-app-mode .gastos-mobile-list,
.tablet-app-mode .closures-mobile-list {
    gap: 12px !important;
}

@media (orientation: portrait) {
    .tablet-app-mode .summary-grid,
    .tablet-app-mode .summary-two-columns,
    .tablet-app-mode .summary-finance-grid,
    .tablet-app-mode .responsive-grid.two-cols,
    .tablet-app-mode .expenses-bottom-grid,
    .tablet-app-mode .form-grid,
    .tablet-app-mode .third-party-form-grid,
    .tablet-app-mode .cash-box-form-grid,
    .tablet-app-mode .order-form-grid,
    .tablet-app-mode .search-info-grid--client,
    .tablet-app-mode .search-info-grid--order,
    .tablet-app-mode .client-info-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tablet-app-mode .mobile-payment-summary-list.tablet-card-show-grid,
    .tablet-app-mode .mobile-expenses-list.tablet-card-show-grid,
    .tablet-app-mode .third-party-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .thirdparty-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .terceros-mobile-list.tablet-card-show-grid,
    .tablet-app-mode .closures-mobile-list.tablet-card-show-grid {
        grid-template-columns: 1fr !important;
    }

    .tablet-app-mode .general-summary-grid,
    .tablet-app-mode .expenses-bottom-grid,
    .tablet-app-mode .dashboard-grid,
    .tablet-app-mode .cards-grid,
    .tablet-app-mode .responsive-grid.three-cols,
    .tablet-app-mode .admin-grid,
    .tablet-app-mode .admin-actions-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tablet-app-mode .table-card-header,
    .tablet-app-mode .summary-block-header,
    .tablet-app-mode .orders-header,
    .tablet-app-mode .section-header,
    .tablet-app-mode .card-header-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .tablet-app-mode .table-card-header > *,
    .tablet-app-mode .summary-block-header > *,
    .tablet-app-mode .orders-header > * {
        width: 100% !important;
    }

    .tablet-app-mode .mobile-payment-summary-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "info amount"
            "info cta" !important;
        align-items: center !important;
    }

    .tablet-app-mode .mobile-payment-summary-left {
        grid-area: info !important;
    }

    .tablet-app-mode .mobile-payment-total {
        grid-area: amount !important;
    }

    .tablet-app-mode .mobile-payment-open-btn {
        grid-area: cta !important;
        justify-self: end !important;
    }

    .tablet-app-mode .mobile-expense-card {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .tablet-app-mode .mobile-expense-left {
        width: 100% !important;
    }

    .tablet-app-mode .mobile-expense-amount {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    .tablet-app-mode .mobile-balance-row {
        padding: 14px !important;
    }

    .tablet-app-mode .mobile-balance-row strong {
        font-size: 22px !important;
    }
}

/* All orders modal: desktop keeps the table, tablet/mobile use the card list. */
.all-orders-mobile-results,
.orders-modal-results-mobile,
#allOrdersModal .all-orders-mobile-results,
#allOrdersModal .orders-modal-results-mobile {
    display: none !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

#allOrdersModal .all-orders-desktop-results,
#allOrdersModal .orders-total-table-shell,
#allOrdersModal .table-wrapper.orders-total-table-shell {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
}

#allOrdersModal .orders-total-table-shell table {
    display: table !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

#allOrdersModal .orders-total-table-shell thead {
    display: table-header-group !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

#allOrdersModal .orders-total-table-shell tbody {
    display: table-row-group !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 1024px) {
    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .table-wrapper.orders-total-table-shell {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

.tablet-app-mode #allOrdersModal .all-orders-desktop-results,
.tablet-app-mode #allOrdersModal .orders-total-table-shell,
.tablet-app-mode #allOrdersModal .table-wrapper.orders-total-table-shell {
    display: none !important;
}

.tablet-app-mode #allOrdersModal .all-orders-mobile-results,
.tablet-app-mode #allOrdersModal .orders-modal-results-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Orders modals reuse the same autocomplete component used by Ingreso/Busqueda. */
#allOrdersModal .modal-search-autocomplete,
#otherPendingOrdersModal .modal-search-autocomplete {
    position: relative !important;
    overflow: visible !important;
    z-index: 60 !important;
}

#allOrdersModal .modal-search-suggestions,
#otherPendingOrdersModal .modal-search-suggestions {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #d8e7ef !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 36px rgba(55, 48, 90, 0.12) !important;
    padding: 8px !important;
}

/* Service lines: desktop keeps the table, mobile/tablet-app-mode use cards. */
.service-picker-modal .mobile-service-lines-list,
.add-service-modal .mobile-service-lines-list,
.service-picker-modal .mobile-service-line-card,
.add-service-modal .mobile-service-line-card {
    display: none !important;
}

.service-picker-modal .service-compound-table-shell,
.add-service-modal .service-compound-table-shell {
    display: block !important;
}

@media (max-width: 768px) {
    .service-picker-modal .mobile-service-lines-list,
    .add-service-modal .mobile-service-lines-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .service-picker-modal .mobile-service-line-card,
    .add-service-modal .mobile-service-line-card {
        display: block !important;
    }

    .service-picker-modal .service-compound-table-shell,
    .add-service-modal .service-compound-table-shell {
        display: none !important;
    }
}

body.tablet-app-mode .service-picker-modal .mobile-service-lines-list,
body.tablet-app-mode .add-service-modal .mobile-service-lines-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

body.tablet-app-mode .service-picker-modal .mobile-service-line-card,
body.tablet-app-mode .add-service-modal .mobile-service-line-card {
    display: block !important;
}

body.tablet-app-mode .service-picker-modal .service-compound-table-shell,
body.tablet-app-mode .add-service-modal .service-compound-table-shell {
    display: none !important;
}

#allOrdersModal .modal-search-suggestions[hidden],
#otherPendingOrdersModal .modal-search-suggestions[hidden] {
    display: none !important;
}

#allOrdersModal .modal-search-suggestion-item.client-search-result-item,
#otherPendingOrdersModal .modal-search-suggestion-item.client-search-result-item {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    color: #33427f !important;
}

#allOrdersModal .modal-search-suggestion-item.client-search-result-item:hover,
#allOrdersModal .modal-search-suggestion-item.client-search-result-item:focus-visible,
#otherPendingOrdersModal .modal-search-suggestion-item.client-search-result-item:hover,
#otherPendingOrdersModal .modal-search-suggestion-item.client-search-result-item:focus-visible {
    background: #f9fafb !important;
    outline: none !important;
}

#allOrdersModal .modal-search-suggestion-item .client-search-result-left,
#otherPendingOrdersModal .modal-search-suggestion-item .client-search-result-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

#allOrdersModal .modal-search-suggestion-item .client-dni-pill,
#otherPendingOrdersModal .modal-search-suggestion-item .client-dni-pill {
    min-width: 112px !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.orders-modal-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 217, 240, 0.75);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(52, 68, 134, 0.08);
}

.orders-modal-pagination-summary,
.orders-modal-pagination-status,
.orders-server-helper-text,
.order-detail-loading-state {
  color: #6f6a7f;
  font-size: 14px;
  line-height: 1.4;
}

.orders-modal-pagination-summary,
.orders-modal-pagination-status {
  font-weight: 600;
}

.orders-modal-pagination-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.orders-modal-page-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(177, 197, 238, 0.9);
  background: #ffffff;
  color: #4a5899;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.orders-modal-page-btn:hover {
  background: rgba(237, 242, 255, 0.92);
  border-color: rgba(109, 136, 220, 0.85);
  color: #3f4f98;
  box-shadow: 0 8px 16px rgba(74, 88, 153, 0.12);
}

.orders-modal-page-btn.is-active {
  background: #4a5899;
  border-color: #4a5899;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(74, 88, 153, 0.24);
}

.orders-modal-page-btn.is-disabled {
  background: #f4f5fb;
  border-color: rgba(211, 217, 235, 0.95);
  color: #b0b7cf;
  box-shadow: none;
}

.orders-modal-page-arrow {
  padding: 0;
}

.orders-modal-page-ellipsis {
  min-width: 24px;
  text-align: center;
  color: #6f6a7f;
  font-size: 18px;
  font-weight: 700;
}

.order-detail-loading-state {
  margin: 0;
  text-align: center;
  padding: 28px 14px;
}

@media (max-width: 767px) {
  .orders-modal-pagination {
    align-items: flex-start;
    margin-top: 14px;
    margin-bottom: 16px;
    padding: 14px;
  }

  .orders-modal-pagination-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .orders-modal-pagination-status {
    width: 100%;
  }

  .orders-modal-page-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 11px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* Operational load preview on the order form */
.order-operational-load-card {
  --load-preview-accent: #4a5899;
  background: rgba(255, 255, 255, 0.82);
}

.order-operational-load-card.is-low { --load-preview-accent: #3c9564; }
.order-operational-load-card.is-medium { --load-preview-accent: #a87917; }
.order-operational-load-card.is-high { --load-preview-accent: #c06a37; }
.order-operational-load-card.is-critical { --load-preview-accent: #b33f56; }

.order-operational-load-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.order-operational-load-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.order-operational-load-day {
  --day-accent: #4a5899;
  appearance: none;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid rgba(74, 88, 153, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #29264a;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.order-operational-load-day:hover {
  border-color: color-mix(in srgb, var(--day-accent) 34%, white);
  background: color-mix(in srgb, var(--day-accent) 3%, white);
}

.order-operational-load-day:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--day-accent) 42%, white);
  outline-offset: 2px;
}

.order-operational-load-day.is-selected {
  border-color: color-mix(in srgb, var(--day-accent) 58%, white);
  background: color-mix(in srgb, var(--day-accent) 6%, white);
  box-shadow: 0 7px 16px rgba(74, 88, 153, 0.08);
}

.order-operational-load-day.is-preview {
  border-color: color-mix(in srgb, var(--day-accent) 38%, white);
  background: color-mix(in srgb, var(--day-accent) 3%, white);
}

.order-operational-load-day.is-closed,
.order-operational-load-day.is-closed:hover {
  --day-accent: #8b91a6;
  cursor: default;
  border-color: rgba(139, 145, 166, 0.18);
  background: rgba(246, 247, 251, 0.92);
  box-shadow: none;
}

.order-operational-load-day.is-closed > i {
  background: #eef0f5;
}

.order-operational-load-day.is-closed > em {
  background: #eef0f5;
  color: #7a8197;
}

.order-operational-load-day.is-low { --day-accent: #3c9564; }
.order-operational-load-day.is-medium { --day-accent: #a87917; }
.order-operational-load-day.is-high { --day-accent: #c06a37; }
.order-operational-load-day.is-critical { --day-accent: #b33f56; }

.order-operational-load-day > span {
  color: #30305a;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.order-operational-load-day > small {
  color: #746e84;
  font-size: 0.72rem;
  line-height: 1.2;
}

.order-operational-load-day > i {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 28px;
  height: 112px;
  margin: 5px 0 2px;
  padding: 4px;
  border-radius: 999px;
  background: #edf0f6;
  font-style: normal;
}

.order-operational-load-day > i > b {
  display: block;
  width: 100%;
  height: var(--load-progress, 0%);
  min-height: 4px;
  border-radius: 999px;
  background: var(--day-accent);
}

.order-operational-load-day > strong {
  color: #243d86;
  font-size: 1.15rem;
  line-height: 1.1;
}

.order-operational-load-day > em {
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--day-accent) 12%, white);
  color: var(--day-accent);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.order-operational-load-context {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(74, 88, 153, 0.12);
  border-radius: 14px;
  background: rgba(248, 249, 255, 0.78);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.order-operational-load-card.is-low .order-operational-load-context {
  border-color: rgba(60, 149, 100, 0.18);
  background: rgba(240, 250, 244, 0.76);
}

.order-operational-load-card.is-available .order-operational-load-context {
  border-color: rgba(41, 162, 107, 0.2);
  background: rgba(239, 250, 244, 0.84);
}

.order-operational-load-card.is-available .order-operational-load-context-heading > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #DCF7E8;
  color: #fff;
  border: 0;
  box-shadow: none;
}

.order-operational-load-card.is-available .order-operational-load-context-heading > span i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #22B573;
  font-size: 0.72rem;
}

.order-operational-load-card.is-high .order-operational-load-context-heading > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #FFE9C7;
  color: #fff;
  box-shadow: none;
}

.order-operational-load-card.is-high .order-operational-load-context-heading > span i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #FF9D34;
  color: #fff;
  font-size: 0.72rem;
}

.order-operational-load-card.is-high .order-operational-load-status-pill {
  background: #FFE5C3;
  color: #D66D1F;
}

.order-operational-load-card.is-high .order-operational-load-context {
  border-color: rgba(192, 106, 55, 0.18);
  background: rgba(255, 248, 237, 0.8);
}

.order-operational-load-card.is-medium .order-operational-load-context {
  border-color: rgba(205, 164, 48, 0.24);
  background: rgba(255, 250, 232, 0.86);
}

.order-operational-load-card.is-medium .order-operational-load-context-heading > span {
  background: #fff0bd;
  color: #b98508;
}

.order-operational-load-card.is-medium .order-operational-load-status-pill {
  background: #fff0bd;
  color: #a87917;
}

.order-operational-load-card.is-critical .order-operational-load-context {
  border-color: rgba(179, 63, 86, 0.2);
  background: rgba(255, 241, 244, 0.8);
}

.order-operational-load-card.is-empty .order-operational-load-context {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 190px;
  padding: 22px 24px;
  text-align: center;
}

.order-operational-load-card.is-empty .order-operational-load-context-heading {
  justify-content: center;
}

.order-operational-load-card.is-empty .order-operational-load-context-heading > div {
  justify-items: center;
}

.order-operational-load-card.is-empty .order-operational-load-context-heading {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.order-operational-load-card.is-empty .order-operational-load-context-heading > span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e6efff;
  color: #2563c7;
}

.order-operational-load-card.is-empty .order-operational-load-context-heading strong {
  max-width: 220px;
  color: #163b91;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
}

.order-operational-load-card.is-empty .order-operational-load-context > p[data-load-preview-summary] {
  max-width: 230px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(74, 88, 153, 0.14);
  color: #59658d;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.55;
}

.order-operational-load-card.is-empty .order-operational-load-context > p[data-load-preview-detail] {
  display: none;
}

.order-operational-load-context[hidden] {
  display: none;
}

.order-operational-load-context-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.order-operational-load-context-heading > span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #eef0ff;
  color: #4a5899;
}

.order-operational-load-context-heading > span.is-critical {
  background: #fff0f2;
  color: #b33f56;
}

.order-operational-load-context-heading strong {
  color: var(--load-preview-accent);
  font-size: 0.82rem;
  line-height: 1.25;
}

.order-operational-load-context-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.order-operational-load-status-pill {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--load-preview-accent) 13%, white);
  color: var(--load-preview-accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
}

.order-operational-load-status-pill:empty {
  display: none;
}

.order-operational-load-context > p {
  margin: 0 0 5px;
  color: #5f5a71;
  font-size: 0.76rem;
  line-height: 1.4;
}

.order-operational-load-context > p[data-load-preview-summary] {
  color: #302d58;
  font-weight: 700;
}

.order-operational-load-details {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--load-preview-accent) 16%, white);
}

.order-operational-load-details > strong {
  display: block;
  margin-bottom: 8px;
  color: #302d58;
  font-size: 0.76rem;
}

.order-operational-load-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-operational-load-metrics > div {
  min-width: 0;
  padding: 0 10px;
  border-left: 1px solid rgba(74, 88, 153, 0.1);
}

.order-operational-load-metrics > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.order-operational-load-metrics small,
.order-operational-load-metrics b,
.order-operational-load-metrics span {
  display: block;
}

.order-operational-load-metrics small {
  margin-bottom: 4px;
  color: #746e84;
  font-size: 0.66rem;
}

.order-operational-load-metrics b {
  color: #283d82;
  font-size: 0.76rem;
  line-height: 1.25;
}

.order-operational-load-metrics span {
  color: #746e84;
  font-size: 0.66rem;
  line-height: 1.25;
}

.order-operational-load-metric-suggestion {
  color: var(--load-preview-accent) !important;
  font-weight: 700;
}

.order-operational-load-card.is-available .order-operational-load-metric-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: #d8f4e4;
  color: #168451 !important;
  font-size: 0.68rem;
}

.order-operational-load-card.is-medium .order-operational-load-metric-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #d8f4e4;
  color: #168451 !important;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.order-operational-load-card.is-high .order-operational-load-metric-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 999px;
  background: #DDF6E7;
  color: #168451 !important;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.order-operational-load-card.is-high .order-operational-load-preview-suggestion > i,
.order-operational-load-card.is-high .order-operational-load-preview-suggestion-copy {
  display: none;
}

.order-operational-load-card.is-high .order-operational-load-preview-suggestion {
  grid-template-columns: minmax(0, 1fr);
  border-color: rgba(60, 149, 100, 0.2);
  background: transparent;
}

/* High-load state: match the approved warning panel composition. */
.order-operational-load-card.is-high .order-operational-load-context {
  padding: 16px 18px 15px;
  border-color: #f6d5b2;
  border-radius: 18px;
  background: #fff9f1;
}

.order-operational-load-card.is-high .order-operational-load-context-heading {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.order-operational-load-card.is-high .order-operational-load-context-heading > span {
  width: 48px;
  height: 48px;
  background: #ffe8c7;
  flex-basis: 48px;
}

.order-operational-load-card.is-high .order-operational-load-context-heading > span i {
  width: auto;
  height: auto;
  background: transparent;
  color: #ff7618;
  font-size: 2rem;
  line-height: 1;
}

.order-operational-load-card.is-high .order-operational-load-context-heading > div {
  gap: 6px;
  padding-top: 2px;
}

.order-operational-load-card.is-high .order-operational-load-context-heading strong {
  color: #c9361d;
  font-size: 1.22rem;
  line-height: 1.2;
}

.order-operational-load-card.is-high .order-operational-load-status-pill {
  padding: 8px 16px;
  background: #ffe5c3;
  color: #e34d16;
  font-size: 0.96rem;
}

.order-operational-load-card.is-high .order-operational-load-context > p[data-load-preview-summary] {
  max-width: 420px;
  margin: 0 0 12px;
  color: #596b91;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.5;
}

.order-operational-load-card.is-high .order-operational-load-details {
  margin-top: 0;
  padding-top: 12px;
  border-top-color: #f3d2ad;
}

.order-operational-load-card.is-high .order-operational-load-details > strong {
  margin-bottom: 10px;
  color: #173c87;
  font-size: 1rem;
}

.order-operational-load-card.is-high .order-operational-load-metrics {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.5fr);
}

.order-operational-load-card.is-high .order-operational-load-metrics > div {
  min-height: 58px;
  padding: 0 10px;
  border-left-color: #f3d2ad;
}

.order-operational-load-card.is-high .order-operational-load-metrics > div:first-child {
  padding-left: 0;
}

.order-operational-load-card.is-high .order-operational-load-metrics small {
  margin-bottom: 8px;
  color: #66799f;
  font-size: 0.8rem;
}

.order-operational-load-card.is-high .order-operational-load-metrics b {
  color: #153b89;
  font-size: 1.05rem;
}

.order-operational-load-card.is-high .order-operational-load-metrics span {
  color: #66799f;
  font-size: 0.76rem;
}

.order-operational-load-card.is-high .order-operational-load-metric-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  background: #dff6e8;
  color: #178754 !important;
  font-size: 0.72rem;
  white-space: nowrap;
}

.order-operational-load-card.is-high .order-operational-load-metric-suggestion i {
  font-size: 0.85rem;
}

.order-operational-load-card.is-high .order-operational-load-preview-suggestion {
  display: block;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.order-operational-load-card.is-high .order-operational-load-preview-suggestion .btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid #159b61;
  border-radius: 10px;
  background: #159b61;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .order-operational-load-card.is-high .order-operational-load-context {
    padding: 14px;
  }

  .order-operational-load-card.is-high .order-operational-load-context-heading > span {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .order-operational-load-card.is-high .order-operational-load-context-heading > span i {
    font-size: 2rem;
  }

  .order-operational-load-card.is-high .order-operational-load-context-heading strong {
    font-size: 1rem;
  }

  .order-operational-load-card.is-high .order-operational-load-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-operational-load-card.is-high .order-operational-load-metrics > div {
    padding: 0 10px;
  }

  .order-operational-load-card.is-high .order-operational-load-metrics > div:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
}

.order-operational-load-context > p[data-load-preview-remaining] {
  margin-top: 8px;
  color: #4e6b5d;
}

.order-operational-load-context .order-operational-load-preview-suggestion {
  margin-top: 12px;
  border-color: rgba(60, 149, 100, 0.2);
  background: rgba(240, 250, 244, 0.76);
  grid-template-columns: 28px minmax(0, 1fr);
}

.order-operational-load-context .order-operational-load-preview-suggestion .btn {
  grid-column: 1 / -1;
  width: 100%;
  border-color: #249b68;
  background: #249b68;
  color: #fff;
}

.order-operational-load-context .order-operational-load-preview-actions {
  margin-top: 10px;
}

@media (max-width: 899px) {
  .order-operational-load-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .order-operational-load-days {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .order-operational-load-day {
    flex: 0 0 104px;
    scroll-snap-align: start;
  }

  .order-operational-load-context {
    padding: 12px;
  }

  .order-operational-load-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }

  .order-operational-load-metrics > div:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
}

/* Orders modals: keep results scrollable and pagination visually stable. */
#allOrdersModal .modal-body,
#allOrdersModal .all-orders-modal-body,
#otherPendingOrdersModal .modal-body,
#otherPendingOrdersModal .pending-orders-modal-body,
#otherPendingOrdersModal .delayed-orders-modal-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 16px !important;
}

#allOrdersModal .all-orders-desktop-results,
#allOrdersModal .orders-total-table-shell,
#allOrdersModal .table-wrapper.orders-total-table-shell,
#allOrdersModal .all-orders-mobile-results,
#allOrdersModal .orders-modal-results-mobile,
#otherPendingOrdersModal .pending-orders-desktop-results,
#otherPendingOrdersModal .delayed-orders-table-shell,
#otherPendingOrdersModal .pending-orders-mobile-results {
  flex: 1 1 auto !important;
  min-height: 420px;
  min-width: 0;
  scrollbar-gutter: stable;
}

#allOrdersModal .all-orders-desktop-results,
#allOrdersModal .orders-total-table-shell,
#allOrdersModal .table-wrapper.orders-total-table-shell,
#otherPendingOrdersModal .pending-orders-desktop-results,
#otherPendingOrdersModal .delayed-orders-table-shell {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

#allOrdersModal .all-orders-desktop-results,
#allOrdersModal .orders-total-table-shell,
#allOrdersModal .table-wrapper.orders-total-table-shell {
  overflow-y: visible !important;
  position: relative;
  z-index: 1;
}

#allOrdersModal .all-orders-mobile-results,
#allOrdersModal .orders-modal-results-mobile,
#otherPendingOrdersModal .pending-orders-mobile-results {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px;
}

#allOrdersModal .history-empty-state[data-orders-total-empty-state],
#otherPendingOrdersModal .history-empty-state[data-pending-other-empty-state] {
  flex-shrink: 0;
  margin-top: 12px;
  margin-bottom: 16px;
}

#allOrdersModal.is-empty-results .all-orders-desktop-results,
#allOrdersModal.is-empty-results .orders-total-table-shell,
#allOrdersModal.is-empty-results .table-wrapper.orders-total-table-shell,
#allOrdersModal.is-empty-results .all-orders-mobile-results,
#allOrdersModal.is-empty-results .orders-modal-results-mobile {
  display: none !important;
}

.orders-modal-empty-state {
  width: 100%;
  padding: 24px 0 12px;
  opacity: 1;
}

.orders-modal-empty-state-card {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.orders-modal-empty-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--panel-surface);
  color: var(--primary);
  font-size: 22px;
}

.orders-modal-empty-state-title {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.3;
}

.orders-modal-empty-state-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  line-height: 1.55;
}

.orders-modal-empty-state-action {
  margin-top: 4px;
}

@media (max-width: 768px) {
  .orders-modal-empty-state {
    padding-top: 18px;
  }

  .orders-modal-empty-state-card {
    width: 100%;
    padding: 24px 18px;
  }

  .orders-modal-empty-state-action {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  #allOrdersModal .all-orders-desktop-results,
  #allOrdersModal .orders-total-table-shell,
  #allOrdersModal .table-wrapper.orders-total-table-shell,
  #allOrdersModal .all-orders-mobile-results,
  #allOrdersModal .orders-modal-results-mobile,
  #otherPendingOrdersModal .pending-orders-desktop-results,
  #otherPendingOrdersModal .delayed-orders-table-shell,
  #otherPendingOrdersModal .pending-orders-mobile-results {
    min-height: 320px;
  }
}

/* FIX GLOBAL CONTROLADO:
   Evita que la paginacion suba/baje segun la cantidad de filas
   Aplica solo a:
   - Todas las ordenes
   - Ordenes pendientes de entrega
*/

/* Modal mas amplio y estable */
#allOrdersModal .modal-dialog.modal-content.modal-orders-wide,
#otherPendingOrdersModal .modal-dialog.modal-content.delayed-orders-modal.orders-modal-standard {
  width: 96vw !important;
  max-width: 1500px !important;
  height: 94vh !important;
  max-height: 94vh !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* El body ocupa todo el alto restante del modal */
#allOrdersModal .modal-body,
#otherPendingOrdersModal .delayed-orders-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Filtros arriba, sin crecer */
#allOrdersModal .orders-total-filters,
#otherPendingOrdersModal .history-filters,
#otherPendingOrdersModal .pending-other-filters {
  flex: 0 0 auto !important;
}

/* La tabla ocupa siempre el espacio libre, aunque haya pocas filas */
#allOrdersModal .table-container,
#allOrdersModal .orders-total-table-shell,
#otherPendingOrdersModal .delayed-orders-table-shell {
  flex: 1 1 0 !important;
  min-height: 420px !important;
  height: auto !important;
  max-height: none !important;

  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* La tabla no define la altura del modal */
#allOrdersModal .table-wrapper,
#otherPendingOrdersModal .table-wrapper {
  min-height: 100% !important;
}

/* La paginacion queda anclada abajo */
#allOrdersModal .orders-modal-pagination,
#otherPendingOrdersModal .orders-modal-pagination {
  flex: 0 0 auto !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Fase 3A - Apariencia del sistema */
.appearance-page-shell {
  display: grid;
  gap: var(--section-gap, 18px);
}

.appearance-intro-card,
.appearance-preview-workspace,
.appearance-coming-soon-card {
  overflow: hidden;
}

.appearance-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.appearance-theme-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.appearance-preview-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.appearance-theme-chip {
  border: 1px solid var(--color-button-outline-border);
  background: var(--color-button-outline-bg);
  color: var(--primary);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.appearance-theme-chip:hover {
  background: var(--color-button-outline-hover-bg);
  transform: translateY(-1px);
}

.appearance-theme-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-button-primary-strong);
}

.appearance-live-preview-shell {
  display: grid;
  gap: var(--component-gap, 14px);
  margin-top: 20px;
}

.appearance-live-preview-copy {
  display: grid;
  gap: 6px;
}

.appearance-live-preview-title {
  margin: 0;
  color: var(--color-title);
  font-size: clamp(22px, calc(3vw * var(--title-scale, 1)), calc(28px * var(--title-scale, 1)));
  font-weight: var(--heading-font-weight, 700);
  line-height: 1.15;
}

.appearance-live-preview-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 720px;
}

.appearance-live-preview,
.appearance-mini-preview {
  background: var(--app-background);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  color: var(--text);
}

.appearance-live-preview {
  padding: 18px;
}

.appearance-demo-topbar,
.appearance-mini-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.appearance-demo-topbar {
  padding: 18px;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.appearance-demo-topbar-copy,
.appearance-mini-preview-card {
  display: grid;
  gap: var(--component-gap, 8px);
}

.appearance-demo-title {
  color: var(--color-title);
  font-size: calc(28px * var(--title-scale, 1));
  font-weight: var(--heading-font-weight, 700);
  line-height: 1.1;
}

.appearance-demo-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.appearance-demo-badge {
  display: inline-flex;
  min-width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-notification-badge-bg);
  color: var(--color-notification-badge-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}

.appearance-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap, 16px);
}

.appearance-demo-card,
.appearance-mini-preview-card,
.appearance-demo-mini-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.appearance-demo-card {
  display: grid;
  gap: var(--card-gap, 14px);
  padding: var(--card-padding, 18px);
}

.appearance-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--component-gap, 10px);
}

body.has-custom-theme-overrides .btn:not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.order-detail-header-void-btn),
.appearance-page-shell .btn:not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary),
.appearance-modal .btn:not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary),
.appearance-live-preview .btn:not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary),
body.has-custom-theme-overrides .btn-secondary-action-outline:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn),
body.has-custom-theme-overrides .btn-secondary-action-ghost,
body.has-custom-theme-overrides .btn-outline-primary {
  border-radius: var(--button-radius, var(--radius-sm));
  padding: var(--button-padding-y, 13px) var(--button-padding-x, 24px);
  font-size: var(--button-font-size, 0.95rem);
  box-shadow: var(--button-shadow, var(--shadow-button));
}

body.has-custom-theme-overrides .btn-secondary-action-outline:not(.order-detail-whatsapp-link):not(.whatsapp-quick-trigger):not(.search-whatsapp-action):not(.orders-whatsapp-action-btn),
body.has-custom-theme-overrides .btn-secondary-action-ghost,
body.has-custom-theme-overrides .btn-outline-primary {
  box-shadow: none;
}

body.has-custom-theme-overrides .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.order-detail-header-void-btn),
.appearance-page-shell .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary),
.appearance-modal .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary),
.appearance-live-preview .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary) {
  background: var(--button-primary-bg, var(--color-button-primary));
  color: var(--button-primary-color, var(--white));
  border: 1px solid var(--button-primary-border, transparent);
}

body.has-custom-theme-overrides .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.order-detail-header-void-btn):hover,
.appearance-page-shell .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary):hover,
.appearance-modal .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary):hover,
.appearance-live-preview .btn:not(.btn-secondary):not(.btn-danger):not(.is-danger):not(.btn-ghost):not(.btn-secondary-action-outline):not(.btn-secondary-action-ghost):not(.btn-outline-primary):not(.secondary-top-action-btn):not(.orders-secondary-action-btn):not(.mobile-view-all-button):not(.appearance-demo-btn-tertiary):hover {
  background: var(--button-primary-hover-bg, var(--color-button-primary-hover));
}

body.has-custom-theme-overrides .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost),
.appearance-page-shell .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost),
.appearance-modal .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost),
.appearance-live-preview .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost) {
  background: var(--button-secondary-bg, var(--color-button-secondary));
  color: var(--button-secondary-color, var(--white));
  border: 1px solid var(--button-secondary-border, transparent);
}

body.has-custom-theme-overrides .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost):hover,
.appearance-page-shell .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost):hover,
.appearance-modal .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost):hover,
.appearance-live-preview .btn.btn-secondary:not(.btn-danger):not(.is-danger):not(.btn-ghost):hover {
  background: var(--button-secondary-hover-bg, var(--color-button-secondary-hover));
}

.appearance-page-shell .btn.btn-secondary-action-outline,
.appearance-modal .btn.btn-secondary-action-outline,
.appearance-live-preview .btn.btn-secondary-action-outline,
.appearance-page-shell .appearance-demo-btn-tertiary,
.appearance-modal .appearance-demo-btn-tertiary,
.appearance-live-preview .appearance-demo-btn-tertiary {
  background: var(--color-button-tertiary-bg, #ffffff);
  color: var(--color-button-tertiary-text, var(--color-button-primary));
  border: 1px solid var(--color-button-tertiary-border, var(--color-button-outline-border));
  border-radius: var(--button-radius, var(--radius-sm));
  padding: var(--button-padding-y, 13px) var(--button-padding-x, 24px);
  font-size: var(--button-font-size, 0.95rem);
  box-shadow: none;
}

.appearance-page-shell .btn.btn-secondary-action-outline:hover,
.appearance-modal .btn.btn-secondary-action-outline:hover,
.appearance-live-preview .btn.btn-secondary-action-outline:hover,
.appearance-page-shell .appearance-demo-btn-tertiary:hover,
.appearance-modal .appearance-demo-btn-tertiary:hover,
.appearance-live-preview .appearance-demo-btn-tertiary:hover {
  background: var(--color-button-tertiary-hover, var(--color-surface-soft));
  color: var(--color-button-tertiary-text, var(--color-button-primary));
  border-color: var(--color-button-tertiary-border, var(--color-button-primary));
}

.appearance-page-shell .btn.btn-secondary-action-outline i,
.appearance-modal .btn.btn-secondary-action-outline i,
.appearance-live-preview .btn.btn-secondary-action-outline i,
.appearance-page-shell .appearance-demo-btn-tertiary i,
.appearance-modal .appearance-demo-btn-tertiary i,
.appearance-live-preview .appearance-demo-btn-tertiary i {
  color: currentColor;
}

body.has-custom-theme-overrides .btn.expense-cash-box-submit {
  background: var(--button-primary-bg, var(--color-button-primary));
  color: var(--button-primary-color, var(--color-button-primary-color, #fff));
  border: 1px solid var(--button-primary-border, var(--color-button-primary, var(--color-primary)));
  box-shadow: var(--button-shadow, var(--shadow-button));
}

body.has-custom-theme-overrides .btn.expense-cash-box-submit:hover,
body.has-custom-theme-overrides .btn.expense-cash-box-submit:focus-visible {
  background: var(--button-primary-hover-bg, var(--color-button-primary-hover));
  color: var(--button-primary-color, var(--color-button-primary-color, #fff));
  border-color: var(--button-primary-hover-bg, var(--color-button-primary-hover));
}

body.has-custom-theme-overrides .btn.expense-cash-box-submit:active {
  background: var(--button-primary-hover-bg, var(--color-button-primary-hover));
  color: var(--button-primary-color, var(--color-button-primary-color, #fff));
  border-color: var(--button-primary-hover-bg, var(--color-button-primary-hover));
}

body.has-custom-theme-overrides .btn.expense-cash-box-submit:disabled,
body.has-custom-theme-overrides .btn.expense-cash-box-submit[disabled] {
  color: var(--button-primary-color, var(--color-button-primary-color, #fff));
}

body.has-custom-theme-overrides .btn.expense-cash-box-submit i,
body.has-custom-theme-overrides .btn.expense-cash-box-submit .fa,
body.has-custom-theme-overrides .btn.expense-cash-box-submit .fa-solid {
  color: currentColor !important;
}

.appearance-demo-button {
  gap: 10px;
}

.appearance-demo-button-icon {
  display: none;
  font-size: 0.88em;
  line-height: 1;
}

.appearance-live-preview[data-button-icon-mode="left"] .appearance-demo-button-icon--left,
.appearance-live-preview[data-button-icon-mode="right"] .appearance-demo-button-icon--right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.appearance-demo-field {
  margin: 0;
}

.appearance-demo-mini-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--panel-surface);
}

.appearance-demo-mini-card .section-subtitle {
  margin: 0;
}

.appearance-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.appearance-preset-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.appearance-preset-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-button-outline-border);
  box-shadow: var(--shadow);
}

.appearance-preset-card:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--color-focus-ring), var(--shadow);
}

.appearance-preset-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow);
  background: var(--panel-surface);
}

.appearance-preset-card.is-active .appearance-preset-code,
.appearance-preset-card.is-active .appearance-preset-tag {
  border-color: var(--primary);
  background: var(--color-button-outline-hover-bg);
}

.appearance-preset-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.appearance-preset-card-head h4 {
  margin: 6px 0 0;
  color: var(--color-title);
  font-size: 18px;
  line-height: 1.2;
}

.appearance-preset-code,
.appearance-preset-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--color-surface-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}

.appearance-preset-tag {
  white-space: nowrap;
}

.appearance-preset-description {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.appearance-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.appearance-swatch-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.appearance-swatch-chip {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.appearance-mini-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.appearance-mini-preview-card {
  padding: 14px;
}

.appearance-mini-preview-card input {
  margin-top: 10px;
}

.appearance-coming-soon-grid {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}

.appearance-coming-soon-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 20px;
}

.appearance-coming-soon-item i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--secondary);
  font-size: 18px;
}

.appearance-coming-soon-item strong {
  display: block;
  color: var(--color-title);
  margin-bottom: 4px;
}

.appearance-coming-soon-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.appearance-coming-soon-item span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.appearance-coming-soon-item.is-disabled {
  opacity: 0.82;
}

@media (max-width: 1024px) {
  .appearance-demo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .appearance-theme-selector {
    gap: 8px;
  }

  .appearance-theme-chip {
    width: 100%;
    justify-content: center;
  }

  .appearance-demo-topbar,
  .appearance-preset-card-head {
    flex-direction: column;
  }

  .appearance-coming-soon-item {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }

  .appearance-demo-title {
    font-size: 24px;
  }

  .appearance-live-preview,
  .appearance-preset-card,
  .appearance-demo-card {
    padding: 16px;
  }
}

/* Fase 3A.2 - Refinamiento visual */
.appearance-page-shell {
  gap: 22px;
}

.appearance-notice-band,
.appearance-selector-card,
.appearance-preview-workspace,
.appearance-library-card,
.appearance-coming-soon-card {
  position: relative;
}

.appearance-notice-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--panel-surface);
}

.appearance-notice-band__icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: var(--secondary);
  box-shadow: var(--shadow-soft);
  font-size: 20px;
}

.appearance-notice-band__copy {
  display: grid;
  gap: 6px;
}

.appearance-notice-band__copy .section-title {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
}

.appearance-notice-band__copy .section-subtitle {
  margin: 0;
  max-width: 820px;
}

.appearance-notice-band__accent {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.appearance-notice-band__accent span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-soft), transparent);
}

.appearance-notice-band__accent span:first-child {
  width: 90px;
}

.appearance-notice-band__accent span:last-child {
  width: 54px;
}

.appearance-selector-card,
.appearance-preview-workspace,
.appearance-library-card,
.appearance-coming-soon-card {
  padding: 20px;
}

.appearance-selector-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.appearance-selector-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.appearance-selector-option:hover {
  transform: translateY(-1px);
  border-color: var(--color-button-outline-border);
}

.appearance-selector-option.is-active {
  border-color: var(--primary);
  background: var(--panel-surface);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-soft);
}

.appearance-selector-option__swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.appearance-selector-option__copy {
  display: grid;
  gap: 3px;
  text-align: left;
}

.appearance-selector-option__copy strong {
  color: var(--color-title);
  font-size: 14px;
  line-height: 1.2;
}

.appearance-selector-option__copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.appearance-selector-option__check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: transparent;
  border: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.appearance-selector-option.is-active .appearance-selector-option__check {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.appearance-preview-note {
  margin-top: 12px;
}

.appearance-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.appearance-preview-theme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.appearance-preview-control-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  margin: 14px 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-surface) 86%, white 14%);
  box-shadow: var(--shadow-soft);
}

.appearance-preview-control-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.appearance-current-theme-label {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.appearance-preview-control-right {
  display: grid;
  justify-items: end;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  justify-self: end;
}

.appearance-preview-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  width: auto;
}

.appearance-inline-form {
  margin: 0;
}

.appearance-preview-buttons .appearance-inline-form,
.appearance-preview-buttons form,
.appearance-preview-buttons .appearance-actions-row {
  display: inline-flex;
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.appearance-save-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.appearance-save-state i {
  color: var(--primary);
}

.appearance-save-state.is-dirty {
  border-color: var(--secondary);
  background: var(--color-button-outline-hover-bg);
  color: var(--secondary);
}

.appearance-save-state.is-dirty i {
  color: var(--secondary);
}

.appearance-actions-row {
  display: flex;
  gap: 0;
  align-items: center;
  margin-top: 0;
}

.appearance-preview-buttons .btn {
  width: auto;
  min-width: max-content;
  min-height: 42px;
  white-space: nowrap;
}

.appearance-page-shell .btn.is-loading,
.appearance-modal .btn.is-loading {
  opacity: 0.88;
  cursor: wait;
  pointer-events: none;
}

.appearance-page-shell .btn.is-loading,
.appearance-modal .btn.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.appearance-loading-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  flex-shrink: 0;
  animation: appearance-loading-spin 0.72s linear infinite;
}

@keyframes appearance-loading-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.appearance-reset-btn {
  background: var(--color-button-outline-bg);
  color: var(--primary);
  border: 1px solid var(--color-button-outline-border);
  box-shadow: var(--shadow-soft);
}

.appearance-reset-btn:hover {
  background: var(--color-button-outline-hover-bg);
}

.appearance-actions-helper {
  margin: 0;
  max-width: 360px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.appearance-live-preview {
  padding: 22px;
}

.appearance-demo-chrome {
  margin-bottom: 16px;
}

.appearance-demo-topbar {
  margin-bottom: 0;
}

.appearance-demo-stage {
  display: grid;
  gap: var(--section-gap, 16px);
}

.appearance-demo-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--component-gap, 18px);
  padding: var(--card-padding, 22px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.appearance-demo-hero-card__copy {
  display: grid;
  gap: var(--component-gap, 8px);
  max-width: 640px;
}

.appearance-demo-hero-card__copy .section-title,
.appearance-demo-card .section-title {
  margin: 0;
}

.appearance-demo-hero-card__copy .section-subtitle,
.appearance-demo-card .section-subtitle {
  margin: 0;
}

.appearance-demo-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap, 16px);
}

.appearance-demo-card {
  padding: var(--card-padding, 18px);
}

.appearance-demo-card--soft {
  align-content: start;
  background: var(--card-surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.appearance-demo-inline-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-badge-bg, var(--surface-soft));
  color: var(--color-badge-text, var(--primary));
  border: 1px solid var(--color-badge-border, var(--line));
  font-size: 12px;
  font-weight: 700;
}

.appearance-system-preview {
  display: grid;
  gap: 0;
}

.appearance-system-preview__header-shell {
  margin-bottom: var(--component-gap, 12px);
}

.appearance-system-preview__hero-badge {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  background: var(--color-badge-bg, var(--surface-soft));
  color: var(--color-badge-text, var(--primary));
  border: 1px solid var(--color-badge-border, var(--line));
  box-shadow: var(--shadow-soft);
}

.appearance-system-preview__content {
  display: grid;
  gap: var(--section-gap, 12px);
}

.appearance-system-preview__card {
  align-items: center;
}

.appearance-system-preview__card-copy {
  max-width: 620px;
}

.appearance-system-preview__actions {
  justify-content: flex-end;
}

@media (max-width: 1180px) and (min-width: 768px) {
  .tablet-app-mode .appearance-live-preview .appearance-demo-actions:not(.appearance-system-preview__actions),
  .appearance-live-preview .appearance-demo-actions:not(.appearance-system-preview__actions) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
  }

  .tablet-app-mode .appearance-live-preview .appearance-demo-actions:not(.appearance-system-preview__actions) .btn,
  .appearance-live-preview .appearance-demo-actions:not(.appearance-system-preview__actions) .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    justify-content: center !important;
    align-self: stretch !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .tablet-app-mode .appearance-system-preview__actions.appearance-demo-actions,
  .appearance-system-preview__actions.appearance-demo-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .tablet-app-mode .appearance-modal .appearance-system-preview__actions.appearance-demo-actions .appearance-demo-button,
  .tablet-app-mode .appearance-page-shell .appearance-system-preview__actions.appearance-demo-actions .appearance-demo-button,
  .appearance-system-preview__actions.appearance-demo-actions .appearance-demo-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: center !important;
    align-self: stretch !important;
    min-height: 44px !important;
    white-space: nowrap;
    margin: 0 !important;
  }

  .tablet-app-mode .appearance-system-preview__actions.appearance-demo-actions .appearance-demo-button--tertiary,
  .appearance-system-preview__actions.appearance-demo-actions .appearance-demo-button--tertiary {
    align-self: stretch !important;
    margin: 0 !important;
  }
}

.appearance-system-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--section-gap, 12px);
  align-items: stretch;
}

.appearance-system-preview__form,
.appearance-system-preview__modal,
.appearance-system-preview__table-card {
  padding: var(--card-padding, 16px);
}

.appearance-system-preview__form {
  align-content: start;
}

.appearance-system-preview__modal {
  display: grid;
  gap: var(--card-gap, 10px);
  align-content: start;
  background: var(--card-surface);
}

.appearance-system-preview__modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--component-gap, 10px);
  flex-wrap: wrap;
}

.appearance-system-preview__table-card {
  display: grid;
  gap: var(--card-gap, 10px);
  background: var(--card-surface);
}

.appearance-system-preview__segments-card {
  display: grid;
  gap: var(--card-gap, 10px);
  background: var(--card-surface);
}

.appearance-system-preview__segments-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--component-gap, 10px);
}

.appearance-system-preview__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.appearance-system-preview__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-segmented-border, #D9E6EF);
  background: var(--color-segmented-bg, #FFFFFF);
  color: var(--color-segmented-text, var(--color-title));
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.appearance-system-preview__segment:not(.appearance-system-preview__segment--active):hover {
  background: var(--color-segmented-hover-bg, var(--color-surface-soft));
  color: var(--color-segmented-text, var(--color-title));
  border-color: var(--color-segmented-border, #D9E6EF);
}

.appearance-system-preview__segment--active,
.appearance-system-preview__segment--active:hover,
.appearance-system-preview__segment--active:focus-visible {
  background: var(--color-segmented-active-bg, var(--color-primary));
  color: var(--color-segmented-active-text, #FFFFFF);
  border-color: var(--color-segmented-active-bg, var(--color-primary));
  box-shadow: none;

}

.appearance-system-preview__segment--active::before,
.appearance-system-preview__segment--active::after {
  display: none;
  content: none;
}

.appearance-system-preview__table-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--component-gap, 10px);
}

.appearance-system-preview__table-header .section-title,
.appearance-system-preview__table-card .section-subtitle {
  margin: 0;
}

.appearance-system-preview__table-action {
  min-width: 0;
  white-space: nowrap;
}

.appearance-system-preview__table-shell {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, white 8%);
  box-shadow: var(--shadow-soft);
}

.appearance-system-preview__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.appearance-system-preview__table th,
.appearance-system-preview__table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  vertical-align: middle;
}

.appearance-system-preview__table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--card) 88%, white 12%);
}

.appearance-system-preview__table tbody tr + tr td,
.appearance-system-preview__table-row + .appearance-system-preview__table-row td {
  border-top: 1px solid var(--line);
}

.appearance-system-preview__table-row td {
  background: color-mix(in srgb, var(--card) 97%, transparent);
}

.appearance-system-preview__table td:first-child,
.appearance-system-preview__table td:nth-child(2) {
  color: var(--color-title);
  font-weight: 700;
}

.appearance-system-preview__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.appearance-system-preview__pill--pending {
  background: #fff3cd;
  color: #9a6700;
  border-color: #f2d38b;
}

.appearance-system-preview__pill--success {
  background: #dcfce7;
  color: #1f7a4c;
  border-color: #b7e7ca;
}

.appearance-system-preview__pill--info {
  background: #e4e6fb;
  color: #4a5899;
  border-color: #cfd4f7;
}

.appearance-system-preview__pill--ready {
  background: #e0f2fe;
  color: #235f9f;
  border-color: #bfe2fb;
}

.appearance-system-preview__pill--warning {
  background: #fff0db;
  color: #a45300;
  border-color: #f5cf9a;
}

.appearance-system-preview__pill--neutral {
  background: #eef1f6;
  color: #5e6776;
  border-color: #d8dee8;
}

.appearance-system-preview__action-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-button-tertiary-border, var(--line)) 72%, white 28%);
  background: color-mix(in srgb, var(--color-button-tertiary-bg, var(--card)) 84%, white 16%);
  color: var(--color-button-tertiary-text, var(--color-title));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.appearance-system-preview__action-dot i,
.appearance-system-preview__action-dot .fa,
.appearance-system-preview__action-dot .fa-solid {
  color: currentColor;
}

@media (max-width: 1200px) {
  .appearance-system-preview__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .appearance-system-preview__card,
  .appearance-system-preview__table-header,
  .appearance-system-preview__modal-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .appearance-system-preview__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .appearance-system-preview__actions .btn,
  .appearance-system-preview__modal-footer .btn {
    width: 100%;
  }

  .appearance-system-preview__table-shell {
    overflow-x: auto;
  }

  .appearance-system-preview__table {
    min-width: 560px;
  }
}

.appearance-library-card .section-header,
.appearance-branding-card .section-header,
.appearance-coming-soon-card .section-header {
  margin-bottom: 16px;
}

.appearance-branding-form {
  display: grid;
  gap: 16px;
}

.appearance-branding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.appearance-branding-card .form-group {
  margin-bottom: 0;
}

.appearance-branding-card .helper-text {
  margin-top: 8px;
}

.appearance-branding-actions {
  display: flex;
  justify-content: flex-end;
}

.appearance-custom-theme-card .section-header {
  margin-bottom: 16px;
}

.appearance-custom-theme-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-surface);
  box-shadow: var(--shadow-soft);
}

.appearance-custom-theme-status .section-title {
  margin: 4px 0 0;
  font-size: 18px;
}

.appearance-custom-themes-card .section-header {
  margin-bottom: 16px;
}

.appearance-custom-theme-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.appearance-custom-theme-list-compact {
  grid-template-columns: 1fr;
}

.appearance-custom-theme-item {
  display: grid;
  gap: 12px;
  min-height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.appearance-custom-theme-item.is-active {
  border-color: var(--primary);
  background: var(--panel-surface);
}

.appearance-custom-theme-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(200px, 0.75fr) auto;
  gap: 14px;
  align-items: start;
}

.appearance-custom-theme-info {
  display: grid;
  gap: 10px;
}

.appearance-custom-theme-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.appearance-custom-theme-copy {
  display: grid;
  gap: 6px;
}

.appearance-custom-theme-copy h4,
.appearance-custom-theme-copy p {
  margin: 0;
}

.appearance-custom-theme-copy p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.appearance-custom-theme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.appearance-custom-theme-base-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel-surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.appearance-custom-theme-swatches {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.appearance-custom-theme-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.appearance-custom-theme-helper {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: 240px;
}

.appearance-custom-theme-actions-menu {
  display: grid;
  gap: 10px;
  justify-items: end;
  align-content: start;
}

.appearance-custom-theme-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.appearance-custom-theme-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.appearance-custom-theme-updated {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.appearance-custom-theme-edit {
  margin-top: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.appearance-custom-theme-edit summary {
  cursor: pointer;
  color: var(--secondary);
  font-weight: 700;
  list-style: none;
}

.appearance-custom-theme-edit summary::-webkit-details-marker {
  display: none;
}

.appearance-custom-theme-edit-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.appearance-custom-theme-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel-surface);
  border: 1px solid var(--line);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.appearance-custom-theme-mini-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--custom-surface) 86%, white 14%) 0%, white 100%);
  border: 1px solid var(--line);
  min-height: 118px;
}

.appearance-custom-theme-mini-preview__bar {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--custom-primary);
}

.appearance-custom-theme-mini-preview__body {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: white;
  border: 1px solid color-mix(in srgb, var(--custom-primary) 18%, var(--line));
}

.appearance-custom-theme-mini-preview__pill {
  display: inline-flex;
  width: 72px;
  height: 10px;
  border-radius: 999px;
  background: var(--custom-secondary);
}

.appearance-custom-theme-mini-preview__actions {
  display: flex;
  gap: 8px;
}

.appearance-custom-theme-mini-preview__actions span {
  display: block;
  height: 28px;
  border-radius: 10px;
}

.appearance-custom-theme-mini-preview__actions span:first-child {
  flex: 1;
  background: var(--custom-primary);
}

.appearance-custom-theme-mini-preview__actions span:last-child {
  width: 44%;
  background: color-mix(in srgb, var(--custom-secondary) 24%, white);
  border: 1px solid color-mix(in srgb, var(--custom-secondary) 38%, white);
}

.appearance-icon-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
}

.appearance-icon-action.is-primary {
  border-color: var(--primary);
}

.appearance-icon-action.is-danger {
  border-color: rgba(214, 61, 79, 0.24);
  color: var(--danger);
}

.appearance-custom-theme-danger-btn {
  border-color: rgba(214, 61, 79, 0.24);
  color: var(--danger);
}

.appearance-custom-theme-danger-btn:hover {
  background: rgba(214, 61, 79, 0.08);
  border-color: rgba(214, 61, 79, 0.32);
  color: var(--danger);
}

.appearance-custom-theme-duplicate-btn {
  min-width: 96px;
}

.appearance-custom-theme-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: var(--panel-surface);
  text-align: center;
}

.appearance-custom-theme-empty i {
  font-size: 24px;
  color: var(--primary);
}

.appearance-custom-theme-empty h4,
.appearance-custom-theme-empty p {
  margin: 0;
}

.appearance-custom-theme-empty p {
  color: var(--muted);
  line-height: 1.5;
}

.appearance-custom-theme-banner {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-surface);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.appearance-custom-theme-name-fields {
  margin-bottom: 2px;
}

.appearance-custom-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.appearance-custom-color-field {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.appearance-custom-color-field .helper-text {
  margin: 0;
}

.appearance-custom-color-input-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.appearance-custom-color-input-row input[type="color"] {
  width: 64px;
  min-width: 64px;
  height: 44px;
  padding: 4px;
  border-radius: 14px;
  cursor: pointer;
}

.appearance-custom-color-input-row input[type="text"] {
  min-width: 140px;
  text-transform: uppercase;
}

.appearance-custom-color-preview {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--primary) 12%);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.appearance-custom-color-preview__header {
  display: grid;
  gap: 6px;
}

.appearance-custom-color-preview__header .section-title,
.appearance-custom-color-preview__header .section-subtitle {
  margin: 0;
}

.appearance-custom-theme-demo {
  min-height: 0;
}

.appearance-custom-theme-actions {
  display: grid;
  gap: 12px;
}

.appearance-custom-theme-actions > .helper-text {
  margin: 0;
}

.appearance-visual-branding-card .section-header {
  margin-bottom: 12px;
}

.appearance-branding-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.appearance-branding-upload-item {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.appearance-branding-upload-item--header-bg {
  grid-column: 1 / -1;
  gap: 10px;
}

.appearance-branding-upload-item:hover {
  border-color: var(--color-button-outline-border);
  transform: translateY(-1px);
}

.appearance-branding-upload-item.is-drag-over {
  border-color: var(--primary);
  background: var(--color-button-outline-hover-bg);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-soft);
}

.appearance-branding-upload-item.has-pending-file {
  border-color: var(--primary);
}

.appearance-branding-upload-item.has-file-warning {
  border-color: var(--danger);
}

.appearance-branding-preview-box {
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  background: var(--panel-surface);
}

.appearance-branding-preview-box--header-bg {
  min-height: 190px;
}

.appearance-branding-preview-img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.appearance-branding-preview-img--favicon {
  max-height: 48px;
}

.appearance-branding-preview-img--header-bg {
  width: 100%;
  max-height: none;
  height: 168px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
}

.appearance-branding-upload-item .form-group {
  display: grid;
  gap: 6px;
}

.appearance-branding-upload-item .helper-text {
  margin: 0;
  line-height: 1.4;
}

.appearance-branding-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.appearance-branding-field-head--card {
  margin-bottom: 0;
}

.appearance-branding-field-head label {
  margin: 0;
}

.appearance-branding-remove-btn,
.appearance-branding-remove-btn.btn,
.appearance-branding-remove-btn.btn.btn-secondary {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
  gap: 6px;
  background: var(--card);
  color: var(--color-button-tertiary-text, var(--primary));
  border: 1px solid var(--color-button-tertiary-border, var(--line));
  box-shadow: none;
}

.appearance-branding-remove-btn i,
.appearance-branding-remove-btn .fa,
.appearance-branding-remove-btn .fa-solid {
  color: currentColor;
}

.appearance-branding-remove-btn:hover,
.appearance-branding-remove-btn.btn:hover,
.appearance-branding-remove-btn.btn.btn-secondary:hover {
  background: var(--color-button-tertiary-hover, var(--panel-surface));
  color: var(--color-button-tertiary-text, var(--primary));
  border-color: var(--color-button-tertiary-text, var(--primary));
  transform: none;
}

.appearance-branding-placeholder {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--muted);
  text-align: center;
}

.appearance-branding-placeholder i {
  font-size: 22px;
  color: var(--primary);
}

.appearance-branding-drop-hint {
  font-size: 12px;
  line-height: 1.35;
}

.appearance-branding-file-name {
  min-height: 18px;
}

.appearance-branding-form-group--header-bg {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.appearance-branding-form-group--header-bg [data-branding-file-input],
.appearance-branding-form-group--header-bg input[type="file"] {
  width: 100%;
  max-width: 100%;
  display: block;
  justify-self: stretch;
}

.appearance-branding-upload-item.has-pending-file .appearance-branding-file-name {
  color: var(--primary);
  font-weight: 700;
}

.appearance-branding-upload-item.has-file-warning .appearance-branding-file-name {
  color: var(--danger);
  font-weight: 700;
}

.appearance-branding-upload-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  margin-bottom: 24px;
}

.appearance-visual-branding-modal {
  width: min(1280px, calc(100vw - 48px));
  max-width: none;
}

.appearance-visual-branding-modal .appearance-modal-body {
  padding: 20px 22px 22px;
}

.appearance-preset-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 0;
  align-items: stretch;
}

.appearance-preset-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  min-height: 100%;
}

.appearance-preset-card.is-active {
  background: var(--panel-surface);
}

.appearance-preset-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.appearance-preset-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.appearance-preset-card-head h4 {
  margin: 0;
}

.appearance-preset-tag {
  min-width: 104px;
  flex-shrink: 0;
  text-align: center;
}

.appearance-preset-description {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.appearance-swatch-row {
  margin-top: auto;
  align-items: flex-end;
}

.appearance-coming-soon-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 0;
}

.appearance-coming-soon-item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding: 14px 16px;
}

.appearance-coming-soon-item span:last-child {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

@media (max-width: 1200px) {
  .appearance-selector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .appearance-notice-band {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .appearance-notice-band__accent {
    display: none;
  }

.appearance-selector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-preview-header,
  .appearance-demo-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .appearance-demo-support-grid {
    grid-template-columns: 1fr;
  }

  .appearance-branding-grid {
    grid-template-columns: 1fr;
  }

  .appearance-custom-theme-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .appearance-custom-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-custom-theme-list {
    grid-template-columns: 1fr;
  }

  .appearance-custom-theme-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .appearance-custom-theme-helper {
    max-width: none;
  }

  .appearance-custom-theme-actions-menu,
  .appearance-custom-theme-secondary-actions {
    justify-items: stretch;
    justify-content: stretch;
  }

  .appearance-branding-upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-branding-upload-item--header-bg {
    grid-column: 1 / -1;
  }

  .appearance-preview-control-bar {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .appearance-preview-control-right {
    justify-items: stretch;
    justify-self: stretch;
    min-width: 0;
  }

  .appearance-preview-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .appearance-preview-buttons .appearance-inline-form,
  .appearance-preview-buttons form,
  .appearance-preview-buttons .appearance-actions-row,
  .appearance-preview-buttons .btn {
    width: 100%;
  }

  .appearance-actions-helper {
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .appearance-page-shell {
    gap: 18px;
  }

  .appearance-notice-band,
  .appearance-selector-card,
  .appearance-preview-workspace,
  .appearance-library-card,
  .appearance-coming-soon-card,
  .appearance-live-preview {
    padding: 16px;
  }

  .appearance-selector-grid {
    grid-template-columns: 1fr;
  }

  .appearance-custom-color-grid {
    grid-template-columns: 1fr;
  }

  .appearance-custom-theme-head,
  .appearance-preset-card-head,
  .appearance-custom-theme-swatches {
    flex-direction: column;
    align-items: flex-start;
  }

  .appearance-custom-theme-layout {
    grid-template-columns: 1fr;
  }

  .appearance-selector-option {
    padding: 13px 14px;
  }

  .appearance-coming-soon-grid {
    grid-template-columns: 1fr;
  }

  .appearance-preview-control-bar,
  .appearance-inline-form,
  .appearance-actions-row {
    width: 100%;
  }

  .appearance-actions-row .btn {
    width: 100%;
    justify-content: center;
  }

  .appearance-custom-theme-actions-menu,
  .appearance-custom-theme-secondary-actions {
    justify-items: stretch;
    justify-content: flex-start;
  }

  .appearance-branding-actions,
  .appearance-branding-actions .btn,
  .appearance-custom-theme-actions .btn,
  .appearance-custom-theme-actions-menu .btn,
  .appearance-custom-theme-secondary-actions .btn,
  .appearance-branding-upload-actions,
  .appearance-branding-upload-actions .btn {
    width: 100%;
  }

  .appearance-branding-upload-grid {
    grid-template-columns: 1fr;
  }

  .appearance-branding-upload-item--header-bg {
    grid-column: auto;
  }
}

/* Fase 5A.3 - Hub compacto */
.appearance-status-grid,
.appearance-hub-grid {
  display: grid;
  gap: 14px;
}

.appearance-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.appearance-hub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.appearance-status-card,
.appearance-hub-card {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.appearance-status-card i,
.appearance-hub-card i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.appearance-status-card strong,
.appearance-hub-card .section-title {
  margin: 0;
  color: var(--color-title);
}

.appearance-status-card p,
.appearance-hub-card .section-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.appearance-hub-card {
  align-content: start;
}

.appearance-hub-card .btn {
  justify-self: start;
  margin-top: 2px;
}

.appearance-compact-preview-card {
  padding: 20px;
}

.appearance-compact-preview {
  margin-top: 8px;
}

.appearance-modal-open {
  overflow: hidden;
}

.appearance-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2500;
}

.appearance-modal.is-open {
  display: block;
}

.appearance-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 27, 40, 0.5);
}

.appearance-modal-panel {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: min(92vh, 980px);
  margin: 5vh auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.appearance-modal-panel--wide {
  width: min(1280px, calc(100vw - 32px));
}

.appearance-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-surface);
}

.appearance-modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
}

.appearance-modal-body .appearance-preview-workspace,
.appearance-modal-body .appearance-theme-hub-card,
.appearance-modal-body .appearance-custom-themes-card,
.appearance-modal-body .appearance-custom-theme-card,
.appearance-modal-body .appearance-branding-card,
.appearance-modal-body .appearance-visual-branding-card,
.appearance-modal-body .appearance-coming-soon-card {
  margin: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  background: transparent;
}

.appearance-page-shell > #appearanceThemeHub,
.appearance-page-shell > .appearance-custom-themes-card {
  display: none;
}

.appearance-theme-modal-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.appearance-theme-modal-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  flex: 0 0 auto;
  border: 1px solid var(--color-button-outline-border);
  border-radius: 999px;
  background: var(--color-button-outline-bg);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.appearance-theme-modal-tab:hover {
  background: var(--color-button-outline-hover-bg);
}

.appearance-theme-modal-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

.appearance-theme-modal-panel {
  display: none;
}

.appearance-theme-modal-panel.is-active {
  display: block;
  min-width: 0;
}

.appearance-theme-hub-card {
  padding: 20px;
}

.appearance-theme-hub-card--modal,
.appearance-custom-themes-card--modal {
  padding: 0;
}

.appearance-theme-hub-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(520px, 1.15fr);
  gap: 24px;
  align-items: stretch;
}

.appearance-theme-list {
  display: grid;
  gap: 12px;
}

.appearance-theme-option {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.appearance-theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--color-button-outline-border);
}

.appearance-theme-option.is-selected,
.appearance-theme-option.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow);
  background: var(--panel-surface);
}

.appearance-theme-option-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.appearance-theme-option-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.appearance-theme-option-check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: transparent;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.appearance-theme-option-check i {
  color: inherit;
  font-size: 13px;
  line-height: 1;
}

.appearance-theme-option.is-selected .appearance-theme-option-check,
.appearance-theme-option.is-active .appearance-theme-option-check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.appearance-theme-preview-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--primary) 12%);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.appearance-theme-hub-layout > .appearance-theme-preview-panel {
  border-left-color: transparent;
}

.appearance-theme-preview-panel .appearance-preview-header {
  margin-bottom: 0;
  gap: 12px;
  padding: 22px 22px 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-surface) 90%, white 10%) 0%, var(--card) 100%);
}

.appearance-theme-preview-panel .appearance-live-preview-copy {
  gap: 4px;
}

.appearance-theme-preview-panel .appearance-kicker {
  margin-bottom: 0;
  line-height: 1.15;
}

.appearance-theme-preview-panel .appearance-live-preview-title {
  line-height: 1.12;
  margin: 0;
}

.appearance-theme-preview-panel .appearance-live-preview-subtitle {
  max-width: none;
  line-height: 1.4;
  margin: 0;
}

.appearance-theme-preview-status {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0 22px 18px;
  background: var(--card);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, white 16%);
}

.appearance-theme-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.appearance-theme-preview-helper {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.appearance-theme-preview-panel .appearance-preview-control-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.appearance-theme-preview-panel .appearance-preview-control-right {
  margin-left: auto;
}

.appearance-theme-preview-panel .appearance-live-preview {
  margin-top: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  background: var(--app-background);
}

.appearance-theme-preview-panel .appearance-demo-topbar {
  margin-bottom: 16px;
  padding: 18px;
}

.appearance-color-editor-preview .appearance-demo-chrome {
  padding: 12px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel-surface) 88%, white 12%);
  border: 1px solid color-mix(in srgb, var(--line) 82%, white 18%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.appearance-theme-preview-panel .appearance-demo-chrome {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.appearance-color-editor-preview .appearance-demo-stage {
  padding: 10px 0 0;
  border-radius: 20px;
  background: transparent;
}

.appearance-theme-preview-panel .appearance-demo-stage {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.appearance-color-editor-preview .appearance-demo-hero-card,
.appearance-color-editor-preview .appearance-demo-card {
  background: color-mix(in srgb, var(--card) 95%, white 5%);
  border-color: color-mix(in srgb, var(--line) 80%, white 20%);
}

.appearance-color-editor-preview .appearance-demo-card--soft {
  background: var(--card-surface);
  border-color: color-mix(in srgb, var(--line) 82%, white 18%);
}

.appearance-color-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr);
  gap: 24px;
  align-items: start;
}

.appearance-color-editor-config,
.appearance-color-editor-preview {
  min-width: 0;
}

.appearance-color-editor-modal {
  width: min(98vw, 1560px);
  max-width: 1560px;
}

.appearance-color-editor-modal .appearance-modal-body {
  padding: 26px 28px 30px;
}

.appearance-color-editor-preview {
  position: sticky;
  top: 16px;
  align-self: start;
  justify-self: stretch;
  max-height: calc(100dvh - 150px);
  overflow: hidden;
}

.appearance-color-editor-preview .appearance-custom-color-preview {
  margin: 0;
  align-self: start;
  padding: 20px;
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

.appearance-color-editor-preview .appearance-live-preview {
  padding: 16px;
  background: var(--app-background);
  border: 1px solid color-mix(in srgb, var(--secondary) 22%, var(--line) 78%);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 10px 24px rgba(74, 88, 153, 0.06);
}

.appearance-color-editor-preview .appearance-demo-chrome {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.appearance-color-editor-preview .appearance-demo-stage {
  padding: 10px 0 0;
}

.appearance-color-editor-preview .appearance-demo-topbar,
.appearance-color-editor-preview .appearance-demo-hero-card,
.appearance-color-editor-preview .appearance-demo-card {
  padding: 14px;
}

.appearance-color-editor-preview .appearance-system-preview__content,
.appearance-color-editor-preview .appearance-system-preview__grid,
.appearance-color-editor-preview .appearance-demo-stage,
.appearance-color-editor-preview .appearance-demo-support-grid {
  gap: 12px;
}

.appearance-color-editor-preview .appearance-system-preview__content,
.appearance-color-editor-preview .appearance-system-preview__grid,
.appearance-color-editor-preview .appearance-system-preview__table-card {
  --card-padding: clamp(16px, var(--card-padding, 22px), 24px);
}

.appearance-color-editor-preview .appearance-demo-topbar-copy,
.appearance-color-editor-preview .appearance-demo-hero-card__copy,
.appearance-color-editor-preview .appearance-system-preview__table-header > div {
  gap: 6px;
}

.appearance-color-editor-preview .appearance-system-preview__table th,
.appearance-color-editor-preview .appearance-system-preview__table td {
  padding: 9px 10px;
}

.appearance-color-editor-preview .appearance-system-preview__table {
  min-width: 0;
}

.appearance-color-editor-config .appearance-branding-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.appearance-color-editor-config .appearance-custom-color-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.appearance-color-editor-config .appearance-custom-color-field {
  padding: 18px;
}

.appearance-color-editor-config .appearance-custom-color-field--gradient {
  padding: 18px;
  grid-column: 1 / -1;
}

.appearance-color-editor-config .appearance-custom-color-field--card-surface {
  padding: 18px;
  grid-column: 1 / -1;
  width: 100%;
}

.appearance-color-editor-config .appearance-custom-color-field--badge {
  padding: 18px;
  grid-column: 1 / -1;
}

.appearance-color-editor-config .appearance-custom-color-field--tertiary-button {
  padding: 18px;
  grid-column: 1 / -1;
}

.appearance-color-editor-config .appearance-custom-color-field--tertiary-button .appearance-custom-color-field-split,
.appearance-color-editor-config .appearance-custom-color-field--tertiary-button .appearance-custom-color-field-split--tertiary-button {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.appearance-color-editor-config .appearance-custom-color-field--button-builder {
  padding: 18px;
  grid-column: 1 / -1;
}

.appearance-color-editor-config .appearance-custom-color-field--typography-density {
  padding: 18px;
  grid-column: 1 / -1;
}

.appearance-color-editor-config .appearance-custom-color-field--segmented-controls {
  padding: 18px;
  grid-column: 1 / -1;
}

.appearance-button-builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.appearance-button-builder-grid--visual-density {
  margin-top: 12px;
}

.appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split,
.appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split--segmented-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.appearance-button-control-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-surface);
}

.appearance-button-control-head {
  display: grid;
  gap: 4px;
}

.appearance-button-control-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.appearance-button-control-help {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.appearance-button-segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.appearance-button-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.appearance-button-segment:hover {
  background: var(--color-button-outline-hover-bg);
}

.appearance-button-segment.is-active {
  background: var(--panel-surface);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split,
.appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split--card-surface {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.appearance-custom-color-field-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.appearance-custom-color-stop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appearance-custom-color-stop-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.appearance-color-editor-config .appearance-custom-color-field .helper-text {
  font-size: 12px;
  line-height: 1.4;
}

.appearance-custom-theme-actions {
  margin-top: 24px;
  padding-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.appearance-custom-theme-actions > .helper-text {
  max-width: 520px;
}

.appearance-custom-theme-actions .appearance-preview-buttons {
  gap: 14px;
}

.appearance-color-editor-preview .appearance-demo-support-grid {
  gap: 14px;
}

.appearance-modal-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-button-outline-bg);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1440px) {
  .appearance-color-editor-modal {
    width: min(98vw, 1440px);
    max-width: 1440px;
  }

  .appearance-color-editor-layout {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.78fr);
    gap: 20px;
  }
}

@media (max-width: 1320px) {
  .appearance-modal-panel--wide,
  .appearance-color-editor-modal {
    width: min(97vw, 1240px);
    max-width: 1240px;
  }

  .appearance-visual-branding-modal {
    width: min(1280px, calc(100vw - 40px));
    max-width: none;
  }

  .appearance-color-editor-modal .appearance-modal-body {
    padding: 22px 22px 26px;
  }

  .appearance-color-editor-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.74fr);
    gap: 18px;
  }
}

@media (max-width: 1180px) and (min-width: 768px) {
  .appearance-modal-panel--wide,
  .appearance-color-editor-modal {
    width: calc(100vw - 32px);
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: 14px auto;
  }

  .appearance-modal-header {
    padding: 16px 18px;
    gap: 14px;
  }

  .appearance-modal-body,
  .appearance-color-editor-modal .appearance-modal-body {
    padding: 18px 18px 22px;
  }

  .appearance-theme-modal-tabs {
    gap: 8px;
    margin-bottom: 16px;
  }

  .appearance-theme-modal-tab {
    min-height: 42px;
    padding: 10px 14px;
  }

  .appearance-custom-theme-actions {
    padding-bottom: 18px;
  }

  .appearance-visual-branding-modal {
    width: calc(100vw - 32px);
  }

  .appearance-visual-branding-modal .appearance-modal-body {
    padding: 18px 18px 22px;
  }
}

@media (max-width: 1099px) {
  .appearance-status-grid,
  .appearance-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-theme-hub-layout {
    grid-template-columns: 1fr;
  }

  .appearance-custom-theme-list-compact .appearance-custom-theme-layout {
    grid-template-columns: 1fr;
  }

  .appearance-color-editor-layout {
    grid-template-columns: 1fr;
  }

  .appearance-color-editor-preview {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .appearance-color-editor-preview .appearance-custom-color-preview {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split--segmented-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-color-editor-config .appearance-custom-color-grid {
    grid-template-columns: 1fr;
  }

  .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split--card-surface,
  .appearance-color-editor-config .appearance-custom-color-field--tertiary-button .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--tertiary-button .appearance-custom-color-field-split--tertiary-button {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-button-builder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .appearance-custom-color-input-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }

  .appearance-custom-color-input-row input[type="color"] {
    width: 56px;
    min-width: 56px;
    height: 42px;
  }

  .appearance-button-builder-grid,
  .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split--card-surface,
  .appearance-color-editor-config .appearance-custom-color-field--tertiary-button .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--tertiary-button .appearance-custom-color-field-split--tertiary-button,
  .appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split--segmented-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .appearance-status-grid,
  .appearance-hub-grid {
    grid-template-columns: 1fr;
  }

  .appearance-modal-panel,
  .appearance-modal-panel--wide {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
    border-radius: 18px;
  }

  .appearance-modal-header,
  .appearance-modal-body,
  .appearance-compact-preview-card {
    padding: 16px;
  }

  .appearance-visual-branding-modal .appearance-modal-body {
    padding: 16px;
  }

  .appearance-modal-header {
    align-items: flex-start;
    gap: 12px;
  }

  .appearance-color-editor-modal .appearance-modal-body {
    padding: 16px;
  }

  .appearance-theme-modal-tabs {
    gap: 8px;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .appearance-theme-modal-tab {
    width: auto;
    min-width: max-content;
  }

  .appearance-color-editor-config .appearance-branding-grid,
  .appearance-color-editor-config .appearance-custom-color-grid {
    grid-template-columns: 1fr;
  }

  .appearance-custom-color-field-split {
    grid-template-columns: 1fr;
  }

  .appearance-custom-color-input-row {
    grid-template-columns: 1fr;
  }

  .appearance-custom-color-input-row input[type="color"] {
    width: 100%;
    min-width: 0;
  }

  .appearance-button-builder-grid {
    grid-template-columns: 1fr;
  }

  .appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--card-surface .appearance-custom-color-field-split--card-surface,
  .appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split,
  .appearance-color-editor-config .appearance-custom-color-field--segmented-controls .appearance-custom-color-field-split--segmented-controls {
    grid-template-columns: 1fr;
  }

  .appearance-theme-option-main,
  .appearance-theme-preview-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .appearance-theme-preview-actions .btn,
  .appearance-theme-preview-actions form {
    width: 100%;
  }

  .appearance-custom-theme-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-bottom: 16px;
  }
}

.appearance-hub-card .btn {
  width: 100%;
  justify-self: stretch;
}

.appearance-white-label-flow {
  display: grid;
  gap: 26px;
  margin-bottom: 28px;
}

.appearance-white-label-flow__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 250, 255, 0.94) 100%);
  border: 1px solid rgba(205, 218, 244, 0.78);
  box-shadow: 0 12px 26px rgba(70, 86, 130, 0.06);
}

.appearance-white-label-flow__intro-copy {
  display: grid;
  gap: 8px;
}

.appearance-white-label-flow__intro-copy .section-title,
.appearance-white-label-flow__intro-copy .section-subtitle {
  margin: 0;
}

.appearance-white-label-flow__intro-copy .section-title {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.18;
}

.appearance-white-label-flow__intro-copy .section-subtitle {
  max-width: 780px;
}

.appearance-white-label-flow__intro-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.appearance-white-label-flow__intro-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(204, 216, 244, 0.84);
  background: rgba(255, 255, 255, 0.94);
}

.appearance-white-label-flow__intro-stat > i {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  color: var(--color-button-primary, var(--color-primary));
  background: rgba(236, 241, 255, 0.9);
  border: 1px solid rgba(190, 206, 244, 0.82);
  font-size: 0.84rem;
}

.appearance-white-label-flow__intro-copyline,
.appearance-white-label-flow__intro-copyline strong,
.appearance-white-label-flow__intro-copyline span {
  display: block;
}

.appearance-white-label-flow__intro-copyline strong {
  color: var(--color-title, var(--primary));
  font-size: 0.94rem;
  line-height: 1.2;
}

.appearance-white-label-flow__intro-copyline span {
  color: var(--color-text-secondary, var(--muted));
  font-size: 0.82rem;
  line-height: 1.45;
}

.appearance-onboarding-card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 24px;
  padding: 28px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(214, 227, 255, 0.68), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
  border: 1px solid rgba(201, 214, 242, 0.78);
  box-shadow: 0 18px 44px rgba(60, 76, 122, 0.09);
  overflow: hidden;
}

.appearance-onboarding-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--appearance-onboarding-accent, rgba(90, 127, 241, 0.42)) 0%, transparent 85%);
  opacity: 0.95;
}

.appearance-onboarding-card > * {
  position: relative;
  z-index: 1;
}

.white-label-checklist {
  --appearance-onboarding-accent: rgba(86, 129, 255, 0.5);
}

.brand-config-guide {
  --appearance-onboarding-accent: rgba(89, 184, 214, 0.5);
}

.visual-config-guide {
  --appearance-onboarding-accent: rgba(168, 112, 255, 0.46);
}

.operational-qa-guide {
  --appearance-onboarding-accent: rgba(74, 208, 176, 0.48);
}

.delivery-final-guide {
  --appearance-onboarding-accent: rgba(255, 174, 92, 0.48);
}

.demo-commercial-guide {
  --appearance-onboarding-accent: rgba(255, 118, 177, 0.46);
}

.sales-arguments-guide {
  --appearance-onboarding-accent: rgba(113, 144, 255, 0.46);
}

.demo-ready-guide {
  --appearance-onboarding-accent: rgba(83, 191, 152, 0.46);
}

.appearance-onboarding-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.appearance-onboarding-hero__copy {
  display: grid;
  gap: 6px;
}

.appearance-onboarding-hero__copy .section-title,
.appearance-onboarding-summary h4 {
  margin: 0;
}

.appearance-onboarding-hero__copy .section-subtitle,
.appearance-onboarding-summary p,
.appearance-onboarding-hero__note p {
  margin: 0;
}

.appearance-onboarding-hero__copy .section-subtitle {
  max-width: 760px;
}

.appearance-onboarding-hero__note {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(197, 212, 244, 0.85);
  background: linear-gradient(180deg, rgba(245, 248, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: 0 14px 28px rgba(66, 83, 124, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.appearance-onboarding-note__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(231, 239, 255, 0.9);
  border: 1px solid rgba(184, 203, 246, 0.92);
  color: var(--color-button-primary, var(--color-primary));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.white-label-checklist__summary-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.white-label-checklist__summary-head p {
  color: var(--color-text-secondary, var(--muted));
  font-size: 0.88rem;
  text-align: left;
}

.white-label-checklist__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.white-label-checklist__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  min-height: 54px;
}

.white-label-checklist__summary-pills li i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 241, 255, 0.9);
  border: 1px solid rgba(190, 206, 244, 0.82);
  color: var(--color-button-primary, var(--color-primary));
  flex: 0 0 auto;
}

.appearance-onboarding-hero__note p,
.appearance-onboarding-summary p,
.appearance-onboarding-block__head p,
.appearance-onboarding-summary__stat span {
  color: var(--color-text-secondary, var(--muted));
  line-height: 1.55;
}

.appearance-onboarding-hero__note p,
.appearance-onboarding-summary p,
.appearance-onboarding-block__head p {
  font-size: 0.93rem;
}

.appearance-onboarding-layout {
  display: grid;
  gap: 20px;
}

.appearance-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.appearance-onboarding-block {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 20px 20px 22px;
  border-radius: 24px;
  border: 1px solid rgba(197, 210, 241, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 249, 255, 0.98) 100%);
  box-shadow: 0 14px 30px rgba(62, 79, 126, 0.08);
  overflow: hidden;
}

.appearance-onboarding-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  opacity: 0.95;
}

.white-label-checklist__card--identity::after {
  background: linear-gradient(90deg, #71a2ff 0%, #4d7fff 100%);
}

.white-label-checklist__card--visual::after {
  background: linear-gradient(90deg, #d191ff 0%, #a667f5 100%);
}

.white-label-checklist__card--operational::after {
  background: linear-gradient(90deg, #59d7e0 0%, #19b8c7 100%);
}

.white-label-checklist__card--delivery::after {
  background: linear-gradient(90deg, #ff9ed6 0%, #ff5db1 100%);
}

.appearance-onboarding-block__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.appearance-onboarding-step {
  color: rgba(104, 120, 170, 0.72);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.appearance-onboarding-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(234, 241, 255, 0.98) 0%, rgba(245, 248, 255, 0.98) 100%);
  border: 1px solid rgba(188, 204, 241, 0.88);
  color: var(--color-button-primary, var(--color-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.white-label-checklist__card--identity .appearance-onboarding-icon,
.white-label-checklist__card--identity .appearance-onboarding-check,
.white-label-checklist__card--identity .white-label-checklist__step {
  color: #2f6ef1;
}

.white-label-checklist__card--identity .appearance-onboarding-icon,
.white-label-checklist__card--identity .appearance-onboarding-check,
.white-label-checklist__card--identity .white-label-checklist__step {
  border-color: rgba(136, 174, 255, 0.85);
  background: rgba(236, 243, 255, 0.92);
}

.white-label-checklist__card--visual .appearance-onboarding-icon,
.white-label-checklist__card--visual .appearance-onboarding-check,
.white-label-checklist__card--visual .white-label-checklist__step {
  color: #8a4de8;
  border-color: rgba(208, 171, 255, 0.82);
  background: rgba(248, 240, 255, 0.94);
}

.white-label-checklist__card--operational .appearance-onboarding-icon,
.white-label-checklist__card--operational .appearance-onboarding-check,
.white-label-checklist__card--operational .white-label-checklist__step {
  color: #1298a6;
  border-color: rgba(148, 229, 235, 0.84);
  background: rgba(235, 252, 253, 0.94);
}

.white-label-checklist__card--delivery .appearance-onboarding-icon,
.white-label-checklist__card--delivery .appearance-onboarding-check,
.white-label-checklist__card--delivery .white-label-checklist__step {
  color: #ec4d9d;
  border-color: rgba(255, 181, 222, 0.85);
  background: rgba(255, 241, 248, 0.95);
}

.appearance-onboarding-block__head {
  display: grid;
  gap: 6px;
}

.appearance-onboarding-block__head h4 {
  margin: 0;
  color: var(--color-title, var(--primary));
  font-size: 1.02rem;
  line-height: 1.25;
}

.appearance-onboarding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.appearance-onboarding-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(224, 230, 245, 0.78);
  color: var(--color-text, var(--text));
  font-size: 0.92rem;
  line-height: 1.45;
}

.appearance-onboarding-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.appearance-onboarding-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(230, 238, 255, 0.95);
  border: 1px solid rgba(184, 201, 239, 0.88);
  color: var(--color-button-primary, var(--color-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.appearance-onboarding-summary {
  display: grid;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(196, 211, 244, 0.82);
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: 0 14px 30px rgba(62, 79, 126, 0.08);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  align-items: center;
}

.appearance-onboarding-summary h4 {
  color: var(--color-title, var(--primary));
  font-size: 1.55rem;
  line-height: 1.3;
}

.white-label-checklist__footer-copy {
  display: flex;
  align-items: center;
  gap: 16px;
}

.white-label-checklist__footer-icon {
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #2f6ef1;
  background: radial-gradient(circle at top left, rgba(234, 242, 255, 0.98), rgba(244, 248, 255, 0.98));
  border: 1px solid rgba(195, 210, 244, 0.82);
  font-size: 1.5rem;
}

.appearance-onboarding-summary__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.appearance-onboarding-summary__stat {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(205, 217, 244, 0.82);
  display: grid;
  gap: 6px;
  justify-items: start;
}

.appearance-onboarding-summary__stat strong {
  color: var(--color-button-primary, var(--color-primary));
  font-size: 1.2rem;
  line-height: 1.1;
}

.white-label-checklist__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(236, 241, 255, 0.92);
  border: 1px solid rgba(192, 206, 242, 0.92);
}

.white-label-checklist__stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 242, 255, 0.96);
  border: 1px solid rgba(192, 206, 242, 0.84);
  color: var(--color-button-primary, var(--color-primary));
  font-size: 1rem;
}

.white-label-checklist__item span:last-child {
  min-width: 0;
}

.appearance-onboarding-summary__stat span {
  font-size: 0.82rem;
}

.appearance-onboarding-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.appearance-onboarding-summary__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--color-text, var(--text));
  font-size: 0.9rem;
  line-height: 1.5;
}

.appearance-onboarding-summary__list i {
  color: var(--color-button-primary, var(--color-primary));
  margin-top: 2px;
}

.brand-config-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.brand-config-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  min-height: 54px;
}

.brand-config-guide__summary-pills li i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 241, 255, 0.9);
  border: 1px solid rgba(190, 206, 244, 0.82);
  color: var(--color-button-primary, var(--color-primary));
  flex: 0 0 auto;
}

.brand-config-guide__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-config-guide__card--identity::after {
  background: linear-gradient(90deg, #6f99ff 0%, #4477f0 100%);
}

.brand-config-guide__card--branding::after {
  background: linear-gradient(90deg, #70d2f2 0%, #2bb7d4 100%);
}

.brand-config-guide__card--appearance::after {
  background: linear-gradient(90deg, #9d8dff 0%, #715cf0 100%);
}

.brand-config-guide__card--content::after {
  background: linear-gradient(90deg, #ff9bbb 0%, #f56d97 100%);
}

.brand-config-guide__card--identity .appearance-onboarding-icon,
.brand-config-guide__card--identity .brand-config-guide__check,
.brand-config-guide__card--identity .brand-config-guide__step {
  color: #356ff0;
  border-color: rgba(140, 176, 255, 0.84);
  background: rgba(237, 244, 255, 0.92);
}

.brand-config-guide__card--branding .appearance-onboarding-icon,
.brand-config-guide__card--branding .brand-config-guide__check,
.brand-config-guide__card--branding .brand-config-guide__step {
  color: #1b9aba;
  border-color: rgba(157, 229, 244, 0.84);
  background: rgba(239, 251, 255, 0.94);
}

.brand-config-guide__card--appearance .appearance-onboarding-icon,
.brand-config-guide__card--appearance .brand-config-guide__check,
.brand-config-guide__card--appearance .brand-config-guide__step {
  color: #6b58e8;
  border-color: rgba(192, 182, 255, 0.84);
  background: rgba(243, 240, 255, 0.94);
}

.brand-config-guide__card--content .appearance-onboarding-icon,
.brand-config-guide__card--content .brand-config-guide__check,
.brand-config-guide__card--content .brand-config-guide__step {
  color: #e1598c;
  border-color: rgba(255, 188, 212, 0.84);
  background: rgba(255, 242, 248, 0.95);
}

.brand-config-guide__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 239, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.brand-config-guide__item span:last-child {
  min-width: 0;
}

@media (max-width: 1120px) {
  .appearance-white-label-flow__intro {
    grid-template-columns: 1fr;
  }

  .appearance-white-label-flow__intro-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .appearance-onboarding-layout,
  .appearance-onboarding-summary {
    grid-template-columns: 1fr;
  }

  .brand-config-guide__summary-pills,
  .white-label-checklist__summary-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1480px) {
  .appearance-onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .appearance-white-label-flow {
    gap: 22px;
  }

  .appearance-white-label-flow__intro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-onboarding-summary__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .white-label-checklist__summary-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .white-label-checklist__summary-head p {
    text-align: left;
  }

  .appearance-onboarding-grid {
    grid-template-columns: 1fr;
  }

  .brand-config-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .appearance-white-label-flow__intro {
    padding: 18px;
  }

  .appearance-white-label-flow__intro-stats {
    grid-template-columns: 1fr;
  }

  .appearance-onboarding-card {
    padding: 22px 18px;
  }

  .appearance-onboarding-block,
  .appearance-onboarding-summary,
  .appearance-onboarding-hero__note {
    padding: 18px;
  }

  .brand-config-guide__summary-pills,
  .white-label-checklist__summary-pills,
  .appearance-onboarding-summary__stats {
    grid-template-columns: 1fr;
  }

  .white-label-checklist__footer-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-config-guide__grid {
    grid-template-columns: 1fr;
  }
}

.visual-config-guide {
  gap: 22px;
}

.visual-config-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.visual-config-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.visual-config-guide__summary-pills i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 241, 255, 0.9);
  border: 1px solid rgba(190, 206, 244, 0.82);
  color: var(--color-button-primary, var(--color-primary));
  flex: 0 0 auto;
}

.visual-config-guide__body,
.visual-config-guide__stack {
  display: grid;
  gap: 20px;
}

.visual-config-guide__panel {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(197, 210, 241, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 249, 255, 0.98) 100%);
  box-shadow: 0 14px 30px rgba(62, 79, 126, 0.08);
}

.visual-config-guide__panel-head {
  display: grid;
  gap: 6px;
}

.visual-config-guide__panel-head h4 {
  margin: 0;
  color: var(--color-title, var(--primary));
  font-size: 1.08rem;
  line-height: 1.3;
}

.visual-config-guide__panel-head p {
  margin: 0;
  color: var(--color-text-secondary, var(--muted));
  font-size: 0.93rem;
  line-height: 1.55;
}

.visual-config-guide__preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.visual-config-guide__preset-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(203, 216, 245, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.visual-config-guide__preset-card--recommended {
  border-color: rgba(153, 183, 255, 0.92);
  background: linear-gradient(180deg, rgba(242, 247, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.visual-config-guide__preset-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.visual-config-guide__preset-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 241, 255, 0.92);
  border: 1px solid rgba(191, 206, 241, 0.84);
  color: var(--color-button-primary, var(--color-primary));
  font-size: 1rem;
}

.visual-config-guide__preset-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(235, 244, 255, 0.95);
  border: 1px solid rgba(173, 196, 250, 0.86);
  color: #315aa7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.visual-config-guide__preset-card h5 {
  margin: 0;
  color: var(--color-title, var(--primary));
  font-size: 1rem;
  line-height: 1.25;
}

.visual-config-guide__preset-card p {
  margin: 0;
  color: var(--color-text-secondary, var(--muted));
  font-size: 0.92rem;
  line-height: 1.55;
}

.visual-config-guide__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.visual-config-guide__checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(224, 230, 245, 0.78);
  color: var(--color-text, var(--text));
  font-size: 0.94rem;
  line-height: 1.45;
}

.visual-config-guide__check-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(230, 238, 255, 0.95);
  border: 1px solid rgba(184, 201, 239, 0.88);
  color: var(--color-button-primary, var(--color-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

@media (max-width: 1200px) {
  .visual-config-guide__preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .visual-config-guide__summary-pills,
  .visual-config-guide__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .visual-config-guide__preset-grid,
  .visual-config-guide__summary-pills,
  .visual-config-guide__checks {
    grid-template-columns: 1fr;
  }

  .visual-config-guide__panel {
    padding: 18px;
  }
}

.operational-qa-guide {
  gap: 22px;
}

.operational-qa-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.operational-qa-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.operational-qa-guide__summary-pills i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 241, 255, 0.9);
  border: 1px solid rgba(190, 206, 244, 0.82);
  color: var(--color-button-primary, var(--color-primary));
  flex: 0 0 auto;
}

.operational-qa-guide__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operational-qa-guide__card--access::after {
  background: linear-gradient(90deg, #6a99ff 0%, #3f78f0 100%);
}

.operational-qa-guide__card--flow::after {
  background: linear-gradient(90deg, #7f7cff 0%, #615df1 100%);
}

.operational-qa-guide__card--finance::after {
  background: linear-gradient(90deg, #50d4bf 0%, #18af97 100%);
}

.operational-qa-guide__card--delivery::after {
  background: linear-gradient(90deg, #ffb869 0%, #f39a2e 100%);
}

.operational-qa-guide__card--access .appearance-onboarding-icon,
.operational-qa-guide__card--access .operational-qa-guide__check,
.operational-qa-guide__card--access .operational-qa-guide__step {
  color: #2f6ef1;
  border-color: rgba(136, 174, 255, 0.85);
  background: rgba(236, 243, 255, 0.92);
}

.operational-qa-guide__card--flow .appearance-onboarding-icon,
.operational-qa-guide__card--flow .operational-qa-guide__check,
.operational-qa-guide__card--flow .operational-qa-guide__step {
  color: #615df1;
  border-color: rgba(185, 181, 255, 0.82);
  background: rgba(242, 241, 255, 0.94);
}

.operational-qa-guide__card--finance .appearance-onboarding-icon,
.operational-qa-guide__card--finance .operational-qa-guide__check,
.operational-qa-guide__card--finance .operational-qa-guide__step {
  color: #149d87;
  border-color: rgba(147, 232, 216, 0.84);
  background: rgba(236, 253, 249, 0.94);
}

.operational-qa-guide__card--delivery .appearance-onboarding-icon,
.operational-qa-guide__card--delivery .operational-qa-guide__check,
.operational-qa-guide__card--delivery .operational-qa-guide__step {
  color: #e08a1e;
  border-color: rgba(255, 209, 150, 0.84);
  background: rgba(255, 247, 235, 0.95);
}

.operational-qa-guide__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 239, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.operational-qa-guide__item span:last-child {
  min-width: 0;
}

@media (max-width: 1024px) {
  .operational-qa-guide__summary-pills,
  .operational-qa-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .operational-qa-guide__summary-pills,
  .operational-qa-guide__grid {
    grid-template-columns: 1fr;
  }
}

.delivery-final-guide {
  gap: 22px;
}

.delivery-final-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.delivery-final-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.delivery-final-guide__summary-pills i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 241, 255, 0.9);
  border: 1px solid rgba(190, 206, 244, 0.82);
  color: var(--color-button-primary, var(--color-primary));
  flex: 0 0 auto;
}

.delivery-final-guide__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.delivery-final-guide__card--brand::after {
  background: linear-gradient(90deg, #6c97ff 0%, #4677f0 100%);
}

.delivery-final-guide__card--experience::after {
  background: linear-gradient(90deg, #a778ff 0%, #8657f1 100%);
}

.delivery-final-guide__card--operation::after {
  background: linear-gradient(90deg, #59d6b8 0%, #1dad8b 100%);
}

.delivery-final-guide__card--handoff::after {
  background: linear-gradient(90deg, #ffb770 0%, #f09c35 100%);
}

.delivery-final-guide__card--brand .appearance-onboarding-icon,
.delivery-final-guide__card--brand .delivery-final-guide__check,
.delivery-final-guide__card--brand .delivery-final-guide__step {
  color: #356ff0;
  border-color: rgba(140, 176, 255, 0.84);
  background: rgba(237, 244, 255, 0.92);
}

.delivery-final-guide__card--experience .appearance-onboarding-icon,
.delivery-final-guide__card--experience .delivery-final-guide__check,
.delivery-final-guide__card--experience .delivery-final-guide__step {
  color: #8352eb;
  border-color: rgba(201, 178, 255, 0.84);
  background: rgba(246, 240, 255, 0.94);
}

.delivery-final-guide__card--operation .appearance-onboarding-icon,
.delivery-final-guide__card--operation .delivery-final-guide__check,
.delivery-final-guide__card--operation .delivery-final-guide__step {
  color: #169a7c;
  border-color: rgba(154, 234, 213, 0.84);
  background: rgba(237, 253, 248, 0.94);
}

.delivery-final-guide__card--handoff .appearance-onboarding-icon,
.delivery-final-guide__card--handoff .delivery-final-guide__check,
.delivery-final-guide__card--handoff .delivery-final-guide__step {
  color: #df8b23;
  border-color: rgba(255, 213, 159, 0.84);
  background: rgba(255, 248, 236, 0.95);
}

.delivery-final-guide__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 239, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.delivery-final-guide__item span:last-child {
  min-width: 0;
}

.delivery-final-guide__closing {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(188, 223, 206, 0.92);
  background: linear-gradient(180deg, rgba(245, 255, 249, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.delivery-final-guide__closing h4 {
  margin: 0;
  color: #20775f;
  font-size: 1.18rem;
  line-height: 1.3;
}

.delivery-final-guide__closing p {
  margin: 0;
  color: #4c6b62;
  font-size: 0.94rem;
  line-height: 1.55;
}

.appearance-commercial-stage {
  gap: 22px;
}

.appearance-commercial-stage .appearance-onboarding-hero__copy {
  gap: 8px;
}

.appearance-commercial-stage .appearance-onboarding-hero__copy .section-title {
  max-width: 720px;
}

.appearance-commercial-stage .appearance-onboarding-hero__copy .section-subtitle {
  max-width: 760px;
}

.appearance-commercial-stage__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(240, 245, 255, 0.94);
  border: 1px solid rgba(194, 209, 244, 0.9);
  color: var(--color-title, var(--primary));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.appearance-commercial-stage .appearance-onboarding-hero__note,
.appearance-commercial-stage .demo-ready-guide__hero,
.appearance-commercial-stage .demo-ready-guide__timeline-wrap,
.appearance-commercial-stage .demo-ready-guide__closing,
.appearance-commercial-stage .demo-commercial-guide__closing,
.appearance-commercial-stage .sales-arguments-guide__closing,
.appearance-commercial-stage .sales-presentation-checklist__closing {
  box-shadow: 0 12px 24px rgba(62, 79, 126, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.appearance-commercial-stage .appearance-onboarding-block {
  gap: 16px;
  min-height: 100%;
}

.appearance-commercial-stage .appearance-onboarding-list {
  gap: 8px;
}

.appearance-commercial-stage .appearance-onboarding-list li {
  padding: 8px 0;
}

.appearance-commercial-stage .appearance-onboarding-block__head h4 {
  font-size: 1rem;
}

.appearance-commercial-stage .appearance-onboarding-block__head p {
  max-width: 30ch;
}

.appearance-commercial-stage .appearance-onboarding-step {
  letter-spacing: 0.1em;
}

.appearance-commercial-stage .appearance-onboarding-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.appearance-commercial-stage .appearance-onboarding-hero__note,
.appearance-commercial-stage .demo-ready-guide__hero,
.appearance-commercial-stage .demo-ready-guide__timeline-wrap,
.appearance-commercial-stage .demo-ready-guide__closing,
.appearance-commercial-stage .demo-commercial-guide__closing,
.appearance-commercial-stage .sales-arguments-guide__closing,
.appearance-commercial-stage .sales-presentation-checklist__closing {
  position: relative;
  overflow: hidden;
}

.appearance-commercial-stage .appearance-onboarding-hero__note::after,
.appearance-commercial-stage .demo-ready-guide__hero::after,
.appearance-commercial-stage .demo-ready-guide__timeline-wrap::after,
.appearance-commercial-stage .demo-ready-guide__closing::after,
.appearance-commercial-stage .demo-commercial-guide__closing::after,
.appearance-commercial-stage .sales-arguments-guide__closing::after,
.appearance-commercial-stage .sales-presentation-checklist__closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 42%);
  pointer-events: none;
}

.appearance-commercial-stage .demo-commercial-guide__summary-pills li,
.appearance-commercial-stage .sales-arguments-guide__summary-pills li,
.appearance-commercial-stage .demo-ready-guide__summary-pills li,
.appearance-commercial-stage .sales-presentation-checklist__summary-pills li {
  min-height: 58px;
}

.appearance-commercial-stage .demo-commercial-guide__closing h4,
.appearance-commercial-stage .sales-arguments-guide__closing h4 {
  font-size: 1.1rem;
}

.appearance-commercial-stage .demo-commercial-guide__closing p,
.appearance-commercial-stage .sales-arguments-guide__closing p,
.appearance-commercial-stage .demo-ready-guide__closing p,
.appearance-commercial-stage .sales-presentation-checklist__closing p {
  max-width: 74ch;
}

.demo-commercial-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.demo-commercial-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.demo-commercial-guide__summary-pills i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 241, 247, 0.94);
  border: 1px solid rgba(255, 202, 223, 0.84);
  color: #de4d90;
  flex: 0 0 auto;
}

.demo-commercial-guide__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-commercial-guide__card--target::after {
  background: linear-gradient(90deg, #6c97ff 0%, #4677f0 100%);
}

.demo-commercial-guide__card--visual::after {
  background: linear-gradient(90deg, #ff8bbb 0%, #f35d97 100%);
}

.demo-commercial-guide__card--flows::after {
  background: linear-gradient(90deg, #58d7c4 0%, #1caf95 100%);
}

.demo-commercial-guide__card--message::after {
  background: linear-gradient(90deg, #b286ff 0%, #8656f1 100%);
}

.demo-commercial-guide__card--target .appearance-onboarding-icon,
.demo-commercial-guide__card--target .demo-commercial-guide__check,
.demo-commercial-guide__card--target .demo-commercial-guide__step {
  color: #356ff0;
  border-color: rgba(140, 176, 255, 0.84);
  background: rgba(237, 244, 255, 0.92);
}

.demo-commercial-guide__card--visual .appearance-onboarding-icon,
.demo-commercial-guide__card--visual .demo-commercial-guide__check,
.demo-commercial-guide__card--visual .demo-commercial-guide__step {
  color: #de4d90;
  border-color: rgba(255, 191, 218, 0.84);
  background: rgba(255, 242, 248, 0.95);
}

.demo-commercial-guide__card--flows .appearance-onboarding-icon,
.demo-commercial-guide__card--flows .demo-commercial-guide__check,
.demo-commercial-guide__card--flows .demo-commercial-guide__step {
  color: #169c83;
  border-color: rgba(154, 234, 213, 0.84);
  background: rgba(237, 253, 248, 0.94);
}

.demo-commercial-guide__card--message .appearance-onboarding-icon,
.demo-commercial-guide__card--message .demo-commercial-guide__check,
.demo-commercial-guide__card--message .demo-commercial-guide__step {
  color: #8352eb;
  border-color: rgba(201, 178, 255, 0.84);
  background: rgba(246, 240, 255, 0.94);
}

.demo-commercial-guide__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 239, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.demo-commercial-guide__item span:last-child {
  min-width: 0;
}

.demo-commercial-guide__closing {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 205, 225, 0.88);
  background: linear-gradient(180deg, rgba(255, 245, 250, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.demo-commercial-guide__closing h4 {
  margin: 0;
  color: #b13f73;
  font-size: 1.18rem;
  line-height: 1.3;
}

.demo-commercial-guide__closing p {
  margin: 0;
  color: #735467;
  font-size: 0.94rem;
  line-height: 1.55;
}

.sales-arguments-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-arguments-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.sales-arguments-guide__summary-pills i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 243, 255, 0.94);
  border: 1px solid rgba(198, 210, 246, 0.84);
  color: #4c67d9;
  flex: 0 0 auto;
}

.sales-arguments-guide__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-arguments-guide__card--manual::after {
  background: linear-gradient(90deg, #6c97ff 0%, #4677f0 100%);
}

.sales-arguments-guide__card--brand::after {
  background: linear-gradient(90deg, #ff9dc5 0%, #ef6a9d 100%);
}

.sales-arguments-guide__card--control::after {
  background: linear-gradient(90deg, #59d7c3 0%, #1cb197 100%);
}

.sales-arguments-guide__card--scale::after {
  background: linear-gradient(90deg, #ac89ff 0%, #855bf0 100%);
}

.sales-arguments-guide__card--manual .appearance-onboarding-icon,
.sales-arguments-guide__card--manual .sales-arguments-guide__check,
.sales-arguments-guide__card--manual .sales-arguments-guide__step {
  color: #356ff0;
  border-color: rgba(140, 176, 255, 0.84);
  background: rgba(237, 244, 255, 0.92);
}

.sales-arguments-guide__card--brand .appearance-onboarding-icon,
.sales-arguments-guide__card--brand .sales-arguments-guide__check,
.sales-arguments-guide__card--brand .sales-arguments-guide__step {
  color: #df5a92;
  border-color: rgba(255, 190, 217, 0.84);
  background: rgba(255, 243, 248, 0.95);
}

.sales-arguments-guide__card--control .appearance-onboarding-icon,
.sales-arguments-guide__card--control .sales-arguments-guide__check,
.sales-arguments-guide__card--control .sales-arguments-guide__step {
  color: #169b82;
  border-color: rgba(154, 234, 213, 0.84);
  background: rgba(237, 253, 248, 0.94);
}

.sales-arguments-guide__card--scale .appearance-onboarding-icon,
.sales-arguments-guide__card--scale .sales-arguments-guide__check,
.sales-arguments-guide__card--scale .sales-arguments-guide__step {
  color: #8352eb;
  border-color: rgba(201, 178, 255, 0.84);
  background: rgba(246, 240, 255, 0.94);
}

.sales-arguments-guide__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 239, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.sales-arguments-guide__item span:last-child {
  min-width: 0;
}

.sales-arguments-guide__closing {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(201, 214, 247, 0.88);
  background: linear-gradient(180deg, rgba(244, 247, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.sales-arguments-guide__closing h4 {
  margin: 0;
  color: #4056b2;
  font-size: 1.18rem;
  line-height: 1.3;
}

.sales-arguments-guide__closing p {
  margin: 0;
  color: #5c6283;
  font-size: 0.94rem;
  line-height: 1.55;
}

.demo-ready-guide__hero {
  display: grid;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 26px;
  border: 1px solid rgba(190, 223, 208, 0.9);
  background: linear-gradient(180deg, rgba(244, 255, 249, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 14px 28px rgba(63, 118, 94, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.demo-ready-guide__hero-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.demo-ready-guide__hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #249267;
  background: radial-gradient(circle at top left, rgba(232, 251, 241, 0.98), rgba(245, 255, 249, 0.98));
  border: 1px solid rgba(175, 221, 196, 0.9);
  font-size: 1.8rem;
}

.demo-ready-guide__hero-copy {
  display: grid;
  gap: 8px;
}

.demo-ready-guide__hero-copy h4,
.demo-ready-guide__hero-copy p {
  margin: 0;
}

.demo-ready-guide__hero-copy h4 {
  color: #20775f;
  font-size: 1.38rem;
  line-height: 1.2;
}

.demo-ready-guide__hero-copy p {
  color: #4c6b62;
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 760px;
}

.demo-ready-guide__hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(230, 248, 239, 0.96);
  border: 1px solid rgba(170, 215, 191, 0.9);
  color: #227b5f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-ready-guide__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.demo-ready-guide__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.demo-ready-guide__summary-pills li i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 248, 241, 0.94);
  border: 1px solid rgba(181, 224, 202, 0.9);
  color: #269268;
  flex: 0 0 auto;
}

.demo-ready-guide__timeline-wrap {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(197, 210, 241, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 255, 0.98) 100%);
  box-shadow: 0 12px 24px rgba(67, 84, 128, 0.06);
}

.demo-ready-guide__timeline-head {
  display: grid;
  gap: 6px;
}

.demo-ready-guide__timeline-head p {
  margin: 0;
  color: var(--color-text-secondary, var(--muted));
  font-size: 0.9rem;
  line-height: 1.5;
}

.demo-ready-guide__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.demo-ready-guide__timeline-step {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(204, 216, 245, 0.88);
  background: rgba(255, 255, 255, 0.94);
  position: relative;
}

.demo-ready-guide__timeline-step::after {
  content: "";
  position: absolute;
  top: 27px;
  right: -13px;
  width: 14px;
  height: 2px;
  background: rgba(185, 211, 199, 0.9);
}

.demo-ready-guide__timeline-step:last-child::after {
  display: none;
}

.demo-ready-guide__timeline-index {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #249267;
  background: rgba(233, 248, 241, 0.94);
  border: 1px solid rgba(181, 224, 202, 0.9);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.demo-ready-guide__timeline-label {
  color: var(--color-title, var(--primary));
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.demo-ready-guide__closing {
  padding: 20px 24px;
  border-radius: 24px;
  border: 1px solid rgba(196, 223, 207, 0.9);
  background: linear-gradient(180deg, rgba(242, 255, 248, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.demo-ready-guide__closing p {
  margin: 0;
  color: #2f6553;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 600;
}

.sales-presentation-checklist__summary-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-presentation-checklist__summary-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 212, 244, 0.92);
  color: var(--color-title, var(--primary));
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.sales-presentation-checklist__summary-pills li i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 242, 255, 0.94);
  border: 1px solid rgba(194, 210, 246, 0.88);
  color: #4677f0;
  flex: 0 0 auto;
}

.sales-presentation-checklist__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-presentation-checklist__card--problem::after {
  background: linear-gradient(90deg, #6e98ff 0%, #4878f0 100%);
}

.sales-presentation-checklist__card--solution::after {
  background: linear-gradient(90deg, #ffb16f 0%, #f09431 100%);
}

.sales-presentation-checklist__card--value::after {
  background: linear-gradient(90deg, #59d7c3 0%, #1cb197 100%);
}

.sales-presentation-checklist__card--next::after {
  background: linear-gradient(90deg, #b287ff 0%, #8658f1 100%);
}

.sales-presentation-checklist__card--problem .appearance-onboarding-icon,
.sales-presentation-checklist__card--problem .sales-presentation-checklist__check,
.sales-presentation-checklist__card--problem .sales-presentation-checklist__step {
  color: #356ff0;
  border-color: rgba(140, 176, 255, 0.84);
  background: rgba(237, 244, 255, 0.92);
}

.sales-presentation-checklist__card--solution .appearance-onboarding-icon,
.sales-presentation-checklist__card--solution .sales-presentation-checklist__check,
.sales-presentation-checklist__card--solution .sales-presentation-checklist__step {
  color: #de8625;
  border-color: rgba(255, 213, 159, 0.84);
  background: rgba(255, 247, 237, 0.95);
}

.sales-presentation-checklist__card--value .appearance-onboarding-icon,
.sales-presentation-checklist__card--value .sales-presentation-checklist__check,
.sales-presentation-checklist__card--value .sales-presentation-checklist__step {
  color: #169b82;
  border-color: rgba(154, 234, 213, 0.84);
  background: rgba(237, 253, 248, 0.94);
}

.sales-presentation-checklist__card--next .appearance-onboarding-icon,
.sales-presentation-checklist__card--next .sales-presentation-checklist__check,
.sales-presentation-checklist__card--next .sales-presentation-checklist__step {
  color: #8352eb;
  border-color: rgba(201, 178, 255, 0.84);
  background: rgba(246, 240, 255, 0.94);
}

.sales-presentation-checklist__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 239, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.sales-presentation-checklist__item span:last-child {
  min-width: 0;
}

.sales-presentation-checklist__closing {
  padding: 20px 24px;
  border-radius: 24px;
  border: 1px solid rgba(199, 216, 247, 0.9);
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sales-presentation-checklist__closing p {
  margin: 0;
  color: #43567b;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .appearance-commercial-stage .appearance-onboarding-block__head p,
  .appearance-commercial-stage .demo-commercial-guide__closing p,
  .appearance-commercial-stage .sales-arguments-guide__closing p,
  .appearance-commercial-stage .demo-ready-guide__closing p,
  .appearance-commercial-stage .sales-presentation-checklist__closing p {
    max-width: none;
  }

  .sales-presentation-checklist__summary-pills,
  .sales-presentation-checklist__grid,
  .demo-ready-guide__summary-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-ready-guide__timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-ready-guide__timeline-step::after {
    display: none;
  }

  .sales-arguments-guide__summary-pills,
  .sales-arguments-guide__grid,
  .demo-commercial-guide__summary-pills,
  .demo-commercial-guide__grid,
  .delivery-final-guide__summary-pills,
  .delivery-final-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .appearance-commercial-stage {
    gap: 18px;
  }

  .appearance-commercial-stage .appearance-onboarding-hero__note,
  .appearance-commercial-stage .demo-commercial-guide__closing,
  .appearance-commercial-stage .sales-arguments-guide__closing,
  .appearance-commercial-stage .sales-presentation-checklist__closing {
    padding: 18px;
  }

  .appearance-commercial-stage__label {
    font-size: 0.7rem;
  }

  .demo-ready-guide__hero,
  .demo-ready-guide__timeline-wrap,
  .demo-ready-guide__closing {
    padding: 18px;
  }

  .demo-ready-guide__hero-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-presentation-checklist__summary-pills,
  .sales-presentation-checklist__grid,
  .demo-ready-guide__summary-pills,
  .demo-ready-guide__timeline {
    grid-template-columns: 1fr;
  }

  .sales-arguments-guide__summary-pills,
  .sales-arguments-guide__grid,
  .demo-commercial-guide__summary-pills,
  .demo-commercial-guide__grid,
  .delivery-final-guide__summary-pills,
  .delivery-final-guide__grid {
    grid-template-columns: 1fr;
  }

  .sales-presentation-checklist__closing,
  .sales-arguments-guide__closing,
  .demo-commercial-guide__closing,
  .delivery-final-guide__closing {
    padding: 18px;
  }
}

/* Sync applied preset themes with the same commercial button tokens used by Theme Builder previews. */
body.theme-blue {
  --color-button-primary: #1F3F8F;
  --color-button-primary-hover: #17316F;
  --color-button-primary-color: #FFFFFF;
  --color-button-secondary: #0F8B8D;
  --color-button-secondary-hover: #0B6E70;
  --color-button-secondary-color: #FFFFFF;
  --color-button-tertiary-text: #1F3F8F;
  --color-button-tertiary-border: #C7E7EA;
  --color-button-tertiary-bg: #FFFFFF;
  --color-button-tertiary-hover: #EDF8FA;
}

body.theme-green {
  --color-button-primary: #16695A;
  --color-button-primary-hover: #104E43;
  --color-button-primary-color: #FFFFFF;
  --color-button-secondary: #1F9E96;
  --color-button-secondary-hover: #177C75;
  --color-button-secondary-color: #FFFFFF;
  --color-button-tertiary-text: #16695A;
  --color-button-tertiary-border: #C9ECE3;
  --color-button-tertiary-bg: #FFFFFF;
  --color-button-tertiary-hover: #ECFAF8;
}

body.theme-minimal {
  --color-button-primary: #3E4D63;
  --color-button-primary-hover: #2F3C50;
  --color-button-primary-color: #FFFFFF;
  --color-button-secondary: #8A7461;
  --color-button-secondary-hover: #6F5E50;
  --color-button-secondary-color: #FFFFFF;
  --color-button-tertiary-text: #3E4D63;
  --color-button-tertiary-border: #DDD8D2;
  --color-button-tertiary-bg: #FFFFFF;
  --color-button-tertiary-hover: #F4F6F9;
}

body.theme-rose {
  --color-button-primary: #9B4F7F;
  --color-button-primary-hover: #7E3E66;
  --color-button-primary-color: #FFFFFF;
  --color-button-secondary: #C9785E;
  --color-button-secondary-hover: #AC6048;
  --color-button-secondary-color: #FFFFFF;
  --color-button-tertiary-text: #8A446C;
  --color-button-tertiary-border: #F1D2C8;
  --color-button-tertiary-bg: #FFFFFF;
  --color-button-tertiary-hover: #FDF1EC;
}

/* -------------------------------------------------------------------------- */
/* iPad validation pass / tablet vertical                                     */
/* -------------------------------------------------------------------------- */
/* Ajustes minimos validados para iPad 8va gen en vertical.
   - No reemplazan `tablet-app-mode`.
   - No redisenan pantallas profundas.
   - Solo mejoran login y dashboard/inicio para 810px aprox. */

@media (min-width: 576px) and (max-width: 899px) {
  .auth-page {
    padding: 24px 20px;
  }

  .auth-shell {
    width: min(100%, 560px);
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
    margin-inline: auto;
  }

  .auth-panel,
  .login-left,
  .auth-card {
    width: 100%;
    margin-inline: auto;
  }

  .auth-panel,
  .auth-card {
    padding: 1.5rem;
  }

  .login-left {
    max-width: 520px;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .auth-card {
    max-width: 430px;
  }

  .login-logo-wrapper {
    justify-content: center;
  }

  .auth-panel p,
  .login-description {
    max-width: none;
  }

  .auth-page .toast-container {
    top: calc(20px + env(safe-area-inset-top, 0px));
    width: auto;
    max-width: min(calc(100vw - 40px), 480px);
    justify-items: center;
  }

  .auth-page .toast-message {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 1.25rem;
    text-align: center;
    white-space: nowrap;
  }

  .login-disclaimer {
    position: static;
    transform: none;
    margin-top: 12px;
    opacity: 0.7;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: flex-start;
    row-gap: 0;
    padding-top: 28px;
    padding-bottom: 18px;
  }

  .auth-shell {
    width: min(100%, 520px);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.1rem;
  }

  .login-left {
    max-width: 440px;
    width: 100%;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding-top: 0;
    padding-bottom: 0.35rem;
  }

  .login-logo {
    max-width: 220px;
    max-height: 96px;
    margin-bottom: 12px;
  }

  .login-description {
    max-width: 30ch;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .auth-card {
    max-width: 410px;
    width: 100%;
  }

  .login-footer-row {
    margin-top: 10px;
  }

  .login-disclaimer {
    margin-top: auto;
    align-self: center;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 2px;
  }
}

/* iPad portrait login final override */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  .auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    padding: 36px 24px 56px;
    overflow: hidden;
  }

  .auth-shell {
    width: min(100%, 460px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 40px;
    margin: 0 auto;
    padding-top: 80px;
  }

  .login-left {
    max-width: 430px;
    width: 100%;
    padding: 0;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .login-logo-wrapper {
    justify-content: center;
  }

  .login-logo {
    width: min(100%, 390px);
    max-width: 390px;
    max-height: 118px;
    margin-bottom: 12px;
    object-fit: contain;
  }

  .login-description {
    margin: 0;
    max-width: 42ch;
    text-align: center;
    font-size: 15px;
    line-height: 1.45;
  }

  .auth-card {
    width: 100%;
    max-width: 410px;
    margin-top: 8px;
    padding: 24px 18px;
  }

  .login-disclaimer {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 48px);
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    opacity: 0.62;
    font-size: 12px;
    pointer-events: none;
  }

  .auth-page .toast-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 48px);
  }

  .auth-page .toast-message {
    width: max-content;
    max-width: calc(100vw - 48px);
    white-space: nowrap;
    text-align: center;
  }
}

/* -------------------------------------------------------------------------- */
/* Tablet shell final overrides                                               */
/* -------------------------------------------------------------------------- */
/* Compatibilidad segura con `tablet-app-mode` en html o body.
   Estos overrides solo ordenan el shell global para tablet-first y no
   reemplazan reglas historicas ni layouts por modulo. */

@media (min-width: 768px) and (max-width: 1199px) {
  .tablet-app-mode .dashboard-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(12px, 1.8vw, 18px);
    overflow-x: hidden;
    overflow-y: visible;
  }

  .tablet-app-mode .dashboard-shell,
  .tablet-app-mode .app-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 28px;
    overflow: visible;
  }

  .tablet-app-mode .dashboard-main,
  .tablet-app-mode .main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 20px) calc(112px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
  }

  .tablet-app-mode .content-area,
  .tablet-app-mode .page-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
  }

  .tablet-app-mode .content-area > *,
  .tablet-app-mode .page-content > * {
    min-width: 0;
    max-width: 100%;
  }

  .tablet-app-mode .topbar,
  .tablet-app-mode .mobile-page-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 16px;
  }

  .tablet-app-mode .notifications-dropdown,
  .tablet-app-mode .mobile-page-header .notifications-dropdown {
    max-width: min(360px, calc(100vw - 36px));
  }

  .tablet-app-mode .mobile-bottom-nav {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: min(920px, calc(100vw - 24px));
    margin-inline: auto;
  }

  .tablet-app-mode .mobile-more-sheet {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: min(680px, calc(100vw - 32px));
    margin-inline: auto;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .tablet-app-mode .dashboard-main,
  .tablet-app-mode .main-content {
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  }

  .tablet-app-mode .content-area,
  .tablet-app-mode .page-content {
    gap: 14px;
  }

  .tablet-app-mode .topbar,
  .tablet-app-mode .mobile-page-header {
    border-radius: 24px;
  }

  .tablet-app-mode .mobile-bottom-nav {
    max-width: calc(100vw - 24px);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .tablet-app-mode .dashboard-main,
  .tablet-app-mode .main-content {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .tablet-app-mode .content-area,
  .tablet-app-mode .page-content {
    gap: 16px;
  }

  .tablet-app-mode .mobile-bottom-nav {
    max-width: min(960px, calc(100vw - 36px));
  }

  .tablet-app-mode .mobile-more-sheet {
    max-width: min(760px, calc(100vw - 40px));
  }
}

/* Tablet toast readability override */
@media (min-width: 768px) and (max-width: 1199px) {
    .toast-container {
        width: auto !important;
        max-width: calc(100vw - 48px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
        display: grid !important;
        justify-items: center !important;
    }

    .toast-message:not(.mobile-toast),
    .flash-message,
    .alert {
        display: block !important;
        width: fit-content !important;
        min-width: 280px !important;
        max-width: min(520px, calc(100vw - 48px)) !important;
        min-height: auto !important;
        padding: 14px 22px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        line-height: 1.35 !important;
        box-sizing: border-box !important;
    }

    .mobile-toast {
        width: fit-content !important;
        min-width: 320px !important;
        max-width: min(560px, calc(100vw - 48px)) !important;
        min-height: 56px !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) 36px !important;
        align-items: center !important;
    }

    .mobile-toast-content {
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        line-height: 1.28 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* Tablet header/nav spacing final override */
@media (min-width: 768px) and (max-width: 899px) {
    .tablet-app-mode .topbar,
    .tablet-app-mode .mobile-page-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "copy actions"
            "cta cta" !important;
        gap: 12px !important;
        padding: 14px 15px !important;
        margin-bottom: 14px !important;
        border-radius: 22px !important;
    }

    .tablet-app-mode .topbar-copy,
    .tablet-app-mode .mobile-page-header .topbar-copy {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .tablet-app-mode .topbar-title,
    .tablet-app-mode .page-title,
    .tablet-app-mode .mobile-page-title {
        font-size: clamp(1.55rem, 3.5vw, 1.95rem) !important;
        line-height: 1.08 !important;
    }

    .tablet-app-mode .topbar-greeting,
    .tablet-app-mode .mobile-greeting,
    .tablet-app-mode .topbar-subtitle,
    .tablet-app-mode .page-subtitle,
    .tablet-app-mode .mobile-header-subtitle,
    .tablet-app-mode .topbar-copy p {
        line-height: 1.3 !important;
    }

    .tablet-app-mode .topbar-subtitle,
    .tablet-app-mode .page-subtitle,
    .tablet-app-mode .mobile-header-subtitle,
    .tablet-app-mode .topbar-copy p {
        font-size: 12px !important;
    }

    .tablet-app-mode .header-top-row,
    .tablet-app-mode .mobile-page-header .header-top-row,
    .tablet-app-mode .mobile-page-header .mobile-header-top-row {
        gap: 10px !important;
        align-items: center !important;
    }

    .tablet-app-mode .header-datetime,
    .tablet-app-mode .mobile-header-time-block {
        min-width: max-content !important;
        margin-top: 0 !important;
    }

    .tablet-app-mode .notification-button,
    .tablet-app-mode .mobile-page-header .notification-button {
        width: 40px !important;
        height: 40px !important;
    }

    .tablet-app-mode .header-main-button,
    .tablet-app-mode .mobile-primary-cta-shell {
        width: 100% !important;
    }

    .tablet-app-mode .header-main-button .btn,
    .tablet-app-mode .header-main-button > a.btn,
    .tablet-app-mode .header-main-button > button.btn,
    .tablet-app-mode .mobile-primary-cta,
    .tablet-app-mode .btn-nueva-orden {
        width: 100% !important;
        min-height: 44px !important;
        margin-top: 2px !important;
    }

    .tablet-app-mode .dashboard-main,
    .tablet-app-mode .main-content {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tablet-app-mode .content-area,
    .tablet-app-mode .page-content {
        padding-bottom: 8px !important;
        scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tablet-app-mode .notifications-dropdown,
    .tablet-app-mode .mobile-page-header .notifications-dropdown {
        width: min(340px, calc(100vw - 32px)) !important;
        max-height: min(420px, calc(100dvh - 150px)) !important;
        overflow-y: auto !important;
    }

    .tablet-app-mode .mobile-more-sheet {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: min(62vh, calc(100dvh - 132px)) !important;
        overflow-y: auto !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .tablet-app-mode .topbar,
    .tablet-app-mode .mobile-page-header {
        gap: 14px !important;
        padding: 16px 18px !important;
        margin-bottom: 16px !important;
    }

    .tablet-app-mode .topbar-title,
    .tablet-app-mode .page-title,
    .tablet-app-mode .mobile-page-title {
        font-size: clamp(1.75rem, 3vw, 2.2rem) !important;
        line-height: 1.08 !important;
    }

    .tablet-app-mode .topbar-subtitle,
    .tablet-app-mode .page-subtitle,
    .tablet-app-mode .mobile-header-subtitle,
    .tablet-app-mode .topbar-copy p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .tablet-app-mode .header-top-row {
        gap: 12px !important;
        align-items: center !important;
    }

    .tablet-app-mode .header-main-button,
    .tablet-app-mode .mobile-primary-cta-shell {
        width: auto !important;
        min-width: 220px !important;
    }

    .tablet-app-mode .header-main-button .btn,
    .tablet-app-mode .header-main-button > a.btn,
    .tablet-app-mode .header-main-button > button.btn,
    .tablet-app-mode .mobile-primary-cta,
    .tablet-app-mode .btn-nueva-orden {
        min-width: 220px !important;
        width: auto !important;
    }

    .tablet-app-mode .dashboard-main,
    .tablet-app-mode .main-content {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tablet-app-mode .content-area,
    .tablet-app-mode .page-content {
        scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tablet-app-mode .notifications-dropdown,
    .tablet-app-mode .mobile-page-header .notifications-dropdown {
        width: min(360px, calc(100vw - 40px)) !important;
        max-height: min(430px, calc(100dvh - 160px)) !important;
        overflow-y: auto !important;
    }

    .tablet-app-mode .mobile-more-sheet {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: min(66vh, calc(100dvh - 140px)) !important;
        overflow-y: auto !important;
    }
}

/* Tablet more sheet fit-content override */
@media (min-width: 768px) and (max-width: 1199px) {
    .tablet-app-mode .mobile-more-sheet,
    html.tablet-app-mode .mobile-more-sheet,
    body.tablet-app-mode .mobile-more-sheet {
        width: min(680px, calc(100vw - 64px)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%) !important;
        height: auto !important;
        max-height: calc(100dvh - 150px) !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        padding-bottom: 16px !important;
    }

    .tablet-app-mode .mobile-more-sheet-links,
    html.tablet-app-mode .mobile-more-sheet-links,
    body.tablet-app-mode .mobile-more-sheet-links {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* Dashboard content tablet/mobile compact layout */
@media (min-width: 768px) and (max-width: 1199px) {
    .dashboard-hero-inline {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 18px !important;
        padding: 20px 22px !important;
        min-height: auto !important;
    }

    .dashboard-hero-inline .section-header {
        margin-bottom: 0 !important;
    }

    .dashboard-hero-inline .section-title {
        margin-bottom: 6px !important;
    }

    .dashboard-hero-inline .section-subtitle {
        margin: 0 !important;
    }

    .dashboard-hero-inline .dashboard-hero-content {
        min-width: 0 !important;
    }

    .dashboard-hero-inline .dashboard-user-card {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .dashboard-hero-inline .dashboard-user-meta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        min-height: 46px !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        white-space: nowrap !important;
    }

    .dashboard-metrics-compact {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .dashboard-metrics-compact .metric-card {
        min-height: 72px !important;
        padding: 16px 20px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
    }

    .dashboard-metrics-compact .metric-label {
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        max-width: 70% !important;
    }

    .dashboard-metrics-compact .metric-value {
        margin: 0 !important;
        font-size: clamp(28px, 4vw, 38px) !important;
        line-height: 1 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    .dashboard-hero-inline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .dashboard-hero-inline .dashboard-user-card {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .dashboard-hero-inline .dashboard-user-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        white-space: normal !important;
    }

    .dashboard-metrics-compact {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .dashboard-metrics-compact .metric-card {
        min-height: 68px !important;
        padding: 15px 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }

    .dashboard-metrics-compact .metric-label {
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        max-width: 70% !important;
    }

    .dashboard-metrics-compact .metric-value {
        margin: 0 !important;
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

/* Tablet landscape login balance override */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .auth-page {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40px 56px 64px !important;
        overflow: hidden !important;
    }

    .auth-shell {
        width: min(100%, 900px) !important;
        display: grid !important;
        grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 430px) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(56px, 8vw, 96px) !important;
        margin: 0 auto !important;
        transform: translateY(-10px) !important;
    }

    .login-left {
        width: 100% !important;
        max-width: 360px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: grid !important;
        justify-items: start !important;
        text-align: left !important;
    }

    .login-logo-wrapper {
        justify-content: flex-start !important;
    }

    .login-logo {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        max-height: 128px !important;
        margin-bottom: 18px !important;
        object-fit: contain !important;
    }

    .login-description {
        max-width: 32ch !important;
        margin: 0 !important;
        font-size: 0.96rem !important;
        line-height: 1.45 !important;
        text-align: left !important;
    }

    .auth-card {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 !important;
    }

    .login-disclaimer {
        position: fixed !important;
        left: 50% !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 1200px) {
  .dashboard-page-shell .dashboard-audit-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  .dashboard-page-shell .dashboard-audit-header {
    align-items: center !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
    align-items: stretch !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item {
    min-width: 0 !important;
    min-height: 72px !important;
    height: auto !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .dashboard-page-shell .dashboard-audit-card .dashboard-audit-metric-icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
  }

  .dashboard-page-shell .dashboard-audit-card .info-chip-label {
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  .dashboard-page-shell .dashboard-audit-card .general-summary-item strong {
    justify-self: end !important;
    margin: 0 !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }

  .dashboard-page-shell .dashboard-audit-card .kpi-card--audit-missing .dashboard-audit-metric-icon {
    background: rgba(255, 239, 205, 0.9) !important;
    color: #bd7b1e !important;
  }

  .dashboard-page-shell .dashboard-audit-card .kpi-card--audit-debt .dashboard-audit-metric-icon {
    background: rgba(255, 231, 237, 0.9) !important;
    color: #bf5270 !important;
  }

  .dashboard-page-shell .dashboard-audit-card .kpi-card--audit-edited .dashboard-audit-metric-icon {
    background: rgba(234, 237, 255, 0.92) !important;
    color: #596db8 !important;
  }

  .dashboard-page-shell .dashboard-audit-card .kpi-card--audit-cancelled .dashboard-audit-metric-icon {
    background: rgba(255, 232, 236, 0.9) !important;
    color: #c24e62 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .dashboard-page-shell .dashboard-audit-card .dashboard-audit-metric-icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 767px) {
  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .dashboard-page-shell .dashboard-audit-card .dashboard-audit-metric-icon {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
  }
}

@media (min-width: 1200px) {
  .dashboard-insights-grid {
    align-items: stretch !important;
  }

  .dashboard-insights-grid > .content-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .dashboard-insights-grid > .dashboard-indicators-card,
  .dashboard-insights-grid > .dashboard-orders-status-card {
    min-height: 0 !important;
  }

  .dashboard-insights-grid > .dashboard-indicators-card .chart-shell {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-orders-status-body {
    flex: 0 0 auto !important;
    align-content: start !important;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-orders-status-header {
    margin-bottom: 28px !important;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-status-mini-metrics {
    margin-top: 24px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-status-mini {
    width: 100% !important;
    min-height: 84px !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-status-mini-copy strong {
    font-size: 1.65rem !important;
    line-height: 1 !important;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-status-mini-copy small {
    font-size: 0.76rem !important;
    line-height: 1.15 !important;
  }

  .dashboard-recent-orders-list {
    flex: 1 1 auto !important;
    gap: 4px !important;
    align-content: space-between !important;
  }

  .dashboard-recent-orders-list > .dashboard-recent-order {
    min-height: 56px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 768px) {
  .dashboard-insights-grid > .dashboard-indicators-card .chart-shell {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }
}

.dashboard-recent-orders-card .dashboard-recent-orders-list > .dashboard-recent-order:nth-child(n + 6) {
  display: none !important;
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .dashboard-recent-orders-card .dashboard-recent-orders-list > .dashboard-recent-order:nth-child(6) {
    display: grid !important;
  }
}

/* Tablet landscape login true center override */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  body.auth-page {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  body.auth-page .auth-shell {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: min(900px, calc(100vw - 96px)) !important;
    max-width: 900px !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 430px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(56px, 8vw, 96px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body.auth-page .auth-shell.fade-in {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }

  body.auth-page .login-left {
    width: 100% !important;
    max-width: 360px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    justify-items: start !important;
    text-align: left !important;
  }

  body.auth-page .login-logo-wrapper {
    justify-content: flex-start !important;
  }

  body.auth-page .login-logo {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    max-height: 128px !important;
    margin-bottom: 18px !important;
    object-fit: contain !important;
  }

  body.auth-page .login-description {
    max-width: 32ch !important;
    margin: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  body.auth-page .auth-card {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 !important;
  }

  body.auth-page .login-disclaimer {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

/* Tablet landscape dashboard header CTA and quick links override */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  body.tablet-app-mode .topbar,
  html.tablet-app-mode .topbar,
  .tablet-app-mode .topbar {
    align-items: stretch !important;
  }

  body.tablet-app-mode .header-main-button,
  html.tablet-app-mode .header-main-button,
  .tablet-app-mode .header-main-button {
    display: flex !important;
    width: 100% !important;
  }

  body.tablet-app-mode .header-main-button .btn,
  body.tablet-app-mode .header-main-button > a.btn,
  body.tablet-app-mode .header-main-button > button.btn,
  html.tablet-app-mode .header-main-button .btn,
  html.tablet-app-mode .header-main-button > a.btn,
  html.tablet-app-mode .header-main-button > button.btn,
  .tablet-app-mode .header-main-button .btn,
  .tablet-app-mode .header-main-button > a.btn,
  .tablet-app-mode .header-main-button > button.btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
  }

  body.tablet-app-mode .topbar-actions,
  html.tablet-app-mode .topbar-actions,
  .tablet-app-mode .topbar-actions {
    min-width: 0 !important;
  }

  body.tablet-app-mode .quick-links-grid,
  html.tablet-app-mode .quick-links-grid,
  .tablet-app-mode .quick-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.tablet-app-mode .quick-link-card,
  html.tablet-app-mode .quick-link-card,
  .tablet-app-mode .quick-link-card {
    min-width: 0 !important;
  }
}

/* Tablet portrait dashboard quick links list override */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  body.tablet-app-mode .quick-links-grid,
  html.tablet-app-mode .quick-links-grid,
  .tablet-app-mode .quick-links-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 10px;
  }

  body.tablet-app-mode .quick-link-card,
  html.tablet-app-mode .quick-link-card,
  .tablet-app-mode .quick-link-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 86px !important;
    padding: 16px 18px !important;
    text-align: left !important;
  }

  body.tablet-app-mode .quick-link-icon,
  html.tablet-app-mode .quick-link-icon,
  .tablet-app-mode .quick-link-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    flex: 0 0 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.tablet-app-mode .quick-link-card > div,
  html.tablet-app-mode .quick-link-card > div,
  .tablet-app-mode .quick-link-card > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }

  body.tablet-app-mode .quick-link-title,
  html.tablet-app-mode .quick-link-title,
  .tablet-app-mode .quick-link-title {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  body.tablet-app-mode .quick-link-text,
  html.tablet-app-mode .quick-link-text,
  .tablet-app-mode .quick-link-text {
    margin: 0 !important;
    line-height: 1.35 !important;
  }
}

/* Mobile dashboard hero meta stack override */
@media (max-width: 767px) {
  .dashboard-hero-inline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 16px !important;
  }

  .dashboard-hero-inline .dashboard-hero-content {
    min-width: 0 !important;
  }

  .dashboard-hero-inline .section-header {
    margin-bottom: 0 !important;
  }

  .dashboard-hero-inline .section-title {
    margin-bottom: 4px !important;
  }

  .dashboard-hero-inline .section-subtitle {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .dashboard-hero-inline .dashboard-user-card {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-self: end !important;
  }

  .dashboard-hero-inline .dashboard-user-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    justify-items: end !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(190, 220, 230, 0.9) !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  .dashboard-hero-inline .dashboard-user-meta .divider {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    background: rgba(74, 88, 153, 0.18) !important;
    margin: 1px 0 !important;
  }

  .dashboard-hero-inline .dashboard-user-meta span {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .dashboard-hero-inline .dashboard-user-meta strong {
    font-size: 12px !important;
    font-weight: 700 !important;
  }
}

/* Unified app toast component */
.toast-message.mobile-toast {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
    width: fit-content !important;
    min-width: min(360px, calc(100vw - 32px)) !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    padding: 12px 14px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.mobile-toast-icon,
.mobile-toast-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
}

.mobile-toast-content {
    min-width: 0 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.mobile-toast-close {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: currentColor !important;
    cursor: pointer !important;
}

@media (min-width: 768px) {
    .toast-container {
        width: auto !important;
        max-width: calc(100vw - 48px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        justify-items: center !important;
    }

    .toast-message.mobile-toast {
        min-width: 360px !important;
        max-width: min(560px, calc(100vw - 48px)) !important;
    }
}

@media (max-width: 767px) {
    .toast-container {
        width: min(100%, calc(100vw - 20px)) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        justify-items: stretch !important;
    }

    .toast-message.mobile-toast {
        width: 100% !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    }
}

/* Unified app toast tone colors */
.toast-message.mobile-toast.toast-success,
.toast-message.mobile-toast.mobile-toast-success {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

.toast-message.mobile-toast.toast-success .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-icon {
    background: #ffffff !important;
    color: #15803d !important;
}

.toast-message.mobile-toast.toast-success .mobile-toast-content,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-content {
    color: #166534 !important;
    font-weight: 700 !important;
}

.toast-message.mobile-toast.toast-success .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-close {
    background: #ffffff !important;
    color: #166534 !important;
}

.toast-message.mobile-toast.toast-success .mobile-toast-close:hover,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-close:hover {
    background: #f0fdf4 !important;
    color: #14532d !important;
}

.toast-message.mobile-toast.toast-warning,
.toast-message.mobile-toast.mobile-toast-warning {
    background: #fef3c7 !important;
    border: 1px solid #facc15 !important;
    color: #92400e !important;
}

.toast-message.mobile-toast.toast-danger,
.toast-message.mobile-toast.toast-error,
.toast-message.mobile-toast.mobile-toast-danger,
.toast-message.mobile-toast.mobile-toast-error {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

.toast-message.mobile-toast.toast-info,
.toast-message.mobile-toast.mobile-toast-info {
    background: #e0f2fe !important;
    border: 1px solid #7dd3fc !important;
    color: #075985 !important;
}

/* Unified app toast icon/action alignment */
.toast-message.mobile-toast {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
}

.toast-message.mobile-toast .mobile-toast-icon,
.toast-message.mobile-toast .mobile-toast-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.86) !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.toast-message.mobile-toast .mobile-toast-icon i,
.toast-message.mobile-toast .mobile-toast-close i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.toast-message.mobile-toast .mobile-toast-content {
    min-width: 0 !important;
    align-self: center !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.toast-message.mobile-toast .mobile-toast-close {
    border: 0 !important;
    cursor: pointer !important;
}

/* Tone-specific unified toast colors */
.toast-message.mobile-toast.toast-success,
.toast-message.mobile-toast.mobile-toast-success {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

.toast-message.mobile-toast.toast-success .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-icon,
.toast-message.mobile-toast.toast-success .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-close {
    color: #166534 !important;
}

.toast-message.mobile-toast.toast-info,
.toast-message.mobile-toast.mobile-toast-info {
    background: #e0f2fe !important;
    border: 1px solid #38bdf8 !important;
    color: #075985 !important;
}

.toast-message.mobile-toast.toast-info .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-info .mobile-toast-icon,
.toast-message.mobile-toast.toast-info .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-info .mobile-toast-close {
    color: #075985 !important;
}

.toast-message.mobile-toast.toast-warning,
.toast-message.mobile-toast.mobile-toast-warning {
    background: #fef3c7 !important;
    border: 1px solid #facc15 !important;
    color: #92400e !important;
}

.toast-message.mobile-toast.toast-warning .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-warning .mobile-toast-icon,
.toast-message.mobile-toast.toast-warning .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-warning .mobile-toast-close {
    color: #92400e !important;
}

.toast-message.mobile-toast.toast-danger,
.toast-message.mobile-toast.toast-error,
.toast-message.mobile-toast.mobile-toast-danger,
.toast-message.mobile-toast.mobile-toast-error {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

.toast-message.mobile-toast.toast-danger .mobile-toast-icon,
.toast-message.mobile-toast.toast-error .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-danger .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-error .mobile-toast-icon,
.toast-message.mobile-toast.toast-danger .mobile-toast-close,
.toast-message.mobile-toast.toast-error .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-danger .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-error .mobile-toast-close {
    color: #991b1b !important;
}

/* Historial de ordenes final absolute override */
.search-history-filters-toggle,
.search-history-mobile-list {
    display: none;
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-history-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal,
    #orders-history-modal .modal-dialog.modal-content.search-history-modal-content.client-orders-history-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        min-height: 0 !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 16px 64px 14px 18px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
    }

    #orders-history-modal .search-history-modal-body,
    #orders-history-modal .modal-body.search-history-modal-body,
    #orders-history-modal .modal-scroll-area.search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .history-filters,
    #orders-history-modal .modal-filters-grid.history-filters,
    #orders-history-modal .search-history-mobile-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 14px !important;
    }

    #orders-history-modal .search-history-filter-primary,
    #orders-history-modal .search-history-filter-search {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-filters-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 91, 168, 0.22) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters:not([hidden]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.72) !important;
        border: 1px solid rgba(190, 220, 230, 0.55) !important;
    }

    #orders-history-modal .search-history-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #orders-history-modal .search-history-mobile-code-wrap {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-item {
        display: grid !important;
        gap: 4px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }
}

/* Historial de ordenes final canonical mobile + iPad portrait */
.search-history-filters-toggle,
.search-history-mobile-list {
    display: none;
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-history-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal,
    #orders-history-modal .modal-dialog.modal-content.search-history-modal-content.client-orders-history-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        min-height: 0 !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 16px 64px 14px 18px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
    }

    #orders-history-modal .search-history-modal-body,
    #orders-history-modal .modal-body.search-history-modal-body,
    #orders-history-modal .modal-scroll-area.search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #orders-history-modal .history-filters,
    #orders-history-modal .modal-filters-grid.history-filters,
    #orders-history-modal .search-history-mobile-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 14px !important;
    }

    #orders-history-modal .search-history-filter-primary,
    #orders-history-modal .search-history-filter-search {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-filters-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 91, 168, 0.22) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters:not([hidden]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.72) !important;
        border: 1px solid rgba(190, 220, 230, 0.55) !important;
    }

    #orders-history-modal .search-history-advanced-filters .history-filter-group,
    #orders-history-modal .search-history-advanced-filters .search-history-filter {
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-advanced-filters label,
    #orders-history-modal .search-history-filter-primary label,
    #orders-history-modal .search-history-filter-search label {
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters input,
    #orders-history-modal .search-history-advanced-filters select,
    #orders-history-modal .search-history-filter-primary input,
    #orders-history-modal .search-history-filter-search input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-advanced-filters [data-history-clear] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
    }

    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #orders-history-modal .search-history-mobile-code-wrap {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-item {
        display: grid !important;
        gap: 4px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-list > [data-history-row],
    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-code-wrap {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-item {
        display: grid !important;
        gap: 4px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }

    #orders-history-modal .search-history-mobile-card .pill-chip,
    #orders-history-modal .search-history-mobile-card .status-chip,
    #orders-history-modal .search-history-mobile-card .amount-pill,
    #orders-history-modal .search-history-mobile-list > [data-history-row] .pill-chip,
    #orders-history-modal .search-history-mobile-list > [data-history-row] .status-chip,
    #orders-history-modal .search-history-mobile-list > [data-history-row] .amount-pill {
        margin-left: 0 !important;
    }
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
    }

    /* Fallback: cualquier data-history-row dentro de la lista se vuelve card */
    #orders-history-modal .search-history-mobile-list > [data-history-row],
    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
        overflow: hidden !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #orders-history-modal .search-history-mobile-code-wrap {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-item {
        display: grid !important;
        gap: 4px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }

    #orders-history-modal .search-history-mobile-card .pill-chip,
    #orders-history-modal .search-history-mobile-card .status-chip,
    #orders-history-modal .search-history-mobile-card .amount-pill,
    #orders-history-modal .search-history-mobile-list > [data-history-row] .pill-chip,
    #orders-history-modal .search-history-mobile-list > [data-history-row] .status-chip,
    #orders-history-modal .search-history-mobile-list > [data-history-row] .amount-pill {
        margin-left: 0 !important;
    }
}

/* Historial de ordenes responsive canonical override */
.search-history-filters-toggle,
.search-history-mobile-list {
    display: none;
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-history-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal,
    #orders-history-modal .modal-dialog.modal-content.search-history-modal-content.client-orders-history-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        min-height: 0 !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 16px 64px 14px 18px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
    }

    #orders-history-modal .modal-header h3 {
        margin: 0 !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #orders-history-modal .modal-close-btn {
        top: 11px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 15px !important;
    }

    #orders-history-modal .search-history-modal-body,
    #orders-history-modal .modal-body.search-history-modal-body,
    #orders-history-modal .modal-scroll-area.search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #orders-history-modal .history-filters,
    #orders-history-modal .modal-filters-grid.history-filters,
    #orders-history-modal .search-history-mobile-filters {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 14px !important;
        grid-auto-flow: row !important;
    }

    #orders-history-modal .search-history-filter-primary,
    #orders-history-modal .search-history-filter-search {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-filters-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 91, 168, 0.22) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        font-size: 0.94rem !important;
        cursor: pointer !important;
    }

    #orders-history-modal .search-history-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #orders-history-modal .search-history-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.72) !important;
        border: 1px solid rgba(190, 220, 230, 0.55) !important;
    }

    #orders-history-modal .search-history-advanced-filters:not([hidden]) {
        display: grid !important;
    }

    #orders-history-modal .history-filter-group,
    #orders-history-modal .search-history-filter,
    #orders-history-modal .search-history-advanced-filters .filter-group,
    #orders-history-modal .search-history-advanced-filters .history-filter-group,
    #orders-history-modal .search-history-advanced-filters .search-history-filter {
        min-width: 0 !important;
        width: 100% !important;
    }

    #orders-history-modal .search-history-advanced-filters label,
    #orders-history-modal .search-history-filter-primary label,
    #orders-history-modal .search-history-filter-search label {
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters input,
    #orders-history-modal .search-history-advanced-filters select,
    #orders-history-modal .search-history-filter-primary input,
    #orders-history-modal .search-history-filter-search input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-advanced-filters [data-history-clear],
    #orders-history-modal .history-filter-clear,
    #orders-history-modal [data-history-clear] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 0 12px !important;
        margin: 0 !important;
    }

    #orders-history-modal .search-history-mobile-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #orders-history-modal .history-empty-state {
        flex: 0 0 auto !important;
        margin-top: 12px !important;
    }
}

.order-services-detail-mobile-list {
    display: none;
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #order-services-detail-modal-search {
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    #order-services-detail-modal-search .modal-dialog.modal-content,
    #order-services-detail-modal-search .modal-dialog.modal-content.history-modal.large-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #order-services-detail-modal-search .modal-header {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        padding: 14px 58px 12px 16px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.6) !important;
    }

    #order-services-detail-modal-search .modal-header h3 {
        margin: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #order-services-detail-modal-search .modal-close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    #order-services-detail-modal-search .order-services-detail-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #order-services-detail-modal-search .order-services-detail-meta {
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    #order-services-detail-modal-search .order-services-detail-table-wrapper {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list {
        display: grid !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list[hidden] {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-card {
        display: grid !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head {
        display: grid !important;
        gap: 4px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head span,
    #order-services-detail-modal-search .order-services-detail-mobile-grid span {
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: var(--muted) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head strong,
    #order-services-detail-modal-search .order-services-detail-mobile-grid strong {
        margin: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.32 !important;
        color: var(--color-text, #2f2440) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-grid > div {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
        padding: 10px 11px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.84) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-grid > div.is-highlight {
        background: rgba(237, 248, 240, 0.96) !important;
        border: 1px solid rgba(145, 198, 160, 0.55) !important;
    }
}

.search-history-filters-toggle,
.search-history-advanced-filters {
    display: none;
}

@media (max-width: 767px) {
    #orders-history-modal .search-history-mobile-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 12px !important;
    }

    #orders-history-modal .search-history-filter-primary {
        display: grid !important;
    }

    #orders-history-modal .search-history-filters-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 91, 168, 0.22) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        font-size: 0.92rem !important;
        cursor: pointer !important;
    }

    #orders-history-modal .search-history-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #orders-history-modal .search-history-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #orders-history-modal .search-history-advanced-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.72) !important;
        border: 1px solid rgba(190, 220, 230, 0.55) !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters .filter-group,
    #orders-history-modal .search-history-advanced-filters .history-filter-group,
    #orders-history-modal .search-history-advanced-filters .search-history-filter {
        min-width: 0 !important;
        width: 100% !important;
    }

    #orders-history-modal .search-history-advanced-filters label,
    #orders-history-modal .search-history-filter-primary label {
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters input,
    #orders-history-modal .search-history-advanced-filters select,
    #orders-history-modal .search-history-filter-primary input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-advanced-filters [data-history-clear] {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
    }
}

@media (min-width: 1200px) {
    #orders-history-modal .search-history-filters-toggle {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters {
        display: contents !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: contents !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* Historial de ordenes - iPad horizontal con patron mobile/tablet vertical */
    #orders-history-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal,
    #orders-history-modal .modal-dialog.modal-content.search-history-modal-content.client-orders-history-modal {
        width: calc(100vw - 44px) !important;
        max-width: calc(100vw - 44px) !important;
        height: calc(100dvh - 44px) !important;
        max-height: calc(100dvh - 44px) !important;
        min-height: 0 !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 16px 66px 14px 22px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
    }

    #orders-history-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .modal-close-btn {
        top: 11px !important;
        right: 14px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 15px !important;
    }

    #orders-history-modal .modal-body.search-history-modal-body,
    #orders-history-modal .modal-scroll-area.search-history-modal-body,
    #orders-history-modal .search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #orders-history-modal .modal-filters-grid.history-filters,
    #orders-history-modal .history-filters,
    #orders-history-modal .search-history-mobile-filters {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 220px !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
        align-items: end !important;
    }

    #orders-history-modal .search-history-filter-primary,
    #orders-history-modal .search-history-filter-search {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-filters-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 91, 168, 0.22) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }

    #orders-history-modal .search-history-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #orders-history-modal .search-history-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters:not([hidden]) {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(248, 250, 255, 0.72) !important;
        border: 1px solid rgba(190, 220, 230, 0.55) !important;
    }

    #orders-history-modal .search-history-advanced-filters .filter-group,
    #orders-history-modal .search-history-advanced-filters .history-filter-group,
    #orders-history-modal .search-history-advanced-filters .search-history-filter {
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-advanced-filters label,
    #orders-history-modal .search-history-filter-primary label,
    #orders-history-modal .search-history-filter-search label {
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters input,
    #orders-history-modal .search-history-advanced-filters select,
    #orders-history-modal .search-history-filter-primary input,
    #orders-history-modal .search-history-filter-search input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-advanced-filters [data-history-clear] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-list[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 14px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #orders-history-modal .search-history-mobile-code-wrap {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-item {
        display: grid !important;
        gap: 4px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        grid-column: 1 / -1 !important;
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }

    #orders-history-modal .search-history-mobile-card .pill-chip,
    #orders-history-modal .search-history-mobile-card .status-chip,
    #orders-history-modal .search-history-mobile-card .amount-pill {
        margin-left: 0 !important;
    }

    #orders-history-modal .history-empty-state {
        grid-column: 1 / -1 !important;
        margin-top: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* Historial de ordenes - iPad horizontal: limpiar filtros full width */
    #orders-history-modal .search-history-advanced-filters .search-history-filter-actions,
    #orders-history-modal .search-history-advanced-filters .filter-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
    }

    #orders-history-modal .search-history-advanced-filters [data-history-clear],
    #orders-history-modal .search-history-advanced-filters .history-filter-clear {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    /* /search/result - Historial de ordenes: modal mobile a pantalla completa util */
    #orders-history-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal,
    #orders-history-modal .modal-dialog.modal-content.search-history-modal-content.client-orders-history-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        padding: 14px 58px 12px 16px !important;
        align-items: center !important;
    }

    #orders-history-modal .modal-header h3 {
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    #orders-history-modal .modal-close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    /* El body es el unico scroll del modal */
    #orders-history-modal .modal-body.search-history-modal-body,
    #orders-history-modal .modal-scroll-area.search-history-modal-body,
    #orders-history-modal .search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Filtros arriba, no deben crecer ni romper el scroll */
    #orders-history-modal .history-filters,
    #orders-history-modal .modal-filters-grid.history-filters {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 12px !important;
    }

    /* Tabla desktop oculta en mobile */
    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    /* Lista mobile ocupa el espacio y scrollea con el body */
    #orders-history-modal .search-history-mobile-list {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 0 10px !important;
        margin: 0 !important;
    }

    #orders-history-modal .search-history-mobile-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #orders-history-modal .history-empty-state {
        flex: 0 0 auto !important;
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    #order-services-detail-modal-search {
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        overflow: hidden !important;
        z-index: 1300 !important;
    }

    #order-services-detail-modal-search.is-open {
        display: flex !important;
    }

    #order-services-detail-modal-search .modal-dialog.modal-content,
    #order-services-detail-modal-search .modal-dialog.modal-content.history-modal.large-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--panel-surface) !important;
    }

    #order-services-detail-modal-search .modal-header {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        padding: 14px 58px 12px 16px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
        background: var(--panel-surface) !important;
        z-index: 2 !important;
    }

    #order-services-detail-modal-search .modal-header h3 {
        margin: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #order-services-detail-modal-search .modal-close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    /* El body debe ser el UNICO scroll del modal */
    #order-services-detail-modal-search .modal-body,
    #order-services-detail-modal-search .modal-scroll-area,
    #order-services-detail-modal-search .order-services-detail-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        background: transparent !important;
    }

    #order-services-detail-modal-search .order-services-detail-meta {
        flex: 0 0 auto !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    #order-services-detail-modal-search .order-services-detail-table-wrapper {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 0 12px !important;
        margin: 0 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list[hidden] {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: grid !important;
        gap: 14px !important;
        padding: 14px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(190, 220, 230, 0.8) !important;
        box-shadow: 0 10px 24px rgba(38, 55, 90, 0.06) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(244, 240, 248, 0.95) !important;
        color: var(--primary) !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy span,
    #order-services-detail-modal-search .order-services-detail-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.73rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy strong {
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item {
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.88) !important;
        border: 1px solid rgba(190, 220, 230, 0.45) !important;
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-full {
        grid-column: 1 / -1 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item strong {
        color: var(--text) !important;
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-highlight {
        background: #eef8f0 !important;
        border-color: #bde8cc !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-highlight strong {
        color: #1f7a45 !important;
    }
}

.search-history-mobile-list {
    display: none;
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /search/result iPad vertical - header Cliente */
    .tablet-app-mode .client-card .client-card-header,
    body.tablet-app-mode .client-card .client-card-header,
    html.tablet-app-mode .client-card .client-card-header,
    .client-card .client-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 8px 12px !important;
        margin-bottom: 10px !important;
    }

    .tablet-app-mode .client-card .client-card-header > div,
    body.tablet-app-mode .client-card .client-card-header > div,
    html.tablet-app-mode .client-card .client-card-header > div,
    .client-card .client-card-header > div {
        min-width: 0 !important;
    }

    .tablet-app-mode .client-card .client-edit-btn,
    body.tablet-app-mode .client-card .client-edit-btn,
    html.tablet-app-mode .client-card .client-edit-btn,
    .client-card .client-edit-btn {
        justify-self: end !important;
        align-self: start !important;
        width: auto !important;
        min-width: 150px !important;
        max-width: max-content !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* /search/result iPad vertical - alinear pill Lealtad */
    .tablet-app-mode .client-card .search-info-grid--client .loyalty-chip,
    body.tablet-app-mode .client-card .search-info-grid--client .loyalty-chip,
    html.tablet-app-mode .client-card .search-info-grid--client .loyalty-chip,
    .client-card .search-info-grid--client .loyalty-chip {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-self: start !important;
        align-self: start !important;
    }

    .tablet-app-mode .client-card .search-info-grid--client .info-item strong:has(.loyalty-chip),
    body.tablet-app-mode .client-card .search-info-grid--client .info-item strong:has(.loyalty-chip),
    html.tablet-app-mode .client-card .search-info-grid--client .info-item strong:has(.loyalty-chip),
    .client-card .search-info-grid--client .info-item strong:has(.loyalty-chip) {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* /search/result iPad vertical - compactar header Cliente */
    .tablet-app-mode .client-card .client-card-header .section-subtitle,
    body.tablet-app-mode .client-card .client-card-header .section-subtitle,
    html.tablet-app-mode .client-card .client-card-header .section-subtitle,
    .client-card .client-card-header .section-subtitle {
        margin-bottom: 0 !important;
    }

    .tablet-app-mode .client-card .search-info-grid--client,
    body.tablet-app-mode .client-card .search-info-grid--client,
    html.tablet-app-mode .client-card .search-info-grid--client,
    .client-card .search-info-grid--client {
        margin-top: 0 !important;
    }

    /* /search/result iPad vertical - boton Ver ordenes full width */
    .tablet-app-mode .client-card .client-card-actions,
    body.tablet-app-mode .client-card .client-card-actions,
    html.tablet-app-mode .client-card .client-card-actions,
    .client-card .client-card-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: stretch !important;
        margin-top: 8px !important;
        padding-top: 0 !important;
    }

    .tablet-app-mode .client-card .client-card-actions .btn,
    body.tablet-app-mode .client-card .client-card-actions .btn,
    html.tablet-app-mode .client-card .client-card-actions .btn,
    .client-card .client-card-actions .btn {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        min-height: 46px !important;
        border-radius: 14px !important;
    }

    /* /search/result iPad vertical - subir boton Ver ordenes */
    .tablet-app-mode .client-card .search-info-grid--client,
    body.tablet-app-mode .client-card .search-info-grid--client,
    html.tablet-app-mode .client-card .search-info-grid--client,
    .client-card .search-info-grid--client {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        padding: 16px 16px 12px !important;
    }

    #orders-history-modal .search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 14px 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #orders-history-modal .history-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    #orders-history-modal .history-filter-group,
    #orders-history-modal .search-history-filter {
        min-width: 0 !important;
    }

    #orders-history-modal .history-filter-group label {
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .history-filter-group input,
    #orders-history-modal .history-filter-group select {
        min-height: 44px !important;
        height: 44px !important;
    }

    #orders-history-modal .history-filter-clear,
    #orders-history-modal [data-history-clear] {
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        display: grid !important;
        gap: 12px !important;
        min-height: 0 !important;
    }

    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7B7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-item {
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }

    #orders-history-modal .search-history-mobile-card .pill-chip,
    #orders-history-modal .search-history-mobile-card .status-chip,
    #orders-history-modal .search-history-mobile-card .amount-pill {
        margin-left: 0 !important;
    }

    #orders-history-modal .history-empty-state {
        margin-top: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /search/result iPad horizontal - CTA cliente full width */
  .tablet-app-mode .client-card .client-card-actions,
  body.tablet-app-mode .client-card .client-card-actions,
    html.tablet-app-mode .client-card .client-card-actions,
    .client-card .client-card-actions {
        width: 100% !important;
        margin-top: auto !important;
    }

    .tablet-app-mode .client-card .client-card-actions .btn,
    body.tablet-app-mode .client-card .client-card-actions .btn,
    html.tablet-app-mode .client-card .client-card-actions .btn,
    .client-card .client-card-actions .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
  /* /search/result mobile - Resta por pagar como fila equilibrada */
  [data-search-order-card] .search-info-grid--order .info-item.payment-alert {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
    }

    [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: start !important;
        text-align: left !important;
    }

    [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        justify-self: start !important;
        text-align: left !important;
    }

    [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* /search/result mobile - Estado de la orden y Estado de pago como fila */
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        text-align: left !important;
        justify-items: stretch !important;
    }

    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        width: auto !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
    }

    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip {
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
    }

    /* Botones inferiores full width en mobile */
    [data-search-order-card] .order-detail-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

  [data-search-order-card] .order-detail-actions .btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  /* El fondo debe continuar en el layout, no inflando la seccion */
  html,
  body {
    min-height: 100dvh !important;
    height: auto !important;
  }

  body,
  .dashboard-frame,
  .dashboard-shell,
  .dashboard-main,
  .main-content {
    min-height: 100dvh !important;
    height: auto !important;
  }

  .dashboard-main,
  .main-content {
    background: transparent !important;
  }

  /* La zona de contenido NO debe crecer artificialmente */
  .content-area,
  .page-content,
  .page-section {
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  /* En /search inicial, evitar bloque vacio gigante debajo de la card */
  .content-area.page-content > .page-section,
  .page-content > .page-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* El espacio para el bottom nav se maneja en el main, no en la page-section */
  .dashboard-main.main-content,
  main.dashboard-main.main-content {
    padding-bottom: calc(var(--mobile-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 18px) !important;
  }
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  /* /search vacio: continuidad visual sin inflar la card */
  .search-page-section.search-page-section--empty {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--responsive-section-gap, 16px) !important;
    min-height: calc(
      100dvh
      - var(--mobile-nav-height, 78px)
      - env(safe-area-inset-bottom, 0px)
      - 160px
    ) !important;
    padding-bottom: calc(var(--mobile-nav-height, 78px) + 18px) !important;
  }

  .search-page-section.search-page-section--empty::after {
    content: "" !important;
    flex: 1 1 auto !important;
    min-height: 120px !important;
    border-radius: 22px !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(248, 239, 246, 0.28) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
  }

  /* Evitar que reglas globales anteriores inflen todas las page-section */
  .page-section:not(.search-page-section--empty) {
    min-height: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /search/result iPad vertical - Estado de orden y estado de pago como fila */
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        text-align: left !important;
        justify-items: stretch !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        width: auto !important;
        text-align: left !important;
        justify-self: start !important;
        align-self: center !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip {
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /search/result - Cliente en iPad horizontal: reducir aire superior */
  .tablet-app-mode .client-card .client-card-header,
  body.tablet-app-mode .client-card .client-card-header,
  html.tablet-app-mode .client-card .client-card-header,
  .client-card .client-card-header {
    margin-bottom: 10px !important;
  }

  .tablet-app-mode .client-card .search-info-grid--client,
  body.tablet-app-mode .client-card .search-info-grid--client,
  html.tablet-app-mode .client-card .search-info-grid--client,
  .client-card .search-info-grid--client {
    margin-top: 8px !important;
    gap: 12px !important;
    align-content: start !important;
  }

  /* Evitar que la card Cliente empuje su contenido hacia abajo */
  .tablet-app-mode .client-card,
  body.tablet-app-mode .client-card,
  html.tablet-app-mode .client-card,
  .client-card {
    align-content: start !important;
  }

  /* Lealtad como fila: titulo izquierda, pill derecha */
  .tablet-app-mode .client-card .search-info-grid--client .info-item:last-child,
  body.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child,
  html.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child,
  .client-card .search-info-grid--client .info-item:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
  }

  .tablet-app-mode .client-card .search-info-grid--client .info-item:last-child > span:first-child,
  body.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child > span:first-child,
  html.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child > span:first-child,
  .client-card .search-info-grid--client .info-item:last-child > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
  }

  .tablet-app-mode .client-card .search-info-grid--client .info-item:last-child > strong,
  body.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child > strong,
  html.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child > strong,
  .client-card .search-info-grid--client .info-item:last-child > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .tablet-app-mode .client-card .search-info-grid--client .info-item:last-child .loyalty-chip,
  body.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child .loyalty-chip,
  html.tablet-app-mode .client-card .search-info-grid--client .info-item:last-child .loyalty-chip,
  .client-card .search-info-grid--client .info-item:last-child .loyalty-chip {
    margin: 0 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /search/result iPad horizontal - compactar header de Cliente */
  .tablet-app-mode .client-card,
  body.tablet-app-mode .client-card,
  html.tablet-app-mode .client-card,
  .client-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
  }

  .tablet-app-mode .client-card .client-card-header,
  body.tablet-app-mode .client-card .client-card-header,
  html.tablet-app-mode .client-card .client-card-header,
  .client-card .client-card-header {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
    align-items: flex-start !important;
  }

  .tablet-app-mode .client-card .client-card-header .section-title,
  body.tablet-app-mode .client-card .client-card-header .section-title,
  html.tablet-app-mode .client-card .client-card-header .section-title,
  .client-card .client-card-header .section-title {
    margin-bottom: 2px !important;
  }

  .tablet-app-mode .client-card .client-card-header .section-subtitle,
  body.tablet-app-mode .client-card .client-card-header .section-subtitle,
  html.tablet-app-mode .client-card .client-card-header .section-subtitle,
  .client-card .client-card-header .section-subtitle {
    margin-bottom: 0 !important;
  }

  .tablet-app-mode .client-card .search-info-grid--client,
  body.tablet-app-mode .client-card .search-info-grid--client,
  html.tablet-app-mode .client-card .search-info-grid--client,
  .client-card .search-info-grid--client {
    margin-top: 2px !important;
    padding-top: 0 !important;
    align-content: start !important;
    gap: 10px !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /search/result iPad horizontal - acciones admin ordenadas */
  .tablet-app-mode [data-search-order-card] .order-admin-tools,
  body.tablet-app-mode [data-search-order-card] .order-admin-tools,
  html.tablet-app-mode [data-search-order-card] .order-admin-tools,
  [data-search-order-card] .order-admin-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100% !important;
    margin: 10px 0 12px !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .tablet-app-mode [data-search-order-card] .order-admin-tools > *,
  body.tablet-app-mode [data-search-order-card] .order-admin-tools > *,
  html.tablet-app-mode [data-search-order-card] .order-admin-tools > *,
  [data-search-order-card] .order-admin-tools > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .tablet-app-mode [data-search-order-card] .order-admin-tools .btn,
  body.tablet-app-mode [data-search-order-card] .order-admin-tools .btn,
  html.tablet-app-mode [data-search-order-card] .order-admin-tools .btn,
  [data-search-order-card] .order-admin-tools .btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    border-radius: 13px !important;
  }

  .tablet-app-mode [data-search-order-card] .order-admin-tools form,
  body.tablet-app-mode [data-search-order-card] .order-admin-tools form,
  html.tablet-app-mode [data-search-order-card] .order-admin-tools form,
  [data-search-order-card] .order-admin-tools form {
    display: flex !important;
    width: 100% !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /search/result iPad horizontal - cards de saldo y estados alineadas */
  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert,
  [data-search-order-card] .search-info-grid--order .info-item.payment-alert {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child,
  [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong,
  [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip,
  [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    text-align: left !important;
    justify-items: stretch !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    width: auto !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong,
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > strong,
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
  .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
  body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
  html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
  [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip {
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions],
  body.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions],
  html.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions],
  [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] > *,
  body.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] > *,
  html.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] > *,
  [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn,
  body.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn,
  html.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn,
  [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /search/result iPad horizontal - bloque final de Orden principal */
  .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order,
  body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order,
  html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order,
  [data-search-order-card] .search-info-grid.search-info-grid--order {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order > *,
  body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order > *,
  html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order > *,
  [data-search-order-card] .search-info-grid.search-info-grid--order > * {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert,
  body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert,
  html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert,
  [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert {
    grid-column: 1 / -1 !important;
  }

  .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(2),
  .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(1),
  body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(2),
  body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(1),
  html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(2),
  html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(1),
  [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(2),
  [data-search-order-card] .search-info-grid.search-info-grid--order .info-item:nth-last-child(1) {
    grid-column: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /search/result iPad vertical - labels de estado alineados a la izquierda */
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
        justify-self: start !important;
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: auto !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) {
        justify-items: stretch !important;
        text-align: left !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /search/result iPad vertical - Resta por pagar equilibrada */
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert,
    [data-search-order-card] .search-info-grid--order .info-item.payment-alert {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item.payment-alert > span:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong,
    [data-search-order-card] .search-info-grid--order .info-item.payment-alert > strong {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip,
    [data-search-order-card] .search-info-grid--order .info-item.payment-alert .payment-summary-chip {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    /* Solo las cards Estado de la orden y Estado de pago: centrar pills */
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2),
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) {
        justify-items: center !important;
        text-align: center !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
        width: 100% !important;
        text-align: left !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    .tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    body.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    html.tablet-app-mode [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-self: center !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode [data-search-order-card] .payment-alert,
    body.tablet-app-mode [data-search-order-card] .payment-alert,
    html.tablet-app-mode [data-search-order-card] .payment-alert,
    [data-search-order-card] .payment-alert {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .tablet-app-mode [data-search-order-card] .payment-alert .payment-summary-chip,
    .tablet-app-mode [data-search-order-card] .payment-alert .pill-chip,
    body.tablet-app-mode [data-search-order-card] .payment-alert .payment-summary-chip,
    body.tablet-app-mode [data-search-order-card] .payment-alert .pill-chip,
    html.tablet-app-mode [data-search-order-card] .payment-alert .payment-summary-chip,
    html.tablet-app-mode [data-search-order-card] .payment-alert .pill-chip,
    [data-search-order-card] .payment-alert .payment-summary-chip,
    [data-search-order-card] .payment-alert .pill-chip {
        align-self: flex-end !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions],
    body.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions],
    html.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions],
    [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn-mark-ready-soft,
    body.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn-mark-ready-soft,
    html.tablet-app-mode [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn-mark-ready-soft,
    [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] .btn-mark-ready-soft {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order,
    body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order,
    html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order,
    [data-search-order-card] .search-info-grid.search-info-grid--order {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order > *,
    body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order > *,
    html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order > *,
    [data-search-order-card] .search-info-grid.search-info-grid--order > * {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert,
    body.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert,
    html.tablet-app-mode [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert,
    [data-search-order-card] .search-info-grid.search-info-grid--order .payment-alert {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /search/result - Orden principal - acciones admin en iPad vertical */
    .tablet-app-mode [data-search-order-card] .order-admin-tools,
    body.tablet-app-mode [data-search-order-card] .order-admin-tools,
    html.tablet-app-mode [data-search-order-card] .order-admin-tools,
    [data-search-order-card] .order-admin-tools {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 14px 0 16px !important;
        align-items: stretch !important;
    }

    .tablet-app-mode [data-search-order-card] .order-admin-tools > *,
    body.tablet-app-mode [data-search-order-card] .order-admin-tools > *,
    html.tablet-app-mode [data-search-order-card] .order-admin-tools > *,
    [data-search-order-card] .order-admin-tools > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .tablet-app-mode [data-search-order-card] .order-admin-tools .btn,
    body.tablet-app-mode [data-search-order-card] .order-admin-tools .btn,
    html.tablet-app-mode [data-search-order-card] .order-admin-tools .btn,
    [data-search-order-card] .order-admin-tools .btn {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        border-radius: 14px !important;
    }

    .tablet-app-mode [data-search-order-card] .order-admin-tools form,
    body.tablet-app-mode [data-search-order-card] .order-admin-tools form,
    html.tablet-app-mode [data-search-order-card] .order-admin-tools form,
    [data-search-order-card] .order-admin-tools form {
        display: flex !important;
        width: 100% !important;
    }
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #order-services-detail-modal-search .order-services-detail-mobile-subtotal {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-subtotal-label {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
        color: #7B7188 !important;
        font-size: 0.73rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-subtotal-value {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        text-align: right !important;
        color: #1f7a45 !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 1199px) {
    #order-services-detail-modal-search .order-services-detail-mobile-item--subtotal {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item--subtotal .detail-label {
        margin: 0 !important;
        text-align: left !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--color-text-secondary, #7B7188) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item--subtotal .detail-value {
        margin: 0 !important;
        text-align: right !important;
        font-size: 28px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        color: #1f7a4d !important;
        white-space: nowrap !important;
    }
}

/* === FIX CANONICO: Detalle de servicios mobile + iPad vertical === */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #order-services-detail-modal-search {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
        z-index: 1350 !important;
    }

    #order-services-detail-modal-search.is-open {
        display: flex !important;
    }

    #order-services-detail-modal-search .modal-dialog.modal-content,
    #order-services-detail-modal-search .modal-dialog.modal-content.history-modal.large-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--panel-surface) !important;
    }

    #order-services-detail-modal-search .modal-header {
        flex: 0 0 auto !important;
        min-height: 60px !important;
        padding: 14px 62px 12px 18px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
        background: var(--panel-surface) !important;
        z-index: 2 !important;
    }

    #order-services-detail-modal-search .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #order-services-detail-modal-search .modal-close-btn {
        top: 10px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    #order-services-detail-modal-search .modal-body,
    #order-services-detail-modal-search .modal-scroll-area,
    #order-services-detail-modal-search .order-services-detail-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        background: transparent !important;
    }

    #order-services-detail-modal-search .order-services-detail-meta {
        flex: 0 0 auto !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    #order-services-detail-modal-search .order-services-detail-table-wrapper,
    #order-services-detail-modal-search .table-wrapper.table-scroll-area {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list[hidden] {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(244, 240, 248, 0.95) !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy span,
    #order-services-detail-modal-search .order-services-detail-mobile-item span {
        display: block !important;
        color: #7B7188 !important;
        font-size: 0.73rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy strong {
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.78) !important;
        border: 1px solid rgba(190, 220, 230, 0.45) !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-full {
        grid-column: 1 / -1 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item strong {
        color: var(--color-text, #2f2440) !important;
        font-size: 0.95rem !important;
        line-height: 1.28 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-highlight {
        grid-column: 1 / -1 !important;
        background: rgba(237, 248, 240, 0.96) !important;
        border-color: rgba(145, 198, 160, 0.55) !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-highlight strong {
        color: #1f6b46 !important;
    }
}

@media (max-width: 767px) {
    .page-section > .responsive-grid.two-cols:has(.register-order-card) {
        padding-bottom: 0 !important;
        margin-bottom: 14px !important;
        gap: 14px !important;
        row-gap: 14px !important;
        align-items: start !important;
    }

    .page-section > .responsive-grid.two-cols:has(.register-order-card) > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .page-section > .responsive-grid.two-cols:has(.register-order-card) > .content-card.stretch {
        min-height: auto !important;
        height: auto !important;
    }

    .page-section > .responsive-grid.two-cols:has(.register-order-card) + .content-card.full-width.order-entry-card,
    .page-section > .responsive-grid.two-cols:has(.register-order-card) + .content-card.full-width {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    body .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid,
    body .content-area .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid,
    body .dashboard-main-content .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        row-gap: 12px !important;
        align-items: start !important;
    }

    body .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid > section,
    body .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid > .card,
    body .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid > .content-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: initial;
        min-height: auto !important;
    }
}

@media (max-width: 767px) {
    body:has(.register-order-card) .page-section {
        row-gap: 10px !important;
        gap: 10px !important;
    }

    body:has(.register-order-card) .page-section > .responsive-grid.two-cols:has(.register-order-card) {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        row-gap: 10px !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body:has(.register-order-card) .page-section > .responsive-grid.two-cols:has(.register-order-card) + .content-card.full-width,
    body:has(.register-order-card) .page-section > .responsive-grid.two-cols:has(.register-order-card) + .order-entry-card {
        margin-top: 0 !important;
    }

    body:has(.register-order-card) .order-services-card {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }

    body:has(.register-order-card) .order-services-card + .order-form-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body:has(.register-order-card) .order-form-grid {
        row-gap: 14px !important;
        gap: 14px !important;
    }
}

@media (max-width: 767px) {
    body:has(.client-search-card) .dashboard-main,
    body:has(.client-search-card) .main-content {
        min-height: 100dvh !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(248, 239, 246, 0.66) 100%) !important;
    }

    body:has(.client-search-card) .content-area,
    body:has(.client-search-card) .page-content {
        min-height: calc(100dvh - var(--mobile-nav-height, 88px) - var(--mobile-header-height, 0px)) !important;
        background: transparent !important;
        align-content: start !important;
        padding-bottom: calc(var(--mobile-nav-height, 88px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.client-search-card) .page-section {
        min-height: auto !important;
        align-content: start !important;
    }
}

@media (max-width: 767px) {
    .client-card .search-info-grid--client .info-item .loyalty-chip,
    .client-card .search-info-grid--client .info-item .pill-chip.loyalty-chip {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-self: start !important;
        align-self: start !important;
    }

    .client-card .search-info-grid--client .info-item strong:has(.loyalty-chip) {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 767px) {
    .page-section > .responsive-grid.two-cols.search-result-order-payment-grid,
    .responsive-grid.two-cols.search-result-order-payment-grid,
    .search-result-order-payment-grid {
        padding-bottom: 0 !important;
        margin-bottom: 16px !important;
        gap: 16px !important;
        row-gap: 16px !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .search-result-order-payment-grid > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .search-result-order-payment-grid > section,
    .search-result-order-payment-grid > .card,
    .search-result-order-payment-grid > .content-card,
    .search-result-order-payment-grid > .section-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .search-result-order-payment-grid > section + section,
    .search-result-order-payment-grid > .card + .card,
    .search-result-order-payment-grid > .content-card + .content-card {
        margin-top: 0 !important;
    }
}

/* Tooltip codigo esperado - Registrar orden anulada */
#cancelled-order-modal .expected-order-code-trigger,
#register-cancelled-order-modal .expected-order-code-trigger,
.cancelled-order-modal .expected-order-code-trigger,
.register-cancelled-order-modal .expected-order-code-trigger {
    position: relative !important;
    z-index: 20 !important;
}

#cancelled-order-modal .expected-order-code-trigger::after,
#register-cancelled-order-modal .expected-order-code-trigger::after,
.cancelled-order-modal .expected-order-code-trigger::after,
.register-cancelled-order-modal .expected-order-code-trigger::after {
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: min(280px, calc(100vw - 48px)) !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
    z-index: 9999 !important;
}

#cancelled-order-modal .expected-order-code-trigger::before,
#register-cancelled-order-modal .expected-order-code-trigger::before,
.cancelled-order-modal .expected-order-code-trigger::before,
.register-cancelled-order-modal .expected-order-code-trigger::before {
    content: "" !important;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) rotate(45deg) !important;
    z-index: 9998 !important;
}

@media (max-width: 767px) {
    #cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::before,
    #cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::after,
    #register-cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::before,
    #register-cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::after,
    .cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::before,
    .cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::after,
    .register-cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::before,
    .register-cancelled-order-modal .expected-order-code-trigger.is-tooltip-visible::after {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
}

@media (max-width: 767px) {
    #cancelled-order-modal [data-expected-order-code-tooltip]::before,
    #register-cancelled-order-modal [data-expected-order-code-tooltip]::before,
    .cancelled-order-modal [data-expected-order-code-tooltip]::before,
    .register-cancelled-order-modal [data-expected-order-code-tooltip]::before,
    #cancelled-order-modal .field-help-tooltip::before,
    #register-cancelled-order-modal .field-help-tooltip::before,
    .cancelled-order-modal .field-help-tooltip::before,
    .register-cancelled-order-modal .field-help-tooltip::before,
    #cancelled-order-modal .expected-order-code-trigger::before,
    #register-cancelled-order-modal .expected-order-code-trigger::before,
    .cancelled-order-modal .expected-order-code-trigger::before,
    .register-cancelled-order-modal .expected-order-code-trigger::before {
        content: "" !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

@media (min-width: 1200px) {
    #cancelled-order-modal .form-grid,
    #register-cancelled-order-modal .form-grid,
    .cancelled-order-modal .form-grid,
    .register-cancelled-order-modal .form-grid {
        align-items: start !important;
    }

    #cancelled-order-modal .form-group,
    #register-cancelled-order-modal .form-group,
    .cancelled-order-modal .form-group,
    .register-cancelled-order-modal .form-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    #cancelled-order-modal .receipt-code-label-row,
    #register-cancelled-order-modal .receipt-code-label-row,
    .cancelled-order-modal .receipt-code-label-row,
    .register-cancelled-order-modal .receipt-code-label-row {
        min-height: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    #cancelled-order-modal .receipt-code-label-row .field-label-inline,
    #register-cancelled-order-modal .receipt-code-label-row .field-label-inline,
    .cancelled-order-modal .receipt-code-label-row .field-label-inline,
    .register-cancelled-order-modal .receipt-code-label-row .field-label-inline {
        min-height: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    #cancelled-order-modal .form-group > label,
    #register-cancelled-order-modal .form-group > label,
    .cancelled-order-modal .form-group > label,
    .register-cancelled-order-modal .form-group > label {
        min-height: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    #cancelled-order-modal .form-group > input,
    #cancelled-order-modal .form-group > select,
    #register-cancelled-order-modal .form-group > input,
    #register-cancelled-order-modal .form-group > select,
    .cancelled-order-modal .form-group > input,
    .cancelled-order-modal .form-group > select,
    .register-cancelled-order-modal .form-group > input,
    .register-cancelled-order-modal .form-group > select {
        margin-top: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode #cancelled-order-modal .form-grid,
    .tablet-app-mode #register-cancelled-order-modal .form-grid,
    .tablet-app-mode .cancelled-order-modal .form-grid,
    .tablet-app-mode .register-cancelled-order-modal .form-grid,
    html.tablet-app-mode #cancelled-order-modal .form-grid,
    html.tablet-app-mode #register-cancelled-order-modal .form-grid,
    html.tablet-app-mode .cancelled-order-modal .form-grid,
    html.tablet-app-mode .register-cancelled-order-modal .form-grid,
    body.tablet-app-mode #cancelled-order-modal .form-grid,
    body.tablet-app-mode #register-cancelled-order-modal .form-grid,
    body.tablet-app-mode .cancelled-order-modal .form-grid,
    body.tablet-app-mode .register-cancelled-order-modal .form-grid {
        align-items: start !important;
    }

    .tablet-app-mode #cancelled-order-modal .form-group,
    .tablet-app-mode #register-cancelled-order-modal .form-group,
    .tablet-app-mode .cancelled-order-modal .form-group,
    .tablet-app-mode .register-cancelled-order-modal .form-group,
    html.tablet-app-mode #cancelled-order-modal .form-group,
    html.tablet-app-mode #register-cancelled-order-modal .form-group,
    html.tablet-app-mode .cancelled-order-modal .form-group,
    html.tablet-app-mode .register-cancelled-order-modal .form-group,
    body.tablet-app-mode #cancelled-order-modal .form-group,
    body.tablet-app-mode #register-cancelled-order-modal .form-group,
    body.tablet-app-mode .cancelled-order-modal .form-group,
    body.tablet-app-mode .register-cancelled-order-modal .form-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .tablet-app-mode #cancelled-order-modal .receipt-code-label-row,
    .tablet-app-mode #register-cancelled-order-modal .receipt-code-label-row,
    .tablet-app-mode .cancelled-order-modal .receipt-code-label-row,
    .tablet-app-mode .register-cancelled-order-modal .receipt-code-label-row,
    html.tablet-app-mode #cancelled-order-modal .receipt-code-label-row,
    html.tablet-app-mode #register-cancelled-order-modal .receipt-code-label-row,
    html.tablet-app-mode .cancelled-order-modal .receipt-code-label-row,
    html.tablet-app-mode .register-cancelled-order-modal .receipt-code-label-row,
    body.tablet-app-mode #cancelled-order-modal .receipt-code-label-row,
    body.tablet-app-mode #register-cancelled-order-modal .receipt-code-label-row,
    body.tablet-app-mode .cancelled-order-modal .receipt-code-label-row,
    body.tablet-app-mode .register-cancelled-order-modal .receipt-code-label-row {
        min-height: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .tablet-app-mode #cancelled-order-modal .receipt-code-label-row .field-label-inline,
    .tablet-app-mode #register-cancelled-order-modal .receipt-code-label-row .field-label-inline,
    .tablet-app-mode .cancelled-order-modal .receipt-code-label-row .field-label-inline,
    .tablet-app-mode .register-cancelled-order-modal .receipt-code-label-row .field-label-inline,
    html.tablet-app-mode #cancelled-order-modal .receipt-code-label-row .field-label-inline,
    html.tablet-app-mode #register-cancelled-order-modal .receipt-code-label-row .field-label-inline,
    html.tablet-app-mode .cancelled-order-modal .receipt-code-label-row .field-label-inline,
    html.tablet-app-mode .register-cancelled-order-modal .receipt-code-label-row .field-label-inline,
    body.tablet-app-mode #cancelled-order-modal .receipt-code-label-row .field-label-inline,
    body.tablet-app-mode #register-cancelled-order-modal .receipt-code-label-row .field-label-inline,
    body.tablet-app-mode .cancelled-order-modal .receipt-code-label-row .field-label-inline,
    body.tablet-app-mode .register-cancelled-order-modal .receipt-code-label-row .field-label-inline {
        min-height: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .tablet-app-mode #cancelled-order-modal .form-group > label,
    .tablet-app-mode #register-cancelled-order-modal .form-group > label,
    .tablet-app-mode .cancelled-order-modal .form-group > label,
    .tablet-app-mode .register-cancelled-order-modal .form-group > label,
    html.tablet-app-mode #cancelled-order-modal .form-group > label,
    html.tablet-app-mode #register-cancelled-order-modal .form-group > label,
    html.tablet-app-mode .cancelled-order-modal .form-group > label,
    html.tablet-app-mode .register-cancelled-order-modal .form-group > label,
    body.tablet-app-mode #cancelled-order-modal .form-group > label,
    body.tablet-app-mode #register-cancelled-order-modal .form-group > label,
    body.tablet-app-mode .cancelled-order-modal .form-group > label,
    body.tablet-app-mode .register-cancelled-order-modal .form-group > label {
        min-height: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .tablet-app-mode #cancelled-order-modal .form-group > input,
    .tablet-app-mode #cancelled-order-modal .form-group > select,
    .tablet-app-mode #register-cancelled-order-modal .form-group > input,
    .tablet-app-mode #register-cancelled-order-modal .form-group > select,
    .tablet-app-mode .cancelled-order-modal .form-group > input,
    .tablet-app-mode .cancelled-order-modal .form-group > select,
    .tablet-app-mode .register-cancelled-order-modal .form-group > input,
    .tablet-app-mode .register-cancelled-order-modal .form-group > select,
    html.tablet-app-mode #cancelled-order-modal .form-group > input,
    html.tablet-app-mode #cancelled-order-modal .form-group > select,
    html.tablet-app-mode #register-cancelled-order-modal .form-group > input,
    html.tablet-app-mode #register-cancelled-order-modal .form-group > select,
    html.tablet-app-mode .cancelled-order-modal .form-group > input,
    html.tablet-app-mode .cancelled-order-modal .form-group > select,
    html.tablet-app-mode .register-cancelled-order-modal .form-group > input,
    html.tablet-app-mode .register-cancelled-order-modal .form-group > select,
    body.tablet-app-mode #cancelled-order-modal .form-group > input,
    body.tablet-app-mode #cancelled-order-modal .form-group > select,
    body.tablet-app-mode #register-cancelled-order-modal .form-group > input,
    body.tablet-app-mode #register-cancelled-order-modal .form-group > select,
    body.tablet-app-mode .cancelled-order-modal .form-group > input,
    body.tablet-app-mode .cancelled-order-modal .form-group > select,
    body.tablet-app-mode .register-cancelled-order-modal .form-group > input,
    body.tablet-app-mode .register-cancelled-order-modal .form-group > select {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    .page-section > .responsive-grid.two-cols:not(.search-result-order-payment-grid):not(:has(.register-order-card)) {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .search-result-order-payment-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        row-gap: 14px !important;
        align-items: start !important;
        margin-bottom: 14px !important;
    }

    .search-result-order-payment-grid > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .search-result-order-payment-grid > .card,
    .search-result-order-payment-grid > .content-card {
        min-height: auto !important;
    }

    .search-result-order-payment-grid + .content-card.full-width {
        margin-top: 0 !important;
    }

    .page-section .client-card,
    .page-section [data-search-order-card] {
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }

    .page-section [data-search-order-card].stretch,
    .page-section .client-card.stretch {
        min-height: auto !important;
        height: auto !important;
    }

    .page-section .client-card .client-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px 12px !important;
        margin-bottom: 10px !important;
    }

    .page-section .client-card .client-card-header .section-title,
    .page-section [data-search-order-card] .section-header .section-title {
        margin: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.22 !important;
        font-weight: 700 !important;
    }

    .page-section .client-card .client-card-header .section-subtitle,
    .page-section [data-search-order-card] .section-header .section-subtitle {
        margin: 4px 0 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
    }

    .page-section .client-card .client-edit-btn {
        min-height: 38px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        font-size: 0.89rem !important;
        white-space: nowrap !important;
    }

    .page-section .search-info-grid.search-info-grid--client,
    .page-section .search-info-grid.search-info-grid--order {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .page-section .search-info-grid.search-info-grid--client {
        margin-top: 0 !important;
    }

    .page-section .search-info-grid .info-item {
        min-height: auto !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .page-section .client-card-actions {
        margin-top: 14px !important;
        margin-bottom: 18px !important;
        padding-top: 0 !important;
    }

    .page-section .client-card-actions .btn {
        min-height: 42px !important;
        border-radius: 14px !important;
        width: 100% !important;
    }

    .page-section [data-search-order-card] .section-header {
        margin-bottom: 14px !important;
    }

    .page-section .order-admin-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 14px 0 16px !important;
    }

    .page-section .order-admin-tools .btn,
    .page-section .order-admin-tools form,
    .page-section .order-admin-tools form .btn {
        width: 100% !important;
    }

    .page-section .order-admin-tools .btn,
    .page-section .order-admin-tools form .btn {
        min-height: 40px !important;
        justify-content: center !important;
        border-radius: 13px !important;
        font-size: 0.88rem !important;
    }

    .page-section > section.card.content-card.full-width > .section-header + .responsive-grid.three-cols {
        margin-top: 10px !important;
    }

    .page-section [data-search-order-card] .order-detail-actions {
        display: grid !important;
        gap: 4px !important;
        row-gap: 4px !important;
    }

    .page-section [data-search-order-card] .order-detail-actions .btn + .btn {
        margin-top: 4px !important;
    }

    .page-section [data-search-order-card] {
        margin-bottom: 14px !important;
    }

    .page-section [data-search-order-card] + .content-card.full-width {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    #cancelled-order-modal .modal-content {
        overflow: hidden !important;
        border-radius: 22px !important;
        border: 1px solid rgba(190, 219, 231, 0.9) !important;
        background: #fff !important;
        box-shadow: 0 18px 44px rgba(40, 38, 65, 0.22) !important;
    }

    #cancelled-order-modal .modal-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #cancelled-order-modal .modal-header {
        border-radius: 22px 22px 0 0 !important;
        background: #fff !important;
    }
}

/* Order create tablet landscape overpay alert UI alignment */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode .order-amounts-row .order-overpay-alert,
    html.tablet-app-mode .order-amounts-row .order-overpay-alert,
    body.tablet-app-mode .order-amounts-row .order-overpay-alert,
    .tablet-app-mode #order-overpay-alert,
    html.tablet-app-mode #order-overpay-alert,
    body.tablet-app-mode #order-overpay-alert {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 2px 0 0 !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: #fef2f2 !important;
        border: 1px solid #fbcaca !important;
        color: #991b1b !important;
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
    }

    .tablet-app-mode .order-amounts-row .order-overpay-alert[hidden],
    html.tablet-app-mode .order-amounts-row .order-overpay-alert[hidden],
    body.tablet-app-mode .order-amounts-row .order-overpay-alert[hidden],
    .tablet-app-mode #order-overpay-alert[hidden],
    html.tablet-app-mode #order-overpay-alert[hidden],
    body.tablet-app-mode #order-overpay-alert[hidden] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #cancelled-order-modal .modal-content {
        overflow: hidden !important;
        border-radius: 22px !important;
        border: 1px solid rgba(190, 219, 231, 0.9) !important;
        background: #fff !important;
        box-shadow: 0 18px 44px rgba(40, 38, 65, 0.22) !important;
    }

    #cancelled-order-modal .modal-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #cancelled-order-modal .receipt-code-label-row {
        position: relative !important;
        overflow: visible !important;
        z-index: 20 !important;
    }

    #cancelled-order-modal .expected-order-code-trigger {
        position: relative !important;
        z-index: 30 !important;
    }

    #cancelled-order-modal .expected-order-code-trigger::after {
        display: block !important;
        top: calc(100% + 10px) !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-width: 0 !important;
        width: max-content !important;
        max-width: min(250px, calc(100vw - 72px)) !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.25 !important;
        z-index: 80 !important;
        pointer-events: none !important;
    }

    #cancelled-order-modal .expected-order-code-trigger::before {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        top: calc(100% + 4px) !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        width: 10px !important;
        height: 10px !important;
        background: rgba(47, 36, 64, 0.60) !important;
        transform: translateX(-50%) rotate(45deg) !important;
        z-index: 79 !important;
        pointer-events: none !important;
    }

    #cancelled-order-modal .expected-order-code-trigger:hover::after,
    #cancelled-order-modal .expected-order-code-trigger:focus-visible::after {
        transform: translateX(-50%) !important;
    }
}

@media (min-width: 1200px) {
    #rectification-services-modal label {
        padding-top: 0 !important;
    }

    #rectification-services-modal .rectification-service-option-card {
        min-height: 72px !important;
        padding: 16px 18px !important;
        display: flex !important;
        align-items: center !important;
    }

    #rectification-services-modal .rectification-service-option-head {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    #rectification-services-modal .rectification-service-option-icon {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #rectification-services-modal .rectification-service-option-copy {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
        margin: 0 !important;
    }

    #rectification-services-modal .rectification-service-option-copy strong {
        margin: 0 !important;
        line-height: 1.18 !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }

    #rectification-services-modal .rectification-service-option-copy small {
        margin: 0 !important;
        line-height: 1.24 !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
    }

    .rectification-form-grid {
        align-items: start !important;
    }

    .rectification-form-grid > .form-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .rectification-form-grid .receipt-code-label-row {
        min-height: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    .rectification-form-grid .receipt-code-label-row .field-label-inline {
        min-height: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .rectification-form-grid .receipt-code-label-row .field-help-tooltip {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    .rectification-form-grid > .form-group > label {
        min-height: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .rectification-form-grid > .form-group > input,
    .rectification-form-grid > .form-group > select,
    .rectification-form-grid > .form-group > textarea {
        margin-top: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode .rectification-form-grid,
    html.tablet-app-mode .rectification-form-grid,
    body.tablet-app-mode .rectification-form-grid {
        align-items: start !important;
    }

    .tablet-app-mode .rectification-form-grid > .form-group,
    html.tablet-app-mode .rectification-form-grid > .form-group,
    body.tablet-app-mode .rectification-form-grid > .form-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .tablet-app-mode .rectification-form-grid .receipt-code-label-row,
    html.tablet-app-mode .rectification-form-grid .receipt-code-label-row,
    body.tablet-app-mode .rectification-form-grid .receipt-code-label-row {
        min-height: 24px !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    .tablet-app-mode .rectification-form-grid .receipt-code-label-row .field-label-inline,
    html.tablet-app-mode .rectification-form-grid .receipt-code-label-row .field-label-inline,
    body.tablet-app-mode .rectification-form-grid .receipt-code-label-row .field-label-inline {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        min-height: 24px !important;
    }

    .tablet-app-mode .rectification-form-grid > .form-group > label,
    html.tablet-app-mode .rectification-form-grid > .form-group > label,
    body.tablet-app-mode .rectification-form-grid > .form-group > label {
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    .tablet-app-mode .rectification-form-grid > .form-group > input,
    .tablet-app-mode .rectification-form-grid > .form-group > select,
    .tablet-app-mode .rectification-form-grid > .form-group > .input-with-icon,
    .tablet-app-mode .rectification-form-grid > .form-group > .date-input-shell,
    html.tablet-app-mode .rectification-form-grid > .form-group > input,
    html.tablet-app-mode .rectification-form-grid > .form-group > select,
    html.tablet-app-mode .rectification-form-grid > .form-group > .input-with-icon,
    html.tablet-app-mode .rectification-form-grid > .form-group > .date-input-shell,
    body.tablet-app-mode .rectification-form-grid > .form-group > input,
    body.tablet-app-mode .rectification-form-grid > .form-group > select,
    body.tablet-app-mode .rectification-form-grid > .form-group > .input-with-icon,
    body.tablet-app-mode .rectification-form-grid > .form-group > .date-input-shell {
        margin-top: 0 !important;
    }
}

/* Rectification tablet portrait client details grid alignment */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .rectification-page-card .rectification-client-grid,
    html.tablet-app-mode .rectification-page-card .rectification-client-grid,
    body.tablet-app-mode .rectification-page-card .rectification-client-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
        align-items: start !important;
    }

    .tablet-app-mode .rectification-page-card .rectification-client-grid > *,
    html.tablet-app-mode .rectification-page-card .rectification-client-grid > *,
    body.tablet-app-mode .rectification-page-card .rectification-client-grid > * {
        min-width: 0 !important;
        width: 100% !important;
    }

    .tablet-app-mode .rectification-page-card .rectification-client-grid label,
    html.tablet-app-mode .rectification-page-card .rectification-client-grid label,
    body.tablet-app-mode .rectification-page-card .rectification-client-grid label {
        min-height: 1.35em !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        white-space: normal !important;
    }

    .tablet-app-mode .rectification-page-card .rectification-client-grid input,
    html.tablet-app-mode .rectification-page-card .rectification-client-grid input,
    body.tablet-app-mode .rectification-page-card .rectification-client-grid input,
    .tablet-app-mode .rectification-page-card .rectification-preview-box,
    html.tablet-app-mode .rectification-page-card .rectification-preview-box,
    body.tablet-app-mode .rectification-page-card .rectification-preview-box {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Order create tablet portrait selected services override */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .responsive-grid.two-cols,
    .tablet-app-mode .register-order-card,
    .tablet-app-mode .client-search-card,
    .tablet-app-mode .register-order-card .form,
    .tablet-app-mode .register-order-card .form-grid,
    .tablet-app-mode .register-order-card .client-search-group,
    .tablet-app-mode .register-order-card .client-search-shell {
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card {
        position: relative !important;
        z-index: 20 !important;
    }

    .tablet-app-mode .register-order-card .section-head.section-head-align-start {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px 16px !important;
    }

    .tablet-app-mode .register-order-card .section-head.section-head-align-start .section-header {
        min-width: 0 !important;
        margin: 0 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown {
        justify-self: end !important;
        align-self: start !important;
        margin: 0 !important;
        z-index: 1500 !important;
        position: relative !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown-toggle {
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown-menu {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(280px, calc(100vw - 64px)) !important;
        min-width: 240px !important;
        transform: none !important;
        z-index: 1650 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown.is-open {
        margin-bottom: 152px !important;
    }

    .tablet-app-mode .register-order-card .client-search-group {
        position: relative !important;
        z-index: 1600 !important;
    }

    .tablet-app-mode .register-order-card .client-search-results {
        top: calc(100% + 8px) !important;
        z-index: 1700 !important;
        max-height: min(42vh, 360px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 18px 36px rgba(55, 48, 90, 0.16) !important;
    }

    .tablet-app-mode .order-services-card .table-scroll-area,
    .tablet-app-mode .order-services-card .order-services-table,
    .tablet-app-mode .order-services-card .services-table,
    .tablet-app-mode .order-services-card .services-added-table {
        display: none !important;
    }

    .tablet-app-mode .order-services-card .mobile-services-list,
    .tablet-app-mode .order-services-card .mobile-services-list[hidden] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .tablet-app-mode .order-services-card .mobile-empty-services {
        padding: 18px !important;
        border-radius: 18px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card {
        padding: 14px !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 22px rgba(38, 55, 90, 0.08) !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-top {
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        flex: 0 0 32px !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-name,
    .tablet-app-mode .order-services-card .mobile-service-card-top strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-subtotal,
    .tablet-app-mode .order-services-card .mobile-service-card-top span {
        max-width: 88px !important;
        font-size: 15px !important;
        text-align: right !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-detail {
        margin-bottom: 8px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-meta span {
        max-width: 100% !important;
        padding: 5px 8px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-actions .btn,
    .tablet-app-mode .order-services-card .mobile-service-card-actions button,
    .tablet-app-mode .order-services-card .mobile-service-card-actions a {
        min-height: 38px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    .tablet-app-mode .order-payment-method-group {
        grid-column: 1 / -1 !important;
    }

    .tablet-app-mode .order-payment-inline-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .tablet-app-mode .order-payment-inline-controls > select {
        min-width: 0 !important;
    }

    .tablet-app-mode .order-payment-rounding-row {
        width: auto !important;
        min-height: 52px !important;
        margin-top: 0 !important;
        justify-content: flex-end !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode .order-payment-rounding-row .payment-rounding-toggle {
        min-height: 52px !important;
        padding: 0 2px !important;
    }
}

/* Order create tablet portrait real selected service card and actions menu fix */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .register-order-card,
    html.tablet-app-mode .register-order-card,
    body.tablet-app-mode .register-order-card {
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card .section-head,
    html.tablet-app-mode .register-order-card .section-head,
    body.tablet-app-mode .register-order-card .section-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 16px !important;
        position: relative !important;
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown,
    html.tablet-app-mode .register-order-card .actions-dropdown,
    body.tablet-app-mode .register-order-card .actions-dropdown {
        position: relative !important;
        justify-self: end !important;
        align-self: start !important;
        z-index: 80 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown-menu,
    html.tablet-app-mode .register-order-card .actions-dropdown-menu,
    body.tablet-app-mode .register-order-card .actions-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: min(280px, calc(100vw - 64px)) !important;
        max-width: calc(100vw - 64px) !important;
        z-index: 120 !important;
    }

    .tablet-app-mode .order-services-card .mobile-services-list,
    html.tablet-app-mode .order-services-card .mobile-services-list,
    body.tablet-app-mode .order-services-card .mobile-services-list {
        display: grid !important;
        gap: 14px !important;
        padding: 0 !important;
        margin-top: 16px !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card,
    html.tablet-app-mode .order-services-card .mobile-service-card,
    body.tablet-app-mode .order-services-card .mobile-service-card {
        border: 1px solid rgba(85, 156, 173, 0.34) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.86) !important;
        box-shadow: 0 14px 28px rgba(72, 61, 139, 0.08) !important;
        padding: 16px !important;
        display: grid !important;
        gap: 12px !important;
        min-height: auto !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-top,
    html.tablet-app-mode .order-services-card .mobile-service-card-top,
    body.tablet-app-mode .order-services-card .mobile-service-card-top {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-icon,
    html.tablet-app-mode .order-services-card .mobile-service-icon,
    body.tablet-app-mode .order-services-card .mobile-service-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        background: rgba(74, 88, 153, 0.10) !important;
        color: #4a5899 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-name,
    html.tablet-app-mode .order-services-card .mobile-service-name,
    body.tablet-app-mode .order-services-card .mobile-service-name {
        margin: 0 !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #2f2450 !important;
        min-width: 0 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-subtotal,
    html.tablet-app-mode .order-services-card .mobile-service-subtotal,
    body.tablet-app-mode .order-services-card .mobile-service-subtotal {
        margin: 0 !important;
        font-weight: 700 !important;
        color: #241936 !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-detail,
    html.tablet-app-mode .order-services-card .mobile-service-card-detail,
    body.tablet-app-mode .order-services-card .mobile-service-card-detail {
        margin: 0 !important;
        color: #5f5173 !important;
        line-height: 1.35 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-meta,
    html.tablet-app-mode .order-services-card .mobile-service-card-meta,
    body.tablet-app-mode .order-services-card .mobile-service-card-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-meta span,
    html.tablet-app-mode .order-services-card .mobile-service-card-meta span,
    body.tablet-app-mode .order-services-card .mobile-service-card-meta span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
        background: rgba(74, 88, 153, 0.08) !important;
        color: #5f5173 !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-actions,
    html.tablet-app-mode .order-services-card .mobile-service-card-actions,
    body.tablet-app-mode .order-services-card .mobile-service-card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 2px !important;
    }

    .tablet-app-mode .order-services-card .mobile-service-card-actions .btn,
    html.tablet-app-mode .order-services-card .mobile-service-card-actions .btn,
    body.tablet-app-mode .order-services-card .mobile-service-card-actions .btn {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }
}

/* Order create tablet portrait payment method adaptive width */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) {
        grid-template-columns: 1fr !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row {
        display: none !important;
    }

    .tablet-app-mode .order-payment-method-group #payment_method_initial,
    html.tablet-app-mode .order-payment-method-group #payment_method_initial,
    body.tablet-app-mode .order-payment-method-group #payment_method_initial {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-rounding-row {
        justify-self: end !important;
        min-width: max-content !important;
    }

    .tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden),
    html.tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden),
    body.tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden) {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
}

/* Order create tablet portrait actions dropdown overlay fix */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .register-order-card,
    html.tablet-app-mode .register-order-card,
    body.tablet-app-mode .register-order-card {
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card .section-head,
    html.tablet-app-mode .register-order-card .section-head,
    body.tablet-app-mode .register-order-card .section-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 16px !important;
        position: relative !important;
        overflow: visible !important;
        margin-bottom: 16px !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown,
    html.tablet-app-mode .register-order-card .actions-dropdown,
    body.tablet-app-mode .register-order-card .actions-dropdown {
        position: relative !important;
        justify-self: end !important;
        align-self: start !important;
        z-index: 100 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown.is-open,
    html.tablet-app-mode .register-order-card .actions-dropdown.is-open,
    body.tablet-app-mode .register-order-card .actions-dropdown.is-open {
        margin-bottom: 0 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown-menu,
    html.tablet-app-mode .register-order-card .actions-dropdown-menu,
    body.tablet-app-mode .register-order-card .actions-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: min(280px, calc(100vw - 64px)) !important;
        max-width: calc(100vw - 64px) !important;
        z-index: 160 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown:not(.is-open) .actions-dropdown-menu,
    html.tablet-app-mode .register-order-card .actions-dropdown:not(.is-open) .actions-dropdown-menu,
    body.tablet-app-mode .register-order-card .actions-dropdown:not(.is-open) .actions-dropdown-menu {
        pointer-events: none !important;
    }

    .tablet-app-mode .register-order-card form[data-client-search-form],
    html.tablet-app-mode .register-order-card form[data-client-search-form],
    body.tablet-app-mode .register-order-card form[data-client-search-form] {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Order create tablet portrait amounts 3-column trial */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .order-amounts-row,
    html.tablet-app-mode .order-amounts-row,
    body.tablet-app-mode .order-amounts-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .tablet-app-mode .order-amounts-row .form-group,
    html.tablet-app-mode .order-amounts-row .form-group,
    body.tablet-app-mode .order-amounts-row .form-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    .tablet-app-mode .order-amounts-row input,
    html.tablet-app-mode .order-amounts-row input,
    body.tablet-app-mode .order-amounts-row input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tablet-app-mode .order-amounts-row label,
    html.tablet-app-mode .order-amounts-row label,
    body.tablet-app-mode .order-amounts-row label {
        min-width: 0 !important;
        white-space: normal !important;
    }
}

/* Order create tablet portrait full-width amount disclaimer */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .order-amounts-row .order-overpay-alert,
    html.tablet-app-mode .order-amounts-row .order-overpay-alert,
    body.tablet-app-mode .order-amounts-row .order-overpay-alert {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: #fef2f2 !important;
        border: 1px solid #fbcaca !important;
        color: #991b1b !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    .tablet-app-mode .order-amounts-row .order-overpay-alert[hidden],
    html.tablet-app-mode .order-amounts-row .order-overpay-alert[hidden],
    body.tablet-app-mode .order-amounts-row .order-overpay-alert[hidden] {
        display: none !important;
    }
}

/* Order create mobile payment rounding and disclaimer refinement */
@media (max-width: 767px) {
    .order-payment-method-group .order-payment-inline-controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .order-payment-method-group #payment_method_initial {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .order-payment-method-group .order-payment-rounding-row {
        width: 100% !important;
        margin: 0 !important;
    }

    .order-payment-method-group .payment-rounding-toggle.is-hidden {
        display: none !important;
    }

    .order-payment-method-group .payment-rounding-toggle:not(.is-hidden) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
        white-space: nowrap !important;
    }

    .order-amounts-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .order-amounts-row .form-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    .order-amounts-row input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .order-overpay-alert {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: #fef2f2 !important;
        border: 1px solid #fbcaca !important;
        color: #991b1b !important;
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
    }

    .order-overpay-alert[hidden] {
        display: none !important;
    }
}

/* Order create payment rounding hidden spacing fix */

/* Mobile */
@media (max-width: 767px) {
    .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) {
        gap: 0 !important;
    }

    .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .order-payment-method-group .payment-rounding-toggle.is-hidden {
        display: none !important;
    }

    .order-payment-method-group .payment-rounding-toggle:not(.is-hidden) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
}

/* Tablet vertical */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) {
        gap: 0 !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden,
    html.tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden,
    body.tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden {
        display: none !important;
    }
}

/* Order create desktop payment row and overpay alert fix */
@media (min-width: 1200px) {
    .order-payment-method-group .order-payment-inline-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .order-payment-method-group #payment_method_initial {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .order-payment-method-group .order-payment-rounding-row {
        justify-self: end !important;
        align-self: center !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .order-payment-method-group .payment-rounding-toggle:not(.is-hidden) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .order-payment-method-group .payment-rounding-toggle.is-hidden {
        display: none !important;
    }

    .order-amounts-row .order-overpay-alert {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 2px 0 0 !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: #fef2f2 !important;
        border: 1px solid #fbcaca !important;
        color: #991b1b !important;
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
    }

    .order-amounts-row .order-overpay-alert[hidden] {
        display: none !important;
    }
}

/* Order create service modal tablet landscape split override */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode #order-services-modal .service-picker-modal,
    html.tablet-app-mode #order-services-modal .service-picker-modal,
    body.tablet-app-mode #order-services-modal .service-picker-modal {
        width: min(960px, calc(100vw - 48px)) !important;
        max-width: min(960px, calc(100vw - 48px)) !important;
        max-height: calc(100dvh - 48px) !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-modal-body,
    html.tablet-app-mode #order-services-modal .service-picker-modal-body,
    body.tablet-app-mode #order-services-modal .service-picker-modal-body {
        max-height: calc(100dvh - 128px) !important;
        overflow: hidden !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-layout,
    html.tablet-app-mode #order-services-modal .service-picker-layout,
    body.tablet-app-mode #order-services-modal .service-picker-layout {
        display: grid !important;
        grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr) !important;
        gap: 24px !important;
        max-height: calc(100dvh - 148px) !important;
        overflow: hidden !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-step-selector,
    html.tablet-app-mode #order-services-modal .mobile-service-step-selector,
    body.tablet-app-mode #order-services-modal .mobile-service-step-selector,
    .tablet-app-mode #order-services-modal .mobile-service-step-form,
    html.tablet-app-mode #order-services-modal .mobile-service-step-form,
    body.tablet-app-mode #order-services-modal .mobile-service-step-form {
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-sidebar,
    html.tablet-app-mode #order-services-modal .service-picker-sidebar,
    body.tablet-app-mode #order-services-modal .service-picker-sidebar,
    .tablet-app-mode #order-services-modal .service-picker-detail,
    html.tablet-app-mode #order-services-modal .service-picker-detail,
    body.tablet-app-mode #order-services-modal .service-picker-detail {
        max-height: calc(100dvh - 168px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-search,
    html.tablet-app-mode #order-services-modal .mobile-service-search,
    body.tablet-app-mode #order-services-modal .mobile-service-search,
    .tablet-app-mode #order-services-modal .mobile-change-service-btn,
    html.tablet-app-mode #order-services-modal .mobile-change-service-btn,
    body.tablet-app-mode #order-services-modal .mobile-change-service-btn {
        display: none !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-form-grid,
    html.tablet-app-mode #order-services-modal .service-picker-form-grid,
    body.tablet-app-mode #order-services-modal .service-picker-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-detail-group,
    html.tablet-app-mode #order-services-modal .service-detail-group,
    body.tablet-app-mode #order-services-modal .service-detail-group {
        grid-column: 1 / -1 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-actions,
    html.tablet-app-mode #order-services-modal .service-picker-actions,
    body.tablet-app-mode #order-services-modal .service-picker-actions {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 12px !important;
    }
}

/* Order create service modal tablet portrait mobile-style header */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode #order-services-modal .service-picker-detail-header,
    html.tablet-app-mode #order-services-modal .service-picker-detail-header,
    body.tablet-app-mode #order-services-modal .service-picker-detail-header {
        display: grid !important;
        gap: 14px !important;
        padding: 18px !important;
        border-radius: 18px !important;
        background: rgba(255, 244, 250, 0.92) !important;
        border: 1px solid rgba(218, 68, 160, 0.22) !important;
        box-shadow: none !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading,
    html.tablet-app-mode #order-services-modal .service-picker-heading,
    body.tablet-app-mode #order-services-modal .service-picker-heading {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-icon,
    html.tablet-app-mode #order-services-modal .service-picker-icon,
    body.tablet-app-mode #order-services-modal .service-picker-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(218, 68, 160, 0.12) !important;
        color: #da44a0 !important;
        margin: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-copy,
    html.tablet-app-mode #order-services-modal .service-picker-heading-copy,
    body.tablet-app-mode #order-services-modal .service-picker-heading-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 8px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-kicker,
    html.tablet-app-mode #order-services-modal .service-picker-kicker,
    body.tablet-app-mode #order-services-modal .service-picker-kicker {
        color: #da44a0 !important;
        font-weight: 700 !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main h4,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main h4,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main h4 {
        margin: 0 !important;
        color: #4a5899 !important;
        font-size: clamp(1.25rem, 3vw, 1.55rem) !important;
        line-height: 1.15 !important;
    }

    .tablet-app-mode #order-services-modal .service-price-badge,
    html.tablet-app-mode #order-services-modal .service-price-badge,
    body.tablet-app-mode #order-services-modal .service-price-badge {
        flex: 0 0 auto !important;
        border-radius: 999px !important;
        padding: 8px 12px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(218, 68, 160, 0.28) !important;
        color: #da44a0 !important;
        font-weight: 650 !important;
        font-size: 0.86rem !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode #order-services-modal #service-detail-copy,
    html.tablet-app-mode #order-services-modal #service-detail-copy,
    body.tablet-app-mode #order-services-modal #service-detail-copy {
        margin: 0 !important;
        color: #736278 !important;
        line-height: 1.45 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-change-service-btn,
    html.tablet-app-mode #order-services-modal .mobile-change-service-btn,
    body.tablet-app-mode #order-services-modal .mobile-change-service-btn {
        width: 100% !important;
        min-height: 46px !important;
        border: 1px solid rgba(218, 68, 160, 0.28) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: #da44a0 !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .tablet-app-mode #order-services-modal .mobile-change-service-btn:hover,
    html.tablet-app-mode #order-services-modal .mobile-change-service-btn:hover,
    body.tablet-app-mode #order-services-modal .mobile-change-service-btn:hover {
        background: #ffffff !important;
    }
}

/* Order create service modal tablet portrait compound lines mobile-style */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode #order-services-modal .mobile-service-lines-list,
    html.tablet-app-mode #order-services-modal .mobile-service-lines-list,
    body.tablet-app-mode #order-services-modal .mobile-service-lines-list {
        display: grid !important;
        gap: 12px !important;
        margin-top: 14px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-card,
    html.tablet-app-mode #order-services-modal .mobile-service-line-card,
    body.tablet-app-mode #order-services-modal .mobile-service-line-card {
        border: 1px solid rgba(85, 156, 173, 0.28) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        padding: 14px !important;
        display: grid !important;
        gap: 12px !important;
        box-shadow: 0 10px 22px rgba(72, 61, 139, 0.06) !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-top,
    html.tablet-app-mode #order-services-modal .mobile-service-line-top,
    body.tablet-app-mode #order-services-modal .mobile-service-line-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-top strong,
    html.tablet-app-mode #order-services-modal .mobile-service-line-top strong,
    body.tablet-app-mode #order-services-modal .mobile-service-line-top strong {
        font-weight: 700 !important;
        color: #3f4f91 !important;
        margin: 0 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-top span,
    html.tablet-app-mode #order-services-modal .mobile-service-line-top span,
    body.tablet-app-mode #order-services-modal .mobile-service-line-top span {
        font-weight: 700 !important;
        color: #2f2450 !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-meta,
    html.tablet-app-mode #order-services-modal .mobile-service-line-meta,
    body.tablet-app-mode #order-services-modal .mobile-service-line-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-meta span,
    html.tablet-app-mode #order-services-modal .mobile-service-line-meta span,
    body.tablet-app-mode #order-services-modal .mobile-service-line-meta span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
        background: rgba(74, 88, 153, 0.08) !important;
        color: #6a5b7d !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-remove-line-btn,
    html.tablet-app-mode #order-services-modal .mobile-remove-line-btn,
    body.tablet-app-mode #order-services-modal .mobile-remove-line-btn {
        width: 100% !important;
        min-height: 46px !important;
        margin-top: 0 !important;
        justify-content: center !important;
    }

    .tablet-app-mode #order-services-modal #service-compound-add-button,
    html.tablet-app-mode #order-services-modal #service-compound-add-button,
    body.tablet-app-mode #order-services-modal #service-compound-add-button {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }
}

/* Order create service modal tablet portrait search input icon fix */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  .tablet-app-mode #order-services-modal .mobile-service-search,
  html.tablet-app-mode #order-services-modal .mobile-service-search,
  body.tablet-app-mode #order-services-modal .mobile-service-search {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 16px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-search i,
    html.tablet-app-mode #order-services-modal .mobile-service-search i,
    body.tablet-app-mode #order-services-modal .mobile-service-search i {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
        color: #4a5899 !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
    }

    .tablet-app-mode #order-services-modal #service-picker-search-input,
    html.tablet-app-mode #order-services-modal #service-picker-search-input,
    body.tablet-app-mode #order-services-modal #service-picker-search-input {
        width: 100% !important;
        min-height: 48px !important;
    padding-left: 44px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* Rectification services modal tablet portrait label padding fix */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode #rectification-services-modal label,
    html.tablet-app-mode #rectification-services-modal label,
    body.tablet-app-mode #rectification-services-modal label {
        padding-top: 0 !important;
    }

    .tablet-app-mode #rectification-services-modal .rectification-service-option-card,
    html.tablet-app-mode #rectification-services-modal .rectification-service-option-card,
    body.tablet-app-mode #rectification-services-modal .rectification-service-option-card {
        min-height: 72px !important;
        padding: 16px 18px !important;
        display: flex !important;
        align-items: center !important;
    }

    .tablet-app-mode #rectification-services-modal .rectification-service-option-head,
    html.tablet-app-mode #rectification-services-modal .rectification-service-option-head,
    body.tablet-app-mode #rectification-services-modal .rectification-service-option-head {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .tablet-app-mode #rectification-services-modal .rectification-service-option-icon,
    html.tablet-app-mode #rectification-services-modal .rectification-service-option-icon,
    body.tablet-app-mode #rectification-services-modal .rectification-service-option-icon {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-self: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .tablet-app-mode #rectification-services-modal .rectification-service-option-copy,
    html.tablet-app-mode #rectification-services-modal .rectification-service-option-copy,
    body.tablet-app-mode #rectification-services-modal .rectification-service-option-copy {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        gap: 3px !important;
    }

    .tablet-app-mode #rectification-services-modal .rectification-service-option-copy strong,
    html.tablet-app-mode #rectification-services-modal .rectification-service-option-copy strong,
    body.tablet-app-mode #rectification-services-modal .rectification-service-option-copy strong {
        margin: 0 !important;
        line-height: 1.18 !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }

    .tablet-app-mode #rectification-services-modal .rectification-service-option-copy small,
    html.tablet-app-mode #rectification-services-modal .rectification-service-option-copy small,
    body.tablet-app-mode #rectification-services-modal .rectification-service-option-copy small {
        margin: 0 !important;
        line-height: 1.24 !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
    }
}

/* Rectification service picker tablet landscape UI polish */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .tablet-app-mode #rectification-services-modal .rectification-service-option-card,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-card,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-card {
    min-height: 84px !important;
    padding: 10px 16px !important;
    align-items: center !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-head,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-head,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-head {
    min-height: 100% !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-check,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-check,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-check {
    align-self: center !important;
    margin: 0 !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-icon,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-icon,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    align-self: center !important;
    border-radius: 14px !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-copy,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-copy,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-copy {
    min-width: 0 !important;
    gap: 3px !important;
    align-content: center !important;
    margin: 0 !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-copy strong,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-copy strong,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-copy strong {
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-copy small,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-copy small,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-copy small {
    margin: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }
}

/* Rectification services modal tablet landscape label padding fix */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .tablet-app-mode #rectification-services-modal label,
  html.tablet-app-mode #rectification-services-modal label,
  body.tablet-app-mode #rectification-services-modal label {
    padding-top: 0 !important;
  }

  .tablet-app-mode #rectification-services-modal .rectification-service-option-card,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-card,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-card,
  .tablet-app-mode #rectification-services-modal .rectification-service-option-head,
  html.tablet-app-mode #rectification-services-modal .rectification-service-option-head,
  body.tablet-app-mode #rectification-services-modal .rectification-service-option-head {
    align-items: center !important;
  }
}

/* Order create tablet portrait client search dropdown and payment switch final fix */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .register-order-card,
    html.tablet-app-mode .register-order-card,
    body.tablet-app-mode .register-order-card {
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card form[data-client-search-form],
    html.tablet-app-mode .register-order-card form[data-client-search-form],
    body.tablet-app-mode .register-order-card form[data-client-search-form] {
        position: relative !important;
        overflow: visible !important;
        z-index: 30 !important;
    }

    .tablet-app-mode .register-order-card .client-search-group,
    html.tablet-app-mode .register-order-card .client-search-group,
    body.tablet-app-mode .register-order-card .client-search-group,
    .tablet-app-mode .register-order-card .client-search-shell,
    html.tablet-app-mode .register-order-card .client-search-shell,
    body.tablet-app-mode .register-order-card .client-search-shell {
        position: relative !important;
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card .client-search-results,
    html.tablet-app-mode .register-order-card .client-search-results,
    body.tablet-app-mode .register-order-card .client-search-results {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        width: 100% !important;
        max-height: min(320px, calc(100dvh - 360px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 140 !important;
        box-sizing: border-box !important;
    }

    .tablet-app-mode .responsive-grid.two-cols,
    html.tablet-app-mode .responsive-grid.two-cols,
    body.tablet-app-mode .responsive-grid.two-cols {
        overflow: visible !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .tablet-app-mode .order-payment-method-group #payment_method_initial,
    html.tablet-app-mode .order-payment-method-group #payment_method_initial,
    body.tablet-app-mode .order-payment-method-group #payment_method_initial {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-rounding-row {
        justify-self: end !important;
        align-self: center !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden),
    html.tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden),
    body.tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden,
    html.tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden,
    body.tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden {
        display: none !important;
    }
}

/* Order create tablet landscape search dropdown and payment switch fix */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode .responsive-grid.two-cols,
    html.tablet-app-mode .responsive-grid.two-cols,
    body.tablet-app-mode .responsive-grid.two-cols,
    .tablet-app-mode .register-order-card,
    html.tablet-app-mode .register-order-card,
    body.tablet-app-mode .register-order-card {
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card form[data-client-search-form],
    html.tablet-app-mode .register-order-card form[data-client-search-form],
    body.tablet-app-mode .register-order-card form[data-client-search-form] {
        position: relative !important;
        overflow: visible !important;
      /* z-index: 50 !important; */
    }

    .tablet-app-mode .register-order-card .client-search-group,
    html.tablet-app-mode .register-order-card .client-search-group,
    body.tablet-app-mode .register-order-card .client-search-group,
    .tablet-app-mode .register-order-card .client-search-shell,
    html.tablet-app-mode .register-order-card .client-search-shell,
    body.tablet-app-mode .register-order-card .client-search-shell {
        position: relative !important;
        overflow: visible !important;
    }

    .tablet-app-mode .register-order-card .client-search-results,
    html.tablet-app-mode .register-order-card .client-search-results,
    body.tablet-app-mode .register-order-card .client-search-results {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        width: 100% !important;
        max-height: min(280px, calc(100dvh - 340px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 180 !important;
        box-sizing: border-box !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden),
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-inline-controls:has(.payment-rounding-toggle.is-hidden) .order-payment-rounding-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .tablet-app-mode .order-payment-method-group #payment_method_initial,
    html.tablet-app-mode .order-payment-method-group #payment_method_initial,
    body.tablet-app-mode .order-payment-method-group #payment_method_initial {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .tablet-app-mode .order-payment-method-group .order-payment-rounding-row,
    html.tablet-app-mode .order-payment-method-group .order-payment-rounding-row,
    body.tablet-app-mode .order-payment-method-group .order-payment-rounding-row {
        justify-self: end !important;
        align-self: center !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden),
    html.tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden),
    body.tablet-app-mode .order-payment-method-group .payment-rounding-toggle:not(.is-hidden) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden,
    html.tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden,
    body.tablet-app-mode .order-payment-method-group .payment-rounding-toggle.is-hidden {
        display: none !important;
    }
}

/* Order create tablet landscape more actions dropdown layering fix */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode .register-order-card,
    html.tablet-app-mode .register-order-card,
    body.tablet-app-mode .register-order-card {
        position: relative !important;
        overflow: visible !important;
        z-index: 40 !important;
    }

    .tablet-app-mode .register-order-card.dropdown-open,
    html.tablet-app-mode .register-order-card.dropdown-open,
    body.tablet-app-mode .register-order-card.dropdown-open {
        z-index: 120 !important;
    }

    .tablet-app-mode .register-order-card .section-head,
    html.tablet-app-mode .register-order-card .section-head,
    body.tablet-app-mode .register-order-card .section-head,
    .tablet-app-mode .register-order-card .section-header,
    html.tablet-app-mode .register-order-card .section-header,
    body.tablet-app-mode .register-order-card .section-header {
        position: relative !important;
        overflow: visible !important;
        z-index: 5 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown,
    html.tablet-app-mode .register-order-card .actions-dropdown,
    body.tablet-app-mode .register-order-card .actions-dropdown {
        position: relative !important;
        overflow: visible !important;
        z-index: 130 !important;
    }

    .tablet-app-mode .register-order-card .actions-dropdown-menu,
    html.tablet-app-mode .register-order-card .actions-dropdown-menu,
    body.tablet-app-mode .register-order-card .actions-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        z-index: 200 !important;
        overflow: visible !important;
    }

    .tablet-app-mode .responsive-grid.two-cols,
    html.tablet-app-mode .responsive-grid.two-cols,
    body.tablet-app-mode .responsive-grid.two-cols,
    .tablet-app-mode .content-area,
    html.tablet-app-mode .content-area,
    body.tablet-app-mode .content-area {
        overflow: visible !important;
    }

    .tablet-app-mode .client-search-card,
    html.tablet-app-mode .client-search-card,
    body.tablet-app-mode .client-search-card {
        position: relative !important;
        z-index: 120 !important;
        overflow: visible !important;
    }
}

/* Order create service modal tablet landscape comfortable split */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode #order-services-modal .service-picker-modal,
    html.tablet-app-mode #order-services-modal .service-picker-modal,
    body.tablet-app-mode #order-services-modal .service-picker-modal {
        width: min(980px, calc(100vw - 40px)) !important;
        max-width: min(980px, calc(100vw - 40px)) !important;
        max-height: calc(100dvh - 36px) !important;
        border-radius: 22px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-modal-header,
    html.tablet-app-mode #order-services-modal .service-picker-modal-header,
    body.tablet-app-mode #order-services-modal .service-picker-modal-header {
        min-height: 58px !important;
        padding: 14px 20px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-modal-body,
    html.tablet-app-mode #order-services-modal .service-picker-modal-body,
    body.tablet-app-mode #order-services-modal .service-picker-modal-body {
        max-height: calc(100dvh - 104px) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-layout,
    html.tablet-app-mode #order-services-modal .service-picker-layout,
    body.tablet-app-mode #order-services-modal .service-picker-layout {
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        gap: 20px !important;
        max-height: calc(100dvh - 104px) !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-step-selector,
    html.tablet-app-mode #order-services-modal .mobile-service-step-selector,
    body.tablet-app-mode #order-services-modal .mobile-service-step-selector {
        min-width: 0 !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(85, 156, 173, 0.14) !important;
        padding: 16px 14px 16px 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-sidebar,
    html.tablet-app-mode #order-services-modal .service-picker-sidebar,
    body.tablet-app-mode #order-services-modal .service-picker-sidebar {
        max-height: calc(100dvh - 142px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-list,
    html.tablet-app-mode #order-services-modal .service-picker-list,
    body.tablet-app-mode #order-services-modal .service-picker-list {
        display: grid !important;
        gap: 10px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-item,
    html.tablet-app-mode #order-services-modal .service-picker-item,
    body.tablet-app-mode #order-services-modal .service-picker-item {
        min-height: 70px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-item-icon,
    html.tablet-app-mode #order-services-modal .service-picker-item-icon,
    body.tablet-app-mode #order-services-modal .service-picker-item-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-step-form,
    html.tablet-app-mode #order-services-modal .mobile-service-step-form,
    body.tablet-app-mode #order-services-modal .mobile-service-step-form {
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 18px 20px 18px 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail,
    html.tablet-app-mode #order-services-modal .service-picker-detail,
    body.tablet-app-mode #order-services-modal .service-picker-detail {
        max-height: calc(100dvh - 142px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        padding-right: 8px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail-header,
    html.tablet-app-mode #order-services-modal .service-picker-detail-header,
    body.tablet-app-mode #order-services-modal .service-picker-detail-header {
        margin-bottom: 18px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading,
    html.tablet-app-mode #order-services-modal .service-picker-heading,
    body.tablet-app-mode #order-services-modal .service-picker-heading {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-icon,
    html.tablet-app-mode #order-services-modal .service-picker-icon,
    body.tablet-app-mode #order-services-modal .service-picker-icon {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        border-radius: 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main h4,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main h4,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main h4 {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-price-badge,
    html.tablet-app-mode #order-services-modal .service-price-badge,
    body.tablet-app-mode #order-services-modal .service-price-badge {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-form-grid,
    html.tablet-app-mode #order-services-modal .service-picker-form-grid,
    body.tablet-app-mode #order-services-modal .service-picker-form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tablet-app-mode #order-services-modal .service-detail-group,
    html.tablet-app-mode #order-services-modal .service-detail-group,
    body.tablet-app-mode #order-services-modal .service-detail-group {
        grid-column: auto !important;
    }

    .tablet-app-mode #order-services-modal .service-price-input-wrap,
    html.tablet-app-mode #order-services-modal .service-price-input-wrap,
    body.tablet-app-mode #order-services-modal .service-price-input-wrap {
        min-width: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-total-card,
    html.tablet-app-mode #order-services-modal .service-total-card,
    body.tablet-app-mode #order-services-modal .service-total-card {
        margin-top: 16px !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
    }

    .tablet-app-mode #order-services-modal .service-total-card strong,
    html.tablet-app-mode #order-services-modal .service-total-card strong,
    body.tablet-app-mode #order-services-modal .service-total-card strong {
        font-size: clamp(2rem, 4vw, 2.5rem) !important;
    }

    .tablet-app-mode #order-services-modal .service-summary-line,
    html.tablet-app-mode #order-services-modal .service-summary-line,
    body.tablet-app-mode #order-services-modal .service-summary-line {
        margin: 12px 0 0 !important;
        line-height: 1.35 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-actions,
    html.tablet-app-mode #order-services-modal .service-picker-actions,
    body.tablet-app-mode #order-services-modal .service-picker-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-actions .btn,
    html.tablet-app-mode #order-services-modal .service-picker-actions .btn,
    body.tablet-app-mode #order-services-modal .service-picker-actions .btn {
        min-width: 150px !important;
        min-height: 46px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-search,
    html.tablet-app-mode #order-services-modal .mobile-service-search,
    body.tablet-app-mode #order-services-modal .mobile-service-search,
    .tablet-app-mode #order-services-modal .mobile-change-service-btn,
    html.tablet-app-mode #order-services-modal .mobile-change-service-btn,
    body.tablet-app-mode #order-services-modal .mobile-change-service-btn {
        display: none !important;
    }
}

/* Order create service modal tablet landscape final comfort pass */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode #order-services-modal .service-picker-modal,
    html.tablet-app-mode #order-services-modal .service-picker-modal,
    body.tablet-app-mode #order-services-modal .service-picker-modal {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 24px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-modal-header,
    html.tablet-app-mode #order-services-modal .service-picker-modal-header,
    body.tablet-app-mode #order-services-modal .service-picker-modal-header {
        min-height: 60px !important;
        padding: 14px 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-modal-body,
    html.tablet-app-mode #order-services-modal .service-picker-modal-body,
    body.tablet-app-mode #order-services-modal .service-picker-modal-body {
        height: calc(100dvh - 84px) !important;
        max-height: calc(100dvh - 84px) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-layout,
    html.tablet-app-mode #order-services-modal .service-picker-layout,
    body.tablet-app-mode #order-services-modal .service-picker-layout {
        display: grid !important;
        grid-template-columns: 280px minmax(0, 1fr) !important;
        gap: 18px !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-step-selector,
    html.tablet-app-mode #order-services-modal .mobile-service-step-selector,
    body.tablet-app-mode #order-services-modal .mobile-service-step-selector {
        padding: 14px 12px 14px 16px !important;
        border-right: 1px solid rgba(85, 156, 173, 0.14) !important;
        overflow: hidden !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-sidebar,
    html.tablet-app-mode #order-services-modal .service-picker-sidebar,
    body.tablet-app-mode #order-services-modal .service-picker-sidebar {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-list,
    html.tablet-app-mode #order-services-modal .service-picker-list,
    body.tablet-app-mode #order-services-modal .service-picker-list {
        display: grid !important;
        gap: 10px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-item,
    html.tablet-app-mode #order-services-modal .service-picker-item,
    body.tablet-app-mode #order-services-modal .service-picker-item {
        min-height: 68px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-item-icon,
    html.tablet-app-mode #order-services-modal .service-picker-item-icon,
    body.tablet-app-mode #order-services-modal .service-picker-item-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 14px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-step-form,
    html.tablet-app-mode #order-services-modal .mobile-service-step-form,
    body.tablet-app-mode #order-services-modal .mobile-service-step-form {
        padding: 16px 18px 16px 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail,
    html.tablet-app-mode #order-services-modal .service-picker-detail,
    body.tablet-app-mode #order-services-modal .service-picker-detail {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        padding-right: 6px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail-header,
    html.tablet-app-mode #order-services-modal .service-picker-detail-header,
    body.tablet-app-mode #order-services-modal .service-picker-detail-header {
        margin-bottom: 14px !important;
        padding: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading,
    html.tablet-app-mode #order-services-modal .service-picker-heading,
    body.tablet-app-mode #order-services-modal .service-picker-heading {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-icon,
    html.tablet-app-mode #order-services-modal .service-picker-icon,
    body.tablet-app-mode #order-services-modal .service-picker-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        border-radius: 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main h4,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main h4,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main h4 {
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail-header p,
    html.tablet-app-mode #order-services-modal .service-picker-detail-header p,
    body.tablet-app-mode #order-services-modal .service-picker-detail-header p {
        margin-top: 8px !important;
        font-size: 0.98rem !important;
        line-height: 1.35 !important;
        max-width: 58ch !important;
    }

    .tablet-app-mode #order-services-modal .service-price-badge,
    html.tablet-app-mode #order-services-modal .service-price-badge,
    body.tablet-app-mode #order-services-modal .service-price-badge {
        padding: 6px 10px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-form-grid,
    html.tablet-app-mode #order-services-modal .service-picker-form-grid,
    body.tablet-app-mode #order-services-modal .service-picker-form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-form-grid > *,
    html.tablet-app-mode #order-services-modal .service-picker-form-grid > *,
    body.tablet-app-mode #order-services-modal .service-picker-form-grid > * {
        min-width: 0 !important;
    }

    .tablet-app-mode #order-services-modal .service-total-card,
    html.tablet-app-mode #order-services-modal .service-total-card,
    body.tablet-app-mode #order-services-modal .service-total-card {
        margin-top: 14px !important;
        padding: 14px 18px !important;
        border-radius: 16px !important;
    }

    .tablet-app-mode #order-services-modal .service-total-card strong,
    html.tablet-app-mode #order-services-modal .service-total-card strong,
    body.tablet-app-mode #order-services-modal .service-total-card strong {
        font-size: clamp(1.9rem, 3.2vw, 2.35rem) !important;
        line-height: 1 !important;
    }

    .tablet-app-mode #order-services-modal .service-summary-line,
    html.tablet-app-mode #order-services-modal .service-summary-line,
    body.tablet-app-mode #order-services-modal .service-summary-line {
        margin: 10px 0 0 !important;
        line-height: 1.35 !important;
        font-size: 0.94rem !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-actions,
    html.tablet-app-mode #order-services-modal .service-picker-actions,
    body.tablet-app-mode #order-services-modal .service-picker-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 16px !important;
        padding-top: 8px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 18%, rgba(255,255,255,1) 100%) !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-actions .btn,
    html.tablet-app-mode #order-services-modal .service-picker-actions .btn,
    body.tablet-app-mode #order-services-modal .service-picker-actions .btn {
        min-width: 148px !important;
        min-height: 44px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-search,
    html.tablet-app-mode #order-services-modal .mobile-service-search,
    body.tablet-app-mode #order-services-modal .mobile-service-search,
    .tablet-app-mode #order-services-modal .mobile-change-service-btn,
    html.tablet-app-mode #order-services-modal .mobile-change-service-btn,
    body.tablet-app-mode #order-services-modal .mobile-change-service-btn {
        display: none !important;
    }
}

/* Order create service modal tablet landscape detail breathing */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode #order-services-modal .mobile-service-step-form,
    html.tablet-app-mode #order-services-modal .mobile-service-step-form,
    body.tablet-app-mode #order-services-modal .mobile-service-step-form {
        padding: 18px 22px 18px 18px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail,
    html.tablet-app-mode #order-services-modal .service-picker-detail,
    body.tablet-app-mode #order-services-modal .service-picker-detail {
        padding-left: 8px !important;
        padding-right: 24px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail-header,
    html.tablet-app-mode #order-services-modal .service-picker-detail-header,
    body.tablet-app-mode #order-services-modal .service-picker-detail-header {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 16px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading,
    html.tablet-app-mode #order-services-modal .service-picker-heading,
    body.tablet-app-mode #order-services-modal .service-picker-heading {
        column-gap: 14px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-heading-main,
    html.tablet-app-mode #order-services-modal .service-picker-heading-main,
    body.tablet-app-mode #order-services-modal .service-picker-heading-main {
        padding-right: 4px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-detail-header p,
    html.tablet-app-mode #order-services-modal .service-picker-detail-header p,
    body.tablet-app-mode #order-services-modal .service-picker-detail-header p {
        margin-top: 10px !important;
        padding-right: 8px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-form-grid,
    html.tablet-app-mode #order-services-modal .service-picker-form-grid,
    body.tablet-app-mode #order-services-modal .service-picker-form-grid {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .tablet-app-mode #order-services-modal .service-total-card,
    html.tablet-app-mode #order-services-modal .service-total-card,
    body.tablet-app-mode #order-services-modal .service-total-card {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    .tablet-app-mode #order-services-modal .service-summary-line,
    html.tablet-app-mode #order-services-modal .service-summary-line,
    body.tablet-app-mode #order-services-modal .service-summary-line {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .tablet-app-mode #order-services-modal .service-picker-actions,
    html.tablet-app-mode #order-services-modal .service-picker-actions,
    body.tablet-app-mode #order-services-modal .service-picker-actions {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* SOLO UI Lista de edredones - iPad horizontal */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode #order-services-modal .service-compound-section,
    html.tablet-app-mode #order-services-modal .service-compound-section,
    body.tablet-app-mode #order-services-modal .service-compound-section {
        padding: 16px !important;
        border-radius: 18px !important;
        background: rgba(248, 239, 246, 0.42) !important;
        border: 1px solid rgba(85, 156, 173, 0.18) !important;
    }

    .tablet-app-mode #order-services-modal .service-compound-toolbar,
    html.tablet-app-mode #order-services-modal .service-compound-toolbar,
    body.tablet-app-mode #order-services-modal .service-compound-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .tablet-app-mode #order-services-modal .service-compound-toolbar .btn,
    html.tablet-app-mode #order-services-modal .service-compound-toolbar .btn,
    body.tablet-app-mode #order-services-modal .service-compound-toolbar .btn {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        border-radius: 14px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-lines-list,
    html.tablet-app-mode #order-services-modal .mobile-service-lines-list,
    body.tablet-app-mode #order-services-modal .mobile-service-lines-list {
        display: grid !important;
        gap: 12px !important;
        margin-top: 14px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-card,
    html.tablet-app-mode #order-services-modal .mobile-service-line-card,
    body.tablet-app-mode #order-services-modal .mobile-service-line-card {
        display: grid !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(85, 156, 173, 0.28) !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-top,
    html.tablet-app-mode #order-services-modal .mobile-service-line-top,
    body.tablet-app-mode #order-services-modal .mobile-service-line-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-top strong,
    html.tablet-app-mode #order-services-modal .mobile-service-line-top strong,
    body.tablet-app-mode #order-services-modal .mobile-service-line-top strong {
        color: #4a5899 !important;
        font-weight: 700 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-top span,
    html.tablet-app-mode #order-services-modal .mobile-service-line-top span,
    body.tablet-app-mode #order-services-modal .mobile-service-line-top span {
        color: #2f2450 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        margin-left: auto !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-meta,
    html.tablet-app-mode #order-services-modal .mobile-service-line-meta,
    body.tablet-app-mode #order-services-modal .mobile-service-line-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .tablet-app-mode #order-services-modal .mobile-service-line-meta span,
    html.tablet-app-mode #order-services-modal .mobile-service-line-meta span,
    body.tablet-app-mode #order-services-modal .mobile-service-line-meta span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
        background: rgba(74, 88, 153, 0.08) !important;
        color: #6a5b7d !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
    }

    .tablet-app-mode #order-services-modal .mobile-remove-line-btn,
    html.tablet-app-mode #order-services-modal .mobile-remove-line-btn,
    body.tablet-app-mode #order-services-modal .mobile-remove-line-btn {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }
}

/* Rectification tablet landscape client search full width */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode .rectification-page-card .rectification-client-search,
    html.tablet-app-mode .rectification-page-card .rectification-client-search,
    body.tablet-app-mode .rectification-page-card .rectification-client-search,
    .tablet-app-mode .rectification-page-card .client-search-group,
    html.tablet-app-mode .rectification-page-card .client-search-group,
    body.tablet-app-mode .rectification-page-card .client-search-group,
    .tablet-app-mode .rectification-page-card .client-search-shell,
    html.tablet-app-mode .rectification-page-card .client-search-shell,
    body.tablet-app-mode .rectification-page-card .client-search-shell {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .tablet-app-mode .rectification-page-card #rectification-client-search-input,
    html.tablet-app-mode .rectification-page-card #rectification-client-search-input,
    body.tablet-app-mode .rectification-page-card #rectification-client-search-input {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* Date input Safari/iOS visual normalization */
input[type="date"] {
    position: relative;
    min-height: 44px !important;
    height: 44px !important;
    width: 100%;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    border: 1px solid rgba(85, 156, 173, 0.72) !important;
    background-color: rgba(255, 255, 255, 0.86) !important;
    color: var(--color-text, #2f2440) !important;
    font: inherit !important;
    line-height: 46px !important;
    padding: 0 42px 0 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="date"]::-webkit-date-and-time-value {
    min-height: 1em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    color: inherit !important;
}

input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0 !important;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: inherit !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    opacity: 0.9 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 14px;
}

input[type="date"]:disabled,
input[type="date"][readonly] {
    opacity: 1 !important;
    background-color: rgba(248, 250, 252, 0.88) !important;
    color: rgba(47, 36, 64, 0.72) !important;
}

input[type="date"]:focus {
    outline: 0 !important;
    border-color: #4a5899 !important;
    box-shadow: 0 0 0 4px rgba(74, 88, 153, 0.14) !important;
}

/* Rectification header return action alignment */
.rectification-page-card .rectification-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 16px !important;
}

.rectification-page-card .rectification-header > div {
    min-width: 0 !important;
}

.rectification-page-card .rectification-header > a.btn.btn-ghost {
    justify-self: end !important;
    align-self: start !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    #rectification-services-modal .modal-header {
        padding: 18px 18px 14px !important;
        align-items: flex-start !important;
    }

    #rectification-services-modal .modal-header h3 {
        margin: 0 48px 4px 0 !important;
        font-size: 1.18rem !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
    }

    #rectification-services-modal .modal-header .order-detail-modal-code,
    #rectification-services-modal .modal-header .helper-text {
        margin: 0 48px 0 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
        color: var(--color-text-muted, #6f5872) !important;
    }

    #rectification-services-modal .modal-close-btn {
        top: 14px !important;
        right: 14px !important;
    }

    #rectification-services-modal label {
        padding-top: 0 !important;
    }

    #rectification-services-modal .rectification-service-option-card {
        min-height: 106px !important;
        padding: 18px 16px !important;
        display: flex !important;
        align-items: center !important;
    }

    #rectification-services-modal .rectification-service-option-head {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    #rectification-services-modal .rectification-service-option-card input[type="checkbox"] {
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: none !important;
        align-self: center !important;
    }

    #rectification-services-modal .rectification-service-option-icon {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
    }

    #rectification-services-modal .rectification-service-option-copy {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    #rectification-services-modal .rectification-service-option-title {
        margin: 0 !important;
        line-height: 1.18 !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.005em !important;
    }

    #rectification-services-modal .rectification-service-option-description {
        margin: 0 !important;
        line-height: 1.3 !important;
        font-size: 0.8rem !important;
        font-weight: 400 !important;
        color: var(--color-text-muted, #6f5872) !important;
    }

    .rectification-original-action-group > label {
        display: none !important;
    }

    .rectification-original-action-group {
        margin-top: 0 !important;
    }

    .rectification-page-card {
        padding: 18px 16px 20px !important;
    }

    .rectification-page-card .rectification-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        grid-template-areas:
            "title action"
            "desc desc" !important;
        align-items: start !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        margin-bottom: 0px !important;
    }

    .rectification-page-card .rectification-header-copy {
        display: contents;
        min-width: 0 !important;
    }

    .rectification-page-card .rectification-header-title {
        grid-area: title;
        min-width: 0;
        margin: 0 !important;
        font-size: 1.12rem !important;
        line-height: 1.22 !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        color: var(--color-primary, #4f5fa8) !important;
    }

    .rectification-page-card .rectification-header-topline {
        display: contents;
    }

    .rectification-page-card .rectification-header-badge {
        display: none !important;
    }

    .rectification-page-card .rectification-header-description {
        grid-area: desc;
        margin: 0px 80px 0px 0px !important;
        font-size: 0.86rem !important;
        line-height: 1.42 !important;
        font-weight: 400 !important;
        color: var(--color-text-muted, #6f5872) !important;
    }

    .rectification-page-card .rectification-header > a.btn.btn-ghost,
    .rectification-page-card .rectification-header-action {
        grid-area: action;
        justify-self: end !important;
        align-self: start !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        font-size: 0.95rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
    }

    .rectification-page-card .rectification-header-action i {
        flex: 0 0 auto;
        margin: 0 !important;
        font-size: 0.95rem !important;
    }

    .rectification-page-card .rectification-back-text {
        display: none !important;
    }

    .rectification-page-card .rectification-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-top: 0 !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
    }

    .rectification-page-card .rectification-banner-chip {
        margin: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        padding: 7px 12px !important;
        letter-spacing: 0 !important;
    }

    .rectification-page-card .rectification-banner-text {
        margin: 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.45 !important;
        font-weight: 400 !important;
        color: var(--color-text-muted, #6f5872) !important;
    }
}

/* Unified toast layout repair */
.toast-message.mobile-toast {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
    width: fit-content !important;
    min-width: min(360px, calc(100vw - 32px)) !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.toast-message.mobile-toast .mobile-toast-icon,
.toast-message.mobile-toast .mobile-toast-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.86) !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.toast-message.mobile-toast .mobile-toast-icon i,
.toast-message.mobile-toast .mobile-toast-close i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.toast-message.mobile-toast .mobile-toast-content {
    min-width: 0 !important;
    align-self: center !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.toast-message.mobile-toast .mobile-toast-close {
    border: 0 !important;
    cursor: pointer !important;
}

@media (min-width: 768px) {
    .toast-container {
        width: auto !important;
        max-width: calc(100vw - 48px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        justify-items: center !important;
    }

    .toast-message.mobile-toast {
        min-width: 360px !important;
        max-width: min(560px, calc(100vw - 48px)) !important;
    }
}

@media (max-width: 767px) {
    .toast-container {
        width: min(100%, calc(100vw - 20px)) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        justify-items: stretch !important;
    }

    .toast-message.mobile-toast {
        width: 100% !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
    }
}

.toast-message.mobile-toast.toast-info,
.toast-message.mobile-toast.mobile-toast-info {
    background: #e0f2fe !important;
    border: 1px solid #38bdf8 !important;
    color: #075985 !important;
}

.toast-message.mobile-toast.toast-info .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-info .mobile-toast-icon,
.toast-message.mobile-toast.toast-info .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-info .mobile-toast-close {
    color: #075985 !important;
}

.toast-message.mobile-toast.toast-success,
.toast-message.mobile-toast.mobile-toast-success {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

.toast-message.mobile-toast.toast-success .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-icon,
.toast-message.mobile-toast.toast-success .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-success .mobile-toast-close {
    color: #166534 !important;
}

.toast-message.mobile-toast.toast-warning,
.toast-message.mobile-toast.mobile-toast-warning {
    background: #fef3c7 !important;
    border: 1px solid #facc15 !important;
    color: #92400e !important;
}

.toast-message.mobile-toast.toast-warning .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-warning .mobile-toast-icon,
.toast-message.mobile-toast.toast-warning .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-warning .mobile-toast-close {
    color: #92400e !important;
}

.toast-message.mobile-toast.toast-danger,
.toast-message.mobile-toast.toast-error,
.toast-message.mobile-toast.mobile-toast-danger,
.toast-message.mobile-toast.mobile-toast-error {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

.toast-message.mobile-toast.toast-danger .mobile-toast-icon,
.toast-message.mobile-toast.toast-error .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-danger .mobile-toast-icon,
.toast-message.mobile-toast.mobile-toast-error .mobile-toast-icon,
.toast-message.mobile-toast.toast-danger .mobile-toast-close,
.toast-message.mobile-toast.toast-error .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-danger .mobile-toast-close,
.toast-message.mobile-toast.mobile-toast-error .mobile-toast-close {
    color: #991b1b !important;
}

/* === FIX CANONICO: Historial de ordenes mobile + iPad vertical === */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-history-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-dialog.modal-content.client-orders-history-modal,
    #orders-history-modal .modal-dialog.modal-content.search-history-modal-content.client-orders-history-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        min-height: 0 !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orders-history-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 60px !important;
        padding: 14px 62px 12px 18px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
    }

    #orders-history-modal .modal-header h3 {
        margin: 0 !important;
        font-size: 1.16rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #orders-history-modal .modal-body.search-history-modal-body,
    #orders-history-modal .modal-scroll-area.search-history-modal-body,
    #orders-history-modal .search-history-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Filtros: solo busqueda + boton avanzado cerrado */
    #orders-history-modal .modal-filters-grid.history-filters,
    #orders-history-modal .history-filters,
    #orders-history-modal .search-history-mobile-filters {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 14px !important;
    }

    #orders-history-modal .search-history-filter-primary,
    #orders-history-modal .search-history-filter-search {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-filters-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 91, 168, 0.22) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }

    #orders-history-modal .search-history-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #orders-history-modal .search-history-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #orders-history-modal .search-history-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #orders-history-modal .search-history-advanced-filters[hidden] {
        display: none !important;
    }

    #orders-history-modal .search-history-advanced-filters:not([hidden]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.72) !important;
        border: 1px solid rgba(190, 220, 230, 0.55) !important;
    }

    #orders-history-modal .search-history-advanced-filters .filter-group,
    #orders-history-modal .search-history-advanced-filters .history-filter-group,
    #orders-history-modal .search-history-advanced-filters .search-history-filter {
        width: 100% !important;
        min-width: 0 !important;
    }

    #orders-history-modal .search-history-advanced-filters label,
    #orders-history-modal .search-history-filter-primary label,
    #orders-history-modal .search-history-filter-search label {
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    #orders-history-modal .search-history-advanced-filters input,
    #orders-history-modal .search-history-advanced-filters select,
    #orders-history-modal .search-history-filter-primary input,
    #orders-history-modal .search-history-filter-search input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #orders-history-modal .search-history-advanced-filters [data-history-clear] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    /* En mobile/iPad vertical nunca usar tabla */
    #orders-history-modal .search-history-table-wrapper {
        display: none !important;
    }

    #orders-history-modal .search-history-mobile-list {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 14px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
    }

    #orders-history-modal .search-history-mobile-card-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-code-wrap {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #orders-history-modal .search-history-mobile-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-item {
        display: grid !important;
        gap: 4px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.75) !important;
        border: 1px solid rgba(190, 220, 230, 0.5) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-kicker,
    #orders-history-modal .search-history-mobile-item span {
        display: block !important;
        color: #7b7188 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }

    #orders-history-modal .search-history-mobile-code,
    #orders-history-modal .search-history-mobile-item strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    #orders-history-modal .search-history-mobile-item--highlight {
        background: rgba(255, 247, 237, 0.92) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }

    #orders-history-modal .search-history-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #orders-history-modal .search-history-mobile-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }

    #orders-history-modal .search-history-mobile-card .pill-chip,
    #orders-history-modal .search-history-mobile-card .status-chip,
    #orders-history-modal .search-history-mobile-card .amount-pill {
        margin-left: 0 !important;
    }

    #orders-history-modal .history-empty-state {
        margin-top: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* Detalle de servicios - iPad horizontal como UI mobile/tablet vertical */
    #order-services-detail-modal-search {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px !important;
        overflow: hidden !important;
        z-index: 1350 !important;
    }

    #order-services-detail-modal-search.is-open {
        display: flex !important;
    }

    #order-services-detail-modal-search .modal-dialog.modal-content,
    #order-services-detail-modal-search .modal-dialog.modal-content.history-modal.large-modal {
        width: calc(100vw - 44px) !important;
        max-width: calc(100vw - 44px) !important;
        height: calc(100dvh - 44px) !important;
        max-height: calc(100dvh - 44px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--panel-surface) !important;
    }

    #order-services-detail-modal-search .modal-header {
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 16px 66px 14px 22px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(190, 220, 230, 0.7) !important;
        background: var(--panel-surface) !important;
        z-index: 2 !important;
    }

    #order-services-detail-modal-search .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #order-services-detail-modal-search .modal-close-btn {
        top: 11px !important;
        right: 14px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 15px !important;
    }

    #order-services-detail-modal-search .modal-body,
    #order-services-detail-modal-search .modal-scroll-area,
    #order-services-detail-modal-search .order-services-detail-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
        background: transparent !important;
    }

    #order-services-detail-modal-search .order-services-detail-meta {
        flex: 0 0 auto !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    #order-services-detail-modal-search .order-services-detail-table-wrapper,
    #order-services-detail-modal-search .table-wrapper.table-scroll-area {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-list[hidden] {
        display: none !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(190, 220, 230, 0.72) !important;
        box-shadow: 0 8px 20px rgba(38, 55, 90, 0.06) !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(244, 240, 248, 0.95) !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy span,
    #order-services-detail-modal-search .order-services-detail-mobile-item span {
        display: block !important;
        color: #7B7188 !important;
        font-size: 0.73rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-head-copy strong {
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 255, 0.88) !important;
        border: 1px solid rgba(190, 220, 230, 0.45) !important;
        overflow: visible !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item.is-full {
        grid-column: 1 / -1 !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-item strong {
        color: var(--text) !important;
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-subtotal,
    #order-services-detail-modal-search .order-services-detail-mobile-item.is-highlight {
        grid-column: 1 / -1 !important;
        background: #eef8f0 !important;
        border-color: #bde8cc !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-subtotal {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-subtotal-label {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
        color: #7B7188 !important;
        font-size: 0.73rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    #order-services-detail-modal-search .order-services-detail-mobile-subtotal-value {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        text-align: right !important;
        color: #1f7a45 !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /search/result iPad horizontal - separar subtitulo de cards en Pagos */
    .page-section > .content-card.full-width:has(.responsive-grid.three-cols) .section-header {
        margin-bottom: 14px !important;
    }

    .page-section > .content-card.full-width:has(.responsive-grid.three-cols) .section-subtitle {
        margin-bottom: 10px !important;
    }

    .page-section > .content-card.full-width:has(.responsive-grid.three-cols) .responsive-grid.three-cols {
        margin-top: 10px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /search/result - Editar cliente: compactar header en iPad horizontal */
    #client-edit-modal-search .modal-header {
        min-height: auto !important;
        padding: 16px 64px 14px 24px !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    #client-edit-modal-search .modal-header h3,
    #client-edit-modal-search .modal-header h2 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
    }

    #client-edit-modal-search .modal-subtitle,
    #client-edit-modal-search .modal-header p {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    #client-edit-modal-search .modal-body,
    #client-edit-modal-search .modal-scroll-area {
        padding-top: 16px !important;
    }

    #client-edit-modal-search .form-grid {
        gap: 14px 18px !important;
        margin-top: 0 !important;
    }

    #client-edit-modal-search .form-group {
        margin-top: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /search/result - Modal Corregir codigo compacto en iPad horizontal */
    #order-code-edit-modal .modal-dialog.modal-content,
    #order-code-edit-modal .modal-dialog,
    #order-code-edit-modal .modal-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 40px) !important;
        align-self: center !important;
    }

    #order-code-edit-modal .modal-body,
    #order-code-edit-modal .modal-scroll-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 20px !important;
    }

    #order-code-edit-modal form {
        margin-bottom: 0 !important;
    }

    #order-code-edit-modal .form-actions {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #order-code-edit-modal .form-actions .btn {
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    /* /search/result desktop - centrar solo el pill de Lealtad */
    .client-card .search-info-grid--client .info-item:last-child .loyalty-chip,
    .client-card .search-info-grid--client .info-item:last-child .pill-chip {
        justify-self: center !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* /search/result desktop - centrar solo los pills de Estado de la orden y Estado de pago */
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .pill-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) .status-chip,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) .status-chip {
        justify-self: center !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Asegurar que el titulo no se centre ni se mueva */
    .client-card .search-info-grid--client .info-item:last-child > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    [data-search-order-card] .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
        text-align: left !important;
        justify-self: start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1200px) {
    /* /search/result desktop - separar subtitulo de cards en Pagos */
    .page-section > .content-card.full-width:has(.responsive-grid.three-cols) .section-subtitle {
        margin-bottom: 18px !important;
    }

    .page-section > .content-card.full-width:has(.responsive-grid.three-cols) .responsive-grid.three-cols {
        margin-top: 8px !important;
    }
}

@media (min-width: 1200px) {
    /* Desktop - modales de acciones de orden ajustados al contenido */
    #order-code-edit-modal .modal-dialog.modal-content,
    #order-code-edit-modal .modal-dialog,
    #order-code-edit-modal .modal-content,
    #client-edit-modal-search .modal-dialog.modal-content,
    #client-edit-modal-search .modal-dialog,
    #client-edit-modal-search .modal-content,
    #order-void-modal-search .modal-dialog.modal-content,
    #order-void-modal-search .modal-dialog,
    #order-void-modal-search .modal-content,
    #historical-regularization-modal-search .modal-dialog.modal-content,
    #historical-regularization-modal-search .modal-dialog,
    #historical-regularization-modal-search .modal-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 64px) !important;
        align-self: center !important;
        overflow: hidden !important;
    }

    #order-code-edit-modal .modal-body,
    #order-code-edit-modal .modal-scroll-area,
    #client-edit-modal-search .modal-body,
    #client-edit-modal-search .modal-scroll-area,
    #order-void-modal-search .modal-body,
    #order-void-modal-search .modal-scroll-area,
    #historical-regularization-modal-search .modal-body,
    #historical-regularization-modal-search .modal-scroll-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 150px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 24px !important;
    }

    #order-code-edit-modal form,
    #client-edit-modal-search form,
    #order-void-modal-search form,
    #historical-regularization-modal-search form {
        margin-bottom: 0 !important;
    }

    #order-code-edit-modal .form-actions,
    #client-edit-modal-search .form-actions,
    #order-void-modal-search .form-actions,
    #historical-regularization-modal-search .form-actions {
        margin-top: 18px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #order-code-edit-modal .form-actions .btn,
    #client-edit-modal-search .form-actions .btn,
    #order-void-modal-search .form-actions .btn,
    #historical-regularization-modal-search .form-actions .btn {
        min-height: 48px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* iPad horizontal - modales de acciones de orden ajustados al contenido */
    #client-edit-modal-search .modal-dialog.modal-content,
    #client-edit-modal-search .modal-dialog,
    #client-edit-modal-search .modal-content,
    #order-code-edit-modal .modal-dialog.modal-content,
    #order-code-edit-modal .modal-dialog,
    #order-code-edit-modal .modal-content,
    #order-void-modal-search .modal-dialog.modal-content,
    #order-void-modal-search .modal-dialog,
    #order-void-modal-search .modal-content,
    #historical-regularization-modal-search .modal-dialog.modal-content,
    #historical-regularization-modal-search .modal-dialog,
    #historical-regularization-modal-search .modal-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 40px) !important;
        align-self: center !important;
        overflow: hidden !important;
    }

    #client-edit-modal-search .modal-body,
    #client-edit-modal-search .modal-scroll-area,
    #order-code-edit-modal .modal-body,
    #order-code-edit-modal .modal-scroll-area,
    #order-void-modal-search .modal-body,
    #order-void-modal-search .modal-scroll-area,
    #historical-regularization-modal-search .modal-body,
    #historical-regularization-modal-search .modal-scroll-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 132px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
    }

    #client-edit-modal-search form,
    #order-code-edit-modal form,
    #order-void-modal-search form,
    #historical-regularization-modal-search form {
        margin-bottom: 0 !important;
    }

    #client-edit-modal-search .form-actions,
    #order-code-edit-modal .form-actions,
    #order-void-modal-search .form-actions,
    #historical-regularization-modal-search .form-actions {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #client-edit-modal-search .form-actions .btn,
    #order-code-edit-modal .form-actions .btn,
    #order-void-modal-search .form-actions .btn,
    #historical-regularization-modal-search .form-actions .btn {
        min-height: 46px !important;
    }
}

@media (max-width: 767px) {
    #otherPendingOrdersModal .pending-orders-modal-content,
    #otherPendingOrdersModal .modal-dialog,
    #otherPendingOrdersModal .modal-content {
        width: min(100%, calc(100vw - 14px)) !important;
        height: calc(100dvh - 42px) !important;
        max-height: calc(100dvh - 42px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #otherPendingOrdersModal .modal-header {
        padding: 16px 48px 14px 16px !important;
        align-items: flex-start !important;
    }

    #otherPendingOrdersModal .modal-header h3 {
        margin: 0 !important;
        text-align: left !important;
        font-size: 1.12rem !important;
        line-height: 1.16 !important;
    }

    #otherPendingOrdersModal .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
    }

    #otherPendingOrdersModal .pending-orders-modal-body,
    #otherPendingOrdersModal .modal-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 16px 18px !important;
    }

    #otherPendingOrdersModal .pending-other-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #otherPendingOrdersModal .pending-other-filter-search {
        width: 100% !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .pending-other-filter-search input {
        width: 100% !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.9) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: var(--primary) !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
        filter: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters[hidden] {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-other-filter-status,
    #otherPendingOrdersModal .pending-other-filter-payment,
    #otherPendingOrdersModal .pending-other-filter-laundry,
    #otherPendingOrdersModal .pending-other-filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters *,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters .history-filter-group,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters .filter-group,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters .pending-other-filter-status,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters .pending-other-filter-payment,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters .pending-other-filter-laundry,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters .pending-other-filter-actions {
        box-shadow: none !important;
        filter: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters label,
    #otherPendingOrdersModal .pending-other-filter-search label {
        padding-top: 0 !important;
        margin-bottom: 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters input,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters select,
    #otherPendingOrdersModal .pending-other-filter-search input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-other-filter-actions .btn,
    #otherPendingOrdersModal .pending-orders-clear-btn {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-orders-desktop-results {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results[style] {
        display: grid !important;
    }

    #otherPendingOrdersModal [data-pending-other-card],
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card {
        display: grid !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 18px !important;
    }

    #otherPendingOrdersModal .mobile-order-header,
    #otherPendingOrdersModal .mobile-order-client-box {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #otherPendingOrdersModal .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric {
        display: grid !important;
        align-content: start !important;
        gap: 4px !important;
        min-height: 74px !important;
        padding: 10px !important;
    }

    #otherPendingOrdersModal .mobile-order-actions,
    #otherPendingOrdersModal .mobile-order-detail-btn {
        display: flex !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #otherPendingOrdersModal .mobile-order-detail-btn {
        min-height: 44px !important;
        justify-content: center !important;
    }

    #otherPendingOrdersModal .history-empty-state {
        margin: 0 !important;
        min-height: 120px !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.86) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions .btn,
    #otherPendingOrdersModal .orders-modal-pagination-actions .pagination-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-summary {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-status {
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results + .orders-modal-pagination {
        margin-top: 12px !important;
    }

    .page-section.page-shell:has(.orders-mobile-section-switcher) {
        gap: 8px !important;
        row-gap: 8px !important;
    }

    body:has(.orders-mobile-section-switcher) .content-area.page-content,
    body:has(.orders-mobile-section-switcher) .content-area,
    body:has(.orders-mobile-section-switcher) .page-content {
        padding-bottom: 16px !important;
    }

    body:has(.client-search-card) .content-area.page-content,
    body:has(.client-search-card) .content-area,
    body:has(.client-search-card) .page-content {
        padding-bottom: 16px !important;
    }

    body:has(.orders-mobile-section-switcher) .page-section.page-shell {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body:has(.orders-mobile-section-switcher) [data-orders-mobile-panel] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body:has(.orders-mobile-section-switcher) .page-section,
    body:has(.orders-mobile-section-switcher) .page-shell,
    body:has(.client-search-card) .page-section,
    body:has(.client-search-card) .page-shell {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body:has(.orders-mobile-section-switcher) .mobile-orders-list,
    body:has(.orders-mobile-section-switcher) .orders-total-mobile-list,
    body:has(.orders-mobile-section-switcher) .orders-pending-mobile-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body:has(.orders-mobile-section-switcher) .mobile-order-card:last-child {
        margin-bottom: 0 !important;
    }

    body:has(.client-search-card) .content-card:last-child,
    body:has(.client-search-card) .order-detail-section-card:last-child,
    body:has(.client-search-card) .payment-final-card,
    body:has(.client-search-card) .order-payment-card:last-child {
        margin-bottom: 0 !important;
    }

    .orders-mobile-section-switcher {
        position: sticky;
        top: 8px;
        z-index: 80;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: -2px 0 8px !important;
        padding: 8px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(180, 207, 221, 0.8);
        box-shadow: 0 12px 26px rgba(47, 36, 64, 0.1);
        backdrop-filter: blur(14px);
    }

    .orders-mobile-section-switcher-btn {
        min-height: 42px;
        border: 1px solid rgba(74, 91, 168, 0.18);
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.88);
        color: var(--primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        box-shadow: none;
    }

    .orders-mobile-section-switcher-btn i {
        font-size: 13px;
    }

    .orders-mobile-section-switcher-btn.is-active {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(74, 91, 168, 0.18);
    }

    [data-orders-mobile-panel="today"] {
        display: block !important;
    }

    [data-orders-mobile-panel="total"] {
        display: none !important;
    }

    body.orders-mobile-tab-total [data-orders-mobile-panel="today"] {
        display: none !important;
    }

    body.orders-mobile-tab-total [data-orders-mobile-panel="total"] {
        display: block !important;
        padding-bottom: 18px !important;
        margin-bottom: 0 !important;
    }

    body.orders-mobile-tab-today [data-orders-mobile-panel="today"] {
        display: block !important;
        padding-bottom: 18px !important;
        margin-bottom: 0 !important;
    }

    body.orders-mobile-tab-today [data-orders-mobile-panel="total"] {
        display: none !important;
    }

    .orders-mobile-section-switcher + [data-orders-mobile-panel],
    .orders-mobile-section-switcher + #orders-today-section,
    .orders-mobile-section-switcher + #orders-total-section {
        margin-top: 0 !important;
    }

    [data-orders-mobile-panel].card,
    #orders-today-section,
    #orders-total-section {
        margin-top: 0 !important;
    }

    #orders-today-section .orders-quick-toggle {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #orders-today-section .orders-quick-toggle-btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding-inline: 10px !important;
    }

    #orders-today-section .orders-quick-toggle-btn span:first-child {
        min-width: 0 !important;
        text-align: center !important;
    }

    .mobile-order-code {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
        line-height: 1.2 !important;
    }

    .mobile-order-code-stack {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .mobile-order-code-label {
        color: var(--primary) !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
    }

    .mobile-order-special-pill,
    .mobile-order-code .rectification-order-pill,
    .mobile-order-code .legacy-order-pill,
    .mobile-order-code .order-voided-pill,
    .mobile-order-code .order-code-special-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-height: 24px !important;
        padding: 4px 9px !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .mobile-order-special-pill i,
    .mobile-order-code .rectification-order-pill i,
    .mobile-order-code .legacy-order-pill i,
    .mobile-order-code .order-voided-pill i,
    .mobile-order-code .order-code-special-pill i {
        font-size: 0.68rem !important;
        line-height: 1 !important;
    }

    .mobile-order-code .rectification-order-pill,
    .rectification-order-pill.mobile-order-special-pill {
        background: rgba(139, 92, 246, 0.14) !important;
        border: 1px solid rgba(139, 92, 246, 0.28) !important;
        color: #6d28d9 !important;
    }

    .mobile-order-code .legacy-order-pill,
    .legacy-order-pill.mobile-order-special-pill {
        background: rgba(99, 102, 241, 0.13) !important;
        border: 1px solid rgba(99, 102, 241, 0.26) !important;
        color: #4338ca !important;
    }

    .mobile-order-code .order-code-pill--regularized,
    .order-code-pill--regularized.mobile-order-special-pill {
        background: rgba(124, 58, 237, 0.14) !important;
        border: 1px solid rgba(124, 58, 237, 0.28) !important;
        color: #5b21b6 !important;
    }

    .mobile-order-code .order-voided-pill,
    .order-voided-pill.mobile-order-special-pill {
        background: rgba(71, 85, 105, 0.12) !important;
        border: 1px solid rgba(71, 85, 105, 0.24) !important;
        color: #334155 !important;
    }

    .mobile-order-special-pill span,
    .mobile-order-special-pill .order-code-pill__text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: 600 !important;
    }

    .mobile-order-metric > span,
    .mobile-order-metric span:first-of-type {
        font-weight: 600 !important;
    }

    .mobile-order-metric > strong {
        font-weight: 700 !important;
    }

    .mobile-order-metric strong {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        line-height: 1.15 !important;
    }

    .mobile-order-metric-icon.metric-payment + span + strong,
    .mobile-order-metric-icon.metric-payment-pending + span + strong,
    .mobile-order-metric-icon.metric-debt + span + strong {
        font-weight: 600 !important;
    }

    .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong {
        font-weight: 600 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) strong,
    .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) strong {
        font-weight: 600 !important;
    }

    body.orders-mobile-tab-total [data-orders-mobile-panel="total"] .mobile-orders-list,
    body.orders-mobile-tab-total [data-orders-mobile-panel="total"] .orders-total-mobile-list,
    body.orders-mobile-tab-today [data-orders-mobile-panel="today"] .mobile-orders-list,
    body.orders-mobile-tab-today [data-orders-mobile-panel="today"] .orders-pending-mobile-list {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.orders-mobile-tab-total [data-orders-mobile-panel="total"] .mobile-order-card:last-child,
    body.orders-mobile-tab-today [data-orders-mobile-panel="today"] .mobile-order-card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 768px) {
    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters[hidden] {
        display: contents !important;
    }

    .orders-mobile-section-switcher {
        display: none !important;
    }

    [data-orders-mobile-panel="today"],
    [data-orders-mobile-panel="total"] {
        display: block !important;
    }
}

@media (max-width: 767px) {
    #order-detail-modal-orders .modal-header {
        align-items: flex-start !important;
        padding-bottom: 14px !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading {
        width: 100% !important;
        text-align: left !important;
        justify-items: start !important;
        align-items: start !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading h3,
    #order-detail-modal-orders .order-detail-modal-heading p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
        margin-bottom: 8px !important;
    }

    #order-detail-modal-orders .order-detail-header-void-btn,
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders .order-detail-search-link {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        justify-content: center !important;
    }

    #order-detail-modal-orders .order-detail-search-link {
        display: inline-flex !important;
    }

    #order-detail-modal-orders .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 2 !important;
    }

    #order-detail-modal-orders .search-info-grid--client .info-item:last-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #order-detail-modal-orders .search-info-grid--client .info-item:last-child > span:first-child {
        grid-column: 1 !important;
        text-align: left !important;
        justify-self: start !important;
    }

    #order-detail-modal-orders .search-info-grid--client .info-item:last-child > strong {
        grid-column: 2 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #order-detail-modal-orders .search-info-grid--client .info-item:last-child .pill-chip {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(2),
    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(1) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(2) > span:first-child,
    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(1) > span:first-child {
        grid-column: 1 !important;
        text-align: left !important;
        justify-self: start !important;
    }

    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(2) > strong,
    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(1) > strong {
        grid-column: 2 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(2) .pill-chip,
    #order-detail-modal-orders .search-info-grid--order .info-item:nth-last-child(1) .pill-chip {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #order-detail-modal-orders .modal-body.order-detail-modal-body {
        padding-top: 14px !important;
    }

    #order-detail-modal-orders .order-detail-services-list {
        display: grid !important;
        gap: 10px !important;
    }

    #order-detail-modal-orders .order-detail-service-row {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        grid-template-areas: "icon copy amount" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
        min-height: 86px !important;
        border-radius: 18px !important;
    }

    #order-detail-modal-orders .order-detail-service-icon {
        grid-area: icon !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
    }

    #order-detail-modal-orders .order-detail-service-icon i {
        font-size: 15px !important;
    }

    #order-detail-modal-orders .order-detail-service-copy {
        grid-area: copy !important;
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
        align-content: center !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: block !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-head strong {
        display: block !important;
        max-width: 100% !important;
        color: var(--primary) !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #order-detail-modal-orders .order-detail-service-detail {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: var(--muted) !important;
        font-size: 0.73rem !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
    }

    #order-detail-modal-orders .order-detail-service-meta {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #order-detail-modal-orders .order-detail-service-meta span {
        display: inline !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        grid-area: amount !important;
        width: auto !important;
        min-width: 68px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        width: auto !important;
        min-width: 0 !important;
        padding: 7px 9px !important;
        border-radius: 999px !important;
        background: rgba(74, 91, 168, 0.08) !important;
        text-align: right !important;
        color: var(--primary) !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    /* Reparacion modal Ordenes pendientes: contenedor de resultados */
    #otherPendingOrdersModal .pending-orders-desktop-results {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results[style] {
        display: grid !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Reparacion modal Ordenes pendientes: card completa */
    #otherPendingOrdersModal [data-pending-other-card],
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow: visible !important;
        border-radius: 18px !important;
        position: relative !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-header-copy {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-code {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-subline {
        display: block !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        color: var(--muted) !important;
        white-space: normal !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-status-pill {
        flex: 0 0 auto !important;
        align-self: flex-start !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 58px !important;
        max-height: none !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-client-info {
        display: grid !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-client-info strong,
    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-client-info span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-metric {
        display: grid !important;
        align-content: start !important;
        gap: 4px !important;
        min-width: 0 !important;
        min-height: 76px !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-metric > span {
        font-weight: 600 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-metric > strong {
        line-height: 1.15 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong {
        font-weight: 600 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-actions {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination {
        position: static !important;
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        text-align: center !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions .btn,
    #otherPendingOrdersModal .orders-modal-pagination-actions .pagination-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* Restaurar colores de metricas en modal Ordenes pendientes */
    #otherPendingOrdersModal .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-total {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-total i {
        color: #2563eb !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt i,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment-pending i {
        color: #f97316 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt-paid,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #otherPendingOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt-paid i,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment i {
        color: #16a34a !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon i {
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > span {
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > strong {
        color: var(--primary) !important;
        line-height: 1.15 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong {
        font-weight: 600 !important;
    }

    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) strong,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) strong {
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* Todas las ordenes - modal mobile */
    #allOrdersModal .all-orders-modal-content,
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content {
        width: min(100%, calc(100vw - 14px)) !important;
        height: calc(100dvh - 42px) !important;
        max-height: calc(100dvh - 42px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #allOrdersModal .all-orders-modal-header,
    #allOrdersModal .modal-header {
        padding: 16px 48px 14px 16px !important;
        align-items: flex-start !important;
    }

    #allOrdersModal .modal-header h3 {
        margin: 0 !important;
        text-align: left !important;
        font-size: 1.12rem !important;
        line-height: 1.16 !important;
    }

    #allOrdersModal .modal-close-btn,
    #allOrdersModal .all-orders-modal-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
    }

    #allOrdersModal .all-orders-modal-body,
    #allOrdersModal .modal-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 16px 18px !important;
    }

    #allOrdersModal .orders-total-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #allOrdersModal .orders-filter-search {
        width: 100% !important;
        margin: 0 !important;
    }

    #allOrdersModal .orders-filter-search input {
        width: 100% !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(188, 201, 236, 0.9) !important;
        box-shadow: none !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        justify-content: space-between !important;
        padding-inline: 14px !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle-copy {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle-chevron {
        transition: transform 0.18s ease !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle.is-open .all-orders-mobile-filters-toggle-chevron {
        transform: rotate(180deg) !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
        filter: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters[hidden] {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters *,
    #allOrdersModal .all-orders-mobile-advanced-filters .filter-group,
    #allOrdersModal .all-orders-mobile-advanced-filters .history-filter-group {
        box-shadow: none !important;
        filter: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .filter-group,
    #allOrdersModal .all-orders-mobile-advanced-filters .history-filter-group,
    #allOrdersModal .all-orders-mobile-advanced-filters .filter-actions {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters label {
        margin-bottom: 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters select,
    #allOrdersModal .all-orders-mobile-advanced-filters input {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .orders-filter-actions,
    #allOrdersModal .all-orders-mobile-advanced-filters .filter-actions {
        display: flex !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .orders-filter-actions .btn,
    #allOrdersModal .all-orders-mobile-advanced-filters [data-orders-total-clear] {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .orders-total-table-shell {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #allOrdersModal .all-orders-mobile-results[style],
    #allOrdersModal .orders-modal-results-mobile[style] {
        display: grid !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #allOrdersModal [data-orders-total-card],
    #allOrdersModal .all-orders-mobile-results .mobile-order-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow: visible !important;
        border-radius: 18px !important;
        position: relative !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-header-copy {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-code {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-subline {
        display: block !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        color: var(--muted) !important;
        white-space: normal !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-client-info {
        display: grid !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-client-info strong,
    #allOrdersModal [data-orders-total-card] .mobile-order-client-info span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-metric {
        display: grid !important;
        align-content: start !important;
        gap: 4px !important;
        min-width: 0 !important;
        min-height: 76px !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-actions,
    #allOrdersModal [data-orders-total-card] .mobile-order-footer {
        display: block !important;
        width: 100% !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #allOrdersModal .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-total {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-total i {
        color: #2563eb !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-debt,
    #allOrdersModal .mobile-order-metric-icon.metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-debt i,
    #allOrdersModal .mobile-order-metric-icon.metric-payment-pending i {
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #allOrdersModal .mobile-order-metric-icon.metric-debt-paid,
    #allOrdersModal .mobile-order-metric-icon.metric-payment {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #allOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #allOrdersModal .mobile-order-metric-icon.metric-debt-paid i,
    #allOrdersModal .mobile-order-metric-icon.metric-payment i {
        color: #16a34a !important;
    }

    #allOrdersModal .mobile-order-metric > span {
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #allOrdersModal .mobile-order-metric > strong {
        color: var(--primary) !important;
        line-height: 1.15 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #allOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong {
        font-weight: 600 !important;
    }

    #allOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) strong,
    #allOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) strong {
        font-weight: 700 !important;
    }

    #allOrdersModal .orders-modal-pagination {
        position: static !important;
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #allOrdersModal .orders-modal-pagination-status {
        text-align: center !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #allOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-pagination-actions button,
    #allOrdersModal .orders-modal-pagination-actions .btn,
    #allOrdersModal .orders-modal-pagination-actions .pagination-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 1200px) {
    #allOrdersModal .all-orders-mobile-filters-toggle {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters,
    #allOrdersModal .all-orders-mobile-advanced-filters[hidden] {
        display: contents !important;
    }
}

@media (max-width: 767px) {
    /* Ordenes pendientes modal: mantener cards mobile con el mismo patron limpio */
    #otherPendingOrdersModal [data-pending-other-card] {
        grid-template-columns: 1fr !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-header > .mobile-status-pill {
        display: inline-flex !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] > .mobile-status-pill,
    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-status-row,
    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-label,
    #otherPendingOrdersModal [data-pending-other-card] [data-order-void-trigger],
    #otherPendingOrdersModal [data-pending-other-card] .order-void-trigger,
    #otherPendingOrdersModal [data-pending-other-card] .order-detail-header-void-btn {
        display: none !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-actions {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-actions .mobile-order-detail-btn,
    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

@media (max-width: 767px) {
    /* Mobile - modal Detalle siempre encima de modales de listado */
    #allOrdersModal.is-open,
    #otherPendingOrdersModal.is-open {
        z-index: 1050 !important;
    }

    #order-detail-modal-orders.is-open,
    .modal.modal-stacked-top {
        z-index: 1100 !important;
    }

    #order-detail-modal-orders.is-open .modal-dialog,
    #order-detail-modal-orders.is-open .modal-content,
    .modal.modal-stacked-top .modal-dialog,
    .modal.modal-stacked-top .modal-content {
        z-index: 1101 !important;
    }
}

@media (max-width: 767px) {
    /* Todas las ordenes mobile: usar solo el heading canonico para ordenes especiales */
    #allOrdersModal [data-orders-total-card] .mobile-order-header-copy:has(.mobile-order-code--canonical) > .mobile-order-code:not(.mobile-order-code--canonical),
    #allOrdersModal [data-orders-total-card] .mobile-order-header-copy:has(.mobile-order-code--canonical) > .mobile-order-code-pill-wrap {
        display: none !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-code--canonical {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #allOrdersModal [data-orders-total-card] .mobile-order-code--canonical .mobile-order-special-pill,
    #allOrdersModal [data-orders-total-card] .mobile-order-code--canonical .mobile-order-special-pill span,
    #allOrdersModal [data-orders-total-card] .mobile-order-code--canonical .order-code-pill__text {
        font-weight: 600 !important;
    }
}

@media (max-width: 767px) {
    /* Todas las ordenes mobile - orden regularizada historica en azul como desktop */
    #allOrdersModal .order-code-special-pill.order-code-pill--regularized,
    #allOrdersModal .order-code-pill--regularized.mobile-order-special-pill,
    #allOrdersModal .mobile-order-code .order-code-pill--regularized {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-height: 24px !important;
        padding: 4px 9px !important;
        border-radius: 999px !important;
        background: rgba(96, 165, 250, 0.16) !important;
        border: 1px solid rgba(96, 165, 250, 0.36) !important;
        color: #2563eb !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    #allOrdersModal .order-code-special-pill.order-code-pill--regularized span,
    #allOrdersModal .order-code-special-pill.order-code-pill--regularized .order-code-pill__text,
    #allOrdersModal .order-code-pill--regularized.mobile-order-special-pill span,
    #allOrdersModal .order-code-pill--regularized.mobile-order-special-pill .order-code-pill__text {
        color: #2563eb !important;
        font-weight: 600 !important;
    }

    #allOrdersModal .order-code-special-pill.order-code-pill--regularized i,
    #allOrdersModal .order-code-special-pill.order-code-pill--regularized .order-code-pill__icon,
    #allOrdersModal .order-code-pill--regularized.mobile-order-special-pill i,
    #allOrdersModal .order-code-pill--regularized.mobile-order-special-pill .order-code-pill__icon {
        color: #2563eb !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767px) {
    /*
      Detalle de orden mobile: el pill especial de Orden principal
      debe vivir solo dentro del banner informativo.
    */
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-actions > .order-detail-status-pill,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-actions > .order-voided-chip,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-actions > .order-regularized-chip,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-copy-row > .order-voided-chip,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-copy-row > .order-regularized-chip,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-copy-row > .rectification-header-chip,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-copy-row > .rectification-banner-chip,
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-copy-row > .order-detail-section-floating-chip {
        display: none !important;
    }

    #order-detail-modal-orders .order-detail-section-copy-row {
        display: block !important;
    }

    #order-detail-modal-orders .order-detail-section-copy-row .section-title {
        text-align: left !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .rectification-order-banner,
    #order-detail-modal-orders .order-voided-banner,
    #order-detail-modal-orders .order-regularized-banner,
    #order-detail-modal-orders .order-historical-regularization-banner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: start !important;
        align-items: start !important;
        gap: 10px !important;
        text-align: left !important;
    }

    #order-detail-modal-orders .rectification-order-banner .pill-chip,
    #order-detail-modal-orders .order-voided-banner .pill-chip,
    #order-detail-modal-orders .order-regularized-banner .pill-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .pill-chip,
    #order-detail-modal-orders .rectification-order-banner .rectification-banner-chip,
    #order-detail-modal-orders .order-voided-banner .order-voided-banner-chip,
    #order-detail-modal-orders .order-regularized-banner .order-regularized-banner-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .order-regularized-chip {
        justify-self: start !important;
        align-self: start !important;
        margin: 0 !important;
        width: fit-content !important;
        max-width: 100% !important;
        font-weight: 600 !important;
    }

    #order-detail-modal-orders .rectification-order-banner-text,
    #order-detail-modal-orders .order-voided-banner-copy,
    #order-detail-modal-orders .order-regularized-banner-text,
    #order-detail-modal-orders .order-historical-regularization-copy {
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .rectification-order-banner-text p,
    #order-detail-modal-orders .order-voided-banner-copy p,
    #order-detail-modal-orders .order-regularized-banner-text p,
    #order-detail-modal-orders .order-historical-regularization-copy p {
        margin: 0 !important;
        text-align: left !important;
    }
}

/* Sistema de pills/badges - peso visual consistente */
.pill-chip,
.status-chip,
.loyalty-chip,
.amount-pill,
.order-status-pill,
.order-code-special-pill,
.order-code-pill--regularized,
.order-code-pill--voided,
.order-code-pill--rectification,
.order-code-pill--legacy,
.order-voided-pill,
.rectification-order-pill,
.legacy-order-pill,
.rectification-banner-chip,
.rectification-header-chip,
.order-voided-chip,
.order-voided-banner-chip,
.order-regularized-chip,
.order-regularized-banner-chip,
.order-detail-status-pill,
.order-detail-service-status,
.order-detail-payment-method,
.mobile-order-special-pill,
.mobile-status-pill,
.payment-summary-chip,
.legacy-chip,
.rectification-chip {
    font-weight: 700 !important;
}

.pill-chip span,
.status-chip span,
.loyalty-chip span,
.amount-pill span,
.order-code-special-pill span,
.order-code-special-pill .order-code-pill__text,
.order-code-pill--regularized span,
.order-code-pill--regularized .order-code-pill__text,
.order-voided-pill span,
.rectification-order-pill span,
.legacy-order-pill span,
.rectification-banner-chip span,
.order-voided-banner-chip span,
.order-regularized-chip span,
.order-regularized-banner-chip span,
.mobile-order-special-pill span,
.mobile-order-special-pill .order-code-pill__text {
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    /* Modales de ordenes: quitar filas/acciones extra del patron mobile */
    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-line,
    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-secondary-btn,
    #otherPendingOrdersModal [data-pending-other-card] [data-order-void-trigger],
    #allOrdersModal [data-orders-total-card] .mobile-order-line,
    #allOrdersModal [data-orders-total-card] .mobile-order-secondary-btn,
    #allOrdersModal [data-orders-total-card] [data-order-void-trigger] {
        display: none !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-header,
    #allOrdersModal [data-orders-total-card] .mobile-order-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-actions,
    #allOrdersModal [data-orders-total-card] .mobile-order-actions {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #otherPendingOrdersModal [data-pending-other-card] .mobile-order-detail-btn,
    #allOrdersModal [data-orders-total-card] .mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

@media (max-width: 767px) {
    /* Detalle de orden mobile - pills especiales con peso consistente */
    #order-detail-modal-orders .rectification-order-banner .pill-chip,
    #order-detail-modal-orders .rectification-order-banner .rectification-banner-chip,
    #order-detail-modal-orders .rectification-banner-chip,
    #order-detail-modal-orders .order-voided-banner-chip,
    #order-detail-modal-orders .order-code-special-pill,
    #order-detail-modal-orders .order-code-pill--regularized,
    #order-detail-modal-orders .order-regularized-chip,
    #order-detail-modal-orders .order-voided-chip,
    #order-detail-modal-orders .legacy-order-pill,
    #order-detail-modal-orders .rectification-order-pill {
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .rectification-order-banner .pill-chip span,
    #order-detail-modal-orders .rectification-order-banner .rectification-banner-chip span,
    #order-detail-modal-orders .rectification-banner-chip span,
    #order-detail-modal-orders .order-voided-banner-chip span,
    #order-detail-modal-orders .order-code-special-pill span,
    #order-detail-modal-orders .order-code-pill--regularized span,
    #order-detail-modal-orders .order-code-pill__text,
    #order-detail-modal-orders .order-regularized-chip span,
    #order-detail-modal-orders .order-voided-chip span,
    #order-detail-modal-orders .legacy-order-pill span,
    #order-detail-modal-orders .rectification-order-pill span {
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .rectification-order-banner .pill-chip i,
    #order-detail-modal-orders .rectification-banner-chip i,
    #order-detail-modal-orders .order-voided-banner-chip i,
    #order-detail-modal-orders .order-code-special-pill i,
    #order-detail-modal-orders .order-code-pill--regularized i,
    #order-detail-modal-orders .order-code-pill__icon {
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* Pill azul de orden regularizada dentro del bloque informativo */
    #order-detail-modal-orders .order-regularized-banner .pill-chip,
    #order-detail-modal-orders .order-regularized-banner .pill-chip span,
    #order-detail-modal-orders .order-regularized-banner .pill-chip strong,
    #order-detail-modal-orders .order-regularized-banner .pill-chip b,
    #order-detail-modal-orders .order-regularized-banner .order-code-special-pill,
    #order-detail-modal-orders .order-regularized-banner .order-code-special-pill span,
    #order-detail-modal-orders .order-regularized-banner .order-code-pill--regularized,
    #order-detail-modal-orders .order-regularized-banner .order-code-pill--regularized span,
    #order-detail-modal-orders .order-regularized-banner .order-code-pill__text,
    #order-detail-modal-orders .order-regularized-banner .regularized-order-pill,
    #order-detail-modal-orders .order-regularized-banner .regularized-order-pill span,
    #order-detail-modal-orders .order-historical-regularization-banner .pill-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .pill-chip span,
    #order-detail-modal-orders .order-historical-regularization-banner .order-regularized-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .order-regularized-chip span,
    #order-detail-modal-orders .order-historical-regularization-banner .order-regularized-banner-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .order-regularized-banner-chip span {
        font-weight: 700 !important;
    }
}

/* Detalle de orden - variante morada consistente para rectificacion sin cobro */
#order-detail-modal-orders .order-detail-modal-code .rectification-header-chip,
#order-detail-modal-orders .order-detail-modal-code .rectification-banner-chip,
#order-detail-modal-orders .pill-chip.rectification-header-chip,
#order-detail-modal-orders .pill-chip.rectification-banner-chip {
    background: #ebddff !important;
    border: 1px solid #d5bbff !important;
    color: #7b3fc6 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    /*
      Detalle de orden mobile:
      compactar solo el pill superior del header.
    */
    #order-detail-modal-orders .order-detail-modal-code {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-width: calc(100% - 48px) !important;
        line-height: 1.2 !important;
    }

    #order-detail-modal-orders .order-detail-modal-code .pill-chip,
    #order-detail-modal-orders .order-detail-modal-code .rectification-banner-chip,
    #order-detail-modal-orders .order-detail-modal-code .rectification-order-pill,
    #order-detail-modal-orders .order-detail-modal-code .order-code-special-pill,
    #order-detail-modal-orders .order-detail-modal-code .order-code-pill--regularized,
    #order-detail-modal-orders .order-detail-modal-code .order-voided-pill,
    #order-detail-modal-orders .order-detail-modal-code .legacy-order-pill {
        width: fit-content !important;
        max-width: 170px !important;
        min-height: 22px !important;
        padding: 3px 9px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
        flex: 0 1 auto !important;
    }

    #order-detail-modal-orders .order-detail-modal-code .pill-chip span,
    #order-detail-modal-orders .order-detail-modal-code .rectification-banner-chip span,
    #order-detail-modal-orders .order-detail-modal-code .rectification-order-pill span,
    #order-detail-modal-orders .order-detail-modal-code .order-code-special-pill span,
    #order-detail-modal-orders .order-detail-modal-code .order-code-pill__text,
    #order-detail-modal-orders .order-detail-modal-code .order-voided-pill span,
    #order-detail-modal-orders .order-detail-modal-code .legacy-order-pill span {
        font-size: inherit !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .order-detail-modal-code .pill-chip i,
    #order-detail-modal-orders .order-detail-modal-code .order-code-special-pill i,
    #order-detail-modal-orders .order-detail-modal-code .order-code-pill__icon,
    #order-detail-modal-orders .order-detail-modal-code .order-voided-pill i,
    #order-detail-modal-orders .order-detail-modal-code .legacy-order-pill i {
        font-size: 0.62rem !important;
        line-height: 1 !important;
    }

    #order-detail-modal-orders .order-detail-modal-code .rectification-banner-chip,
    #order-detail-modal-orders .order-detail-modal-code .rectification-order-pill {
        background: rgba(139, 92, 246, 0.14) !important;
        border: 1px solid rgba(139, 92, 246, 0.28) !important;
        color: #6d28d9 !important;
    }
}

@media (max-width: 767px) {
    /* Todas las ordenes mobile - paginacion visible y compacta */
    #allOrdersModal .orders-modal-pagination {
        position: static !important;
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #allOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-pagination-actions button,
    #allOrdersModal .orders-modal-pagination-actions .btn,
    #allOrdersModal .orders-modal-pagination-actions .pagination-btn,
    #allOrdersModal .orders-modal-page-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .orders-modal-pagination-status {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #allOrdersModal .all-orders-mobile-results + .orders-modal-pagination,
    #allOrdersModal .orders-modal-results-mobile + .orders-modal-pagination {
        margin-top: 12px !important;
    }

    #allOrdersModal .all-orders-modal-body,
    #allOrdersModal .modal-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 18px !important;
    }
}

@media (max-width: 767px) {
    /* Detalle de orden mobile - mostrar texto en boton Anular orden */
    #order-detail-modal-orders .order-detail-header-void-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    #order-detail-modal-orders .order-detail-header-void-btn i {
        flex: 0 0 auto !important;
        font-size: 0.92rem !important;
    }

    #order-detail-modal-orders .order-detail-header-void-btn span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* Detalle de orden mobile - respetar acciones ocultas */
    #order-detail-modal-orders .order-detail-header-void-btn[hidden],
    #order-detail-modal-orders .order-detail-audit-menu[hidden],
    #order-detail-modal-orders .order-detail-audit-trigger[hidden] {
        display: none !important;
    }

    /* Detalle de orden mobile - boton existente de auditoria con texto */
    #order-detail-modal-orders .order-detail-audit-trigger {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    #order-detail-modal-orders .order-detail-audit-trigger i {
        flex: 0 0 auto !important;
        font-size: 0.92rem !important;
    }

    #order-detail-modal-orders .order-detail-audit-trigger span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      Mobile - estandarizar tamano de modales de ordenes.
      Iguala Otros pendientes y Todas las ordenes al modal Historial de ordenes.
    */
    #otherPendingOrdersModal .modal-dialog,
    #otherPendingOrdersModal .modal-content,
    #otherPendingOrdersModal .pending-orders-modal-content,
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .all-orders-modal-content {
        width: min(100%, calc(100vw - 24px)) !important;
        height: calc(100dvh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        min-height: 0 !important;
        margin: 16px auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #otherPendingOrdersModal .modal-header,
    #allOrdersModal .modal-header,
    #allOrdersModal .all-orders-modal-header {
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 16px 54px 14px 16px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #otherPendingOrdersModal .modal-header h3,
    #allOrdersModal .modal-header h3,
    #allOrdersModal .all-orders-modal-header h3 {
        margin: 0 !important;
        text-align: left !important;
        font-size: 1.12rem !important;
        line-height: 1.18 !important;
    }

    #otherPendingOrdersModal .modal-close-btn,
    #allOrdersModal .modal-close-btn,
    #allOrdersModal .all-orders-modal-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    #otherPendingOrdersModal .modal-body,
    #otherPendingOrdersModal .pending-orders-modal-body,
    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 16px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
}

@media (max-width: 767px) {
    /* Ordenes del cliente en rectificacion - cards mobile ordenadas */
    #rectification-client-orders-modal .rectification-order-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #rectification-client-orders-modal .rectification-order-card-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #rectification-client-orders-modal .rectification-order-card-copy,
    #rectification-client-orders-modal .rectification-order-card-head > div {
        min-width: 0 !important;
    }

    #rectification-client-orders-modal .rectification-order-card-head strong {
        display: block !important;
        min-width: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        font-size: 0.98rem !important;
        line-height: 1.18 !important;
    }

    #rectification-client-orders-modal .rectification-order-card-meta {
        display: block !important;
        margin-top: 2px !important;
    }

    #rectification-client-orders-modal .rectification-order-card-meta span {
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    #rectification-client-orders-modal .rectification-order-status {
        justify-self: end !important;
        align-self: start !important;
        margin: 0 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    #rectification-client-orders-modal .rectification-order-card-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    #rectification-client-orders-modal .rectification-order-services {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #rectification-client-orders-modal .rectification-order-services-label {
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    #rectification-client-orders-modal .rectification-order-services-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-height: 58px !important;
        overflow: hidden !important;
    }

    #rectification-client-orders-modal .rectification-order-service-chip {
        max-width: 100% !important;
        min-height: 26px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #rectification-client-orders-modal .rectification-order-select-btn,
    #rectification-client-orders-modal .rectification-order-card .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        justify-content: center !important;
        margin-top: 2px !important;
    }
}

@media (max-width: 767px) {
    /*
      Ordenes del cliente mobile:
      igualar tamano al modal Historial de ordenes.
    */
    #rectification-client-orders-modal .modal-dialog,
    #rectification-client-orders-modal .modal-content,
    #rectification-client-orders-modal .rectification-orders-modal-shell {
        width: min(100%, calc(100vw - 24px)) !important;
        height: calc(100dvh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        min-height: 0 !important;
        margin: 16px auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #rectification-client-orders-modal .modal-header {
        flex: 0 0 auto !important;
        min-height: 70px !important;
        padding: 16px 54px 14px 16px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
        display: grid !important;
        align-items: start !important;
        gap: 2px !important;
    }

    #rectification-client-orders-modal .modal-header h3 {
        margin: 0 !important;
        text-align: left !important;
        font-size: 1.12rem !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
    }

    #rectification-client-orders-modal .modal-header p,
    #rectification-client-orders-modal .modal-subtitle {
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }

    #rectification-client-orders-modal .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    #rectification-client-orders-modal .modal-body,
    #rectification-client-orders-modal .rectification-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 16px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
}

@media (max-width: 767px) {
    /* Boton flotante volver arriba para modales largos */
    #allOrdersModal .modal-scroll-top-btn,
    #otherPendingOrdersModal .modal-scroll-top-btn {
        position: absolute !important;
        right: 18px !important;
        bottom: 18px !important;
        z-index: 6 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;
        backdrop-filter: blur(12px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.18s ease !important;
    }

    #allOrdersModal .modal-scroll-top-btn.is-visible,
    #otherPendingOrdersModal .modal-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }

    #allOrdersModal .modal-scroll-top-btn i,
    #otherPendingOrdersModal .modal-scroll-top-btn i {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    #allOrdersModal .modal-scroll-top-btn:active,
    #otherPendingOrdersModal .modal-scroll-top-btn:active {
        transform: translateY(1px) scale(0.96) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - override final real para botones superiores del modal Detalle de orden.
    */
    #order-detail-modal-orders .order-detail-modal-header,
    #order-detail-modal-orders .modal-header {
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading,
    #order-detail-modal-orders .order-detail-modal-header-body,
    #order-detail-modal-orders .order-detail-header-body,
    #order-detail-modal-orders .order-detail-header-content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-modal-actions,
    #order-detail-modal-orders .order-detail-header-actions,
    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-audit-menu {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-order-detail-whatsapp],
    #order-detail-modal-orders [data-whatsapp-trigger],
    #order-detail-modal-orders .order-detail-whatsapp-btn,
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders [data-order-detail-search-link],
    #order-detail-modal-orders .order-detail-search-link {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .order-detail-top-actions,
    #order-detail-modal-orders .order-detail-action-stack,
    #order-detail-modal-orders .order-detail-main-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 0 14px !important;
    }

    #order-detail-modal-orders .order-detail-top-actions > *,
    #order-detail-modal-orders .order-detail-action-stack > *,
    #order-detail-modal-orders .order-detail-main-actions > * {
        width: 100% !important;
        max-width: none !important;
    }

    #order-detail-modal-orders .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 2 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Servicios agregados:
      override final real para alinear pill "Servicio registrado" con precio.
    */
    #order-detail-modal-orders .order-detail-service-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 12px !important;
    }

    #order-detail-modal-orders .order-detail-service-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-head strong {
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    #order-detail-modal-orders .order-detail-service-status {
        margin: 0 !important;
        transform: none !important;
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 96px !important;
        height: 100% !important;
        padding: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-service-detail,
    #order-detail-modal-orders .order-detail-service-meta {
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Servicios agregados:
      mover visualmente el pill "Servicio registrado" a la fila del detalle.
    */
    #order-detail-modal-orders .order-detail-service-copy {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "head head"
            "detail status"
            "meta meta" !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: contents !important;
    }

    #order-detail-modal-orders .order-detail-service-head strong {
        grid-area: head !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    #order-detail-modal-orders .order-detail-service-detail {
        grid-area: detail !important;
        margin: 0 !important;
        align-self: center !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-status {
        grid-area: status !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: inline-flex !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-service-meta {
        grid-area: meta !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-row {
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Servicios agregados:
      ajuste final absoluto para bajar ligeramente el pill "Servicio registrado".
    */
    #order-detail-modal-orders .order-detail-service-row {
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 10px !important;
    }

    #order-detail-modal-orders .order-detail-service-status {
        transform: none !important;
        position: relative !important;
        top: 6px !important;
        bottom: auto !important;
        margin: 0 !important;
        margin-top: 0 !important;
        align-self: center !important;
        justify-self: end !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 100% !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - centrar visualmente el pill
      "Servicio registrado" dentro de Servicios agregados.
    */
    #order-detail-modal-orders .order-detail-service-row {
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 10px !important;
    }

    #order-detail-modal-orders .order-detail-service-status {
        transform: none !important;
        position: relative !important;
        top: 6px !important;
        bottom: auto !important;
        margin: 0 !important;
        margin-top: 0 !important;
        align-self: center !important;
        justify-self: end !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 100% !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Servicios agregados:
      alinear pill "Servicio registrado" con precio.
    */
    #order-detail-modal-orders .order-detail-service-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 12px !important;
    }

    #order-detail-modal-orders .order-detail-service-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-head strong {
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    #order-detail-modal-orders .order-detail-service-status {
        margin: 0 !important;
        transform: none !important;
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 96px !important;
        height: 100% !important;
        padding: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-service-detail,
    #order-detail-modal-orders .order-detail-service-meta {
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Detalle de orden:
      ajuste final de Servicios agregados sin font-weight mayor a 700.
    */
    #order-detail-modal-orders .order-detail-service-row {
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        align-content: center !important;
        justify-items: end !important;
        gap: 6px !important;
        min-height: 58px !important;
        padding-top: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-status,
    #order-detail-modal-orders .order-detail-service-side .pill-chip {
        margin: 0 !important;
        justify-self: end !important;
        align-self: end !important;
        transform: none !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        justify-self: end !important;
        align-self: start !important;
        text-align: right !important;
        white-space: nowrap !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Detalle de orden:
      ajustar alineacion de Servicios agregados.
    */
    #order-detail-modal-orders .order-detail-service-row {
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        align-content: center !important;
        justify-items: end !important;
        gap: 6px !important;
        min-height: 58px !important;
        padding-top: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-status,
    #order-detail-modal-orders .order-detail-service-side .pill-chip {
        margin: 0 !important;
        align-self: end !important;
        justify-self: end !important;
        transform: none !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        align-self: start !important;
        justify-self: end !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - override final para botones superiores del modal Detalle de orden.
    */
    #order-detail-modal-orders .order-detail-modal-header,
    #order-detail-modal-orders .modal-header {
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading,
    #order-detail-modal-orders .order-detail-modal-header-body,
    #order-detail-modal-orders .order-detail-header-body,
    #order-detail-modal-orders .order-detail-header-content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-modal-actions,
    #order-detail-modal-orders .order-detail-header-actions,
    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-audit-menu {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-order-detail-whatsapp],
    #order-detail-modal-orders [data-whatsapp-trigger],
    #order-detail-modal-orders .order-detail-whatsapp-btn,
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders [data-order-detail-search-link],
    #order-detail-modal-orders .order-detail-search-link {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .order-detail-top-actions,
    #order-detail-modal-orders .order-detail-action-stack,
    #order-detail-modal-orders .order-detail-main-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 0 14px !important;
    }

    #order-detail-modal-orders .order-detail-top-actions > *,
    #order-detail-modal-orders .order-detail-action-stack > *,
    #order-detail-modal-orders .order-detail-main-actions > * {
        width: 100% !important;
        max-width: none !important;
    }

    #order-detail-modal-orders .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 2 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - ordenar botones superiores del modal Detalle de orden.
    */
    #order-detail-modal-orders .modal-header {
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading,
    #order-detail-modal-orders .order-detail-modal-header-body,
    #order-detail-modal-orders .order-detail-header-body,
    #order-detail-modal-orders .order-detail-header-content {
        width: 100% !important;
        max-width: none !important;
    }

    #order-detail-modal-orders .order-detail-modal-actions,
    #order-detail-modal-orders .order-detail-header-actions,
    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-audit-menu {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-order-detail-whatsapp],
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders [data-order-detail-search-link],
    #order-detail-modal-orders .order-detail-search-link {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .order-detail-top-actions,
    #order-detail-modal-orders .order-detail-action-stack,
    #order-detail-modal-orders .order-detail-main-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 0 14px !important;
    }

    #order-detail-modal-orders .order-detail-top-actions > *,
    #order-detail-modal-orders .order-detail-action-stack > *,
    #order-detail-modal-orders .order-detail-main-actions > * {
        width: 100% !important;
        max-width: none !important;
    }

    #order-detail-modal-orders .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 2 !important;
    }
}

@media (min-width: 768px) {
    #allOrdersModal .modal-scroll-top-btn,
    #otherPendingOrdersModal .modal-scroll-top-btn {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Paginacion compacta para modales largos de Ordenes */
    #allOrdersModal .orders-modal-pagination,
    #otherPendingOrdersModal .orders-modal-pagination {
        position: static !important;
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden],
    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary {
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-page-btn,
    #otherPendingOrdersModal .orders-modal-page-btn,
    #allOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        border: 1px solid rgba(74, 91, 168, 0.26) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--primary) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #allOrdersModal .orders-modal-page-btn.is-active,
    #otherPendingOrdersModal .orders-modal-page-btn.is-active,
    #allOrdersModal .orders-modal-pagination-actions button.is-active,
    #otherPendingOrdersModal .orders-modal-pagination-actions button.is-active {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
    }

    #allOrdersModal .orders-modal-page-btn:disabled,
    #otherPendingOrdersModal .orders-modal-page-btn:disabled,
    #allOrdersModal .orders-modal-pagination-actions button:disabled,
    #otherPendingOrdersModal .orders-modal-pagination-actions button:disabled {
        opacity: 0.42 !important;
        pointer-events: none !important;
    }

    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #allOrdersModal .all-orders-mobile-results + .orders-modal-pagination,
    #allOrdersModal .orders-modal-results-mobile + .orders-modal-pagination,
    #otherPendingOrdersModal .pending-orders-mobile-results + .orders-modal-pagination {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    #allOrdersModal .orders-modal-pagination:not([hidden]),
    #otherPendingOrdersModal .orders-modal-pagination:not([hidden]) {
        position: static !important;
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden],
    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary,
    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
        text-align: center !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        border: 1px solid rgba(74, 91, 168, 0.26) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #allOrdersModal .orders-modal-pagination-actions button.is-active,
    #otherPendingOrdersModal .orders-modal-pagination-actions button.is-active {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
    }

    #allOrdersModal .orders-modal-pagination-actions button:disabled,
    #otherPendingOrdersModal .orders-modal-pagination-actions button:disabled {
        opacity: 0.42 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) {
    #allOrdersModal .orders-modal-pagination.is-visible,
    #otherPendingOrdersModal .orders-modal-pagination.is-visible,
    #allOrdersModal .orders-modal-pagination:not([hidden]),
    #otherPendingOrdersModal .orders-modal-pagination:not([hidden]) {
        display: grid !important;
        position: static !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden],
    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary,
    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        text-align: center !important;
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-page-btn,
    #otherPendingOrdersModal .orders-modal-page-btn,
    #allOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        border: 1px solid rgba(74, 91, 168, 0.26) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #allOrdersModal .orders-modal-page-btn.is-active,
    #otherPendingOrdersModal .orders-modal-page-btn.is-active,
    #allOrdersModal .orders-modal-pagination-actions button.is-active,
    #otherPendingOrdersModal .orders-modal-pagination-actions button.is-active {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
    }
}

@media (max-width: 767px) {
    #allOrdersModal .orders-modal-pagination.is-visible,
    #otherPendingOrdersModal .orders-modal-pagination.is-visible {
        display: grid !important;
        position: static !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden],
    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary,
    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        text-align: center !important;
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-page-btn,
    #otherPendingOrdersModal .orders-modal-page-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        border: 1px solid rgba(74, 91, 168, 0.26) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #allOrdersModal .orders-modal-page-btn.is-active,
    #otherPendingOrdersModal .orders-modal-page-btn.is-active {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
    }

    #allOrdersModal .orders-modal-page-btn:disabled,
    #otherPendingOrdersModal .orders-modal-page-btn:disabled {
        opacity: 0.42 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) {
    /*
      Modales de ordenes mobile: la paginacion ya existe, pero debe vivir
      dentro del scroll del body sin que la lista de cards la recorte.
    */
    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body,
    #otherPendingOrdersModal .modal-body,
    #otherPendingOrdersModal .pending-orders-modal-body,
    #otherPendingOrdersModal .delayed-orders-modal-body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 18px !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #allOrdersModal .orders-modal-pagination:not([hidden]),
    #otherPendingOrdersModal .orders-modal-pagination:not([hidden]),
    #allOrdersModal .orders-modal-pagination.is-visible,
    #otherPendingOrdersModal .orders-modal-pagination.is-visible {
        display: grid !important;
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden],
    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary,
    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        text-align: center !important;
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-page-btn,
    #otherPendingOrdersModal .orders-modal-page-btn,
    #allOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    /* Paginacion mobile de modales de ordenes: layout compacto y balanceado */
    #allOrdersModal .orders-modal-pagination:not([hidden]),
    #otherPendingOrdersModal .orders-modal-pagination:not([hidden]),
    #allOrdersModal .orders-modal-pagination.is-visible,
    #otherPendingOrdersModal .orders-modal-pagination.is-visible {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 8px !important;
        margin: 1px 0 0 !important;
        padding: 12px 14px !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary {
        width: 100% !important;
        text-align: left !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--color-text-muted, #736278) !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        color: var(--color-text-muted, #736278) !important;
    }

    #allOrdersModal .orders-modal-page-btn,
    #otherPendingOrdersModal .orders-modal-page-btn,
    #allOrdersModal .orders-modal-pagination-actions button,
    #otherPendingOrdersModal .orders-modal-pagination-actions button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #allOrdersModal .orders-modal-page-ellipsis,
    #otherPendingOrdersModal .orders-modal-page-ellipsis {
        width: 22px !important;
        min-width: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-text-muted, #736278) !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767px) {
    /* Paginacion mobile de ordenes: separacion final exacta y resumen centrado */
    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile,
    #otherPendingOrdersModal .pending-orders-mobile-results {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #allOrdersModal .all-orders-mobile-results .mobile-order-card,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card,
    #allOrdersModal [data-orders-total-card],
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card,
    #otherPendingOrdersModal [data-pending-other-card] {
        margin-bottom: 0 !important;
    }

    #allOrdersModal .orders-modal-pagination:not([hidden]),
    #otherPendingOrdersModal .orders-modal-pagination:not([hidden]),
    #allOrdersModal .orders-modal-pagination.is-visible,
    #otherPendingOrdersModal .orders-modal-pagination.is-visible {
        margin-top: 16px !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary {
        width: 100% !important;
        justify-self: center !important;
        align-self: center !important;
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    /* Restaurar paginacion desktop/tablet de modales de ordenes */
    #allOrdersModal .orders-modal-pagination,
    #otherPendingOrdersModal .orders-modal-pagination {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 16px !important;
        width: 100% !important;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
    }

    #allOrdersModal .orders-modal-pagination-summary,
    #otherPendingOrdersModal .orders-modal-pagination-summary {
        justify-self: start !important;
        text-align: left !important;
        width: auto !important;
    }

    #allOrdersModal .orders-modal-pagination-actions,
    #otherPendingOrdersModal .orders-modal-pagination-actions {
        justify-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
        flex-wrap: wrap !important;
    }

    #allOrdersModal .orders-modal-pagination-status,
    #otherPendingOrdersModal .orders-modal-pagination-status {
        justify-self: end !important;
        text-align: right !important;
        width: auto !important;
    }
}

@media (max-width: 767px) {
    /* Detalle de orden mobile - pagos con jerarquia clara */
    #order-detail-modal-orders .order-detail-payments-list {
        display: grid !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }

    #order-detail-modal-orders .order-detail-payment-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        background: rgba(248, 250, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.68) !important;
    }

    #order-detail-modal-orders .order-detail-payment-main {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-payment-method {
        margin: 0 !important;
        justify-self: start !important;
        align-self: center !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payment-copy {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-payment-amount-line {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: 100% !important;
    }

    #order-detail-modal-orders .order-detail-payment-amount-line strong {
        color: var(--primary) !important;
        font-size: 1.28rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .order-detail-payment-copy > span:not(.field-help-tooltip) {
        display: none !important;
    }

    #order-detail-modal-orders .order-detail-payment-side {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-payment-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        align-items: start !important;
    }

    #order-detail-modal-orders .order-detail-payment-stage {
        color: var(--primary) !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payment-date {
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }

    #order-detail-modal-orders .order-detail-payment-side .payment-method-edit-btn,
    #order-detail-modal-orders .order-detail-payment-side .payment-method-edit-btn-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 12px !important;
    }

    #order-detail-modal-orders .order-detail-payment-side .payment-method-edit-btn i {
        margin: 0 !important;
        font-size: 0.95rem !important;
    }
}

@media (max-width: 767px) {
    /* Detalle de orden mobile - estado informativo de pagos */
    #order-detail-modal-orders .order-detail-payments-empty {
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        margin-top: 10px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: linear-gradient(180deg, rgba(247, 249, 255, 0.96) 0%, rgba(241, 245, 255, 0.94) 100%) !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-icon {
        width: 20px !important;
        min-width: 20px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2px !important;
        color: var(--primary) !important;
        opacity: 0.82 !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-title {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.28 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-text {
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.84rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
    }

    #order-detail-modal-orders .order-detail-payments-card .order-detail-payments-empty:first-child,
    #order-detail-modal-orders .order-detail-section--payments .order-detail-payments-empty:first-child {
        margin-top: 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /orders iPad vertical:
      Replicar colores de metricas Total / Deuda / Pago en cards.
    */
    #orders-today-section .mobile-order-metric-icon,
    #orders-total-section .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-total,
    #orders-total-section .mobile-order-metric-icon.metric-total {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-total i,
    #orders-total-section .mobile-order-metric-icon.metric-total i {
        color: #2563eb !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-debt,
    #orders-today-section .mobile-order-metric-icon.metric-payment-pending,
    #orders-total-section .mobile-order-metric-icon.metric-debt,
    #orders-total-section .mobile-order-metric-icon.metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-debt i,
    #orders-today-section .mobile-order-metric-icon.metric-payment-pending i,
    #orders-total-section .mobile-order-metric-icon.metric-debt i,
    #orders-total-section .mobile-order-metric-icon.metric-payment-pending i {
        color: #f97316 !important;
    }

    #orders-today-section .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #orders-today-section .mobile-order-metric-icon.metric-debt-paid,
    #orders-today-section .mobile-order-metric-icon.metric-payment,
    #orders-total-section .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #orders-total-section .mobile-order-metric-icon.metric-debt-paid,
    #orders-total-section .mobile-order-metric-icon.metric-payment {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #orders-today-section .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #orders-today-section .mobile-order-metric-icon.metric-debt-paid i,
    #orders-today-section .mobile-order-metric-icon.metric-payment i,
    #orders-total-section .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #orders-total-section .mobile-order-metric-icon.metric-debt-paid i,
    #orders-total-section .mobile-order-metric-icon.metric-payment i {
        color: #16a34a !important;
    }

    #orders-today-section .mobile-order-metric > span,
    #orders-total-section .mobile-order-metric > span {
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #orders-today-section .mobile-order-metric > strong,
    #orders-total-section .mobile-order-metric > strong {
        color: var(--primary) !important;
        line-height: 1.15 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #orders-today-section .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong,
    #orders-total-section .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong {
        font-weight: 600 !important;
    }

    #orders-today-section .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) strong,
    #orders-today-section .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) strong,
    #orders-total-section .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) strong,
    #orders-total-section .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) strong {
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /orders iPad vertical:
      restaurar layout correcto de cards en Ordenes pendientes de entrega.
    */
    #otherPendingOrdersModal .modal-dialog,
    #otherPendingOrdersModal .modal-content,
    #otherPendingOrdersModal .pending-orders-modal-content,
    #otherPendingOrdersModal .delayed-orders-modal-content {
        width: min(100%, calc(100vw - 40px)) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 24px auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    #otherPendingOrdersModal .modal-header {
        flex: 0 0 auto !important;
        min-height: 64px !important;
        padding: 18px 64px 16px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #otherPendingOrdersModal .modal-body,
    #otherPendingOrdersModal .pending-orders-modal-body,
    #otherPendingOrdersModal .delayed-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 18px 18px !important;
    }

    #otherPendingOrdersModal .pending-orders-modal-filters,
    #otherPendingOrdersModal .delayed-orders-modal-filters,
    #otherPendingOrdersModal .orders-modal-filters,
    #otherPendingOrdersModal .orders-total-filters {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell,
    #otherPendingOrdersModal .table-wrapper,
    #otherPendingOrdersModal table {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results[hidden] {
        display: grid !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results[style] {
        display: grid !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card],
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
    }

    /*
      No usar display: revert sobre todos los hijos: rompe la grilla interna.
      Cada zona de la card se declara de forma especifica abajo.
    */
    #otherPendingOrdersModal .mobile-order-card-header,
    #otherPendingOrdersModal .mobile-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #otherPendingOrdersModal .mobile-order-code,
    #otherPendingOrdersModal .mobile-order-code-stack {
        min-width: 0 !important;
        display: block !important;
        gap: 2px !important;
    }

    #otherPendingOrdersModal .mobile-order-code-label {
        display: block !important;
        min-width: 0 !important;
        color: var(--primary) !important;
        font-size: 0.98rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .mobile-order-status,
    #otherPendingOrdersModal .mobile-status-pill {
        display: inline-flex !important;
        justify-self: end !important;
        align-self: start !important;
        margin-left: 8px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    #otherPendingOrdersModal .mobile-order-summary-topline,
    #otherPendingOrdersModal .mobile-order-subline {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        background: #F4F3FF !important;
    }

    #otherPendingOrdersModal .mobile-order-client-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
    }

    #otherPendingOrdersModal .mobile-order-client-info {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    #otherPendingOrdersModal .mobile-order-client-info strong {
        color: #2F3260 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .mobile-order-client-info span {
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
    }

    #otherPendingOrdersModal .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        align-items: stretch !important;
    }

    #otherPendingOrdersModal .mobile-order-metric {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 6px !important;
        min-width: 0 !important;
        min-height: 82px !important;
        height: auto !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: #F8FAFF !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > span {
        display: block !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > strong {
        display: block !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #otherPendingOrdersModal .mobile-order-payment,
    #otherPendingOrdersModal .mobile-order-meta,
    #otherPendingOrdersModal .mobile-order-body {
        display: none !important;
    }

    #otherPendingOrdersModal .mobile-order-actions,
    #otherPendingOrdersModal .mobile-order-footer {
        display: block !important;
        width: 100% !important;
    }

    #otherPendingOrdersModal .mobile-order-detail-btn,
    #otherPendingOrdersModal [data-order-detail-trigger].mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 14px !important;
        background: var(--primary) !important;
        color: #fff !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination {
        flex: 0 0 auto !important;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - filtros colapsados en modal Ordenes pendientes de entrega.
    */
    #otherPendingOrdersModal .pending-orders-modal-filters,
    #otherPendingOrdersModal .delayed-orders-modal-filters,
    #otherPendingOrdersModal .orders-modal-filters,
    #otherPendingOrdersModal .history-filters.pending-other-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .pending-other-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    #otherPendingOrdersModal .pending-other-filter-search input,
    #otherPendingOrdersModal [data-pending-other-search] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters[hidden] {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-other-filter-status,
    #otherPendingOrdersModal .pending-other-filter-payment,
    #otherPendingOrdersModal .pending-other-filter-laundry,
    #otherPendingOrdersModal .pending-other-filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters label,
    #otherPendingOrdersModal .pending-other-filter-search label {
        margin-bottom: 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters input,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters select {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-other-filter-actions .btn,
    #otherPendingOrdersModal .pending-orders-clear-btn {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .modal-search-suggestions {
        position: absolute !important;
        z-index: 20 !important;
        width: 100% !important;
        max-height: 260px !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - #otherPendingOrdersModal:
      replicar colores mobile de metricas Total / Deuda / Pago.
    */
    #otherPendingOrdersModal .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-total,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) .mobile-order-metric-icon {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-total i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) .mobile-order-metric-icon i {
        color: #2563eb !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment-pending,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) .mobile-order-metric-icon.metric-debt,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .mobile-order-metric-icon.metric-debt,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt i,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment-pending i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) .mobile-order-metric-icon.metric-debt i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .mobile-order-metric-icon.metric-debt i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .metric-payment-pending i {
        color: #f97316 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt-paid,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending),
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2).is-settled .mobile-order-metric-icon,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) .mobile-order-metric-icon.metric-payment,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .metric-payment:not(.metric-payment-pending) {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #otherPendingOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt-paid i,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2).is-settled .mobile-order-metric-icon i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) .mobile-order-metric-icon.metric-payment i,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .metric-payment:not(.metric-payment-pending) i {
        color: #16a34a !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > span {
        color: var(--muted) !important;
        font-weight: 600 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > strong {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) strong {
        font-weight: 600 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - resumen de paginacion en 2 lineas
      solo para Ordenes pendientes de entrega.
    */
    #otherPendingOrdersModal .orders-modal-pagination-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2px !important;
        align-items: center !important;
        justify-items: start !important;
        text-align: left !important;
        line-height: 1.2 !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-summary-label {
        display: block !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        color: var(--muted) !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination-summary-count {
        display: block !important;
        font-size: 0.78rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        color: var(--muted) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - boton volver arriba en modal Ordenes pendientes de entrega.
    */
    #otherPendingOrdersModal .modal-scroll-top-btn {
        position: absolute !important;
        right: 22px !important;
        bottom: 92px !important;
        z-index: 12 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;
        backdrop-filter: blur(12px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.18s ease !important;
    }

    #otherPendingOrdersModal .modal-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }

    #otherPendingOrdersModal .modal-scroll-top-btn i {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    #otherPendingOrdersModal .modal-scroll-top-btn:active {
        transform: translateY(1px) scale(0.96) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - override final real para botones superiores del modal Detalle de orden.
    */
    #order-detail-modal-orders .order-detail-modal-header,
    #order-detail-modal-orders .modal-header {
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading,
    #order-detail-modal-orders .order-detail-modal-header-body,
    #order-detail-modal-orders .order-detail-header-body,
    #order-detail-modal-orders .order-detail-header-content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-modal-actions,
    #order-detail-modal-orders .order-detail-header-actions,
    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-audit-menu {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-order-detail-whatsapp],
    #order-detail-modal-orders [data-whatsapp-trigger],
    #order-detail-modal-orders .order-detail-whatsapp-btn,
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders [data-order-detail-search-link],
    #order-detail-modal-orders .order-detail-search-link {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .order-detail-top-actions,
    #order-detail-modal-orders .order-detail-action-stack,
    #order-detail-modal-orders .order-detail-main-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 0 14px !important;
    }

    #order-detail-modal-orders .order-detail-top-actions > *,
    #order-detail-modal-orders .order-detail-action-stack > *,
    #order-detail-modal-orders .order-detail-main-actions > * {
        width: 100% !important;
        max-width: none !important;
    }

    #order-detail-modal-orders .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 2 !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      iPad vertical - Servicios agregados:
      evitar que display:flex baje el precio respecto al pill "Servicio registrado".
    */
    #order-detail-modal-orders .order-detail-service-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        column-gap: 14px !important;
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-copy {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title title"
            "detail status"
            "meta meta" !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        display: contents !important;
    }

    #order-detail-modal-orders .order-detail-service-head strong {
        grid-area: title !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    #order-detail-modal-orders .order-detail-service-detail {
        grid-area: detail !important;
        align-self: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    #order-detail-modal-orders .order-detail-service-status {
        grid-area: status !important;
        margin: 0 !important;
        transform: none !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        justify-items: end !important;
        align-self: center !important;
        min-width: 72px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-service-meta {
        grid-area: meta !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Total de ordenes:
      separar boton "Ver todos" de las cards inferiores.
    */
    #orders-total-section [data-modal-target="#allOrdersModal"] {
        margin-bottom: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - #allOrdersModal:
      corregir cards colapsadas en modal Todas las ordenes.
    */
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .all-orders-modal-content {
        width: min(100%, calc(100vw - 40px)) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 24px auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    #allOrdersModal .modal-header,
    #allOrdersModal .all-orders-modal-header {
        flex: 0 0 auto !important;
        min-height: 64px !important;
        padding: 18px 64px 16px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 18px 18px !important;
    }

    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .table-wrapper,
    #allOrdersModal table {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .all-orders-mobile-results[hidden],
    #allOrdersModal .orders-modal-results-mobile[hidden] {
        display: grid !important;
    }

    #allOrdersModal [data-orders-total-card],
    #allOrdersModal .all-orders-mobile-results .mobile-order-card,
    #allOrdersModal .all-orders-mobile-results .mobile-order-card-airy,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
    }

    #allOrdersModal .mobile-order-card-header,
    #allOrdersModal .mobile-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: auto !important;
    }

    #allOrdersModal .mobile-order-code,
    #allOrdersModal .mobile-order-code-stack,
    #allOrdersModal .mobile-order-code-label {
        display: block !important;
        min-width: 0 !important;
    }

    #allOrdersModal .mobile-order-status,
    #allOrdersModal .mobile-status-pill {
        display: inline-flex !important;
        justify-self: end !important;
        align-self: start !important;
        white-space: nowrap !important;
        margin-left: 8px !important;
    }

    #allOrdersModal .mobile-order-summary-topline,
    #allOrdersModal .mobile-order-subline {
        display: block !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    #allOrdersModal .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        background: #F4F3FF !important;
    }

    #allOrdersModal .mobile-order-client-icon {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
    }

    #allOrdersModal .mobile-order-client-info {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #allOrdersModal .mobile-order-client-info strong {
        display: block !important;
        color: #2F3260 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .mobile-order-client-info span {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    #allOrdersModal .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #allOrdersModal .mobile-order-metric {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 6px !important;
        min-width: 0 !important;
        min-height: 82px !important;
        height: auto !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: #F8FAFF !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        overflow: visible !important;
    }

    #allOrdersModal .mobile-order-metric-icon {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border-radius: 999px !important;
    }

    #allOrdersModal .mobile-order-metric > span {
        display: block !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #allOrdersModal .mobile-order-metric > strong {
        display: block !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-total {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-total i {
        color: #2563eb !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-debt,
    #allOrdersModal .mobile-order-metric-icon.metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric-icon.metric-debt i,
    #allOrdersModal .mobile-order-metric-icon.metric-payment-pending i {
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #allOrdersModal .mobile-order-metric-icon.metric-debt-paid,
    #allOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #allOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #allOrdersModal .mobile-order-metric-icon.metric-debt-paid i,
    #allOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) i {
        color: #16a34a !important;
    }

    #allOrdersModal .mobile-order-payment,
    #allOrdersModal .mobile-order-meta,
    #allOrdersModal .mobile-order-body {
        display: none !important;
    }

    #allOrdersModal .mobile-order-actions,
    #allOrdersModal .mobile-order-footer {
        display: block !important;
        width: 100% !important;
    }

    #allOrdersModal .mobile-order-detail-btn,
    #allOrdersModal [data-order-detail-trigger].mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    #allOrdersModal .orders-modal-pagination {
        flex: 0 0 auto !important;
        margin-top: 16px !important;
        position: relative !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - #allOrdersModal:
      buscador visible y filtros avanzados colapsados.
    */
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .all-orders-modal-content {
        width: min(100%, calc(100vw - 40px)) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 24px auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    #allOrdersModal .modal-header,
    #allOrdersModal .all-orders-modal-header {
        flex: 0 0 auto !important;
        min-height: 64px !important;
        padding: 18px 64px 16px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 18px 18px !important;
    }

    #allOrdersModal .orders-total-filters,
    #allOrdersModal .all-orders-filter-form,
    #allOrdersModal .orders-modal-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #allOrdersModal .orders-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #allOrdersModal .orders-filter-search label {
        margin-bottom: 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #allOrdersModal .orders-filter-search input,
    #allOrdersModal [data-orders-total-search] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle,
    #allOrdersModal [data-all-orders-mobile-filters-toggle] {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle span,
    #allOrdersModal [data-all-orders-mobile-filters-toggle] span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle-chevron,
    #allOrdersModal .all-orders-mobile-filters-toggle > i,
    #allOrdersModal [data-all-orders-mobile-filters-toggle] > i {
        transition: transform 0.18s ease !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle.is-open .all-orders-mobile-filters-toggle-chevron,
    #allOrdersModal .all-orders-mobile-filters-toggle.is-open > i,
    #allOrdersModal [data-all-orders-mobile-filters-toggle].is-open > i {
        transform: rotate(180deg) !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters[hidden],
    #allOrdersModal [data-all-orders-mobile-advanced-filters][hidden] {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .filter-group,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] .filter-group {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters label,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] label {
        margin-bottom: 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters input,
    #allOrdersModal .all-orders-mobile-advanced-filters select,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] input,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] select {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .filter-actions,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] .filter-actions {
        width: 100% !important;
        margin: 0 !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .btn,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] .btn,
    #allOrdersModal [data-orders-total-clear] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .table-wrapper,
    #allOrdersModal table {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal [data-orders-total-card],
    #allOrdersModal .all-orders-mobile-results .mobile-order-card,
    #allOrdersModal .all-orders-mobile-results .mobile-order-card-airy,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow: visible !important;
        border-radius: 18px !important;
    }

    #allOrdersModal .orders-modal-pagination {
        flex: 0 0 auto !important;
        margin-top: 16px !important;
        position: relative !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - #allOrdersModal:
      estructura correcta de filtros como #otherPendingOrdersModal.
    */
    #allOrdersModal .orders-total-filters,
    #allOrdersModal .all-orders-filter-form,
    #allOrdersModal .orders-modal-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    #allOrdersModal .orders-filter-search,
    #allOrdersModal .orders-total-filters > .filter-group:first-child,
    #allOrdersModal .orders-total-filters > .form-field:first-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #allOrdersModal [data-orders-total-search],
    #allOrdersModal .orders-filter-search input {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    #allOrdersModal [data-all-orders-mobile-filters-toggle],
    #allOrdersModal .all-orders-mobile-filters-toggle {
        grid-column: 1 / -1 !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        font-weight: 700 !important;
    }

    #allOrdersModal [data-all-orders-mobile-filters-toggle] span,
    #allOrdersModal .all-orders-mobile-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #allOrdersModal [data-all-orders-mobile-advanced-filters],
    #allOrdersModal .all-orders-mobile-advanced-filters {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
    }

    #allOrdersModal [data-all-orders-mobile-advanced-filters][hidden],
    #allOrdersModal .all-orders-mobile-advanced-filters[hidden] {
        display: none !important;
    }

    #allOrdersModal [data-all-orders-mobile-advanced-filters] > *,
    #allOrdersModal .all-orders-mobile-advanced-filters > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #allOrdersModal [data-all-orders-mobile-advanced-filters] label,
    #allOrdersModal .all-orders-mobile-advanced-filters label {
        display: block !important;
        margin: 0 0 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #allOrdersModal [data-all-orders-mobile-advanced-filters] input,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] select,
    #allOrdersModal .all-orders-mobile-advanced-filters input,
    #allOrdersModal .all-orders-mobile-advanced-filters select {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #allOrdersModal [data-all-orders-mobile-advanced-filters] .btn,
    #allOrdersModal .all-orders-mobile-advanced-filters .btn,
    #allOrdersModal [data-orders-total-clear] {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        justify-content: center !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        width: 100% !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - boton volver arriba en modal Todas las ordenes.
    */
    #allOrdersModal .modal-scroll-top-btn {
        position: absolute !important;
        right: 22px !important;
        bottom: 92px !important;
        z-index: 12 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;
        backdrop-filter: blur(12px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.18s ease !important;
    }

    #allOrdersModal .modal-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }

    #allOrdersModal .modal-scroll-top-btn i {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    #allOrdersModal .modal-scroll-top-btn:active {
        transform: translateY(1px) scale(0.96) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Detalle de orden / Pagos:
      aplicar disclaimer visual cuando no hay pagos.
    */
    #order-detail-modal-orders .order-detail-payments-empty {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        width: 100% !important;
        margin-top: 12px !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: linear-gradient(
            180deg,
            rgba(247, 249, 255, 0.96) 0%,
            rgba(241, 245, 255, 0.94) 100%
        ) !important;
        box-shadow: none !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 1px !important;
        border-radius: 999px !important;
        background: rgba(74, 91, 168, 0.10) !important;
        color: var(--primary) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-title {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.94rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-text {
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.86rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-payments-empty) .section-header {
        margin-bottom: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Ordenes:
      replicar switch Para hoy / Total.
    */
    .orders-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 12px 0 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn,
    .orders-mobile-section-switcher .orders-mobile-switch-btn {
        min-height: 42px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        padding: 0 14px !important;
        width: 100% !important;
    }

    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn.is-active,
    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn[aria-pressed="true"],
    .orders-mobile-section-switcher .orders-mobile-switch-btn.is-active,
    .orders-mobile-section-switcher .orders-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        color: #fff !important;
        border-color: var(--primary) !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn.is-active i,
    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn[aria-pressed="true"] i,
    .orders-mobile-section-switcher .orders-mobile-switch-btn.is-active i,
    .orders-mobile-section-switcher .orders-mobile-switch-btn[aria-pressed="true"] i {
        color: #fff !important;
    }

    body.orders-ipad-vertical-panel-today #orders-today-section {
        display: block !important;
    }

    body.orders-ipad-vertical-panel-today #orders-total-section {
        display: none !important;
    }

    body.orders-ipad-vertical-panel-total #orders-today-section {
        display: none !important;
    }

    body.orders-ipad-vertical-panel-total #orders-total-section {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - /orders:
      corregir flujo inferior para que el contenido no se corte
      ni deje espacio raro antes del bottom nav.
    */
    body.orders-page.tablet-app-mode .dashboard-main,
    body.orders-page.tablet-app-mode .main-content {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: calc(var(--mobile-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 18px) !important;
    }

    body.orders-page.tablet-app-mode .content-area,
    body.orders-page.tablet-app-mode .page-content {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.orders-page.tablet-app-mode .page-section.page-shell,
    body.orders-page.tablet-app-mode .page-section {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
    }

    body.orders-page.tablet-app-mode.orders-ipad-vertical-panel-today #orders-today-section,
    body.orders-page.tablet-app-mode.orders-ipad-vertical-panel-total #orders-total-section {
        margin-bottom: 18px !important;
    }

    body.orders-page.tablet-app-mode.orders-ipad-vertical-panel-today #orders-total-section,
    body.orders-page.tablet-app-mode.orders-ipad-vertical-panel-total #orders-today-section {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.orders-page.tablet-app-mode #orders-today-section .mobile-orders-list,
    body.orders-page.tablet-app-mode #orders-today-section .orders-mobile-list,
    body.orders-page.tablet-app-mode #orders-total-section .mobile-orders-list,
    body.orders-page.tablet-app-mode #orders-total-section .orders-mobile-list {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.orders-page.tablet-app-mode #orders-today-section .mobile-order-card:last-child,
    body.orders-page.tablet-app-mode #orders-total-section .mobile-order-card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - /orders:
      restaurar UI correcto de cards en secciones principales.
    */
    #orders-today-section .mobile-orders-list,
    #orders-today-section .orders-mobile-list,
    #orders-total-section .mobile-orders-list,
    #orders-total-section .orders-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orders-today-section .mobile-order-card,
    #orders-today-section .mobile-order-card-airy,
    #orders-total-section .mobile-order-card,
    #orders-total-section .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 14px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
        overflow: visible !important;
    }

    #orders-today-section .mobile-order-card-header,
    #orders-today-section .mobile-order-header,
    #orders-total-section .mobile-order-card-header,
    #orders-total-section .mobile-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #orders-today-section .mobile-order-code,
    #orders-today-section .mobile-order-code-stack,
    #orders-today-section .mobile-order-code-label,
    #orders-total-section .mobile-order-code,
    #orders-total-section .mobile-order-code-stack,
    #orders-total-section .mobile-order-code-label {
        display: block !important;
        min-width: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;
    }

    #orders-today-section .mobile-order-status,
    #orders-today-section .mobile-status-pill,
    #orders-total-section .mobile-order-status,
    #orders-total-section .mobile-status-pill {
        display: inline-flex !important;
        justify-self: end !important;
        align-self: start !important;
        white-space: nowrap !important;
        margin-left: 8px !important;
        font-weight: 700 !important;
    }

    #orders-today-section .mobile-order-summary-topline,
    #orders-today-section .mobile-order-subline,
    #orders-total-section .mobile-order-summary-topline,
    #orders-total-section .mobile-order-subline {
        display: block !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    #orders-today-section .mobile-order-client-box,
    #orders-total-section .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        background: #F4F3FF !important;
    }

    #orders-today-section .mobile-order-client-icon,
    #orders-total-section .mobile-order-client-icon {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
    }

    #orders-today-section .mobile-order-client-info,
    #orders-total-section .mobile-order-client-info {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #orders-today-section .mobile-order-client-info strong,
    #orders-total-section .mobile-order-client-info strong {
        display: block !important;
        color: #2F3260 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #orders-today-section .mobile-order-client-info span,
    #orders-total-section .mobile-order-client-info span {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    #orders-today-section .mobile-order-metrics-grid,
    #orders-total-section .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .mobile-order-metric,
    #orders-total-section .mobile-order-metric {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 6px !important;
        min-width: 0 !important;
        min-height: 82px !important;
        height: auto !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: #F8FAFF !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        overflow: visible !important;
    }

    #orders-today-section .mobile-order-metric-icon,
    #orders-total-section .mobile-order-metric-icon {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border-radius: 999px !important;
    }

    #orders-today-section .mobile-order-metric > span,
    #orders-total-section .mobile-order-metric > span {
        display: block !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #orders-today-section .mobile-order-metric > strong,
    #orders-total-section .mobile-order-metric > strong {
        display: block !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-total,
    #orders-total-section .mobile-order-metric-icon.metric-total {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-total i,
    #orders-total-section .mobile-order-metric-icon.metric-total i {
        color: #2563eb !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-debt,
    #orders-today-section .mobile-order-metric-icon.metric-payment-pending,
    #orders-total-section .mobile-order-metric-icon.metric-debt,
    #orders-total-section .mobile-order-metric-icon.metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #orders-today-section .mobile-order-metric-icon.metric-debt i,
    #orders-today-section .mobile-order-metric-icon.metric-payment-pending i,
    #orders-total-section .mobile-order-metric-icon.metric-debt i,
    #orders-total-section .mobile-order-metric-icon.metric-payment-pending i {
        color: #f97316 !important;
    }

    #orders-today-section .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #orders-today-section .mobile-order-metric-icon.metric-debt-paid,
    #orders-today-section .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending),
    #orders-total-section .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #orders-total-section .mobile-order-metric-icon.metric-debt-paid,
    #orders-total-section .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #orders-today-section .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #orders-today-section .mobile-order-metric-icon.metric-debt-paid i,
    #orders-today-section .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) i,
    #orders-total-section .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #orders-total-section .mobile-order-metric-icon.metric-debt-paid i,
    #orders-total-section .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) i {
        color: #16a34a !important;
    }

    #orders-today-section .mobile-order-payment,
    #orders-today-section .mobile-order-meta,
    #orders-today-section .mobile-order-body,
    #orders-total-section .mobile-order-payment,
    #orders-total-section .mobile-order-meta,
    #orders-total-section .mobile-order-body {
        display: none !important;
    }

    #orders-today-section .mobile-order-actions,
    #orders-today-section .mobile-order-footer,
    #orders-total-section .mobile-order-actions,
    #orders-total-section .mobile-order-footer {
        display: block !important;
        width: 100% !important;
    }

    #orders-today-section .mobile-order-detail-btn,
    #orders-today-section [data-order-detail-trigger].mobile-order-detail-btn,
    #orders-total-section .mobile-order-detail-btn,
    #orders-total-section [data-order-detail-trigger].mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - organizar seccion Ordenes para entregar hoy.
    */
    #orders-today-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    #orders-today-section .orders-header,
    #orders-today-section .section-header,
    #orders-today-section .card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) !important;
        align-items: start !important;
        gap: 16px !important;
        margin-bottom: 0 !important;
    }

    #orders-today-section .orders-header-left,
    #orders-today-section .section-heading,
    #orders-today-section .card-heading {
        min-width: 0 !important;
    }

    #orders-today-section .orders-header h2,
    #orders-today-section .orders-header h3,
    #orders-today-section .section-title,
    #orders-today-section h2 {
        margin: 0 !important;
        line-height: 1.15 !important;
    }

    #orders-today-section .orders-header p,
    #orders-today-section .section-subtitle,
    #orders-today-section .card-subtitle {
        margin: 4px 0 0 !important;
        max-width: 360px !important;
        line-height: 1.35 !important;
    }

    #orders-today-section .orders-header-right {
        min-width: 0 !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    #orders-today-section .orders-inline-filters,
    #orders-today-section .orders-today-controls,
    #orders-today-section .orders-filters,
    #orders-today-section .filters-row {
        display: grid !important;
        grid-template-columns: minmax(170px, 0.85fr) minmax(220px, 1fr) minmax(180px, 0.8fr) !important;
        align-items: end !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-filter-row,
    #orders-today-section .orders-inline-filter-form {
        display: grid !important;
        grid-template-columns: minmax(130px, 1fr) 40px !important;
        align-items: end !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-filter-field,
    #orders-today-section .filter-group-inline,
    #orders-today-section .orders-filter-laundry,
    #orders-today-section .laundry-filter,
    #orders-today-section .form-field:has(select) {
        min-width: 0 !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-filter-field label,
    #orders-today-section .filter-group-inline label {
        margin-bottom: 6px !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #orders-today-section select,
    #orders-today-section .form-select {
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    #orders-today-section .filter-icon-btn,
    #orders-today-section .orders-filter-toggle,
    #orders-today-section .orders-filter-button,
    #orders-today-section .filter-btn,
    #orders-today-section .btn-icon {
        width: 40px !important;
        height: 44px !important;
        min-width: 40px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-quick-toggle,
    #orders-today-section .orders-status-tabs,
    #orders-today-section .orders-filter-tabs,
    #orders-today-section .status-filter-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: end !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-quick-toggle-btn,
    #orders-today-section .orders-status-tabs .btn,
    #orders-today-section .orders-filter-tabs .btn,
    #orders-today-section .status-filter-tabs .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    #orders-today-section [data-modal-target="#otherPendingOrdersModal"],
    #orders-today-section [data-open-other-pending],
    #orders-today-section .other-pending-orders-btn,
    #orders-today-section .btn-view-other-pending {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        margin: 0 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #orders-today-section .mobile-order-card,
    #orders-today-section .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
        overflow: visible !important;
    }

    #orders-today-section .mobile-order-card-header,
    #orders-today-section .mobile-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
    }

    #orders-today-section .mobile-order-code-label {
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;
    }

    #orders-today-section .mobile-status-pill,
    #orders-today-section .mobile-order-status {
        justify-self: end !important;
        align-self: start !important;
        white-space: nowrap !important;
    }

    #orders-today-section .mobile-order-summary-topline {
        display: block !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    #orders-today-section .mobile-order-subline,
    #orders-today-section .mobile-order-meta,
    #orders-today-section .mobile-order-body {
        display: none !important;
    }

    #orders-today-section .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: #F4F3FF !important;
    }

    #orders-today-section .mobile-order-client-icon {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
    }

    #orders-today-section .mobile-order-client-info {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    #orders-today-section .mobile-order-client-info strong {
        display: block !important;
        color: #2F3260 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #orders-today-section .mobile-order-client-info span {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    #orders-today-section .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #orders-today-section .mobile-order-metric {
        display: grid !important;
        gap: 6px !important;
        min-height: 82px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: #F8FAFF !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
    }

    #orders-today-section .mobile-order-metric-icon {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }

    #orders-today-section .mobile-order-metric > span {
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #orders-today-section .mobile-order-metric > strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #orders-today-section .mobile-order-detail-btn,
    #orders-today-section [data-order-detail-trigger].mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - corregir header de Ordenes para entregar hoy.
    */
    #orders-today-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    #orders-today-section .orders-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .section-header,
    #orders-today-section .card-header {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section h2,
    #orders-today-section h3,
    #orders-today-section .section-title,
    #orders-today-section .orders-title,
    #orders-today-section .card-title {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #orders-today-section .section-subtitle,
    #orders-today-section .orders-subtitle,
    #orders-today-section .card-subtitle,
    #orders-today-section .orders-header p {
        display: block !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 4px 0 0 !important;
        color: var(--muted) !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    #orders-today-section .orders-header-right {
        width: 100% !important;
        margin-top: 0 !important;
    }

    #orders-today-section .orders-inline-filters,
    #orders-today-section .orders-today-controls,
    #orders-today-section .orders-filters,
    #orders-today-section .filters-row,
    #orders-today-section .orders-total-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-pending-today-empty-state {
        margin-top: 0 !important;
    }

    #orders-today-section .orders-filter-row,
    #orders-today-section .orders-inline-filter-form {
        flex: 0 1 260px !important;
        width: auto !important;
        max-width: 320px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: end !important;
        gap: 8px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-filter-laundry,
    #orders-today-section .laundry-filter,
    #orders-today-section .form-field:has(select),
    #orders-today-section .orders-filter-field,
    #orders-today-section .filter-group-inline {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section select,
    #orders-today-section .form-select {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    #orders-today-section .filter-icon-btn,
    #orders-today-section .orders-filter-toggle,
    #orders-today-section .orders-filter-button,
    #orders-today-section .filter-btn,
    #orders-today-section .btn-icon {
        width: 42px !important;
        min-width: 42px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-quick-toggle,
    #orders-today-section .orders-status-tabs,
    #orders-today-section .orders-filter-tabs,
    #orders-today-section .status-filter-tabs {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-quick-toggle-btn,
    #orders-today-section .orders-status-tabs .btn,
    #orders-today-section .orders-filter-tabs .btn,
    #orders-today-section .status-filter-tabs .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        padding-inline: 14px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        margin: 0 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #orders-today-section [data-modal-target="#otherPendingOrdersModal"],
    #orders-today-section [data-open-other-pending],
    #orders-today-section .other-pending-orders-btn,
    #orders-today-section .btn-view-other-pending {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 180px !important;
        max-width: 220px !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        margin: 0 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #orders-today-section .orders-inline-filters {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #orders-today-section .orders-header {
        margin-bottom: 14px !important;
    }

    #orders-today-section .orders-inline-filter-form {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: end !important;
        gap: 8px !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #orders-today-section .orders-quick-toggle {
        display: contents !important;
    }

    #orders-today-section .orders-quick-toggle-btn {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-inline: 8px !important;
        white-space: nowrap !important;
    }

    #orders-today-section [data-modal-target="#otherPendingOrdersModal"] {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      centrar verticalmente Estado de la orden y Estado de pago.
    */

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status {
        min-height: 60px !important;
        padding: 0 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status > span,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status > label,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .summary-order-inline-label {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        color: #8A879B !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status strong {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .summary-detail-pill,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .status-badge {
        margin: 0 !important;
        min-height: 30px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: normal !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    #summaryOrderDetailModal .summary-order-status--pendiente,
    #summaryOrderDetailModal .summary-detail-pill.order-pendiente {
        background: #F7E9BC !important;
        color: #B88321 !important;
        border: 1px solid #E9D189 !important;
    }

    #summaryOrderDetailModal .summary-order-payment-status--cancelado,
    #summaryOrderDetailModal .summary-order-payment-status--pagado,
    #summaryOrderDetailModal .summary-detail-pill.payment-cancelado,
    #summaryOrderDetailModal .summary-detail-pill.payment-pagado {
        background: #DDF1E2 !important;
        color: #5F8E68 !important;
        border: 1px solid #C6E4CF !important;
    }

    #summaryOrderDetailModal .summary-detail-pill::before,
    #summaryOrderDetailModal .summary-detail-pill::after,
    #summaryOrderDetailModal .status-badge::before,
    #summaryOrderDetailModal .status-badge::after {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      separacion consistente entre metricas y boton Ver detalle.
    */

    .summary-page .mobile-summary-order-card,
    #summaryEnteredOrdersModal .mobile-summary-order-card,
    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        row-gap: 10px !important;
    }

    .summary-page .mobile-summary-order-metrics,
    #summaryEnteredOrdersModal .mobile-summary-order-metrics,
    #summaryDeliveredOrdersModal .mobile-summary-order-metrics {
        margin-bottom: 0 !important;
    }

    .summary-page .mobile-summary-order-detail-btn,
    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn {
        margin-top: 10px !important;
    }

    .summary-page .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryEnteredOrdersModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      boton Ver detalle dentro de modales de cobros por metodo.
    */

    .summary-payments-method-modal .mobile-summary-order-card,
    .summary-payment-method-modal .mobile-summary-order-card,
    #summaryPaymentsMethodModal .mobile-summary-order-card,
    #summaryPaymentMethodModal .mobile-summary-order-card {
        row-gap: 10px !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn {
        grid-area: detail !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 12px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn i,
    .summary-payment-method-modal .mobile-summary-order-detail-btn i,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn i,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn i {
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    .summary-payments-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      boton Ver detalle dentro de modales de cobros por metodo.
    */

    .summary-payments-method-modal .mobile-summary-order-card,
    .summary-payment-method-modal .mobile-summary-order-card,
    #summaryPaymentsMethodModal .mobile-summary-order-card,
    #summaryPaymentMethodModal .mobile-summary-order-card {
        row-gap: 10px !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn {
        grid-area: detail !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 12px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn i,
    .summary-payment-method-modal .mobile-summary-order-detail-btn i,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn i,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn i {
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    .summary-payments-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      boton Ver detalle dentro de modales de cobros por metodo.
    */

    .summary-payments-method-modal .mobile-summary-order-card,
    .summary-payment-method-modal .mobile-summary-order-card,
    #summaryPaymentsMethodModal .mobile-summary-order-card,
    #summaryPaymentMethodModal .mobile-summary-order-card {
        row-gap: 10px !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn {
        grid-area: detail !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 12px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn i,
    .summary-payment-method-modal .mobile-summary-order-detail-btn i,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn i,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn i {
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    .summary-payments-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn {
        margin-top: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - switch Para hoy / Total.
    */
    .orders-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 12px 0 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn,
    .orders-mobile-section-switcher .orders-mobile-switch-btn {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn.is-active,
    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn[aria-pressed="true"],
    .orders-mobile-section-switcher .orders-mobile-switch-btn.is-active,
    .orders-mobile-section-switcher .orders-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn.is-active i,
    .orders-mobile-section-switcher .orders-mobile-section-switcher-btn[aria-pressed="true"] i,
    .orders-mobile-section-switcher .orders-mobile-switch-btn.is-active i,
    .orders-mobile-section-switcher .orders-mobile-switch-btn[aria-pressed="true"] i {
        color: #fff !important;
    }

    body.orders-page.orders-ipad-horizontal-panel-today #orders-today-section {
        display: grid !important;
    }

    body.orders-page.orders-ipad-horizontal-panel-today #orders-total-section {
        display: none !important;
    }

    body.orders-page.orders-ipad-horizontal-panel-total #orders-today-section {
        display: none !important;
    }

    body.orders-page.orders-ipad-horizontal-panel-total #orders-total-section {
        display: grid !important;
    }

    body.orders-page.orders-ipad-horizontal-panel-today #orders-today-section,
    body.orders-page.orders-ipad-horizontal-panel-total #orders-total-section {
        width: 100% !important;
        margin-bottom: 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    body.orders-page .orders-mobile-section-switcher {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    body.orders-page .orders-mobile-section-switcher + #orders-today-section,
    body.orders-page .orders-mobile-section-switcher + #orders-total-section {
        margin-top: 0 !important;
    }

    body.orders-page .page-section,
    body.orders-page .page-shell,
    body.orders-page .page-content {
        row-gap: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    body.orders-page .orders-mobile-section-switcher {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    body.orders-page .orders-mobile-section-switcher + #orders-today-section,
    body.orders-page .orders-mobile-section-switcher + #orders-total-section {
        margin-top: 0 !important;
    }

    body.orders-page .page-section,
    body.orders-page .page-shell,
    body.orders-page .page-content {
        row-gap: 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .tablet-app-mode .page-section.page-shell:has(.orders-mobile-section-switcher) {
        row-gap: 10px !important;
        gap: 6px !important;
    }

    .tablet-app-mode .page-section.page-shell:has(.orders-mobile-section-switcher) > .orders-mobile-section-switcher {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .tablet-app-mode .orders-mobile-section-switcher + #orders-today-section,
    .tablet-app-mode .orders-mobile-section-switcher + #orders-total-section {
        margin-top: 0 !important;
    }

    .tablet-app-mode #orders-today-section,
    .tablet-app-mode #orders-total-section {
        margin-top: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .tablet-app-mode .page-section.page-shell:has(.orders-mobile-section-switcher) {
        row-gap: 10px !important;
        gap: 10px !important;
    }

    .tablet-app-mode .page-section.page-shell:has(.orders-mobile-section-switcher) > .orders-mobile-section-switcher {
        margin-top: 6px !important;
        margin-bottom: 10px !important;
    }

    .tablet-app-mode .orders-mobile-section-switcher + #orders-today-section,
    .tablet-app-mode .orders-mobile-section-switcher + #orders-total-section {
        margin-top: 0 !important;
    }

    .tablet-app-mode #orders-today-section,
    .tablet-app-mode #orders-total-section {
        margin-top: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - compactar separacion real entre header, switch y card.
    */
    .tablet-app-mode .mobile-page-header {
        margin-bottom: 8px !important;
    }

    .tablet-app-mode .content-area.page-content,
    .tablet-app-mode .page-content {
        gap: 0 !important;
        row-gap: 0 !important;
    }

    .tablet-app-mode .page-section.page-shell:has(> .orders-mobile-section-switcher) {
        gap: 8px !important;
        row-gap: 2px !important;
    }

    .tablet-app-mode .page-section.page-shell > .orders-mobile-section-switcher {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .tablet-app-mode .orders-mobile-section-switcher + [data-orders-mobile-panel],
    .tablet-app-mode .orders-mobile-section-switcher + #orders-today-section,
    .tablet-app-mode .orders-mobile-section-switcher + #orders-total-section {
        margin-top: 0 !important;
    }

    .tablet-app-mode #orders-today-section,
    .tablet-app-mode #orders-total-section {
        margin-top: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - switch Para hoy / Total funcional.
    */
    body.tablet-app-mode.orders-ipad-horizontal-panel-today #orders-today-section,
    body.tablet-app-mode.orders-ipad-horizontal-panel-total #orders-total-section {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.tablet-app-mode.orders-ipad-horizontal-panel-today #orders-total-section,
    body.tablet-app-mode.orders-ipad-horizontal-panel-total #orders-today-section,
    body.tablet-app-mode #orders-today-section[hidden],
    body.tablet-app-mode #orders-total-section[hidden] {
        display: none !important;
    }

    body.tablet-app-mode.orders-ipad-horizontal-panel-today
        .orders-mobile-section-switcher-btn[data-orders-mobile-tab="today"],
    body.tablet-app-mode.orders-ipad-horizontal-panel-total
        .orders-mobile-section-switcher-btn[data-orders-mobile-tab="total"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
    }

    body.tablet-app-mode.orders-ipad-horizontal-panel-today
        .orders-mobile-section-switcher-btn[data-orders-mobile-tab="total"],
    body.tablet-app-mode.orders-ipad-horizontal-panel-total
        .orders-mobile-section-switcher-btn[data-orders-mobile-tab="today"] {
        background: #fff !important;
        color: var(--primary) !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Modal Ordenes pendientes de entrega.
      Usar el mismo patron de cards aprobado en mobile/iPad vertical.
    */
    #otherPendingOrdersModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        overflow: hidden !important;
    }

    #otherPendingOrdersModal .modal-dialog,
    #otherPendingOrdersModal .modal-content,
    #otherPendingOrdersModal .delayed-orders-modal,
    #otherPendingOrdersModal .orders-modal-standard,
    #otherPendingOrdersModal .pending-orders-modal-content {
        width: min(100%, calc(100vw - 48px)) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    #otherPendingOrdersModal .modal-header {
        flex: 0 0 auto !important;
        min-height: 64px !important;
        padding: 18px 64px 16px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #otherPendingOrdersModal .modal-header h3 {
        margin: 0 !important;
        font-size: 1.18rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .modal-close-btn {
        top: 12px !important;
        right: 12px !important;
    }

    #otherPendingOrdersModal .modal-body,
    #otherPendingOrdersModal .pending-orders-modal-body,
    #otherPendingOrdersModal .delayed-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 18px 18px !important;
    }

    #otherPendingOrdersModal .history-filters,
    #otherPendingOrdersModal .pending-other-filters,
    #otherPendingOrdersModal .pending-orders-filter-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    #otherPendingOrdersModal .pending-other-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    #otherPendingOrdersModal .pending-other-filter-search input,
    #otherPendingOrdersModal [data-pending-other-search] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.9) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle > i {
        transition: transform 0.18s ease !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters[hidden] {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters > *,
    #otherPendingOrdersModal .pending-other-filter-status,
    #otherPendingOrdersModal .pending-other-filter-payment,
    #otherPendingOrdersModal .pending-other-filter-laundry,
    #otherPendingOrdersModal .pending-other-filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters label {
        display: block !important;
        margin: 0 0 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters input,
    #otherPendingOrdersModal .pending-orders-mobile-advanced-filters select {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-other-filter-actions .btn,
    #otherPendingOrdersModal .pending-orders-clear-btn {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        justify-content: center !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .pending-orders-desktop-results,
    #otherPendingOrdersModal .delayed-orders-table-shell,
    #otherPendingOrdersModal .table-wrapper,
    #otherPendingOrdersModal table {
        display: none !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #otherPendingOrdersModal .pending-orders-mobile-results[hidden],
    #otherPendingOrdersModal .pending-orders-mobile-results[style] {
        display: grid !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal [data-pending-other-card],
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card,
    #otherPendingOrdersModal .pending-orders-mobile-results .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
    }

    #otherPendingOrdersModal .mobile-order-card-header,
    #otherPendingOrdersModal .mobile-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #otherPendingOrdersModal .mobile-order-code-label {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .mobile-order-summary-topline,
    #otherPendingOrdersModal .mobile-order-subline {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .mobile-status-pill {
        justify-self: end !important;
        align-self: start !important;
        margin-left: 8px !important;
        white-space: nowrap !important;
    }

    #otherPendingOrdersModal .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: #F4F3FF !important;
    }

    #otherPendingOrdersModal .mobile-order-client-icon {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
    }

    #otherPendingOrdersModal .mobile-order-client-info strong {
        display: block !important;
        color: #2F3260 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #otherPendingOrdersModal .mobile-order-client-info span {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    #otherPendingOrdersModal .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric {
        display: grid !important;
        gap: 6px !important;
        min-height: 82px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: #F8FAFF !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        overflow: visible !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-total,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(1) .mobile-order-metric-icon {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-debt,
    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment-pending,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) .mobile-order-metric-icon.metric-debt,
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(3) .mobile-order-metric-icon.metric-debt {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending),
    #otherPendingOrdersModal .mobile-order-metrics-grid .mobile-order-metric:nth-child(2) .mobile-order-metric-icon.metric-payment {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > span {
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #otherPendingOrdersModal .mobile-order-metric > strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #otherPendingOrdersModal .mobile-order-payment,
    #otherPendingOrdersModal .mobile-order-meta,
    #otherPendingOrdersModal .mobile-order-body {
        display: none !important;
    }

    #otherPendingOrdersModal .mobile-order-actions,
    #otherPendingOrdersModal .mobile-order-footer {
        display: block !important;
        width: 100% !important;
    }

    #otherPendingOrdersModal .mobile-order-detail-btn,
    #otherPendingOrdersModal [data-order-detail-trigger].mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 14px !important;
        background: var(--primary) !important;
        color: #fff !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination:not([hidden]),
    #otherPendingOrdersModal .orders-modal-pagination.is-visible {
        display: grid !important;
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
    }

    #otherPendingOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Modal Detalle de la orden.
      Header compacto y acciones superiores en una sola fila.
    */
    #order-detail-modal-orders {
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        overflow: hidden !important;
    }

    #order-detail-modal-orders .modal-dialog,
    #order-detail-modal-orders .modal-content,
    #order-detail-modal-orders .order-detail-modal-shell,
    #order-detail-modal-orders .order-detail-modal-content {
        width: min(100%, calc(100vw - 48px)) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    #order-detail-modal-orders .modal-header,
    #order-detail-modal-orders .order-detail-modal-header {
        position: relative !important;
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        padding: 18px 20px 16px !important;
        padding-right: 72px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .modal-header h3,
    #order-detail-modal-orders .order-detail-modal-title,
    #order-detail-modal-orders .modal-title {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders [data-order-detail-code],
    #order-detail-modal-orders .order-detail-modal-code,
    #order-detail-modal-orders .modal-subtitle {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .modal-close-btn,
    #order-detail-modal-orders [data-modal-close] {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    #order-detail-modal-orders .order-detail-modal-actions,
    #order-detail-modal-orders .order-detail-header-actions,
    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-audit-menu {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions:not(:has(> [data-order-detail-header-void]:not([hidden]))):not(:has(> [data-order-detail-audit]:not([hidden]))) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions .modal-close-btn {
        justify-self: auto !important;
        align-self: auto !important;
    }

    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-order-detail-whatsapp],
    #order-detail-modal-orders [data-whatsapp-trigger],
    #order-detail-modal-orders .order-detail-whatsapp-btn,
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders [data-order-detail-search-link],
    #order-detail-modal-orders .order-detail-search-link {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-order-detail-whatsapp],
    #order-detail-modal-orders [data-whatsapp-trigger],
    #order-detail-modal-orders .order-detail-whatsapp-link,
    #order-detail-modal-orders [data-order-detail-search-link],
    #order-detail-modal-orders .order-detail-search-link {
        position: static !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions:has(> [data-order-detail-header-void]:not([hidden])):has(> [data-order-detail-audit]:not([hidden])) > .order-detail-search-link {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        justify-content: center !important;
    }

    #order-detail-modal-orders .modal-body,
    #order-detail-modal-orders .order-detail-modal-body,
    #order-detail-modal-orders .modal-scroll-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 18px 20px 20px !important;
    }

    #order-detail-modal-orders .order-detail-modal-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    #order-detail-modal-orders .order-detail-section-card {
        padding: 18px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.65) !important;
        background: rgba(255, 255, 255, 0.86) !important;
        box-shadow: 0 8px 20px rgba(74, 88, 153, 0.06) !important;
    }

    #order-detail-modal-orders .order-detail-section-card .section-header,
    #order-detail-modal-orders .order-detail-section-header {
        margin-bottom: 14px !important;
    }

    #order-detail-modal-orders .order-detail-section-card .section-title {
        margin: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-section-card .section-subtitle {
        margin: 4px 0 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.35 !important;
        color: var(--muted) !important;
        font-weight: 500 !important;
    }

    #order-detail-modal-orders .order-detail-info-grid,
    #order-detail-modal-orders .search-info-grid--client,
    #order-detail-modal-orders .search-info-grid--order {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #order-detail-modal-orders .order-detail-info-grid .info-item,
    #order-detail-modal-orders .search-info-grid .info-item {
        min-height: 72px !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
    }

    #order-detail-modal-orders .order-detail-info-grid .info-item span,
    #order-detail-modal-orders .search-info-grid .info-item span {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    #order-detail-modal-orders .order-detail-info-grid .info-item strong,
    #order-detail-modal-orders .search-info-grid .info-item strong {
        margin-top: 6px !important;
        font-size: 0.96rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-services-list {
        display: grid !important;
        gap: 12px !important;
    }

    #order-detail-modal-orders .order-detail-service-row {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        gap: 14px !important;
        align-items: center !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    #order-detail-modal-orders .order-detail-service-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        white-space: nowrap !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payments-list {
        display: grid !important;
        gap: 10px !important;
    }

    #order-detail-modal-orders .order-detail-payment-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
    }

    #order-detail-modal-orders .order-detail-payment-main {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-payment-amount-line strong {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payment-side {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Detalle de orden:
      botones full width y grids flexibles sin huecos raros.
    */
    #order-detail-modal-orders .order-detail-header-actions,
    #order-detail-modal-orders .order-detail-actions,
    #order-detail-modal-orders .modal-header-actions,
    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-audit-menu {
        width: 100% !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-header-actions .btn,
    #order-detail-modal-orders .order-detail-actions .btn,
    #order-detail-modal-orders .modal-header-actions .btn,
    #order-detail-modal-orders .order-detail-modal-header-actions .btn,
    #order-detail-modal-orders [data-order-detail-header-void],
    #order-detail-modal-orders [data-order-detail-audit-trigger],
    #order-detail-modal-orders [data-whatsapp-trigger],
    #order-detail-modal-orders [data-order-detail-search-link] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #order-detail-modal-orders .order-detail-info-grid,
    #order-detail-modal-orders .search-info-grid--client,
    #order-detail-modal-orders .search-info-grid--order {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-info-grid .info-item,
    #order-detail-modal-orders .search-info-grid .info-item,
    #order-detail-modal-orders .search-info-grid--client .info-item,
    #order-detail-modal-orders .search-info-grid--order .info-item {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Modal Detalle de la orden.
      Usar clases reales del DOM para corregir acciones y grillas.
    */
    #order-detail-modal-orders .order-detail-modal-shell > .modal-header,
    #order-detail-modal-orders .modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "heading close"
            "actions actions" !important;
        gap: 12px !important;
        align-items: start !important;
        padding: 18px 20px 16px !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading {
        grid-area: heading !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .modal-close-btn,
    #order-detail-modal-orders [data-modal-close] {
        grid-area: close !important;
        justify-self: end !important;
        align-self: start !important;
        position: static !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions {
        grid-area: actions !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions .btn,
    #order-detail-modal-orders .order-detail-modal-header-actions button,
    #order-detail-modal-orders .order-detail-modal-header-actions a {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .search-info-grid--client.order-detail-info-grid,
    #order-detail-modal-orders .search-info-grid--client {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    #order-detail-modal-orders .search-info-grid--order.order-detail-info-grid,
    #order-detail-modal-orders .search-info-grid--order {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    #order-detail-modal-orders .search-info-grid--client .info-item,
    #order-detail-modal-orders .search-info-grid--order .info-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 72px !important;
        height: auto !important;
        padding: 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #order-detail-modal-orders .search-info-grid--client .info-item span,
    #order-detail-modal-orders .search-info-grid--order .info-item span,
    #order-detail-modal-orders .search-info-grid--client .info-item strong,
    #order-detail-modal-orders .search-info-grid--order .info-item strong {
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - corregir header del modal Detalle de orden.
      El close no debe ocupar espacio dentro del flujo.
    */
    #order-detail-modal-orders .order-detail-modal-shell,
    #order-detail-modal-orders .modal-content {
        position: relative !important;
    }

    #order-detail-modal-orders .modal-header {
        position: relative !important;
        display: block !important;
        padding: 18px 72px 16px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
    }

    #order-detail-modal-orders .order-detail-modal-heading h3,
    #order-detail-modal-orders .modal-header h3 {
        margin: 0 !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-modal-code,
    #order-detail-modal-orders [data-order-detail-code] {
        margin-top: 4px !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    #order-detail-modal-orders .order-detail-modal-header-actions .btn,
    #order-detail-modal-orders .order-detail-modal-header-actions button,
    #order-detail-modal-orders .order-detail-modal-header-actions a {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #order-detail-modal-orders .modal-close-btn,
    #order-detail-modal-orders button[data-modal-close] {
        position: absolute !important;
        top: 14px !important;
        right: 16px !important;
        z-index: 20 !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
    }

    #order-detail-modal-orders .modal-body,
    #order-detail-modal-orders .order-detail-modal-body,
    #order-detail-modal-orders [data-order-detail-body] {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - reposicionar X del modal Detalle de orden.
    */
    #order-detail-modal-orders .order-detail-modal-shell,
    #order-detail-modal-orders .modal-content {
        position: relative !important;
    }

    #order-detail-modal-orders .modal-close-btn,
    #order-detail-modal-orders button[data-modal-close] {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 30 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
    }

    #order-detail-modal-orders .modal-header {
        padding-right: 72px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - alinear X con el titulo del modal.
    */
    #order-detail-modal-orders .modal-header {
        position: relative !important;
        padding-right: 72px !important;
    }

    #order-detail-modal-orders .modal-close-btn,
    #order-detail-modal-orders button[data-modal-close] {
        position: absolute !important;
        top: 10px !important;
        right: 18px !important;
        z-index: 30 !important;
        margin: 0 !important;
        transform: none !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Detalle de orden / Pagos:
      empty state visual cuando no hay pagos.
    */
    #order-detail-modal-orders .order-detail-payments-empty {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 520px !important;
        margin-top: 12px !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: linear-gradient(
            180deg,
            rgba(247, 249, 255, 0.96) 0%,
            rgba(241, 245, 255, 0.94) 100%
        ) !important;
        box-shadow: none !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: rgba(74, 91, 168, 0.10) !important;
        color: var(--primary) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        margin: 1px 0 0 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-copy {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-title {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.94rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-payments-empty-text {
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 0.86rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-payments-empty) {
        padding-bottom: 18px !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-payments-empty) .section-header {
        margin-bottom: 8px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    #order-detail-modal-orders .order-detail-payments-empty {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Detalle de orden / Servicios agregados.
      Alinear pill "Servicio registrado" con el precio.
    */
    #order-detail-modal-orders .order-detail-service-row {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        gap: 14px !important;
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-copy {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "head status"
            "detail status"
            "meta status" !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-head {
        grid-area: head !important;
        display: block !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-status,
    #order-detail-modal-orders .pill-chip.order-detail-service-status {
        grid-area: status !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        transform: none !important;
        top: auto !important;
    }

    #order-detail-modal-orders .order-detail-service-detail {
        grid-area: detail !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    #order-detail-modal-orders .order-detail-service-meta {
        grid-area: meta !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    #order-detail-modal-orders .order-detail-service-side {
        display: grid !important;
        align-items: center !important;
        justify-items: end !important;
        align-self: center !important;
        min-width: 84px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-amount {
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
        justify-self: end !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Detalle de orden / Servicios agregados:
      mover visualmente el pill "Servicio registrado" antes del precio.
    */
    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto auto !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-icon {
        grid-column: 1 !important;
        grid-row: 1 / 4 !important;
        align-self: center !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-copy,
    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-head {
        display: contents !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-head strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-detail {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-meta {
        grid-column: 2 !important;
        grid-row: 3 !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-status,
    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .pill-chip.order-detail-service-status {
        grid-column: 3 !important;
        grid-row: 1 / 4 !important;
        display: inline-flex !important;
        justify-self: end !important;
        align-self: center !important;
        order: initial !important;
        margin: 0 !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        transform: none !important;
        top: auto !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-side {
        grid-column: 4 !important;
        grid-row: 1 / 4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center !important;
        gap: 0 !important;
        min-width: max-content !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-service-row:has(.order-detail-service-status) .order-detail-service-amount {
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        align-self: center !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Vista principal /orders:
      organizar cards en 2 columnas. No afecta modales.
    */
    #orders-today-section .orders-mobile-list,
    #orders-today-section .mobile-orders-list,
    #orders-today-section .orders-list-mobile,
    #orders-total-section .orders-mobile-list,
    #orders-total-section .mobile-orders-list,
    #orders-total-section .orders-list-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    #orders-today-section .mobile-order-card,
    #orders-today-section .mobile-order-card-airy,
    #orders-total-section .mobile-order-card,
    #orders-total-section .mobile-order-card-airy {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
    }

    #orders-today-section .mobile-order-metrics-grid,
    #orders-total-section .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #orders-today-section .mobile-order-metric,
    #orders-total-section .mobile-order-metric {
        min-width: 0 !important;
        min-height: 78px !important;
        padding: 10px !important;
    }

    #orders-today-section .mobile-order-detail-btn,
    #orders-total-section .mobile-order-detail-btn {
        width: 100% !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Total de ordenes:
      separar "Ver todos" de la primera fila de cards.
    */
    #orders-total-section [data-modal-target="#allOrdersModal"],
    #orders-total-section .card-actions,
    #orders-total-section .orders-card-actions,
    #orders-total-section .section-actions {
        margin-bottom: 16px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - Modal Todas las ordenes:
      replicar patron visual del modal Ordenes pendientes.
    */
    #allOrdersModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        overflow: hidden !important;
    }

    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .orders-modal-standard,
    #allOrdersModal .modal-orders-wide,
    #allOrdersModal .all-orders-modal-content {
        width: min(100%, calc(100vw - 48px)) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    #allOrdersModal .modal-header,
    #allOrdersModal .all-orders-modal-header {
        flex: 0 0 auto !important;
        min-height: 64px !important;
        padding: 18px 64px 16px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    #allOrdersModal .modal-header h3,
    #allOrdersModal .all-orders-modal-header h3 {
        margin: 0 !important;
        font-size: 1.18rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .modal-close-btn {
        top: 12px !important;
        right: 12px !important;
    }

    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 18px 18px !important;
    }

    #allOrdersModal .orders-total-filters,
    #allOrdersModal .orders-total-filters.orders-total-filters--no-laundry,
    #allOrdersModal .all-orders-filter-form,
    #allOrdersModal .orders-modal-filters {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .orders-filter-search {
        order: 1 !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    #allOrdersModal .orders-filter-search input,
    #allOrdersModal [data-orders-total-search] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle,
    #allOrdersModal [data-all-orders-mobile-filters-toggle] {
        order: 2 !important;
        align-self: stretch !important;
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.9) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle span,
    #allOrdersModal [data-all-orders-mobile-filters-toggle] span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle-chevron,
    #allOrdersModal .all-orders-mobile-filters-toggle > i,
    #allOrdersModal [data-all-orders-mobile-filters-toggle] > i {
        transition: transform 0.18s ease !important;
    }

    #allOrdersModal .all-orders-mobile-filters-toggle.is-open .all-orders-mobile-filters-toggle-chevron,
    #allOrdersModal .all-orders-mobile-filters-toggle.is-open > i,
    #allOrdersModal [data-all-orders-mobile-filters-toggle].is-open > i {
        transform: rotate(180deg) !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] {
        order: 3 !important;
        align-self: stretch !important;
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.72) !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters[hidden],
    #allOrdersModal [data-all-orders-mobile-advanced-filters][hidden] {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters > *,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters label,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] label {
        display: block !important;
        margin: 0 0 6px !important;
        color: var(--muted) !important;
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters input,
    #allOrdersModal .all-orders-mobile-advanced-filters select,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] input,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] select {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-mobile-advanced-filters .btn,
    #allOrdersModal [data-all-orders-mobile-advanced-filters] .btn,
    #allOrdersModal [data-orders-total-clear] {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        justify-content: center !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .table-wrapper,
    #allOrdersModal table {
        display: none !important;
    }

    #allOrdersModal .all-orders-mobile-results,
    #allOrdersModal .orders-modal-results-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #allOrdersModal .all-orders-mobile-results[hidden],
    #allOrdersModal .orders-modal-results-mobile[hidden],
    #allOrdersModal .all-orders-mobile-results[style],
    #allOrdersModal .orders-modal-results-mobile[style] {
        display: grid !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #allOrdersModal [data-orders-total-card],
    #allOrdersModal .all-orders-mobile-results .mobile-order-card,
    #allOrdersModal .all-orders-mobile-results .mobile-order-card-airy,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card,
    #allOrdersModal .orders-modal-results-mobile .mobile-order-card-airy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
    }

    #allOrdersModal .mobile-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #allOrdersModal .mobile-order-code-label {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .mobile-order-subline {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #allOrdersModal .mobile-status-pill {
        justify-self: end !important;
        align-self: start !important;
        margin-left: 8px !important;
        white-space: nowrap !important;
    }

    #allOrdersModal .mobile-order-client-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: #F4F3FF !important;
    }

    #allOrdersModal .mobile-order-client-icon {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
    }

    #allOrdersModal .mobile-order-client-info strong {
        display: block !important;
        color: #2F3260 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #allOrdersModal .mobile-order-client-info span {
        display: block !important;
        color: var(--muted) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    #allOrdersModal .mobile-order-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #allOrdersModal .mobile-order-metric {
        display: grid !important;
        gap: 6px !important;
        min-height: 82px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: #F8FAFF !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        overflow: visible !important;
    }

    #allOrdersModal .mobile-order-metric-icon {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }

    #allOrdersModal .mobile-order-metric > span {
        color: var(--muted) !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #allOrdersModal .mobile-order-metric > strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #allOrdersModal .mobile-order-detail-btn,
    #allOrdersModal [data-order-detail-trigger].mobile-order-detail-btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 14px !important;
        background: var(--primary) !important;
        color: #fff !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #allOrdersModal .orders-modal-pagination:not([hidden]),
    #allOrdersModal .orders-modal-pagination.is-visible {
        display: grid !important;
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        box-shadow: none !important;
    }

    #allOrdersModal .orders-modal-pagination[hidden] {
        display: none !important;
    }

    #allOrdersModal .modal-scroll-top-btn {
        display: inline-flex !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - #allOrdersModal:
      colores caracteristicos de metricas Total / Deuda / Pago.
    */
    #allOrdersModal .mobile-order-metric-icon {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }

    #allOrdersModal .mobile-order-metric:nth-child(1) .mobile-order-metric-icon,
    #allOrdersModal .mobile-order-metric-icon.metric-total {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #2563eb !important;
    }

    #allOrdersModal .mobile-order-metric:nth-child(1) .mobile-order-metric-icon i,
    #allOrdersModal .mobile-order-metric-icon.metric-total i {
        color: #2563eb !important;
    }

    #allOrdersModal .mobile-order-metric:nth-child(2) .mobile-order-metric-icon,
    #allOrdersModal .mobile-order-metric-icon.metric-debt,
    #allOrdersModal .mobile-order-metric-icon.metric-payment-pending {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric:nth-child(2) .mobile-order-metric-icon i,
    #allOrdersModal .mobile-order-metric-icon.metric-debt i,
    #allOrdersModal .mobile-order-metric-icon.metric-payment-pending i {
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric:nth-child(3) .mobile-order-metric-icon {
        background: rgba(251, 146, 60, 0.16) !important;
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric:nth-child(3) .mobile-order-metric-icon i {
        color: #f97316 !important;
    }

    #allOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon,
    #allOrdersModal .mobile-order-metric-icon.metric-debt-paid,
    #allOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) {
        background: rgba(34, 197, 94, 0.14) !important;
        color: #16a34a !important;
    }

    #allOrdersModal .mobile-order-metric.is-settled .mobile-order-metric-icon i,
    #allOrdersModal .mobile-order-metric-icon.metric-debt-paid i,
    #allOrdersModal .mobile-order-metric-icon.metric-payment:not(.metric-payment-pending) i {
        color: #16a34a !important;
    }

    #allOrdersModal .mobile-order-metric > span {
        font-weight: 600 !important;
    }

    #allOrdersModal .mobile-order-metric > strong {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      SOLO iPad horizontal - #allOrdersModal:
      boton volver arriba con UI flotante.
    */
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .all-orders-modal-content {
        position: relative !important;
    }

    #allOrdersModal .modal-scroll-top-btn {
        position: absolute !important;
        right: 22px !important;
        bottom: 92px !important;
        z-index: 30 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;
        backdrop-filter: blur(12px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.18s ease !important;
    }

    #allOrdersModal .modal-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }

    #allOrdersModal .modal-scroll-top-btn i {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    #allOrdersModal .modal-scroll-top-btn:active {
        transform: translateY(1px) scale(0.96) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Detalle de orden:
      ubicar "Orden anulada" arriba a la derecha en Orden principal.
    */
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-voided-chip) {
        position: relative !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-voided-chip) .order-detail-section-header {
        position: relative !important;
        padding-right: 150px !important;
        align-items: flex-start !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-voided-chip) .order-detail-section-actions {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        z-index: 2 !important;
    }

    #order-detail-modal-orders .order-detail-section-actions > .order-voided-chip.order-detail-status-pill,
    #order-detail-modal-orders .order-detail-section-actions > .order-voided-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        max-width: 132px !important;
        min-height: 24px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: #ececec !important;
        border: 1px solid #d5d5d5 !important;
        color: #5f6368 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    /*
      SOLO iPad vertical - banner de orden anulada:
      mantener variante gris/plomo, sin heredar el morado de rectificacion.
    */
    #order-detail-modal-orders .order-voided-banner {
        background: #f7f7f7 !important;
        border: 1px solid #d5d5d5 !important;
        color: #5f6368 !important;
        box-shadow: none !important;
    }

    #order-detail-modal-orders .order-voided-banner .order-voided-banner-chip,
    #order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip,
    #order-detail-modal-orders .order-voided-banner-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        min-height: 24px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: #ececec !important;
        border: 1px solid #d5d5d5 !important;
        color: #5f6368 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    #order-detail-modal-orders .order-voided-banner .order-voided-banner-copy,
    #order-detail-modal-orders .order-voided-banner .rectification-order-banner-text {
        color: #5f6368 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Orden principal:
      alinear el pill superior "Orden anulada" con el titulo, no con el disclaimer.
    */
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-voided-chip) .order-detail-section-header {
        position: relative !important;
        padding-right: 150px !important;
        margin-bottom: 14px !important;
        align-items: flex-start !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-voided-chip) .order-detail-section-actions {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 3 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-voided-chip) .order-detail-section-actions > .order-voided-chip {
        position: static !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        max-width: 132px !important;
        min-height: 24px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: #ececec !important;
        border: 1px solid #d5d5d5 !important;
        color: #5f6368 !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    #order-detail-modal-orders .order-voided-banner .order-voided-banner-chip,
    #order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip {
        position: static !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Orden principal:
      organizar el pill superior especial sin alterar colores.
    */
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-detail-status-pill):not(:has(> .administrative-closure-banner)) {
        position: relative !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-detail-status-pill):not(:has(> .administrative-closure-banner)) .order-detail-section-header,
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-detail-status-pill):not(:has(> .administrative-closure-banner)) .section-header {
        position: relative !important;
        padding-right: 170px !important;
        margin-bottom: 14px !important;
        align-items: flex-start !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-detail-status-pill):not(:has(> .administrative-closure-banner)) .order-detail-section-actions {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 3 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.administrative-closure-banner) .order-detail-section-actions {
        gap: 8px !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > .order-detail-status-pill) .order-detail-section-actions > .order-detail-status-pill {
        position: static !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        max-width: 150px !important;
        min-height: 24px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    /*
      Los pills internos de disclaimers deben quedarse dentro de su box.
      No se cambian colores: cada variante conserva su estilo actual.
    */
    #order-detail-modal-orders .rectification-order-banner .pill-chip,
    #order-detail-modal-orders .order-regularized-banner .pill-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .pill-chip,
    #order-detail-modal-orders .order-voided-banner .pill-chip {
        position: static !important;
        align-self: start !important;
        justify-self: start !important;
        margin: 0 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 576px) and (max-width: 899px) and (orientation: portrait) {
    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-header {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding-right: 0 !important;
        margin-bottom: 14px !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-copy {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-actions {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: auto !important;
        max-width: 50% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-actions > .order-detail-status-pill {
        position: static !important;
        flex: 0 0 auto !important;
        width: fit-content !important;
        max-width: 150px !important;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .administrative-closure-banner {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 0 !important;
        row-gap: 8px !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .administrative-closure-banner > .pill-chip {
        justify-self: start !important;
        width: fit-content !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - Orden principal:
      ubicar "Marcar como listo" arriba a la derecha sin empujar el disclaimer.
    */
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) {
        position: relative !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) .order-detail-section-header,
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) .section-header {
        position: relative !important;
        padding-right: 190px !important;
        margin-bottom: 14px !important;
        align-items: flex-start !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) .order-detail-section-actions {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 4 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    #order-detail-modal-orders .order-detail-section-card .order-detail-section-actions > [data-order-ready-action],
    #order-detail-modal-orders .order-detail-section-card .order-detail-section-actions > .order-ready-btn.btn-mark-ready-soft {
        width: auto !important;
        min-width: 148px !important;
        max-width: 176px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 14px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) .rectification-order-banner,
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) .order-regularized-banner,
    #order-detail-modal-orders .order-detail-section-card:has(.order-detail-section-actions > [data-order-ready-action]) .order-voided-banner {
        margin-top: 0 !important;
    }
}

/*
  COLOR GLOBAL - ORDEN ANULADA
  Aplica a todos los dispositivos. Solo color, no layout.
*/
#order-detail-modal-orders .pill-chip--cancelled,
#order-detail-modal-orders .pill-chip.is-cancelled,
#order-detail-modal-orders .pill-chip.order-cancelled,
#order-detail-modal-orders .order-detail-special-alert.is-cancelled .pill-chip,
#order-detail-modal-orders .order-detail-special-alert.order-cancelled .pill-chip,
#order-detail-modal-orders .order-detail-cancelled-alert .pill-chip,
#order-detail-modal-orders .order-cancelled-alert .pill-chip,
#order-detail-modal-orders .order-voided-chip,
#order-detail-modal-orders .order-voided-banner-chip {
    background: rgba(229, 229, 229, 0.95) !important;
    border-color: rgba(170, 170, 170, 0.72) !important;
    color: #60646c !important;
    font-weight: 700 !important;
}

/*
  Disclaimer de orden anulada tambien debe verse gris/plomo.
  Solo color.
*/
#order-detail-modal-orders .order-detail-special-alert.is-cancelled,
#order-detail-modal-orders .order-detail-special-alert.order-cancelled,
#order-detail-modal-orders .order-detail-cancelled-alert,
#order-detail-modal-orders .order-cancelled-alert,
#order-detail-modal-orders .order-voided-banner {
    border-color: rgba(160, 160, 160, 0.48) !important;
    background: linear-gradient(
        180deg,
        rgba(248, 248, 248, 0.96) 0%,
        rgba(242, 242, 242, 0.96) 100%
    ) !important;
    color: #60646c !important;
}

#order-detail-modal-orders .order-detail-special-alert.is-cancelled p,
#order-detail-modal-orders .order-detail-special-alert.order-cancelled p,
#order-detail-modal-orders .order-detail-cancelled-alert p,
#order-detail-modal-orders .order-cancelled-alert p,
#order-detail-modal-orders .order-voided-banner p,
#order-detail-modal-orders .order-voided-banner-copy {
    color: #60646c !important;
}

/*
  FIX GLOBAL - ORDEN ANULADA
  Pill interno real del disclaimer: solo color, no layout.
*/
#order-detail-modal-orders .order-voided-banner .pill-chip.rectification-banner-chip.order-voided-banner-chip,
#order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip,
#order-detail-modal-orders .order-voided-banner .order-voided-banner-chip,
#order-detail-modal-orders .rectification-order-banner.order-voided-banner .pill-chip.order-voided-banner-chip {
    background: rgba(229, 229, 229, 0.95) !important;
    background-color: rgba(229, 229, 229, 0.95) !important;
    background-image: none !important;
    border-color: rgba(170, 170, 170, 0.72) !important;
    color: #60646c !important;
    font-weight: 700 !important;
}

#order-detail-modal-orders .order-voided-banner .pill-chip.rectification-banner-chip.order-voided-banner-chip span,
#order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip span,
#order-detail-modal-orders .order-voided-banner .order-voided-banner-chip span,
#order-detail-modal-orders .rectification-order-banner.order-voided-banner .pill-chip.order-voided-banner-chip span {
    color: #60646c !important;
    font-weight: 700 !important;
}

@media (min-width: 1200px) {
    /*
      SOLO Desktop - Modal Todas las ordenes:
      evitar filas altas por nombres largos y proteger columna Accion.
    */
    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .orders-total-table-wrapper,
    #allOrdersModal .all-orders-table-wrapper,
    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .table-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
        padding-right: 10px !important;
    }

    #allOrdersModal table,
    #allOrdersModal .orders-total-table,
    #allOrdersModal .data-table,
    #allOrdersModal .history-table {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 1180px !important;
    }

    #allOrdersModal table th,
    #allOrdersModal table td,
    #allOrdersModal .orders-total-table th,
    #allOrdersModal .orders-total-table td,
    #allOrdersModal .data-table th,
    #allOrdersModal .data-table td,
    #allOrdersModal .history-table th,
    #allOrdersModal .history-table td {
        vertical-align: middle !important;
        height: 64px !important;
        max-height: 64px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        white-space: nowrap !important;
    }

    #allOrdersModal table td:nth-child(3),
    #allOrdersModal .orders-total-table td:nth-child(3),
    #allOrdersModal .data-table td:nth-child(3),
    #allOrdersModal .history-table td:nth-child(3) {
        max-width: 160px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #allOrdersModal table td:nth-child(3) *,
    #allOrdersModal .orders-total-table td:nth-child(3) *,
    #allOrdersModal .data-table td:nth-child(3) *,
    #allOrdersModal .history-table td:nth-child(3) * {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #allOrdersModal table th:last-child,
    #allOrdersModal table td:last-child,
    #allOrdersModal .orders-total-table th:last-child,
    #allOrdersModal .orders-total-table td:last-child,
    #allOrdersModal .data-table th:last-child,
    #allOrdersModal .data-table td:last-child,
    #allOrdersModal .history-table th:last-child,
    #allOrdersModal .history-table td:last-child {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        text-align: center !important;
        overflow: visible !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #allOrdersModal table td:last-child .btn,
    #allOrdersModal table td:last-child button,
    #allOrdersModal .orders-total-table td:last-child .btn,
    #allOrdersModal .orders-total-table td:last-child button,
    #allOrdersModal .data-table td:last-child .btn,
    #allOrdersModal .data-table td:last-child button,
    #allOrdersModal .history-table td:last-child .btn,
    #allOrdersModal .history-table td:last-child button {
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    #allOrdersModal table td:not(:last-child),
    #allOrdersModal .orders-total-table td:not(:last-child),
    #allOrdersModal .data-table td:not(:last-child),
    #allOrdersModal .history-table td:not(:last-child) {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 1200px) {
    /*
      SOLO Desktop - Modal Todas las ordenes:
      ampliar ancho para evitar cabeceras apretadas.
    */
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .all-orders-modal-content,
    #allOrdersModal .orders-total-modal-content {
        width: min(96vw, 1680px) !important;
        max-width: min(96vw, 1680px) !important;
    }

    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body,
    #allOrdersModal .orders-total-modal-body {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    #allOrdersModal table,
    #allOrdersModal .orders-total-table,
    #allOrdersModal .data-table,
    #allOrdersModal .history-table {
        width: 100% !important;
        min-width: 1320px !important;
        table-layout: fixed !important;
    }

    #allOrdersModal table th,
    #allOrdersModal .orders-total-table th,
    #allOrdersModal .data-table th,
    #allOrdersModal .history-table th {
        white-space: normal !important;
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        vertical-align: middle !important;
        font-weight: 700 !important;
    }

    #allOrdersModal table td,
    #allOrdersModal .orders-total-table td,
    #allOrdersModal .data-table td,
    #allOrdersModal .history-table td {
        padding-left: 10px !important;
        padding-right: 10px !important;
        vertical-align: middle !important;
    }

    #allOrdersModal table th:nth-child(7),
    #allOrdersModal table td:nth-child(7),
    #allOrdersModal table th:nth-child(8),
    #allOrdersModal table td:nth-child(8),
    #allOrdersModal table th:nth-child(9),
    #allOrdersModal table td:nth-child(9),
    #allOrdersModal table th:nth-child(10),
    #allOrdersModal table td:nth-child(10),
    #allOrdersModal .data-table th:nth-child(7),
    #allOrdersModal .data-table td:nth-child(7),
    #allOrdersModal .data-table th:nth-child(8),
    #allOrdersModal .data-table td:nth-child(8),
    #allOrdersModal .data-table th:nth-child(9),
    #allOrdersModal .data-table td:nth-child(9),
    #allOrdersModal .data-table th:nth-child(10),
    #allOrdersModal .data-table td:nth-child(10) {
        min-width: 120px !important;
    }

    #allOrdersModal table th:last-child,
    #allOrdersModal table td:last-child,
    #allOrdersModal .orders-total-table th:last-child,
    #allOrdersModal .orders-total-table td:last-child,
    #allOrdersModal .data-table th:last-child,
    #allOrdersModal .data-table td:last-child,
    #allOrdersModal .history-table th:last-child,
    #allOrdersModal .history-table td:last-child {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        text-align: center !important;
        overflow: visible !important;
    }

    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .orders-total-table-wrapper,
    #allOrdersModal .all-orders-table-wrapper,
    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .table-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
}

/*
  FIX GLOBAL - ORDEN ANULADA
  Pill interno real del disclaimer: solo color, no layout.
*/
#order-detail-modal-orders .order-voided-banner .pill-chip.rectification-banner-chip.order-voided-banner-chip,
#order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip,
#order-detail-modal-orders .order-voided-banner .order-voided-banner-chip,
#order-detail-modal-orders .rectification-order-banner.order-voided-banner .pill-chip.order-voided-banner-chip {
    background: rgba(229, 229, 229, 0.95) !important;
    background-color: rgba(229, 229, 229, 0.95) !important;
    background-image: none !important;
    border-color: rgba(170, 170, 170, 0.72) !important;
    color: #60646c !important;
    font-weight: 700 !important;
}

#order-detail-modal-orders .order-voided-banner .pill-chip.rectification-banner-chip.order-voided-banner-chip span,
#order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip span,
#order-detail-modal-orders .order-voided-banner .order-voided-banner-chip span,
#order-detail-modal-orders .rectification-order-banner.order-voided-banner .pill-chip.order-voided-banner-chip span {
    color: #60646c !important;
    font-weight: 700 !important;
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      SOLO iPad vertical - disclaimers de Detalle de orden:
      centrar verticalmente el pill interno respecto al texto.
    */
    #order-detail-modal-orders .rectification-order-banner,
    #order-detail-modal-orders .order-regularized-banner,
    #order-detail-modal-orders .order-historical-regularization-banner,
    #order-detail-modal-orders .order-voided-banner {
        align-items: center !important;
    }

    #order-detail-modal-orders .rectification-order-banner .pill-chip,
    #order-detail-modal-orders .order-regularized-banner .pill-chip,
    #order-detail-modal-orders .order-historical-regularization-banner .pill-chip,
    #order-detail-modal-orders .order-voided-banner .pill-chip {
        position: static !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        top: auto !important;
        transform: none !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    #order-detail-modal-orders .rectification-order-banner-text,
    #order-detail-modal-orders .order-regularized-banner-text,
    #order-detail-modal-orders .order-historical-regularization-copy,
    #order-detail-modal-orders .order-voided-banner-copy,
    #order-detail-modal-orders .rectification-order-banner p,
    #order-detail-modal-orders .order-regularized-banner p,
    #order-detail-modal-orders .order-historical-regularization-banner p,
    #order-detail-modal-orders .order-voided-banner p {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.35 !important;
    }
}

/*
  COLOR GLOBAL - ORDEN ANULADA
  Aplica a todos los dispositivos. Solo color, no layout.
*/
#order-detail-modal-orders .pill-chip--cancelled,
#order-detail-modal-orders .pill-chip.is-cancelled,
#order-detail-modal-orders .pill-chip.order-cancelled,
#order-detail-modal-orders .order-detail-special-alert.is-cancelled .pill-chip,
#order-detail-modal-orders .order-detail-special-alert.order-cancelled .pill-chip,
#order-detail-modal-orders .order-detail-cancelled-alert .pill-chip,
#order-detail-modal-orders .order-cancelled-alert .pill-chip,
#order-detail-modal-orders .order-voided-chip,
#order-detail-modal-orders .order-voided-banner-chip {
    background: rgba(229, 229, 229, 0.95) !important;
    border-color: rgba(170, 170, 170, 0.72) !important;
    color: #60646c !important;
    font-weight: 700 !important;
}

/*
  Disclaimer de orden anulada tambien debe verse gris/plomo.
  Solo color.
*/
#order-detail-modal-orders .order-detail-special-alert.is-cancelled,
#order-detail-modal-orders .order-detail-special-alert.order-cancelled,
#order-detail-modal-orders .order-detail-cancelled-alert,
#order-detail-modal-orders .order-cancelled-alert,
#order-detail-modal-orders .order-voided-banner {
    border-color: rgba(160, 160, 160, 0.48) !important;
    background: linear-gradient(
        180deg,
        rgba(248, 248, 248, 0.96) 0%,
        rgba(242, 242, 242, 0.96) 100%
    ) !important;
    color: #60646c !important;
}

#order-detail-modal-orders .order-detail-special-alert.is-cancelled p,
#order-detail-modal-orders .order-detail-special-alert.order-cancelled p,
#order-detail-modal-orders .order-detail-cancelled-alert p,
#order-detail-modal-orders .order-cancelled-alert p,
#order-detail-modal-orders .order-voided-banner p,
#order-detail-modal-orders .order-voided-banner-copy {
    color: #60646c !important;
}

/*
  FIX GLOBAL - ORDEN ANULADA
  Pill interno real del disclaimer: solo color, no layout.
*/
#order-detail-modal-orders .order-voided-banner .pill-chip.rectification-banner-chip.order-voided-banner-chip,
#order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip,
#order-detail-modal-orders .order-voided-banner .order-voided-banner-chip,
#order-detail-modal-orders .rectification-order-banner.order-voided-banner .pill-chip.order-voided-banner-chip {
    background: rgba(229, 229, 229, 0.95) !important;
    background-color: rgba(229, 229, 229, 0.95) !important;
    background-image: none !important;
    border-color: rgba(170, 170, 170, 0.72) !important;
    color: #60646c !important;
    font-weight: 700 !important;
}

#order-detail-modal-orders .order-voided-banner .pill-chip.rectification-banner-chip.order-voided-banner-chip span,
#order-detail-modal-orders .order-voided-banner .rectification-banner-chip.order-voided-banner-chip span,
#order-detail-modal-orders .order-voided-banner .order-voided-banner-chip span,
#order-detail-modal-orders .rectification-order-banner.order-voided-banner .pill-chip.order-voided-banner-chip span {
    color: #60646c !important;
    font-weight: 700 !important;
}

@media (min-width: 1200px) {
    /*
      SOLO Desktop - Modal Todas las ordenes:
      evitar filas altas por nombres largos y proteger columna Accion.
    */
    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .orders-total-table-wrapper,
    #allOrdersModal .all-orders-table-wrapper,
    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .table-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
        padding-right: 10px !important;
    }

    #allOrdersModal table,
    #allOrdersModal .orders-total-table,
    #allOrdersModal .data-table,
    #allOrdersModal .history-table {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 1180px !important;
    }

    #allOrdersModal table th,
    #allOrdersModal table td,
    #allOrdersModal .orders-total-table th,
    #allOrdersModal .orders-total-table td,
    #allOrdersModal .data-table th,
    #allOrdersModal .data-table td,
    #allOrdersModal .history-table th,
    #allOrdersModal .history-table td {
        vertical-align: middle !important;
        height: 64px !important;
        max-height: 64px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        white-space: nowrap !important;
    }

    #allOrdersModal table td:nth-child(3),
    #allOrdersModal .orders-total-table td:nth-child(3),
    #allOrdersModal .data-table td:nth-child(3),
    #allOrdersModal .history-table td:nth-child(3) {
        max-width: 160px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #allOrdersModal table td:nth-child(3) *,
    #allOrdersModal .orders-total-table td:nth-child(3) *,
    #allOrdersModal .data-table td:nth-child(3) *,
    #allOrdersModal .history-table td:nth-child(3) * {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #allOrdersModal table th:last-child,
    #allOrdersModal table td:last-child,
    #allOrdersModal .orders-total-table th:last-child,
    #allOrdersModal .orders-total-table td:last-child,
    #allOrdersModal .data-table th:last-child,
    #allOrdersModal .data-table td:last-child,
    #allOrdersModal .history-table th:last-child,
    #allOrdersModal .history-table td:last-child {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        text-align: center !important;
        overflow: visible !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #allOrdersModal table td:last-child .btn,
    #allOrdersModal table td:last-child button,
    #allOrdersModal .orders-total-table td:last-child .btn,
    #allOrdersModal .orders-total-table td:last-child button,
    #allOrdersModal .data-table td:last-child .btn,
    #allOrdersModal .data-table td:last-child button,
    #allOrdersModal .history-table td:last-child .btn,
    #allOrdersModal .history-table td:last-child button {
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    #allOrdersModal table td:not(:last-child),
    #allOrdersModal .orders-total-table td:not(:last-child),
    #allOrdersModal .data-table td:not(:last-child),
    #allOrdersModal .history-table td:not(:last-child) {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 1200px) {
    /*
      SOLO Desktop - Modal Todas las ordenes:
      ampliar ancho para evitar cabeceras apretadas.
    */
    #allOrdersModal .modal-dialog,
    #allOrdersModal .modal-content,
    #allOrdersModal .all-orders-modal-content,
    #allOrdersModal .orders-total-modal-content {
        width: min(96vw, 1680px) !important;
        max-width: min(96vw, 1680px) !important;
    }

    #allOrdersModal .modal-body,
    #allOrdersModal .all-orders-modal-body,
    #allOrdersModal .orders-total-modal-body {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    #allOrdersModal table,
    #allOrdersModal .orders-total-table,
    #allOrdersModal .data-table,
    #allOrdersModal .history-table {
        width: 100% !important;
        min-width: 1320px !important;
        table-layout: fixed !important;
    }

    #allOrdersModal table th,
    #allOrdersModal .orders-total-table th,
    #allOrdersModal .data-table th,
    #allOrdersModal .history-table th {
        white-space: normal !important;
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        vertical-align: middle !important;
        font-weight: 700 !important;
    }

    #allOrdersModal table td,
    #allOrdersModal .orders-total-table td,
    #allOrdersModal .data-table td,
    #allOrdersModal .history-table td {
        padding-left: 10px !important;
        padding-right: 10px !important;
        vertical-align: middle !important;
    }

    #allOrdersModal table th:nth-child(7),
    #allOrdersModal table td:nth-child(7),
    #allOrdersModal table th:nth-child(8),
    #allOrdersModal table td:nth-child(8),
    #allOrdersModal table th:nth-child(9),
    #allOrdersModal table td:nth-child(9),
    #allOrdersModal table th:nth-child(10),
    #allOrdersModal table td:nth-child(10),
    #allOrdersModal .data-table th:nth-child(7),
    #allOrdersModal .data-table td:nth-child(7),
    #allOrdersModal .data-table th:nth-child(8),
    #allOrdersModal .data-table td:nth-child(8),
    #allOrdersModal .data-table th:nth-child(9),
    #allOrdersModal .data-table td:nth-child(9),
    #allOrdersModal .data-table th:nth-child(10),
    #allOrdersModal .data-table td:nth-child(10),
    #allOrdersModal .history-table th:nth-child(7),
    #allOrdersModal .history-table td:nth-child(7),
    #allOrdersModal .history-table th:nth-child(8),
    #allOrdersModal .history-table td:nth-child(8),
    #allOrdersModal .history-table th:nth-child(9),
    #allOrdersModal .history-table td:nth-child(9),
    #allOrdersModal .history-table th:nth-child(10),
    #allOrdersModal .history-table td:nth-child(10) {
        min-width: 120px !important;
    }

    #allOrdersModal table th:last-child,
    #allOrdersModal table td:last-child,
    #allOrdersModal .orders-total-table th:last-child,
    #allOrdersModal .orders-total-table td:last-child,
    #allOrdersModal .data-table th:last-child,
    #allOrdersModal .data-table td:last-child,
    #allOrdersModal .history-table th:last-child,
    #allOrdersModal .history-table td:last-child {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        text-align: center !important;
        overflow: visible !important;
    }

    #allOrdersModal .orders-total-table-shell,
    #allOrdersModal .orders-total-table-wrapper,
    #allOrdersModal .all-orders-table-wrapper,
    #allOrdersModal .all-orders-desktop-results,
    #allOrdersModal .table-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
}

.third-mobile-section-switcher {
    display: none;
}

@media (max-width: 767px) {
    .third-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 12px 0 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .third-mobile-switch-btn {
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 12px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .third-mobile-switch-btn.is-active,
    .third-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    .third-mobile-switch-btn i {
        font-size: 0.86rem !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="register"] {
        display: block !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="records"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="register"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="records"] {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .third-mobile-section-switcher {
        margin: 8px 0 10px !important;
        padding: 4px !important;
        gap: 4px !important;
    }

    .third-mobile-switch-btn {
        min-height: 40px !important;
    }

    .third-party-form-card,
    .third-party-list-card {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      el espacio grande entre metricas, switch y panel viene del gap del padre.
    */
    .third-party-page.page-shell {
        gap: 10px !important;
    }

    .third-mobile-section-switcher {
        margin: 0 !important;
        padding: 4px !important;
        gap: 4px !important;
    }

    .third-mobile-switch-btn {
        min-height: 40px !important;
    }

    [data-third-mobile-panel="register"],
    [data-third-mobile-panel="records"] {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      reducir espacio vacio inferior al final del scroll.
    */
    .third-party-page.page-shell {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell [data-third-mobile-panel="register"],
    .third-party-page.page-shell [data-third-mobile-panel="records"] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .third-party-page.page-shell .third-party-form-card,
    .third-party-page.page-shell .third-party-list-card {
        margin-bottom: 0 !important;
    }

    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      recuperar padding interno del card del formulario.
    */
    .third-party-page.page-shell .third-party-form-card {
        padding-bottom: 18px !important;
    }

    .third-party-page.page-shell .third-party-form-card form,
    .third-party-page.page-shell .third-party-form-card .form-grid {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell .third-party-form-card .form-actions,
    .third-party-page.page-shell .third-party-form-card button[type="submit"] {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    .third-party-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    /*
      /third-parties mobile:
      evitar doble espacio inferior entre page, content y main.
    */
    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: 8px !important;
    }

    body:has(.third-party-page) .content-area,
    body:has(.third-party-page) .page-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .third-party-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell [data-third-mobile-panel="register"],
    .third-party-page.page-shell [data-third-mobile-panel="records"] {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .third-party-page.page-shell .third-party-form-card,
    .third-party-page.page-shell .third-party-list-card {
        padding-bottom: 18px !important;
        margin-bottom: 0 !important;
    }
}
.third-records-filters-toggle,
.third-records-scroll-top-btn {
    display: none;
}

@media (max-width: 767px) {
    /*
      /third-parties mobile - filtros avanzados y volver arriba en Registros.
    */
    .third-records-filters-toggle {
        width: 100% !important;
        min-height: 44px !important;
        margin: 14px 0 12px !important;
        padding: 0 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .third-records-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .third-records-filters-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-records-advanced-filters {
        display: grid !important;
        gap: 14px !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 14px 12px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        background: rgba(248, 251, 255, 0.72) !important;
    }

    .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-records-advanced-filters .form-field,
    .third-records-advanced-filters .form-group,
    .third-records-advanced-filters label,
    .third-records-advanced-filters input,
    .third-records-advanced-filters select,
    .third-records-advanced-filters button {
        width: 100% !important;
        max-width: none !important;
    }

    .third-records-advanced-filters input,
    .third-records-advanced-filters select {
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    .third-records-advanced-filters .btn,
    .third-records-advanced-filters button[type="submit"],
    .third-records-advanced-filters button[type="reset"] {
        min-height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    .third-records-scroll-top-btn {
        position: fixed !important;
        right: 18px !important;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 60 !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
    }

    body.third-mobile-tab-records .third-records-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical - usar switch Registrar / Registros.
    */
    .third-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 10px 0 12px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .third-mobile-switch-btn {
        min-height: 44px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .third-mobile-switch-btn.is-active,
    .third-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="register"] {
        display: block !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="records"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="register"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="records"] {
        display: block !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical:
      compactar espacios entre metricas, switch y panel activo.
    */
    .third-party-page.page-shell {
        gap: 10px !important;
    }

    .third-mobile-section-switcher {
        margin: 0 !important;
        padding: 5px !important;
        gap: 6px !important;
    }

    .third-mobile-switch-btn {
        min-height: 42px !important;
    }

    .third-party-form-card,
    .third-party-list-card {
        margin-top: 0 !important;
    }

    [data-third-mobile-panel="register"],
    [data-third-mobile-panel="records"] {
        margin-top: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical - Registros:
      filtros ocultos + boton volver arriba.
    */
    .third-records-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        margin: 14px 0 12px !important;
        padding: 0 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .third-records-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .third-records-filters-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-records-advanced-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 14px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        background: rgba(248, 251, 255, 0.72) !important;
    }

    .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-records-advanced-filters .form-group,
    .third-records-advanced-filters input,
    .third-records-advanced-filters select,
    .third-records-advanced-filters button,
    .third-records-advanced-filters .btn {
        width: 100% !important;
        max-width: none !important;
    }

    .third-records-advanced-filters input,
    .third-records-advanced-filters select {
        min-height: 46px !important;
        border-radius: 14px !important;
    }

    .third-records-advanced-filters .filter-actions,
    .third-records-advanced-filters button[type="submit"],
    .third-records-advanced-filters .btn {
        min-height: 46px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    .third-records-scroll-top-btn {
        position: fixed !important;
        right: 20px !important;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 60 !important;

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
    }

    body.third-mobile-tab-records .third-records-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical:
      ordenar filtros avanzados de Registros.
    */
    .third-party-page .third-records-advanced-filters {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px 16px 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .third-party-filters {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;

        align-items: end !important;
        justify-items: stretch !important;
        margin: 0 !important;
    }

    .third-party-page .third-records-advanced-filters .form-group,
    .third-party-page .third-records-advanced-filters .filter-actions {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .third-party-page .third-records-advanced-filters label {
        margin-bottom: 8px !important;
    }

    .third-party-page .third-records-advanced-filters input,
    .third-party-page .third-records-advanced-filters select,
    .third-party-page .third-records-advanced-filters .btn,
    .third-party-page .third-records-advanced-filters button,
    .third-party-page .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .filter-actions .btn,
    .third-party-page .third-records-advanced-filters .filter-actions button,
    .third-party-page .third-records-advanced-filters .filter-actions a.btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical:
      el panel solo contiene al wrapper .third-party-filters.
      El grid debe vivir en ese wrapper, no en el panel padre.
    */
    .third-party-page .third-records-advanced-filters {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px 16px 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-records-advanced-filters .third-party-filters {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;

        align-items: end !important;
        justify-items: stretch !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .form-group,
    .third-party-page .third-records-advanced-filters .filter-actions {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters label {
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-records-advanced-filters input,
    .third-party-page .third-records-advanced-filters select,
    .third-party-page .third-records-advanced-filters .btn,
    .third-party-page .third-records-advanced-filters button,
    .third-party-page .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .filter-actions .btn,
    .third-party-page .third-records-advanced-filters .filter-actions button,
    .third-party-page .third-records-advanced-filters .filter-actions a.btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical:
      replicar colores de metricas usados en mobile.
    */
    .third-party-page .mobile-thirdparty-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .third-party-page .mobile-thirdparty-metric {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 251, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;

        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-blue {
        background: rgba(59, 130, 246, 0.14) !important;
        color: #2563eb !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-green {
        background: rgba(34, 197, 94, 0.16) !important;
        color: #16a34a !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-orange,
    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-warning {
        background: rgba(249, 115, 22, 0.15) !important;
        color: #f97316 !important;
    }

    .third-party-page .mobile-thirdparty-metric span {
        display: block !important;
        margin-bottom: 2px !important;
        color: #6F6A7F !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .third-party-page .mobile-thirdparty-metric strong {
        display: block !important;
        color: #304A9A !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties iPad vertical:
      igualar colores/UI de cards de Registros con mobile.
    */
    .third-party-page .mobile-thirdparty-card-v1,
    .third-party-page .mobile-third-party-card,
    .third-party-page .mobile-thirdparty-card {
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(47, 36, 64, 0.08) !important;
    }

    .third-party-page .mobile-status-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 26px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.01em !important;
        white-space: nowrap !important;
        border: 1px solid transparent !important;
    }

    .third-party-page .mobile-status-pill.status-delivered {
        background: rgba(34, 197, 94, 0.14) !important;
        border-color: rgba(34, 197, 94, 0.28) !important;
        color: #15803d !important;
    }

    .third-party-page .mobile-status-pill.status-pending {
        background: rgba(249, 115, 22, 0.14) !important;
        border-color: rgba(249, 115, 22, 0.30) !important;
        color: #c2410c !important;
    }

    .third-party-page .mobile-thirdparty-highlight {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 12px 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: #F1EFFF !important;
        border: 1px solid rgba(188, 201, 236, 0.62) !important;
    }

    .third-party-page .mobile-thirdparty-highlight-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        background: #E7E6FF !important;
        color: #4A5BA8 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }

    .third-party-page .mobile-thirdparty-highlight-content span {
        display: block !important;
        margin-bottom: 4px !important;
        color: #6F6A7F !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .third-party-page .mobile-thirdparty-highlight-content strong {
        display: block !important;
        color: #2F3260 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-blue,
    .third-party-page .mobile-thirdparty-metric .metric-blue {
        background: #E8F1FF !important;
        color: #2563EB !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-green,
    .third-party-page .mobile-thirdparty-metric .metric-green {
        background: #E2FBEA !important;
        color: #16A34A !important;
    }

    .third-party-page .mobile-thirdparty-metric:has(.metric-blue) strong {
        color: #2563EB !important;
    }

    .third-party-page .mobile-thirdparty-metric:has(.metric-green) strong {
        color: #16A34A !important;
    }

    .third-party-page .mobile-thirdparty-metric span {
        color: #6F6A7F !important;
    }
}
/*
  /third-parties - colores globales de estados y monto.
  Solo color, no layout.
*/
.third-party-page .third-party-record-card .status-chip.is-delivered,
.third-party-page .third-party-record-card .status-chip.status-delivered,
.third-party-page .third-party-record-card .status-chip[data-status="entregado"],
.third-party-page .third-party-record-card .third-party-status-chip.is-delivered,
.third-party-page .third-party-record-card .third-party-status-chip.status-delivered,
.third-party-page .third-party-record-card .third-party-status-chip[data-status="entregado"],
.third-party-page .mobile-status-pill.status-delivered,
.third-party-page .third-party-status.third-party-entregado {
    background: rgba(221, 244, 248, 0.96) !important;
    border-color: rgba(85, 156, 173, 0.24) !important;
    color: #0f6b7a !important;
    font-weight: 700 !important;
}

.third-party-page .third-party-record-card .status-chip.is-paid,
.third-party-page .third-party-record-card .status-chip.status-paid,
.third-party-page .third-party-record-card .status-chip[data-status="pagado"],
.third-party-page .third-party-record-card .third-party-status-chip.is-paid,
.third-party-page .third-party-record-card .third-party-status-chip.status-paid,
.third-party-page .third-party-record-card .third-party-status-chip[data-status="pagado"],
.third-party-page .mobile-status-pill.status-paid,
.third-party-page .third-party-status.third-party-pagado {
    background: rgba(220, 252, 231, 0.96) !important;
    border-color: rgba(34, 197, 94, 0.24) !important;
    color: #166534 !important;
    font-weight: 700 !important;
}

.third-party-page .third-party-record-card .mobile-thirdparty-metric:has(.metric-blue) strong,
.third-party-page .third-party-record-card .third-party-record-amount,
.third-party-page .third-party-record-card .third-party-amount,
.third-party-page .third-party-record-card [data-third-party-amount],
.third-party-page .mobile-thirdparty-metric:has(.metric-blue) strong,
.third-party-page .mobile-card-amount,
.third-party-page .third-party-record-amount,
.third-party-page .third-party-amount,
.third-party-page [data-third-party-amount] {
    color: #2F3260 !important;
    font-weight: 700 !important;
}
.third-party-page .third-party-record-card .status-chip.is-paid,
.third-party-page .third-party-record-card .status-chip.status-paid,
.third-party-page .third-party-record-card .status-chip[data-status="pagado"],
.third-party-page .third-party-record-card .third-party-status-chip.is-paid,
.third-party-page .third-party-record-card .third-party-status-chip.status-paid,
.third-party-page .third-party-record-card .third-party-status-chip[data-status="pagado"],
.third-party-page .third-party-status.third-party-pagado,
.third-party-page .status-chip.third-party-pagado {
    background: #DCFCE8 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
    font-weight: 700 !important;
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      PAGADO debe usar el verde correcto igual que desktop.
      Solo color, no layout.
    */
    .third-party-page .third-party-record-card .third-party-status-pill--paid,
    .third-party-page .third-party-record-card .status-chip.is-paid,
    .third-party-page .third-party-record-card .status-chip.status-paid,
    .third-party-page .third-party-record-card .status-chip[data-status="pagado"],
    .third-party-page .third-party-record-card .third-party-status-chip.is-paid,
    .third-party-page .third-party-record-card .third-party-status-chip.status-paid,
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="pagado"],
    .third-party-page .third-party-status-pill--paid,
    .third-party-page .mobile-status-pill.status-paid {
        background: #DCFCE8 !important;
        border-color: #BBF7D0 !important;
        color: #166534 !important;
        font-weight: 700 !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .third-party-filters-form.is-loading {
        opacity: 0.72;
        pointer-events: none;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /third-parties responsive:
      ordenar metricas en 2 columnas y mover Pendiente por pagar al final.
    */
    .third-party-page .third-party-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card {
        min-width: 0 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(1) {
        order: 1 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(2) {
        order: 2 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(3) {
        order: 3 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(5) {
        order: 4 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(6) {
        order: 5 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(7) {
        order: 6 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) {
        order: 7 !important;
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) .info-chip-label {
        margin: 0 !important;
        text-align: left !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) strong {
        margin: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 767px) {
    .third-party-page .metric-card,
    .third-party-page .summary-card,
    .third-party-page .stat-card {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .third-party-page .metric-card strong,
    .third-party-page .summary-card strong,
    .third-party-page .stat-card strong,
    .third-party-page .metric-card-value,
    .third-party-page .summary-card-value,
    .third-party-page .stat-card-value {
        display: block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
    }

    .third-party-page .metric-card-value.is-long-number,
    .third-party-page .summary-card-value.is-long-number,
    .third-party-page .stat-card-value.is-long-number,
    .third-party-page .metric-card strong.is-long-number,
    .third-party-page .summary-card strong.is-long-number,
    .third-party-page .stat-card strong.is-long-number {
        font-size: clamp(1.05rem, 5.2vw, 1.35rem) !important;
        letter-spacing: -0.02em !important;
    }

    .third-party-page .metric-card-value.is-extra-long-number,
    .third-party-page .summary-card-value.is-extra-long-number,
    .third-party-page .stat-card-value.is-extra-long-number,
    .third-party-page .metric-card strong.is-extra-long-number,
    .third-party-page .summary-card strong.is-extra-long-number,
    .third-party-page .stat-card strong.is-extra-long-number {
        font-size: clamp(0.88rem, 4.4vw, 1.08rem) !important;
        letter-spacing: -0.04em !important;
    }
}
@media (max-width: 767px) {
    .third-party-page [data-third-metric-value] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;

        line-height: 1.08 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
    }

    .third-party-page .third-metric-value--fitted {
        transform-origin: left center !important;
    }

    .third-party-page .third-metric-card--pending-payment [data-third-metric-value],
    .third-party-page .metric-card--pending-payment [data-third-metric-value] {
        width: auto !important;
        max-width: 58% !important;
        text-align: right !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      ordenar metricas en 4 columnas y dejar el switch debajo.
    */
    .third-party-page.page-shell {
        gap: 14px !important;
    }

    .third-party-page .third-party-metrics-grid,
    .third-party-page .third-party-summary-grid,
    .third-party-page .summary-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(1) {
        order: 1 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(2) {
        order: 2 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(3) {
        order: 3 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(5) {
        order: 4 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(6) {
        order: 5 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(7) {
        order: 6 !important;
    }

    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) {
        order: 7 !important;
    }

    .third-party-page .metric-card,
    .third-party-page .summary-card,
    .third-party-page .stat-card {
        min-height: 96px !important;
        min-width: 0 !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
    }

    .third-party-page .metric-card strong,
    .third-party-page .summary-card strong,
    .third-party-page .stat-card strong,
    .third-party-page [data-third-metric-value] {
        font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-metric-card--pending-payment,
    .third-party-page .metric-card--pending-payment,
    .third-party-page .summary-card--pending-payment,
    .third-party-page [data-third-metric="pending-payment"],
    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) {
        grid-column: span 2 !important;
        min-height: 96px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .third-party-page .third-metric-card--pending-payment .info-chip-label,
    .third-party-page .metric-card--pending-payment .info-chip-label,
    .third-party-page .summary-card--pending-payment .info-chip-label,
    .third-party-page [data-third-metric="pending-payment"] .info-chip-label,
    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) .info-chip-label {
        margin: 0 !important;
        text-align: left !important;
    }

    .third-party-page .third-metric-card--pending-payment [data-third-metric-value],
    .third-party-page .metric-card--pending-payment [data-third-metric-value],
    .third-party-page .summary-card--pending-payment [data-third-metric-value],
    .third-party-page [data-third-metric="pending-payment"] [data-third-metric-value],
    .third-party-page .third-party-metrics-grid > .metric-card:nth-child(4) [data-third-metric-value] {
        width: auto !important;
        max-width: 60% !important;
        margin: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .third-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.88) !important;
    }

    .third-mobile-switch-btn {
        min-height: 44px !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="register"] {
        display: block !important;
    }

    body.third-mobile-tab-register [data-third-mobile-panel="records"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="register"] {
        display: none !important;
    }

    body.third-mobile-tab-records [data-third-mobile-panel="records"] {
        display: block !important;
    }

    body:has(.third-party-page) .dashboard-main,
    body:has(.third-party-page) .main-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      replicar UI de Registros de mobile/iPad vertical.
    */
    .third-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 0 0 12px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .third-mobile-switch-btn {
        min-height: 44px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .third-mobile-switch-btn.is-active,
    .third-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    .third-records-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        margin: 14px 0 12px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(188, 201, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .third-records-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .third-records-filters-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-records-advanced-filters {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px 16px 16px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        background: rgba(248, 251, 255, 0.72) !important;
        box-sizing: border-box !important;
    }

    .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-records-advanced-filters .third-party-filters {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px 16px !important;
        align-items: end !important;
        justify-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .third-records-advanced-filters .form-group,
    .third-records-advanced-filters .filter-actions {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .third-records-advanced-filters input,
    .third-records-advanced-filters select,
    .third-records-advanced-filters button,
    .third-records-advanced-filters .btn,
    .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        font-weight: 700 !important;
    }

    .third-party-page .tablet-card-hide {
        display: none !important;
    }

    .third-party-page .third-party-mobile-list,
    .third-party-page .thirdparty-mobile-list,
    .third-party-page .terceros-mobile-list,
    .third-party-page .third-party-mobile-list.tablet-card-show-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .third-party-page .third-party-mobile-list .mobile-thirdparty-card {
        display: none !important;
    }

    .third-party-page .third-party-mobile-list .mobile-thirdparty-card-v1,
    .third-party-page .third-party-mobile-list .mobile-thirdparty-card-v1[hidden] {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.06) !important;
    }

    .third-party-page .third-party-status-pill,
    .third-party-page .third-party-status-chip,
    .third-party-page .status-chip,
    .third-party-page .mobile-status-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 26px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .third-party-page .third-party-status-pill--delivered,
    .third-party-page .status-chip.is-delivered,
    .third-party-page .status-chip.status-delivered,
    .third-party-page .status-chip[data-status="entregado"],
    .third-party-page .third-party-status-chip[data-status="entregado"],
    .third-party-page .mobile-status-pill.status-delivered {
        background: rgba(221, 244, 248, 0.96) !important;
        border-color: rgba(85, 156, 173, 0.24) !important;
        color: #0f6b7a !important;
    }

    .third-party-page .third-party-status-pill--paid,
    .third-party-page .status-chip.is-paid,
    .third-party-page .status-chip.status-paid,
    .third-party-page .status-chip[data-status="pagado"],
    .third-party-page .third-party-status-chip[data-status="pagado"],
    .third-party-page .mobile-status-pill.status-paid {
        background: #DCFCE8 !important;
        border-color: #BBF7D0 !important;
        color: #166534 !important;
    }

    .third-party-page .third-party-status-pill--pending,
    .third-party-page .status-chip.is-pending,
    .third-party-page .status-chip.status-pending,
    .third-party-page .status-chip[data-status="pendiente"],
    .third-party-page .third-party-status-chip[data-status="pendiente"],
    .third-party-page .mobile-status-pill.status-pending {
        background: #FEF3C7 !important;
        border-color: #FDE68A !important;
        color: #92400E !important;
    }

    .third-party-page .mobile-thirdparty-highlight {
        border-radius: 14px !important;
        background: rgba(244, 241, 255, 0.92) !important;
        padding: 12px 14px !important;
    }

    .third-party-page .mobile-thirdparty-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 10px 0 12px !important;
    }

    .third-party-page .mobile-thirdparty-metric {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 251, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-blue {
        background: rgba(59, 130, 246, 0.14) !important;
        color: #2563eb !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon.metric-green {
        background: rgba(34, 197, 94, 0.16) !important;
        color: #16a34a !important;
    }

    .third-party-page .mobile-thirdparty-card-v1:has(.mobile-status-pill.status-pending) .mobile-thirdparty-metric .metric-icon.metric-green {
        background: rgba(249, 115, 22, 0.15) !important;
        color: #f97316 !important;
    }

    .third-party-page .mobile-thirdparty-metric span {
        color: #6f6a7f !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .third-party-page .mobile-thirdparty-metric strong {
        color: #2F3260 !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-page .mobile-thirdparty-card-v1:has(.mobile-status-pill.status-delivered) .mobile-thirdparty-metric:nth-child(2) strong,
    .third-party-page .mobile-thirdparty-card-v1:has(.mobile-status-pill.status-paid) .mobile-thirdparty-metric:nth-child(2) strong {
        color: #16a34a !important;
    }

    .third-party-page .mobile-thirdparty-card-v1:has(.mobile-status-pill.status-pending) .mobile-thirdparty-metric:nth-child(2) strong {
        color: #f97316 !important;
    }

    .third-records-scroll-top-btn {
        position: fixed !important;
        right: 22px !important;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 60 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(188, 201, 236, 0.86) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.16) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.96) !important;
        pointer-events: none !important;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
    }

    body.third-mobile-tab-records .third-records-scroll-top-btn.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      estandarizar metrica interna Estado en cards.
    */
    .third-party-page .thirdparty-status-metric {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 251, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .third-party-page .thirdparty-status-metric .metric-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .thirdparty-status-metric span {
        display: block !important;
        margin: 0 0 2px !important;
        color: #6F6A7F !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
    }

    .third-party-page .thirdparty-status-metric strong {
        display: block !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-transform: lowercase !important;
    }

    .third-party-page .thirdparty-status-metric.is-pendiente .metric-icon {
        background: rgba(249, 115, 22, 0.15) !important;
        color: #F97316 !important;
    }

    .third-party-page .thirdparty-status-metric.is-pendiente strong {
        color: #F97316 !important;
    }

    .third-party-page .thirdparty-status-metric.is-entregado .metric-icon {
        background: rgba(34, 197, 94, 0.16) !important;
        color: #16A34A !important;
    }

    .third-party-page .thirdparty-status-metric.is-entregado strong {
        color: #16A34A !important;
    }

    .third-party-page .thirdparty-status-metric.is-pagado .metric-icon {
        background: #DCFCE8 !important;
        color: #166534 !important;
    }

    .third-party-page .thirdparty-status-metric.is-pagado strong {
        color: #166534 !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      unificar pills superiores de estado.
    */
    .third-party-page .third-party-record-card .third-party-status-pill,
    .third-party-page .third-party-record-card .third-party-status-chip,
    .third-party-page .third-party-record-card .status-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .third-party-page .third-party-record-card .third-party-status-pill--pending,
    .third-party-page .third-party-record-card .status-chip.is-pending,
    .third-party-page .third-party-record-card .status-chip.status-pending,
    .third-party-page .third-party-record-card .status-chip[data-status="pendiente"],
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="pendiente"],
    .third-party-page .third-party-record-card .third-party-status-pill[data-status="pendiente"] {
        background: #FEF3C7 !important;
        border-color: #FDE68A !important;
        color: #92400E !important;
    }

    .third-party-page .third-party-record-card .third-party-status-pill--delivered,
    .third-party-page .third-party-record-card .status-chip.is-delivered,
    .third-party-page .third-party-record-card .status-chip.status-delivered,
    .third-party-page .third-party-record-card .status-chip[data-status="entregado"],
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="entregado"],
    .third-party-page .third-party-record-card .third-party-status-pill[data-status="entregado"] {
        background: #DDF4F8 !important;
        border-color: rgba(85, 156, 173, 0.24) !important;
        color: #0F6B7A !important;
    }

    .third-party-page .third-party-record-card .third-party-status-pill--paid,
    .third-party-page .third-party-record-card .status-chip.is-paid,
    .third-party-page .third-party-record-card .status-chip.status-paid,
    .third-party-page .third-party-record-card .status-chip[data-status="pagado"],
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="pagado"],
    .third-party-page .third-party-record-card .third-party-status-pill[data-status="pagado"] {
        background: #DCFCE8 !important;
        border-color: #BBF7D0 !important;
        color: #166534 !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      unificar pills superiores de estado por data-status.
    */
    .third-party-page .third-party-record-card .third-party-status-pill,
    .third-party-page .third-party-record-card .third-party-status-chip,
    .third-party-page .third-party-record-card .status-chip,
    .third-party-page .third-party-record-card [data-status] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .third-party-page .third-party-record-card .third-party-status-pill[data-status="pendiente"],
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="pendiente"],
    .third-party-page .third-party-record-card .status-chip[data-status="pendiente"],
    .third-party-page .third-party-record-card [data-status="pendiente"] {
        background: #FEF3C7 !important;
        border-color: #FDE68A !important;
        color: #92400E !important;
    }

    .third-party-page .third-party-record-card .third-party-status-pill[data-status="entregado"],
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="entregado"],
    .third-party-page .third-party-record-card .status-chip[data-status="entregado"],
    .third-party-page .third-party-record-card [data-status="entregado"] {
        background: #DDF4F8 !important;
        border-color: rgba(85, 156, 173, 0.24) !important;
        color: #0F6B7A !important;
    }

    .third-party-page .third-party-record-card .third-party-status-pill[data-status="pagado"],
    .third-party-page .third-party-record-card .third-party-status-chip[data-status="pagado"],
    .third-party-page .third-party-record-card .status-chip[data-status="pagado"],
    .third-party-page .third-party-record-card [data-status="pagado"] {
        background: #DCFCE8 !important;
        border-color: #BBF7D0 !important;
        color: #166534 !important;
    }
}
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      registros con mismo UI que iPad vertical.
    */
    .third-party-page [data-third-records-results],
    .third-party-page .third-party-records-list,
    .third-party-page .third-party-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .third-party-page .third-party-record-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.06) !important;
    }

    .third-party-page .third-party-record-schedule,
    .third-party-page .third-party-record-programmed,
    .third-party-page .mobile-thirdparty-schedule,
    .third-party-page .mobile-thirdparty-highlight {
        width: 100% !important;
        min-height: 54px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: rgba(244, 241, 255, 0.92) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .third-party-page .mobile-thirdparty-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 10px 0 12px !important;
    }

    .third-party-page .mobile-thirdparty-metric {
        min-height: 46px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 251, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .third-party-page .mobile-thirdparty-metric .metric-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .third-party-record-card .btn,
    .third-party-page .third-party-record-card button,
    .third-party-page .third-party-record-card a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      UI correcto para bloque "Entrega programada".
    */
    .third-party-page .third-party-record-schedule,
    .third-party-page .third-party-record-programmed,
    .third-party-page .mobile-thirdparty-schedule,
    .third-party-page .mobile-thirdparty-highlight {
        width: 100% !important;
        min-height: 58px !important;
        padding: 12px 14px !important;
        margin: 10px 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        border-radius: 14px !important;
        background: rgba(244, 241, 255, 0.96) !important;
        border: 1px solid rgba(218, 210, 255, 0.72) !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-record-schedule i,
    .third-party-page .third-party-record-programmed i,
    .third-party-page .mobile-thirdparty-schedule i,
    .third-party-page .mobile-thirdparty-highlight-icon,
    .third-party-page .mobile-thirdparty-highlight i {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: rgba(224, 218, 255, 0.92) !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .third-party-record-schedule span,
    .third-party-page .third-party-record-programmed span,
    .third-party-page .mobile-thirdparty-schedule span,
    .third-party-page .mobile-thirdparty-highlight-content span {
        display: block !important;
        margin: 0 !important;
        color: #6F6A7F !important;
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .third-party-page .third-party-record-schedule strong,
    .third-party-page .third-party-record-programmed strong,
    .third-party-page .mobile-thirdparty-schedule strong,
    .third-party-page .mobile-thirdparty-highlight-content strong {
        display: block !important;
        margin: 2px 0 0 !important;
        color: #2F3260 !important;
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
}
/* ================================
   /third-parties - Filtros iPad vertical
   ================================ */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .third-party-page .third-records-advanced-filters {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-records-advanced-filters .third-party-filters {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 14px !important;
        align-items: end !important;
        justify-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .form-group,
    .third-party-page .third-records-advanced-filters .filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .third-party-page .third-records-advanced-filters label {
        margin: 0 0 7px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-records-advanced-filters input,
    .third-party-page .third-records-advanced-filters select,
    .third-party-page .third-records-advanced-filters button,
    .third-party-page .third-records-advanced-filters .btn,
    .third-party-page .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }
}

/* ================================
   /third-parties - Filtros iPad horizontal
   ================================ */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .third-party-page .third-records-advanced-filters {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-records-advanced-filters .third-party-filters {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: end !important;
        justify-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .form-group,
    .third-party-page .third-records-advanced-filters .filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .third-party-page .third-records-advanced-filters label {
        margin: 0 0 7px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-records-advanced-filters input,
    .third-party-page .third-records-advanced-filters select,
    .third-party-page .third-records-advanced-filters button,
    .third-party-page .third-records-advanced-filters .btn,
    .third-party-page .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters .filter-actions {
        display: contents !important;
    }
}
/* ================================
   /third-parties - filtros iPad vertical
   ================================ */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .third-party-page .third-records-advanced-filters {
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-records-advanced-filters .third-party-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
    }

    .third-party-page .third-records-advanced-filters .form-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .third-party-page .third-records-advanced-filters label {
        margin: 0 !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-records-advanced-filters input,
    .third-party-page .third-records-advanced-filters select {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 13px !important;
    }

    .third-party-page .third-records-advanced-filters .filter-actions {
        display: contents !important;
    }

    .third-party-page .third-records-advanced-filters button,
    .third-party-page .third-records-advanced-filters .btn,
    .third-party-page .third-records-advanced-filters a.btn {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}

/* ================================
   /third-parties - filtros iPad horizontal
   ================================ */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .third-party-page .third-records-advanced-filters {
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-records-advanced-filters .third-party-filters {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
    }

    .third-party-page .third-records-advanced-filters .form-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .third-party-page .third-records-advanced-filters label {
        margin: 0 !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-records-advanced-filters input,
    .third-party-page .third-records-advanced-filters select {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 13px !important;
    }

    .third-party-page .third-records-advanced-filters .filter-actions {
        display: contents !important;
    }

    .third-party-page .third-records-advanced-filters button[type="submit"],
    .third-party-page .third-records-advanced-filters .btn-primary,
    .third-party-page .third-records-advanced-filters .filter-submit {
        grid-column: 1 / span 2 !important;
    }

    .third-party-page .third-records-advanced-filters a.btn,
    .third-party-page .third-records-advanced-filters .btn-secondary,
    .third-party-page .third-records-advanced-filters .filter-clear {
        grid-column: 3 / span 2 !important;
    }

    .third-party-page .third-records-advanced-filters button,
    .third-party-page .third-records-advanced-filters .btn,
    .third-party-page .third-records-advanced-filters a.btn {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties - Entregas registradas:
      reducir aire superior del panel de filtros avanzados.
    */
    .third-party-page .third-party-list-card .third-records-advanced-filters {
        padding-top: 8px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .form-group:first-child,
    .third-party-page .third-party-list-card .third-records-advanced-filters .form-group:nth-child(1) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters label {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad:
      quitar el aire superior real del panel expandido de filtros.
    */
    .third-party-page .third-party-list-card .third-party-filters-form {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters {
        padding: 4px 12px 12px !important;
        margin: 0 0 12px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters > .form-group:first-child,
    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters > .form-group:first-of-type {
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .form-group {
        padding-top: 0 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters label {
        margin: 0 0 5px !important;
        padding: 0 !important;
    }
}
/* =========================================================
   /third-parties - filtros avanzados responsive normalizados
   Mobile + iPad vertical + iPad horizontal
   ========================================================= */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .third-party-page .third-party-list-card .third-records-advanced-filters {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-items: end !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .form-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters label {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters input,
    .third-party-page .third-party-list-card .third-records-advanced-filters select {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters button,
    .third-party-page .third-party-list-card .third-records-advanced-filters .btn,
    .third-party-page .third-party-list-card .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        justify-content: center !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }
}

/*
  /third-parties - fuente final de colores para estados visuales.
  Aplica a desktop, mobile, iPad vertical e iPad horizontal.
*/
.third-party-page .third-party-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.third-party-page .third-party-status--pendiente,
.third-party-page .third-party-status[data-status="pendiente"],
.third-party-page .third-party-status-pill[data-status="pendiente"],
.third-party-page .third-party-status-pill.status-pending,
.third-party-page .third-party-status-pill.is-pending,
.third-party-page .third-party-pendiente {
    background: #FEF3C7 !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

.third-party-page .third-party-status--vencida,
.third-party-page .third-party-status[data-status="vencida"],
.third-party-page .third-party-status-pill[data-status="vencida"],
.third-party-page .third-party-status-pill.status-overdue,
.third-party-page .third-party-status-pill.is-overdue,
.third-party-page .third-party-vencida,
.third-party-page .third-party-pending-alert {
    background: #FEE2E2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

.third-party-page .third-party-status--entregado,
.third-party-page .third-party-status[data-status="entregado"],
.third-party-page .third-party-status-pill[data-status="entregado"],
.third-party-page .third-party-status-pill.status-delivered,
.third-party-page .third-party-status-pill.is-delivered,
.third-party-page .third-party-entregado {
    background: #DDF4F8 !important;
    border-color: rgba(85, 156, 173, 0.24) !important;
    color: #0F6B7A !important;
}

.third-party-page .third-party-status--pagado,
.third-party-page .third-party-status[data-status="pagado"],
.third-party-page .third-party-status-pill[data-status="pagado"],
.third-party-page .third-party-status-pill.status-paid,
.third-party-page .third-party-status-pill.is-paid,
.third-party-page .third-party-pagado {
    background: #DCFCE8 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      refuerzo final para que los 4 modals usen altura real del contenido.
    */
    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content,
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content,
    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-content,
    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 72px) !important;
        overflow: hidden !important;
        align-self: center !important;
    }

    .modal[id^="third-party-detail-"] .modal-body,
    .modal[id^="third-party-edit-"] .modal-body,
    .modal[id^="third-party-delivered-"] .modal-body,
    .modal[id^="third-party-paid-"] .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 148px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px !important;
    }

    .modal[id^="third-party-detail-"] .modal-header,
    .modal[id^="third-party-edit-"] .modal-header,
    .modal[id^="third-party-delivered-"] .modal-header,
    .modal[id^="third-party-paid-"] .modal-header {
        min-height: 64px !important;
        height: auto !important;
        padding: 18px 24px !important;
    }

    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content,
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content {
        width: min(1040px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-content {
        width: min(720px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        width: min(760px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group,
    .modal[id^="third-party-paid-"] .form-check,
    .modal[id^="third-party-paid-"] label:has(input[type="checkbox"]) {
        min-height: 56px !important;
        margin: 0 0 18px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      reset fuerte SOLO para modals de terceros.
      Quita min-height/height heredados que generan espacio blanco.
    */
    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content,
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content,
    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-content,
    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 72px) !important;
        overflow: hidden !important;
        align-self: center !important;
    }

    .modal[id^="third-party-detail-"] .modal-body,
    .modal[id^="third-party-edit-"] .modal-body,
    .modal[id^="third-party-delivered-"] .modal-body,
    .modal[id^="third-party-paid-"] .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 148px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px !important;
    }

    .modal[id^="third-party-detail-"] .modal-header,
    .modal[id^="third-party-edit-"] .modal-header,
    .modal[id^="third-party-delivered-"] .modal-header,
    .modal[id^="third-party-paid-"] .modal-header {
        min-height: 64px !important;
        height: auto !important;
        padding: 18px 24px !important;
    }

    /*
      Detalle de entrega a tercero:
      ancho suficiente, alto solo hasta observacion.
    */
    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content {
        width: min(1040px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-detail-"] .search-info-grid,
    .modal[id^="third-party-detail-"] .info-grid,
    .modal[id^="third-party-detail-"] .modal-body > .responsive-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-detail-"] .info-item {
        min-height: 78px !important;
        height: auto !important;
        padding: 15px 18px !important;
        border-radius: 18px !important;
    }

    .modal[id^="third-party-detail-"] .info-item:last-child {
        grid-column: 1 / -1 !important;
        min-height: 72px !important;
    }

    /*
      Editar entrega:
      compacto y sin fondo blanco sobrante debajo del boton.
    */
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content {
        width: min(1040px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-edit-"] form,
    .modal[id^="third-party-edit-"] .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px 20px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-edit-"] .form-group {
        margin: 0 !important;
    }

    .modal[id^="third-party-edit-"] .form-group.full-width,
    .modal[id^="third-party-edit-"] .form-group-full,
    .modal[id^="third-party-edit-"] .form-group:has(textarea) {
        grid-column: 1 / -1 !important;
    }

    .modal[id^="third-party-edit-"] textarea {
        min-height: 108px !important;
        height: 108px !important;
        resize: vertical !important;
    }

    .modal[id^="third-party-edit-"] .form-actions,
    .modal[id^="third-party-edit-"] .form-actions.full-width {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /*
      Marcar como entregado:
      modal pequeno, no gigante.
    */
    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-content {
        width: min(720px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-delivered-"] form,
    .modal[id^="third-party-delivered-"] .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-delivered-"] .form-group {
        margin: 0 !important;
    }

    .modal[id^="third-party-delivered-"] input[type="date"] {
        width: 320px !important;
        max-width: 100% !important;
    }

    .modal[id^="third-party-delivered-"] textarea {
        min-height: 108px !important;
        height: 108px !important;
        resize: vertical !important;
    }

    .modal[id^="third-party-delivered-"] .form-actions {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /*
      Marcar como pagado:
      corregir espacio blanco y el box del checkbox.
    */
    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        width: min(760px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-paid-"] .search-info-grid,
    .modal[id^="third-party-paid-"] .info-grid,
    .modal[id^="third-party-paid-"] .modal-body > .responsive-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-paid-"] .info-item {
        min-height: 74px !important;
        height: auto !important;
        padding: 15px 18px !important;
        border-radius: 18px !important;
    }

    /*
      Box: "Registrar gasto automatico al marcar como pagado."
      Quitar aire superior y centrar checkbox/texto.
    */
    .modal[id^="third-party-paid-"] .checkbox-group,
    .modal[id^="third-party-paid-"] .form-check,
    .modal[id^="third-party-paid-"] label:has(input[type="checkbox"]) {
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 0 18px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.58) !important;
        background: rgba(248, 251, 255, 0.92) !important;
        box-sizing: border-box !important;
    }

    .modal[id^="third-party-paid-"] input[type="checkbox"] {
        margin: 0 !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group label,
    .modal[id^="third-party-paid-"] .form-check label {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: #2F3260 !important;
    }

    .modal[id^="third-party-paid-"] .form-actions {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      centrar boton de acciones respecto al titulo.
    */
    .third-party-page .third-parties-table th:last-child,
    .third-party-page .third-parties-table td.actions-cell {
        text-align: center !important;
        vertical-align: middle !important;
    }

    .third-party-page .third-parties-table td.actions-cell {
        display: table-cell !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .third-party-page .third-parties-table .third-party-table-actions,
    .third-party-page .third-parties-table .table-row-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .third-party-page .third-parties-table .row-actions-trigger,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-toggle] {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
    }

    .third-party-page .third-parties-table .row-actions-menu,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] {
        min-width: 220px !important;
        padding: 10px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.58) !important;
        background: #ffffff !important;
        box-shadow: 0 18px 42px rgba(47, 50, 96, 0.16) !important;
        z-index: 80 !important;
    }

    .third-party-page .third-parties-table .row-actions-menu button,
    .third-party-page .third-parties-table .row-actions-menu a,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] button,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] a {
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: var(--primary) !important;
        font-size: 0.88rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        text-align: left !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    .third-party-page .third-parties-table .row-actions-menu button:hover,
    .third-party-page .third-parties-table .row-actions-menu a:hover,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] button:hover,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] a:hover {
        background: rgba(244, 241, 255, 0.92) !important;
    }

    .third-party-page .third-parties-table .row-actions-menu i,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] i {
        width: 18px !important;
        min-width: 18px !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    .third-party-page .third-parties-table .row-actions-menu .is-danger,
    .third-party-page .third-parties-table .row-actions-menu .danger,
    .third-party-page .third-parties-table .row-actions-menu .delete-action,
    .third-party-page .third-parties-table .row-actions-menu .row-actions-menu-item--danger,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .is-danger,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .danger,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .delete-action,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .row-actions-menu-item--danger {
        color: #C92A4A !important;
        font-weight: 600 !important;
    }

    .third-party-page .third-parties-table .row-actions-menu .is-danger:hover,
    .third-party-page .third-parties-table .row-actions-menu .danger:hover,
    .third-party-page .third-parties-table .row-actions-menu .delete-action:hover,
    .third-party-page .third-parties-table .row-actions-menu .row-actions-menu-item--danger:hover,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .is-danger:hover,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .danger:hover,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .delete-action:hover,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] .row-actions-menu-item--danger:hover {
        background: rgba(254, 242, 242, 0.96) !important;
    }

    .third-party-page .third-parties-table .row-actions-menu hr,
    .third-party-page .third-parties-table [data-thirdparty-row-actions-menu] hr {
        width: 100% !important;
        height: 1px !important;
        margin: 8px 0 !important;
        border: 0 !important;
        background: rgba(180, 207, 221, 0.55) !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      ajustar solo estos 3 modals para eliminar espacios blancos.
    */
    .third-party-page .modal[id^="third-party-detail-"] .modal-dialog,
    .third-party-page .modal[id^="third-party-edit-"] .modal-dialog,
    .third-party-page .modal[id^="third-party-delivered-"] .modal-dialog {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 72px) !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    .third-party-page .modal[id^="third-party-detail-"] .modal-body,
    .third-party-page .modal[id^="third-party-edit-"] .modal-body,
    .third-party-page .modal[id^="third-party-delivered-"] .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px !important;
    }

    .third-party-page .modal[id^="third-party-detail-"] .modal-header,
    .third-party-page .modal[id^="third-party-edit-"] .modal-header,
    .third-party-page .modal[id^="third-party-delivered-"] .modal-header {
        min-height: 64px !important;
        padding: 18px 24px !important;
    }

    .third-party-page .modal[id^="third-party-detail-"] .modal-dialog {
        width: min(1040px, calc(100vw - 96px)) !important;
    }

    .third-party-page .modal[id^="third-party-detail-"] .search-info-grid,
    .third-party-page .modal[id^="third-party-detail-"] .info-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .third-party-page .modal[id^="third-party-detail-"] .info-item {
        min-height: 82px !important;
        height: auto !important;
        padding: 16px 18px !important;
        border-radius: 18px !important;
    }

    .third-party-page .modal[id^="third-party-detail-"] .info-item:last-child {
        grid-column: 1 / -1 !important;
        min-height: 78px !important;
    }

    .third-party-page .modal[id^="third-party-edit-"] .modal-dialog {
        width: min(1040px, calc(100vw - 96px)) !important;
    }

    .third-party-page .modal[id^="third-party-edit-"] form,
    .third-party-page .modal[id^="third-party-edit-"] .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px 22px !important;
        width: 100% !important;
    }

    .third-party-page .modal[id^="third-party-edit-"] .form-group {
        margin: 0 !important;
    }

    .third-party-page .modal[id^="third-party-edit-"] .form-group-full,
    .third-party-page .modal[id^="third-party-edit-"] .form-group:has(textarea),
    .third-party-page .modal[id^="third-party-edit-"] textarea {
        grid-column: 1 / -1 !important;
    }

    .third-party-page .modal[id^="third-party-edit-"] textarea {
        min-height: 112px !important;
        height: 112px !important;
        resize: vertical !important;
    }

    .third-party-page .modal[id^="third-party-edit-"] .form-actions {
        grid-column: 1 / -1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    .third-party-page .modal[id^="third-party-delivered-"] .modal-dialog {
        width: min(720px, calc(100vw - 96px)) !important;
    }

    .third-party-page .modal[id^="third-party-delivered-"] form,
    .third-party-page .modal[id^="third-party-delivered-"] .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .third-party-page .modal[id^="third-party-delivered-"] .form-group {
        margin: 0 !important;
    }

    .third-party-page .modal[id^="third-party-delivered-"] input[type="date"] {
        max-width: 320px !important;
    }

    .third-party-page .modal[id^="third-party-delivered-"] textarea {
        min-height: 112px !important;
        height: 112px !important;
        resize: vertical !important;
    }

    .third-party-page .modal[id^="third-party-delivered-"] .form-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      ordenar KPIs superiores en grid 12 columnas.
    */
    .third-party-page .third-party-metrics-grid,
    .third-party-page .third-party-summary-grid,
    .third-party-page .third-party-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 22px 0 24px !important;
        align-items: stretch !important;
    }

    .third-party-page .third-party-metrics-grid > *:nth-child(1),
    .third-party-page .third-party-summary-grid > *:nth-child(1),
    .third-party-page .third-party-stats-grid > *:nth-child(1),
    .third-party-page .third-party-metrics-grid > *:nth-child(2),
    .third-party-page .third-party-summary-grid > *:nth-child(2),
    .third-party-page .third-party-stats-grid > *:nth-child(2),
    .third-party-page .third-party-metrics-grid > *:nth-child(3),
    .third-party-page .third-party-summary-grid > *:nth-child(3),
    .third-party-page .third-party-stats-grid > *:nth-child(3),
    .third-party-page .third-party-metrics-grid > *:nth-child(4),
    .third-party-page .third-party-summary-grid > *:nth-child(4),
    .third-party-page .third-party-stats-grid > *:nth-child(4) {
        grid-column: span 3 !important;
    }

    .third-party-page .third-party-metrics-grid > *:nth-child(5),
    .third-party-page .third-party-summary-grid > *:nth-child(5),
    .third-party-page .third-party-stats-grid > *:nth-child(5),
    .third-party-page .third-party-metrics-grid > *:nth-child(6),
    .third-party-page .third-party-summary-grid > *:nth-child(6),
    .third-party-page .third-party-stats-grid > *:nth-child(6),
    .third-party-page .third-party-metrics-grid > *:nth-child(7),
    .third-party-page .third-party-summary-grid > *:nth-child(7),
    .third-party-page .third-party-stats-grid > *:nth-child(7) {
        grid-column: span 4 !important;
    }

    .third-party-page .third-party-metrics-grid > *,
    .third-party-page .third-party-summary-grid > *,
    .third-party-page .third-party-stats-grid > * {
        width: 100% !important;
        max-width: none !important;
        min-height: 124px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/*
  /third-parties - estado visual unificado en todos los dispositivos.
  "vencida" es solo visual; el estado real sigue siendo pendiente.
*/
.third-party-page .third-party-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.third-party-page .third-party-status--pendiente,
.third-party-page .third-party-status[data-status="pendiente"],
.third-party-page .third-party-status-pill[data-status="pendiente"],
.third-party-page .third-party-status-pill.status-pending,
.third-party-page .third-party-status-pill.is-pending,
.third-party-page .third-party-pendiente {
    background: #FEF3C7 !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

.third-party-page .third-party-status--vencida,
.third-party-page .third-party-status[data-status="vencida"],
.third-party-page .third-party-status-pill[data-status="vencida"],
.third-party-page .third-party-status-pill.status-overdue,
.third-party-page .third-party-status-pill.is-overdue,
.third-party-page .third-party-vencida,
.third-party-page .third-party-pending-alert {
    background: #FEE2E2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

.third-party-page .third-party-status--entregado,
.third-party-page .third-party-status[data-status="entregado"],
.third-party-page .third-party-status-pill[data-status="entregado"],
.third-party-page .third-party-status-pill.status-delivered,
.third-party-page .third-party-status-pill.is-delivered,
.third-party-page .third-party-entregado {
    background: #DDF4F8 !important;
    border-color: rgba(85, 156, 173, 0.24) !important;
    color: #0F6B7A !important;
}

.third-party-page .third-party-status--pagado,
.third-party-page .third-party-status[data-status="pagado"],
.third-party-page .third-party-status-pill[data-status="pagado"],
.third-party-page .third-party-status-pill.status-paid,
.third-party-page .third-party-status-pill.is-paid,
.third-party-page .third-party-pagado {
    background: #DCFCE8 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      homologar solo colores de pills de estado con responsive.
    */
    .third-party-page .third-party-status-pill.is-pending,
    .third-party-page .third-party-status-pill.status-pending,
    .third-party-page .third-party-status-pill[data-status="pendiente"],
    .third-party-page .third-party-status.third-party-pendiente,
    .third-party-page .third-party-status.third-party-pending-alert,
    .third-party-page .status-chip.third-party-pendiente,
    .third-party-page .status-chip.third-party-pending-alert,
    .third-party-page .status-chip[data-status="pendiente"] {
        background: #FEF3C7 !important;
        border-color: #FDE68A !important;
        color: #92400E !important;
    }

    .third-party-page .third-party-status-pill.is-paid,
    .third-party-page .third-party-status-pill.status-paid,
    .third-party-page .third-party-status-pill[data-status="pagado"],
    .third-party-page .third-party-status.third-party-pagado,
    .third-party-page .status-chip.third-party-pagado,
    .third-party-page .status-chip[data-status="pagado"] {
        background: #DCFCE8 !important;
        border-color: #BBF7D0 !important;
        color: #166534 !important;
    }

    .third-party-page .third-party-status-pill.is-delivered,
    .third-party-page .third-party-status-pill.status-delivered,
    .third-party-page .third-party-status-pill[data-status="entregado"],
    .third-party-page .third-party-status.third-party-entregado,
    .third-party-page .status-chip.third-party-entregado,
    .third-party-page .status-chip[data-status="entregado"] {
        background: #DDF4F8 !important;
        border-color: rgba(85, 156, 173, 0.24) !important;
        color: #0F6B7A !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      igualar tipografia de filtros a mobile/iPad vertical.
    */
    .third-party-page .third-party-list-card .third-records-advanced-filters label {
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters input,
    .third-party-page .third-party-list-card .third-records-advanced-filters select {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        color: #2F3260 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters input::placeholder {
        color: rgba(47, 50, 96, 0.56) !important;
        font-weight: 500 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters button,
    .third-party-page .third-party-list-card .third-records-advanced-filters .btn,
    .third-party-page .third-party-list-card .third-records-advanced-filters a.btn {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop - modales mas compactos y organizados.
    */
    .third-party-desktop-modal {
        width: min(1040px, calc(100vw - 96px)) !important;
        max-height: calc(100vh - 72px) !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .third-party-desktop-modal .modal-header {
        min-height: 64px !important;
        padding: 18px 24px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
    }

    .third-party-desktop-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-desktop-modal .modal-close-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    .third-party-desktop-modal .modal-body {
        padding: 24px !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .third-party-detail-modal .search-info-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .third-party-detail-modal .info-item {
        min-height: 82px !important;
        padding: 16px 18px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(180, 207, 221, 0.52) !important;
    }

    .third-party-detail-modal .info-item span {
        margin-bottom: 8px !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: #7B7188 !important;
    }

    .third-party-detail-modal .info-item strong {
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-detail-modal .info-item:last-child {
        grid-column: 1 / -1 !important;
    }

    .third-party-edit-modal .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px 20px !important;
        width: 100% !important;
    }

    .third-party-edit-modal .form-group {
        margin: 0 !important;
    }

    .third-party-edit-modal .form-group-full {
        grid-column: 1 / -1 !important;
    }

    .third-party-edit-modal textarea {
        min-height: 112px !important;
    }

    .third-party-edit-modal .form-actions {
        margin-top: 20px !important;
        justify-content: flex-start !important;
    }

    .third-party-delivered-modal {
        width: min(760px, calc(100vw - 96px)) !important;
    }

    .third-party-delivered-modal .form-grid {
        display: grid !important;
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) !important;
        gap: 18px 20px !important;
        align-items: start !important;
    }

    .third-party-delivered-modal .form-group-full {
        grid-column: 1 / -1 !important;
    }

    .third-party-delivered-modal textarea {
        min-height: 112px !important;
    }

    .third-party-delivered-modal .form-actions {
        margin-top: 20px !important;
        justify-content: flex-start !important;
    }

    .third-party-paid-modal {
        width: min(760px, calc(100vw - 96px)) !important;
    }

    .third-party-paid-modal .search-info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .third-party-paid-modal .checkbox-group {
        margin-top: 18px !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        background: rgba(248, 251, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.52) !important;
    }

    .third-party-paid-modal .form-actions {
        margin-top: 20px !important;
        justify-content: flex-start !important;
    }
}

/*
  /third-parties - colores homologados de estados.
  Scopeado para no afectar otras secciones.
*/
.third-party-page .third-party-status-pill,
.third-party-page .third-party-status-chip,
.third-party-page .third-party-status,
.third-party-page .third-party-record-card .status-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.third-party-page .third-party-status-pill.is-pending,
.third-party-page .third-party-status-pill.status-pending,
.third-party-page .third-party-status-pill[data-status="pendiente"],
.third-party-page .third-party-status.third-party-pendiente,
.third-party-page .third-party-status.third-party-pending-alert,
.third-party-page .third-party-record-card .status-chip[data-status="pendiente"] {
    background: #FEE2E2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

.third-party-page .third-party-status-pill.is-delivered,
.third-party-page .third-party-status-pill.status-delivered,
.third-party-page .third-party-status-pill[data-status="entregado"],
.third-party-page .third-party-status.third-party-entregado,
.third-party-page .third-party-record-card .status-chip[data-status="entregado"] {
    background: #DDF4F8 !important;
    border-color: rgba(85, 156, 173, 0.24) !important;
    color: #0F6B7A !important;
}

.third-party-page .third-party-status-pill.is-paid,
.third-party-page .third-party-status-pill.status-paid,
.third-party-page .third-party-status-pill[data-status="pagado"],
.third-party-page .third-party-status.third-party-pagado,
.third-party-page .third-party-record-card .status-chip[data-status="pagado"] {
    background: #DCFCE8 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop - acciones agrupadas en dropdown.
    */
    .third-party-page .third-parties-table .actions-cell {
        overflow: visible !important;
        text-align: center !important;
        width: 72px !important;
        min-width: 72px !important;
    }

    .third-party-page .third-parties-table .actions-cell > .icon-btn,
    .third-party-page .third-parties-table .actions-cell > form,
    .third-party-page .third-parties-table .actions-cell > button:not(.row-actions-trigger) {
        display: none !important;
    }

    .third-party-page .third-parties-table,
    .third-party-page .third-parties-table tbody,
    .third-party-page .third-parties-table tr,
    .third-party-page .third-parties-table td {
        overflow: visible !important;
    }

    .third-party-page .table-wrapper:has(.third-parties-table) {
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-bottom: 12px !important;
    }

    .third-party-page .third-party-table-actions {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .third-party-page .third-party-row-actions-trigger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid #D8E7EF !important;
        background: #FFFFFF !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
    }

    .third-party-page .third-party-row-actions-trigger:hover,
    .third-party-page .third-party-table-actions.is-open .third-party-row-actions-trigger {
        background: #F7F5FF !important;
        border-color: #C8C1F0 !important;
    }

    .third-party-page .third-party-row-actions-menu {
        position: fixed !important;
        width: 224px !important;
        max-height: min(340px, calc(100vh - 32px)) !important;
        overflow-y: auto !important;
        background: #FFFFFF !important;
        border: 1px solid #E3E8EF !important;
        border-radius: 14px !important;
        box-shadow: 0 14px 30px rgba(55, 48, 90, 0.16) !important;
        padding: 8px !important;
        z-index: 9999 !important;
    }

    .third-party-page .third-party-row-actions-menu[hidden] {
        display: none !important;
    }

    .third-party-page .third-party-row-actions-menu form {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .third-party-page .row-actions-menu-item {
        width: 100% !important;
        min-height: 40px !important;
        border: 0 !important;
        background: transparent !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #33427F !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    .third-party-page .row-actions-menu-item:hover {
        background: #F7F5FF !important;
    }

    .third-party-page .row-actions-menu-item i {
        width: 18px !important;
        min-width: 18px !important;
        text-align: center !important;
    }

    .third-party-page .row-actions-menu-item--success {
        color: #166534 !important;
    }

    .third-party-page .row-actions-menu-item--paid {
        color: #0F6B7A !important;
    }

    .third-party-page .row-actions-menu-item--danger {
        color: #B42318 !important;
    }
}

@media (max-width: 767px) {
    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .filter-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 14px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .filter-actions {
        display: contents !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .filter-actions {
        display: contents !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters button[type="submit"],
    .third-party-page .third-party-list-card .third-records-advanced-filters .btn-primary,
    .third-party-page .third-party-list-card .third-records-advanced-filters .filter-submit {
        grid-column: 1 / span 2 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters a.btn,
    .third-party-page .third-party-list-card .third-records-advanced-filters .btn-secondary,
    .third-party-page .third-party-list-card .third-records-advanced-filters .filter-clear {
        grid-column: 3 / span 2 !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      acciones secundarias dentro de cards.
    */
    .third-party-page .third-party-responsive-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .third-party-page .third-party-responsive-actions form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .third-party-page .third-party-action-icon {
        width: 100% !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .third-party-page .third-party-action-icon i {
        font-size: 0.86rem !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .third-party-action-icon--success {
        border-color: rgba(34, 197, 94, 0.28) !important;
        background: #DCFCE8 !important;
        color: #166534 !important;
    }

    .third-party-page .third-party-action-icon--paid {
        border-color: rgba(34, 197, 94, 0.28) !important;
        background: #DCFCE8 !important;
        color: #166534 !important;
    }

    .third-party-page .third-party-action-icon--danger {
        border-color: rgba(239, 68, 68, 0.24) !important;
        background: rgba(254, 242, 242, 0.96) !important;
        color: #B91C1C !important;
    }
}

@media (max-width: 767px) {
    .third-party-page .third-party-responsive-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .third-party-page .third-party-responsive-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .third-party-page .third-party-responsive-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      reemplazar metrica Estado por Acciones colapsables.
    */
    .third-party-page .thirdparty-actions-metric {
        min-height: 46px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(248, 251, 255, 0.92) !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .third-party-page .thirdparty-actions-metric .metric-actions {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        border-radius: 999px !important;
        background: rgba(74, 91, 168, 0.12) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .thirdparty-actions-metric span {
        display: block !important;
        margin: 0 0 2px !important;
        color: #6F6A7F !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
    }

    .third-party-page .thirdparty-actions-toggle {
        width: auto !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .third-party-page .thirdparty-actions-toggle i {
        font-size: 0.74rem !important;
        transition: transform 0.16s ease !important;
    }

    .third-party-page .thirdparty-actions-toggle.is-open i {
        transform: rotate(180deg) !important;
    }

    .third-party-page .thirdparty-actions-panel {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 2px 0 0 !important;
    }

    .third-party-page .thirdparty-actions-panel[hidden] {
        display: none !important;
    }

    .third-party-page .thirdparty-actions-panel .third-party-action-icon {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: center !important;
    }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties responsive:
      acordeon de acciones compacto y totalmente clickeable.
    */
    .third-party-page .thirdparty-actions-metric {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .third-party-page .thirdparty-actions-toggle {
        width: 100% !important;
        min-height: 46px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: transparent !important;
        color: var(--primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .third-party-page .thirdparty-actions-toggle--card {
        margin-top: 8px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.92) !important;
    }

    .third-party-page .thirdparty-actions-toggle .metric-actions,
    .third-party-page .thirdparty-actions-toggle > i:first-child {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        border-radius: 999px !important;
        background: rgba(74, 91, 168, 0.12) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .third-party-page .thirdparty-actions-toggle-label,
    .third-party-page .thirdparty-actions-toggle > span:not(.metric-icon) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-weight: 700 !important;
    }

    .third-party-page .thirdparty-actions-toggle > i:last-child {
        margin-left: auto !important;
        font-size: 0.74rem !important;
        transition: transform 0.16s ease !important;
    }

    .third-party-page .thirdparty-actions-toggle.is-open > i:last-child {
        transform: rotate(180deg) !important;
    }

    .third-party-page .thirdparty-actions-panel {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 2px 0 0 !important;
    }

    .third-party-page .thirdparty-actions-panel[hidden] {
        display: none !important;
    }

    .third-party-page .thirdparty-actions-panel form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      evitar que una card estire a la card vecina cuando se expande Acciones.
    */
    .third-party-page [data-third-records-results],
    .third-party-page .third-party-records-list {
        align-items: start !important;
    }

    .third-party-page .third-party-mobile-list,
    .third-party-page .thirdparty-mobile-list,
    .third-party-page .terceros-mobile-list,
    .third-party-page .third-party-mobile-list.tablet-card-show-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        align-items: start !important;
    }

    .third-party-page .third-party-record-card {
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .third-party-page .third-party-record-card .third-party-responsive-actions,
    .third-party-page .third-party-record-card .thirdparty-actions-panel,
    .third-party-page .third-party-record-card [data-thirdparty-actions-panel],
    .third-party-page .third-party-record-card [data-third-actions-panel] {
        flex: 0 0 auto !important;
    }

    .third-party-page .third-party-record-card .btn,
    .third-party-page .third-party-record-card button,
    .third-party-page .third-party-record-card a.btn {
        flex: 0 0 auto !important;
    }

    .third-party-page .third-party-record-card .mobile-card-action,
    .third-party-page .third-party-record-card .mobile-thirdparty-action,
    .third-party-page .third-party-record-card .btn-primary,
    .third-party-page .third-party-record-card .third-party-detail-btn,
    .third-party-page .third-party-record-card [data-third-party-detail] {
        min-height: 44px !important;
        height: 44px !important;
    }
}
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      evitar deformacion entre cards, pero mantener contenido interno full width.
    */
    .third-party-page [data-third-records-results],
    .third-party-page .third-party-records-list,
    .third-party-page .third-party-mobile-list {
        align-items: start !important;
    }

    .third-party-page .third-party-record-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .third-party-page .third-party-record-card > *,
    .third-party-page .third-party-record-card .third-party-record-schedule,
    .third-party-page .third-party-record-card .third-party-record-programmed,
    .third-party-page .third-party-record-card .mobile-thirdparty-schedule,
    .third-party-page .third-party-record-card .mobile-thirdparty-highlight,
    .third-party-page .third-party-record-card .mobile-thirdparty-metrics,
    .third-party-page .third-party-record-card .third-party-responsive-actions,
    .third-party-page .third-party-record-card .thirdparty-actions-panel,
    .third-party-page .third-party-record-card [data-thirdparty-actions-panel],
    .third-party-page .third-party-record-card [data-third-actions-panel] {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-record-card .third-party-record-schedule,
    .third-party-page .third-party-record-card .third-party-record-programmed,
    .third-party-page .third-party-record-card .mobile-thirdparty-schedule,
    .third-party-page .third-party-record-card .mobile-thirdparty-highlight {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    .third-party-page .third-party-record-card .mobile-thirdparty-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .third-party-page .third-party-record-card .mobile-thirdparty-metric,
    .third-party-page .third-party-record-card .thirdparty-actions-toggle {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .third-party-page .third-party-record-card .mobile-card-action,
    .third-party-page .third-party-record-card .mobile-thirdparty-action,
    .third-party-page .third-party-record-card .third-party-detail-btn,
    .third-party-page .third-party-record-card [data-third-party-detail],
    .third-party-page .third-party-record-card a.btn-primary,
    .third-party-page .third-party-record-card button.btn-primary {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      estirar el listado real sin volver a estirar cards vecinas.
    */
    .third-party-page [data-third-records-results] {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-mobile-list,
    .third-party-page .thirdparty-mobile-list,
    .third-party-page .terceros-mobile-list,
    .third-party-page .third-party-mobile-list.tablet-card-show-grid,
    .third-party-page .thirdparty-mobile-list.tablet-card-show-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        align-self: start !important;
        justify-items: stretch !important;
        align-items: start !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-mobile-list > .third-party-record-card,
    .third-party-page .thirdparty-mobile-list > .third-party-record-card,
    .third-party-page .terceros-mobile-list > .third-party-record-card,
    .third-party-page .third-party-mobile-list > .mobile-thirdparty-card,
    .third-party-page .third-party-mobile-list > .mobile-thirdparty-card-v1,
    .third-party-page .thirdparty-mobile-list > .mobile-thirdparty-card,
    .third-party-page .thirdparty-mobile-list > .mobile-thirdparty-card-v1 {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-record-card,
    .third-party-page .third-party-record-card > *,
    .third-party-page .third-party-record-card .mobile-thirdparty-header,
    .third-party-page .third-party-record-card .mobile-card-header,
    .third-party-page .third-party-record-card .third-party-record-schedule,
    .third-party-page .third-party-record-card .third-party-record-programmed,
    .third-party-page .third-party-record-card .mobile-thirdparty-schedule,
    .third-party-page .third-party-record-card .mobile-thirdparty-highlight,
    .third-party-page .third-party-record-card .mobile-thirdparty-metrics,
    .third-party-page .third-party-record-card .mobile-thirdparty-action,
    .third-party-page .third-party-record-card .mobile-card-action,
    .third-party-page .third-party-record-card .thirdparty-actions-toggle,
    .third-party-page .third-party-record-card .thirdparty-actions-panel,
    .third-party-page .third-party-record-card [data-thirdparty-actions-panel] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-record-card .thirdparty-actions-metric .thirdparty-actions-toggle {
        height: 100% !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      clases explicitas para que la card responsive use todo su ancho.
    */
    .third-party-page [data-third-records-results] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-mobile-list,
    .third-party-page .thirdparty-mobile-list,
    .third-party-page .terceros-mobile-list,
    .third-party-page .third-party-mobile-list.tablet-card-show-grid,
    .third-party-page .thirdparty-mobile-list.tablet-card-show-grid {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: start !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-responsive-record-card,
    .third-party-page .third-party-mobile-list > .third-responsive-record-card,
    .third-party-page .thirdparty-mobile-list > .third-responsive-record-card,
    .third-party-page .terceros-mobile-list > .third-responsive-record-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        align-self: start !important;
        justify-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-responsive-record-card > *,
    .third-party-page .third-responsive-record-card .third-responsive-programmed,
    .third-party-page .third-responsive-record-card .third-responsive-metrics,
    .third-party-page .third-responsive-record-card .third-responsive-detail-btn,
    .third-party-page .third-responsive-record-card .thirdparty-actions-panel,
    .third-party-page .third-responsive-record-card [data-thirdparty-actions-panel] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-responsive-programmed {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        min-height: 58px !important;
        margin: 10px 0 !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: rgba(244, 241, 255, 0.96) !important;
        border: 1px solid rgba(218, 210, 255, 0.72) !important;
    }

    .third-party-page .third-responsive-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    .third-party-page .third-responsive-metric,
    .third-party-page .third-responsive-actions-toggle {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-responsive-detail-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      restaurar UI aprobado y solo completar anchos internos.
    */
    .third-party-page .third-party-mobile-list .mobile-thirdparty-card:not(.mobile-thirdparty-card-v1),
    .third-party-page .thirdparty-mobile-list .mobile-thirdparty-card:not(.mobile-thirdparty-card-v1),
    .third-party-page .terceros-mobile-list .mobile-thirdparty-card:not(.mobile-thirdparty-card-v1) {
        display: none !important;
    }

    .third-party-page .third-party-mobile-list,
    .third-party-page .thirdparty-mobile-list,
    .third-party-page .terceros-mobile-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        align-items: start !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-mobile-list .mobile-thirdparty-card-v1,
    .third-party-page .third-party-mobile-list .mobile-thirdparty-card-v1[hidden],
    .third-party-page .thirdparty-mobile-list .mobile-thirdparty-card-v1,
    .third-party-page .thirdparty-mobile-list .mobile-thirdparty-card-v1[hidden],
    .third-party-page .terceros-mobile-list .mobile-thirdparty-card-v1,
    .third-party-page .terceros-mobile-list .mobile-thirdparty-card-v1[hidden] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        align-self: start !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-header,
    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-highlight,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-programmed,
    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-metrics,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-metrics,
    .third-party-page .mobile-thirdparty-card-v1 .thirdparty-actions-panel,
    .third-party-page .mobile-thirdparty-card-v1 [data-thirdparty-actions-panel],
    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-action,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-detail-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-highlight,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-programmed {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-metrics,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-metric,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-metric,
    .third-party-page .mobile-thirdparty-card-v1 .thirdparty-actions-toggle,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-actions-toggle {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .third-party-page .mobile-thirdparty-card-v1 .mobile-thirdparty-action,
    .third-party-page .mobile-thirdparty-card-v1 .third-responsive-detail-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      filtros avanzados con UI tipo iPad vertical.
    */
    .third-party-page .third-party-list-card .third-records-advanced-filters {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters[hidden] {
        display: none !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .third-party-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 14px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .form-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters label {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters input,
    .third-party-page .third-party-list-card .third-records-advanced-filters select {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters .filter-actions {
        display: contents !important;
    }

    .third-party-page .third-party-list-card .third-records-advanced-filters button,
    .third-party-page .third-party-list-card .third-records-advanced-filters .btn,
    .third-party-page .third-party-list-card .third-records-advanced-filters a.btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        justify-content: center !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }
}

/*
  /third-parties - fuente final de colores para estados visuales.
  Aplica a desktop, mobile, iPad vertical e iPad horizontal.
*/
.third-party-page .third-party-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.third-party-page .third-party-status--pendiente,
.third-party-page .third-party-status[data-status="pendiente"],
.third-party-page .third-party-status-pill[data-status="pendiente"],
.third-party-page .third-party-status-pill.status-pending,
.third-party-page .third-party-status-pill.is-pending,
.third-party-page .third-party-pendiente {
    background: #FEF3C7 !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

.third-party-page .third-party-status--vencida,
.third-party-page .third-party-status[data-status="vencida"],
.third-party-page .third-party-status-pill[data-status="vencida"],
.third-party-page .third-party-status-pill.status-overdue,
.third-party-page .third-party-status-pill.is-overdue,
.third-party-page .third-party-vencida,
.third-party-page .third-party-pending-alert {
    background: #FEE2E2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

.third-party-page .third-party-status--entregado,
.third-party-page .third-party-status[data-status="entregado"],
.third-party-page .third-party-status-pill[data-status="entregado"],
.third-party-page .third-party-status-pill.status-delivered,
.third-party-page .third-party-status-pill.is-delivered,
.third-party-page .third-party-entregado {
    background: #DDF4F8 !important;
    border-color: rgba(85, 156, 173, 0.24) !important;
    color: #0F6B7A !important;
}

.third-party-page .third-party-status--pagado,
.third-party-page .third-party-status[data-status="pagado"],
.third-party-page .third-party-status-pill[data-status="pagado"],
.third-party-page .third-party-status-pill.status-paid,
.third-party-page .third-party-status-pill.is-paid,
.third-party-page .third-party-pagado {
    background: #DCFCE8 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      refuerzo final EOF para altura real de los 4 modals permitidos.
    */
    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content,
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content,
    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-content,
    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 72px) !important;
        overflow: hidden !important;
        align-self: center !important;
    }

    .modal[id^="third-party-detail-"] .modal-body,
    .modal[id^="third-party-edit-"] .modal-body,
    .modal[id^="third-party-delivered-"] .modal-body,
    .modal[id^="third-party-paid-"] .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 148px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px !important;
    }

    .modal[id^="third-party-detail-"] .modal-header,
    .modal[id^="third-party-edit-"] .modal-header,
    .modal[id^="third-party-delivered-"] .modal-header,
    .modal[id^="third-party-paid-"] .modal-header {
        min-height: 64px !important;
        height: auto !important;
        padding: 18px 24px !important;
    }

    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content,
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content {
        width: min(1040px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-content {
        width: min(720px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        width: min(760px, calc(100vw - 96px)) !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group,
    .modal[id^="third-party-paid-"] .form-check,
    .modal[id^="third-party-paid-"] label:has(input[type="checkbox"]) {
        min-height: 56px !important;
        margin: 0 0 18px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      restaurar modal Editar entrega a tercero.
    */
    .modal[id^="third-party-edit-"] .modal-dialog,
    .modal[id^="third-party-edit-"] .modal-content {
        width: min(1040px, calc(100vw - 96px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 72px) !important;
        overflow: hidden !important;
    }

    .modal[id^="third-party-edit-"] .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 148px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px !important;
    }

    /*
      El form NO debe forzar columnas si la estructura interna ya tiene grupos.
    */
    .modal[id^="third-party-edit-"] form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
      Grid real para los campos.
      El template ya tiene .form-grid dentro del form.
    */
    .modal[id^="third-party-edit-"] .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px 22px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
    }

    .modal[id^="third-party-edit-"] .form-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-edit-"] label {
        display: block !important;
        margin: 0 0 8px !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
        white-space: normal !important;
    }

    .modal[id^="third-party-edit-"] input,
    .modal[id^="third-party-edit-"] select,
    .modal[id^="third-party-edit-"] textarea {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /*
      Observacion full width.
    */
    .modal[id^="third-party-edit-"] .form-group-full,
    .modal[id^="third-party-edit-"] .form-group:has(textarea) {
        grid-column: 1 / -1 !important;
    }

    .modal[id^="third-party-edit-"] textarea {
        min-height: 112px !important;
        height: 112px !important;
        resize: vertical !important;
    }

    /*
      Boton debajo, alineado a la izquierda.
    */
    .modal[id^="third-party-edit-"] .form-actions {
        width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .modal[id^="third-party-edit-"] .form-actions .btn,
    .modal[id^="third-party-edit-"] .form-actions button {
        width: auto !important;
        min-width: 168px !important;
        max-width: none !important;
    }
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      corregir box checkbox en modal Marcar como pagado.
    */
    .modal[id^="third-party-paid-"] .checkbox-group,
    .modal[id^="third-party-paid-"] .form-check {
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 0 20px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        box-sizing: border-box !important;
    }

    /*
      Evitar doble caja interna.
    */
    .modal[id^="third-party-paid-"] .checkbox-group label,
    .modal[id^="third-party-paid-"] .form-check label,
    .modal[id^="third-party-paid-"] .checkbox-group label:has(input[type="checkbox"]),
    .modal[id^="third-party-paid-"] .form-check label:has(input[type="checkbox"]) {
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #2F3260 !important;
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group input[type="checkbox"],
    .modal[id^="third-party-paid-"] .form-check input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        flex: 0 0 18px !important;
    }

    /*
      Por si el input esta fuera del label.
    */
    .modal[id^="third-party-paid-"] .checkbox-group > input[type="checkbox"],
    .modal[id^="third-party-paid-"] .form-check > input[type="checkbox"] {
        align-self: center !important;
    }
}

/*
  /third-parties:
  checkbox de "Registrar gasto automatico..." consistente en todos los dispositivos.
  Scopeado solo al modal Marcar como pagado.
*/
.modal[id^="third-party-paid-"] .checkbox-group {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 20px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 16px !important;
    border: 1px solid rgba(180, 207, 221, 0.72) !important;
    background: rgba(248, 251, 255, 0.96) !important;
    box-sizing: border-box !important;
}

.modal[id^="third-party-paid-"] .checkbox-group .checkbox-inline,
.modal[id^="third-party-paid-"] .checkbox-group label {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F3260 !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

.modal[id^="third-party-paid-"] .checkbox-group input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
    align-self: center !important;
}

/*
  /third-parties - Marcar como pagado:
  UI definitivo del checkbox "Registrar gasto automatico..." en todos los dispositivos.
*/
.modal[id^="third-party-paid-"] .third-party-paid-expense-box {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 20px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 16px !important;
    border: 1px solid rgba(180, 207, 221, 0.72) !important;
    background: rgba(248, 251, 255, 0.96) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.modal[id^="third-party-paid-"] .third-party-paid-expense-label {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.modal[id^="third-party-paid-"] .third-party-paid-expense-checkbox {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
    align-self: center !important;
}

.modal[id^="third-party-paid-"] .third-party-paid-expense-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #2F3260 !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

@media (min-width: 1200px) {
    /*
      /third-parties desktop:
      checkbox limpio en modal Marcar como pagado.
    */
    .modal[id^="third-party-paid-"] .checkbox-group,
    .modal[id^="third-party-paid-"] .form-check,
    .modal[id^="third-party-paid-"] .third-party-paid-expense-box {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 0 20px !important;
        padding: 0 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group label,
    .modal[id^="third-party-paid-"] .form-check label,
    .modal[id^="third-party-paid-"] .third-party-paid-expense-label {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        color: #2F3260 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        box-sizing: border-box !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group input[type="checkbox"],
    .modal[id^="third-party-paid-"] .form-check input[type="checkbox"],
    .modal[id^="third-party-paid-"] .third-party-paid-expense-checkbox {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 18px !important;
        align-self: center !important;
    }

    .modal[id^="third-party-paid-"] .third-party-paid-expense-text {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: center !important;
        color: #2F3260 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    /*
      Si el label es el box visual y no existe .checkbox-group real,
      forzar que el label completo sea la caja bien alineada.
    */
    .modal[id^="third-party-paid-"] label:has(input[type="checkbox"]):not(.third-party-paid-expense-label) {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 0 20px !important;
        padding: 0 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        box-sizing: border-box !important;
        color: #2F3260 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties - modal Marcar como pagado iPad horizontal.
      Compactar altura y evitar espacio blanco inferior.
    */
    .modal[id^="third-party-paid-"] .modal-dialog,
    .modal[id^="third-party-paid-"] .modal-content {
        width: min(680px, calc(100vw - 72px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 56px) !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    .modal[id^="third-party-paid-"] .modal-header {
        min-height: 58px !important;
        height: auto !important;
        padding: 16px 20px !important;
    }

    .modal[id^="third-party-paid-"] .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 20px !important;
    }

    .modal[id^="third-party-paid-"] .search-info-grid,
    .modal[id^="third-party-paid-"] .info-grid,
    .modal[id^="third-party-paid-"] .modal-body > .responsive-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-paid-"] .info-item {
        min-height: 66px !important;
        height: auto !important;
        padding: 13px 16px !important;
        border-radius: 16px !important;
    }

    /*
      Checkbox: una sola fila limpia.
    */
    .modal[id^="third-party-paid-"] .checkbox-group,
    .modal[id^="third-party-paid-"] .form-check,
    .modal[id^="third-party-paid-"] .third-party-paid-expense-box {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        margin: 0 0 16px !important;
        padding: 0 16px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        box-sizing: border-box !important;
        color: #2F3260 !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    .modal[id^="third-party-paid-"] .checkbox-group label,
    .modal[id^="third-party-paid-"] .form-check label,
    .modal[id^="third-party-paid-"] .third-party-paid-expense-label {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #2F3260 !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    .modal[id^="third-party-paid-"] input[type="checkbox"],
    .modal[id^="third-party-paid-"] .third-party-paid-expense-checkbox {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        flex: 0 0 18px !important;
        align-self: center !important;
    }

    /*
      Boton: no full width en iPad horizontal.
    */
    .modal[id^="third-party-paid-"] .form-actions {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .modal[id^="third-party-paid-"] .form-actions .btn,
    .modal[id^="third-party-paid-"] .form-actions button,
    .modal[id^="third-party-paid-"] button[type="submit"] {
        width: auto !important;
        min-width: 190px !important;
        max-width: none !important;
        min-height: 44px !important;
        padding: 0 20px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      fix real de altura para Marcar como pagado.
      Corta el flex heredado que estiraba el body y dejaba blanco inferior.
    */
    .modal[id^="third-party-paid-"].is-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }

    .modal[id^="third-party-paid-"] .modal-dialog.modal-content,
    .modal[id^="third-party-paid-"] .third-party-paid-modal {
        width: min(640px, calc(100vw - 64px)) !important;
        max-width: min(640px, calc(100vw - 64px)) !important;
        height: fit-content !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 40px) !important;
        display: block !important;
        flex: 0 1 auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    .modal[id^="third-party-paid-"] .modal-header {
        height: auto !important;
        min-height: 56px !important;
        padding: 15px 20px !important;
        display: flex !important;
        align-items: center !important;
    }

    .modal[id^="third-party-paid-"] .modal-body,
    .modal[id^="third-party-paid-"] .modal-scroll-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 116px) !important;
        display: block !important;
        flex: 0 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 18px 20px 20px !important;
    }

    .modal[id^="third-party-paid-"] form {
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-paid-"] .search-info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-paid-"] .info-item {
        min-height: 64px !important;
        height: auto !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
    }

    .modal[id^="third-party-paid-"] .third-party-paid-expense-box {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        margin: 0 0 16px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .modal[id^="third-party-paid-"] .third-party-paid-expense-label {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #2F3260 !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    .modal[id^="third-party-paid-"] .third-party-paid-expense-checkbox {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        flex: 0 0 18px !important;
    }

    .modal[id^="third-party-paid-"] .third-party-paid-expense-text {
        width: auto !important;
        margin: 0 !important;
        text-align: left !important;
        line-height: 1.2 !important;
    }

    .modal[id^="third-party-paid-"] .form-actions {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .modal[id^="third-party-paid-"] .form-actions .btn,
    .modal[id^="third-party-paid-"] .form-actions button {
        width: auto !important;
        min-width: 190px !important;
        max-width: none !important;
        min-height: 44px !important;
        padding: 0 20px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties - modal detalle en iPad horizontal.
      Dos columnas de cards informativas y Observacion full width.
    */
    .modal[id^="third-party-detail-"] .modal-dialog,
    .modal[id^="third-party-detail-"] .modal-content,
    .modal[id^="third-party-detail-"] .third-party-detail-modal {
        width: min(860px, calc(100vw - 56px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 40px) !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    .modal[id^="third-party-detail-"] .modal-body,
    .modal[id^="third-party-detail-"] .modal-scroll-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 110px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 16px 16px 18px !important;
    }

    .modal[id^="third-party-detail-"] .third-party-detail-grid,
    .modal[id^="third-party-detail-"] .detail-info-grid,
    .modal[id^="third-party-detail-"] .info-grid,
    .modal[id^="third-party-detail-"] .search-info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .modal[id^="third-party-detail-"] .info-item,
    .modal[id^="third-party-detail-"] .detail-card {
        min-height: 86px !important;
        height: auto !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .modal[id^="third-party-detail-"] .info-item--full,
    .modal[id^="third-party-detail-"] .detail-card--full,
    .modal[id^="third-party-detail-"] .detail-observation,
    .modal[id^="third-party-detail-"] .info-item:last-child {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /third-parties iPad horizontal:
      modal Marcar como entregado compacto.
    */
    .modal[id^="third-party-delivered-"] {
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }

    .modal[id^="third-party-delivered-"] .modal-dialog,
    .modal[id^="third-party-delivered-"] .modal-dialog.modal-content,
    .modal[id^="third-party-delivered-"] .modal-content,
    .modal[id^="third-party-delivered-"] .third-party-delivered-modal {
        width: min(680px, calc(100vw - 72px)) !important;
        max-width: min(680px, calc(100vw - 72px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 56px) !important;
        display: block !important;
        flex: 0 1 auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    .modal[id^="third-party-delivered-"] .modal-header {
        height: auto !important;
        min-height: 58px !important;
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 0 0 auto !important;
    }

    .modal[id^="third-party-delivered-"] .modal-body,
    .modal[id^="third-party-delivered-"] .modal-scroll-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        padding: 20px !important;
        flex: 0 0 auto !important;
    }

    .modal[id^="third-party-delivered-"] form {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-delivered-"] .form-grid {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-delivered-"] .form-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal[id^="third-party-delivered-"] label {
        margin: 0 0 8px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .modal[id^="third-party-delivered-"] input[type="date"] {
        width: 320px !important;
        max-width: 100% !important;
        min-height: 44px !important;
    }

    .modal[id^="third-party-delivered-"] textarea {
        width: 100% !important;
        min-height: 104px !important;
        height: 104px !important;
        resize: vertical !important;
    }

    .modal[id^="third-party-delivered-"] .form-actions {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .modal[id^="third-party-delivered-"] .form-actions .btn,
    .modal[id^="third-party-delivered-"] .form-actions button,
    .modal[id^="third-party-delivered-"] button[type="submit"] {
        width: auto !important;
        min-width: 180px !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        font-weight: 700 !important;
    }
}

.expenses-mobile-section-switcher {
    display: none;
}

@media (max-width: 767px) {
    .expenses-page {
        gap: 10px !important;
    }

    .expenses-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 4px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .expenses-mobile-switch-btn {
        min-height: 40px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 12px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .expenses-mobile-switch-btn.is-active,
    .expenses-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    body.expenses-mobile-tab-register [data-expenses-mobile-panel="register"] {
        display: block !important;
    }

    body.expenses-mobile-tab-register [data-expenses-mobile-panel="records"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records [data-expenses-mobile-panel="register"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records [data-expenses-mobile-panel="records"] {
        display: block !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      corregir espacio vacio inferior del tab Registrar.
    */
    body:has(.expenses-page) .dashboard-main,
    body:has(.expenses-page) .main-content {
        padding-bottom: 8px !important;
    }

    body:has(.expenses-page) .content-area,
    body:has(.expenses-page) .page-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    .expenses-page.page-shell {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    .expenses-page.page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"],
    .expenses-page [data-expenses-mobile-panel="records"] {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .expenses-page .responsive-grid.two-cols,
    .expenses-page .expense-records-grid,
    .expenses-page .expenses-bottom-grid {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    .expenses-page .expense-entry-card,
    .expenses-page .expense-cash-box-card,
    .expenses-page .expense-latest-expenses-card,
    .expenses-page .expense-cash-box-log-card {
        margin-bottom: 0 !important;
    }

    /*
      Mantener padding interno normal del ultimo card del tab Registrar.
      No pegar el boton al borde del card.
    */
    .expenses-page .expense-cash-box-card {
        padding-bottom: 16px !important;
    }

    .expenses-page .expense-cash-box-card form,
    .expenses-page .expense-cash-box-card .form-grid,
    .expenses-page .expense-cash-box-card .form-actions {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      el ultimo card debe quedar 16px arriba del bottom nav.
    */
    body:has(.expenses-page) .dashboard-main,
    body:has(.expenses-page) .main-content {
        padding-bottom: 0 !important;
    }

    body:has(.expenses-page) .content-area,
    body:has(.expenses-page) .page-content {
        margin-bottom: 0 !important;
        /*
          Bottom nav aprox:
          altura 66px + bottom 10px + separacion visual 16px.
        */
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .expenses-page.page-shell {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        gap: 10px !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] > :last-child {
        margin-bottom: 0 !important;
    }

    .expenses-page .expense-cash-box-card {
        margin-bottom: 0 !important;
        padding-bottom: 16px !important;
    }

    .expenses-page .expense-cash-box-card form,
    .expenses-page .expense-cash-box-card .form-grid,
    .expenses-page .expense-cash-box-card .form-actions {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      override especifico del padding global que deja espacio vacio grande.
      No eliminar la regla global, solo neutralizarla para Gastos.
    */
    .expenses-page.page-section > .responsive-grid.two-cols:not(.search-result-order-payment-grid):not(:has(.register-order-card)),
    .expenses-page.page-shell > .responsive-grid.two-cols:not(.search-result-order-payment-grid):not(:has(.register-order-card)),
    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols,
    .expenses-page [data-expenses-mobile-panel="records"] > .responsive-grid.two-cols {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    /*
      Evitar que otros wrappers de /expenses sumen espacio adicional.
    */
    .expenses-page,
    .expenses-page.page-section,
    .expenses-page.page-shell,
    .expenses-page [data-expenses-mobile-panel="register"],
    .expenses-page [data-expenses-mobile-panel="records"] {
        margin-bottom: 0 !important;
    }

    .expenses-page .expense-entry-card,
    .expenses-page .expense-cash-box-card,
    .expenses-page .expense-latest-expenses-card,
    .expenses-page .expense-cash-box-log-card {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      separar cards del tab Registrar sin afectar el espacio inferior.
    */
    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        row-gap: 12px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] .expense-entry-card {
        margin-bottom: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] .expense-cash-box-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      separacion exacta entre Registrar Gasto y Registrar movimiento de caja.
    */
    .expenses-page [data-expenses-mobile-panel="register"] {
        display: block !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] .expense-entry-card {
        margin-bottom: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] .expense-cash-box-card {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }

    /*
      Si ambas cards estan dentro de un grid, asegurar que no colapse.
    */
    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols {
        display: block !important;
        gap: 0 !important;
        row-gap: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /*
      Fallback exacto por si las clases cambian:
      cualquier card de formulario que venga despues de otra card en Registrar
      debe separarse 14px.
    */
    .expenses-page [data-expenses-mobile-panel="register"] .content-card + .content-card,
    .expenses-page [data-expenses-mobile-panel="register"] .card + .card {
        margin-top: 14px !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - modal Todos los gastos visibles.
    */
    #expenses-modal .modal-dialog,
    #expenses-modal .modal-content {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        height: calc(100dvh - 42px) !important;
        max-height: calc(100dvh - 42px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #expenses-modal .modal-header {
        min-height: 58px !important;
        padding: 14px 52px 14px 16px !important;
        align-items: center !important;
    }

    #expenses-modal .modal-header h3 {
        margin: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #expenses-modal .modal-close-btn {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
    }

    #expenses-modal .modal-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /*
      Filtro superior.
    */
    #expenses-modal .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        align-items: end !important;
        gap: 8px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    #expenses-modal .filter-inline-row .form-group {
        margin: 0 !important;
        width: 100% !important;
    }

    #expenses-modal .filter-inline-row select {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    #expenses-modal .filter-inline-row .filter-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        align-self: end !important;
    }

    /*
      Lista del modal.
    */
    #expenses-modal .expense-modal-list-shell,
    #expenses-modal .expense-modal-expense-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
      Card mobile ordenada.
    */
    #expenses-modal .expense-modal-expense-item {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(47, 50, 96, 0.06) !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-item-main {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 5px !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-title {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        color: #2F3260 !important;
        font-size: 0.94rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 5px 7px !important;
        color: #7B7188 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-laundry-pill {
        min-height: 22px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        background: rgba(74, 88, 153, 0.1) !important;
        color: var(--primary) !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
    }

    /*
      Fila inferior: monto izquierda / acciones derecha.
    */
    #expenses-modal .expense-modal-expense-item .expense-latest-item-side {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-amount {
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-actions form {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-actions .icon-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .edit-btn {
        background: rgba(74, 88, 153, 0.08) !important;
        color: var(--primary) !important;
    }

    #expenses-modal .expense-modal-expense-item .delete-btn {
        background: rgba(254, 242, 242, 0.96) !important;
        color: #DC2626 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - reset fino solo para modal Todos los gastos visibles.
    */
    #expenses-modal .modal-dialog,
    #expenses-modal .modal-content {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        height: calc(100dvh - 44px) !important;
        max-height: calc(100dvh - 44px) !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    #expenses-modal .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        display: block !important;
    }

    #expenses-modal .expense-modal-expense-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
    }

    /*
      Card del modal: layout propio.
    */
    #expenses-modal .expense-modal-expense-item {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(47, 50, 96, 0.06) !important;
        overflow: hidden !important;
    }

    /*
      Fila superior: icono + texto.
    */
    #expenses-modal .expense-modal-expense-item .expense-latest-item-main {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-title {
        color: #2F3260 !important;
        font-size: 0.94rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: initial !important;
        overflow-wrap: anywhere !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px 7px !important;
        color: #7B7188 !important;
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
    }

    /*
      Fila inferior: monto izquierda / acciones derecha.
      Esto evita que el lapiz flote fuera de la card.
    */
    #expenses-modal .expense-modal-expense-item .expense-latest-item-side {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-amount {
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-actions {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-actions form {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item .expense-latest-actions .icon-btn,
    #expenses-modal .expense-modal-expense-item .expense-latest-actions button {
        position: static !important;
        transform: none !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    #expenses-modal .expense-modal-expense-item .edit-btn {
        background: rgba(74, 88, 153, 0.08) !important;
        color: var(--primary) !important;
    }

    #expenses-modal .expense-modal-expense-item .delete-btn {
        background: rgba(254, 242, 242, 0.96) !important;
        color: #DC2626 !important;
    }

    /*
      Evitar bloque blanco raro al final del modal.
    */
    #expenses-modal .expense-modal-expense-item:last-child {
        margin-bottom: 0 !important;
    }

    #expenses-modal .modal-body > *:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - centrado final y sin espacio blanco
      para modal Todos los gastos visibles.
    */
    #expenses-modal:not(.is-open) {
        display: none !important;
    }

    #expenses-modal.is-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    #expenses-modal .modal-dialog {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #expenses-modal .modal-content {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #expenses-modal .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 96px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 12px 16px !important;
    }

    #expenses-modal .expense-modal-list-shell {
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-expense-list {
        margin: 12px 0 0 !important;
        padding: 0 !important;
        display: grid !important;
        gap: 10px !important;
    }

    #expenses-modal .modal-body::after,
    #expenses-modal .expense-modal-list-shell::after,
    #expenses-modal .expense-modal-expense-list::after {
        content: none !important;
        display: none !important;
    }

    #expenses-modal .expense-modal-expense-item:last-child {
        margin-bottom: 0 !important;
    }

    #expenses-modal .modal-body > *:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - modal Todos los gastos visibles:
      mas ancho y espaciado superior equilibrado.
    */
    #expenses-modal:not(.is-open) {
        display: none !important;
    }

    #expenses-modal.is-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    #expenses-modal .modal-dialog,
    #expenses-modal .modal-content {
        width: calc(100vw - 18px) !important;
        max-width: 372px !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #expenses-modal .modal-content {
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    #expenses-modal .modal-header {
        min-height: 54px !important;
        padding: 12px 52px 10px 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #expenses-modal .modal-header h3 {
        margin: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #expenses-modal .modal-close-btn {
        top: 8px !important;
        right: 10px !important;
    }

    #expenses-modal .modal-body {
        padding: 12px 14px 16px !important;
        max-height: calc(100dvh - 82px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /*
      Reducir espacio entre titulo y filtro.
    */
    #expenses-modal .filter-inline-row,
    #expenses-modal .expenses-modal-filter,
    #expenses-modal .expense-modal-filter {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    #expenses-modal .filter-inline-row .form-group,
    #expenses-modal .expenses-modal-filter .form-group,
    #expenses-modal .expense-modal-filter .form-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #expenses-modal label {
        margin-top: 0 !important;
    }

    #expenses-modal .expense-modal-expense-list {
        margin-top: 10px !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - header y espaciado superior del modal.
    */
    #expenses-modal .modal-header {
        position: relative !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 0 54px 0 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #expenses-modal .modal-header h3 {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: var(--primary) !important;
        font-size: 1.02rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #expenses-modal .modal-close-btn {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
    }

    #expenses-modal .modal-body {
        padding-top: 10px !important;
    }

    #expenses-modal .filter-inline-row,
    #expenses-modal .expenses-modal-filter,
    #expenses-modal .expense-modal-filter {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    #expenses-modal .filter-inline-row .form-group,
    #expenses-modal .expenses-modal-filter .form-group,
    #expenses-modal .expense-modal-filter .form-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #expenses-modal .filter-inline-row label,
    #expenses-modal .expenses-modal-filter label,
    #expenses-modal .expense-modal-filter label {
        margin: 0 0 8px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - card Ultimos gastos agregados.
      Scopeado a la lista principal, sin tocar #expenses-modal.
    */
    .expenses-page .expense-latest-expenses-card {
        padding: 14px 12px !important;
        border-radius: 18px !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .section-title {
        margin: 0 !important;
        font-size: 1.02rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    .expenses-page .expense-latest-expenses-card .section-subtitle {
        margin: 3px 0 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        color: var(--muted) !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-controls {
        width: 100% !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .secondary-top-action-btn {
        width: 100% !important;
        min-height: 38px !important;
        border-radius: 13px !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        justify-content: center !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        align-items: end !important;
        gap: 8px !important;
        margin: 4px 0 0 !important;
        width: 100% !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group {
        margin: 0 !important;
        width: 100% !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row label {
        margin: 0 0 8px !important;
        font-size: 0.84rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row select {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        font-size: 0.88rem !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-btn {
        width: 38px !important;
        height: 42px !important;
        min-width: 38px !important;
        min-height: 42px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        align-self: end !important;
    }

    .expenses-page .expense-latest-list-shell {
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: #fff !important;
        box-shadow: 0 8px 18px rgba(47, 50, 96, 0.06) !important;
        overflow: hidden !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-item-main {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        font-size: 1rem !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 5px !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-title {
        font-size: 0.92rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px 7px !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        color: #7B7188 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-laundry-pill {
        min-height: 21px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        background: rgba(74, 88, 153, 0.1) !important;
        color: var(--primary) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-item-side {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-amount {
        color: var(--primary) !important;
        font-size: 1.08rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-actions form {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-actions .icon-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .edit-btn {
        background: rgba(74, 88, 153, 0.08) !important;
        color: var(--primary) !important;
    }

    .expenses-page .expense-latest-expenses-card .delete-btn {
        background: rgba(254, 242, 242, 0.96) !important;
        color: #DC2626 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - modal Todos los gastos visibles.
      Copia visual del listado principal.
    */
    #expenses-modal .modal-dialog,
    #expenses-modal .modal-content {
        width: calc(100vw - 16px) !important;
        max-width: 374px !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #expenses-modal .modal-header {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 52px 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #expenses-modal .modal-header h3 {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 1.02rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #expenses-modal .modal-close-btn {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        transform: translateY(-50%) !important;
    }

    #expenses-modal .modal-body {
        padding: 12px 12px 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #expenses-modal .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        align-items: end !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
    }

    #expenses-modal .filter-inline-row .form-group {
        margin: 0 !important;
    }

    #expenses-modal .filter-inline-row label {
        margin: 0 0 8px !important;
        font-size: 0.84rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
    }

    #expenses-modal .filter-inline-row select {
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    #expenses-modal .filter-btn {
        width: 38px !important;
        height: 42px !important;
        min-width: 38px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }

    #expenses-modal .expense-modal-expense-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-expense-item {
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(47, 50, 96, 0.06) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #expenses-modal .expense-latest-item-main {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #expenses-modal .expense-latest-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    #expenses-modal .expense-latest-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 5px !important;
    }

    #expenses-modal .expense-latest-title {
        font-size: 0.92rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #expenses-modal .expense-latest-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 5px 7px !important;
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
        color: #7B7188 !important;
    }

    #expenses-modal .expense-latest-laundry-pill {
        min-height: 21px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        background: rgba(74, 88, 153, 0.1) !important;
        color: var(--primary) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
    }

    #expenses-modal .expense-latest-item-side {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-latest-amount {
        color: var(--primary) !important;
        font-size: 1.08rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #expenses-modal .expense-latest-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-latest-actions form {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
    }

    #expenses-modal .expense-latest-actions .icon-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    #expenses-modal .edit-btn {
        background: rgba(74, 88, 153, 0.08) !important;
        color: var(--primary) !important;
    }

    #expenses-modal .delete-btn {
        background: rgba(254, 242, 242, 0.96) !important;
        color: #DC2626 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - corregir cards visibles de Ultimos gastos agregados.
    */
    .expenses-page .expense-latest-expenses-card .expense-latest-item {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.78) !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(47, 50, 96, 0.06) !important;
        overflow: hidden !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-item-main {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 5px !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-title {
        color: #2F3260 !important;
        font-size: 0.92rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 5px 7px !important;
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
        color: #7B7188 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-item-side {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-amount {
        color: var(--primary) !important;
        font-size: 1.08rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-actions {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-actions form {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-actions .icon-btn,
    .expenses-page .expense-latest-expenses-card .expense-latest-actions button {
        position: static !important;
        transform: none !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .expenses-page .expense-latest-expenses-card .edit-btn {
        background: rgba(74, 88, 153, 0.08) !important;
        color: var(--primary) !important;
    }

    .expenses-page .expense-latest-expenses-card .delete-btn {
        background: rgba(254, 242, 242, 0.96) !important;
        color: #DC2626 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      separacion entre Ultimos gastos agregados y Movimientos de caja de hoy.
    */
    .expenses-page [data-expenses-mobile-panel="records"] {
        display: block !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] .expense-latest-expenses-card {
        margin-bottom: 14px !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] .expense-cash-box-log-card {
        margin-top: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] .expense-latest-expenses-card + .expense-cash-box-log-card {
        margin-top: 14px !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - reducir espacio entre Ver todo y filtro
      en la card visible de Ultimos gastos agregados.
    */
    .expenses-page .expense-latest-expenses-card .table-card-header {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-controls {
        margin-bottom: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .secondary-top-action-btn {
        margin-bottom: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row label {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    /*
      /expenses mobile - reducir el mismo espacio dentro del modal
      Todos los gastos visibles.
    */
    #expenses-modal .modal-body {
        padding-top: 10px !important;
    }

    #expenses-modal .filter-inline-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 12px !important;
    }

    #expenses-modal .filter-inline-row .form-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #expenses-modal .filter-inline-row label {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile:
      corregir padding global heredado por label.
      NO tocar label global.
    */
    .expenses-page .expense-latest-expenses-card .filter-inline-row label,
    .expenses-page .expense-latest-expenses-card label[for="laundry_filter"],
    #expenses-modal .filter-inline-row label,
    #expenses-modal label[for="laundry_filter"],
    #expenses-modal label[for="modal_laundry_filter"] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row,
    #expenses-modal .filter-inline-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group,
    #expenses-modal .filter-inline-row .form-group {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /expenses mobile - fix exacto del label Filtrar por lavanderia.
      Corrige el for real del modal sin tocar el label global.
    */
    .expenses-page .expense-latest-expenses-card form:has(.filter-inline-row),
    #expenses-modal form:has(.filter-inline-row) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group > label[for="laundry_filter"],
    #expenses-modal .filter-inline-row .form-group > label[for="laundry_filter_modal"] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group,
    #expenses-modal .filter-inline-row .form-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses iPad vertical:
      mantener switch Registrar / Registros igual que mobile.
    */
    .expenses-page .expenses-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 5px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .expenses-page .expenses-mobile-switch-btn {
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .expenses-page .expenses-mobile-switch-btn.is-active,
    .expenses-page .expenses-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    body.expenses-mobile-tab-register .expenses-page [data-expenses-mobile-panel="register"] {
        display: block !important;
    }

    body.expenses-mobile-tab-register .expenses-page [data-expenses-mobile-panel="records"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records .expenses-page [data-expenses-mobile-panel="register"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records .expenses-page [data-expenses-mobile-panel="records"] {
        display: block !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"].responsive-grid.two-cols,
    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"].expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"].expense-records-grid,
    .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses responsive:
      fallback funcional para switch Registrar / Registros.
    */
    .expenses-page .expenses-mobile-section-switcher {
        display: grid !important;
    }

    .expenses-page [data-expenses-mobile-panel][hidden] {
        display: none !important;
    }

    body.expenses-mobile-tab-register .expenses-page [data-expenses-mobile-panel="register"] {
        display: block !important;
    }

    body.expenses-mobile-tab-register .expenses-page [data-expenses-mobile-panel="records"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records .expenses-page [data-expenses-mobile-panel="register"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records .expenses-page [data-expenses-mobile-panel="records"] {
        display: block !important;
    }
}

@media (min-width: 900px) {
    /*
      /expenses desktop e iPad horizontal:
      proteger contra estados hidden del switch responsive.
    */
    .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    .expenses-page [data-expenses-mobile-panel],
    .expenses-page [data-expenses-mobile-panel][hidden] {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses - modal Todos los gastos visibles
      iPad vertical compacto.
    */
    #expenses-modal:not(.is-open) {
        display: none !important;
    }

    #expenses-modal.is-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    #expenses-modal .modal-dialog,
    #expenses-modal .modal-content {
        width: min(760px, calc(100vw - 32px)) !important;
        max-width: min(760px, calc(100vw - 32px)) !important;
        height: auto !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    #expenses-modal .modal-header {
        position: relative !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 0 64px 0 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #expenses-modal .modal-header h3 {
        margin: 0 !important;
        font-size: 1.12rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #expenses-modal .modal-close-btn {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    #expenses-modal .modal-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 128px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 18px 22px 22px !important;
    }

    #expenses-modal .modal-body > form:has(.filter-inline-row) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .filter-inline-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .filter-inline-row .form-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .filter-inline-row label {
        display: block !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
    }

    #expenses-modal .filter-inline-row select {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    #expenses-modal .filter-btn,
    #expenses-modal .filter-inline-row button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        align-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #expenses-modal .expense-modal-list-shell,
    #expenses-modal .expense-modal-expense-list {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #expenses-modal .expense-modal-list-shell::before,
    #expenses-modal .expense-modal-list-shell::after,
    #expenses-modal .expense-modal-expense-list::before,
    #expenses-modal .expense-modal-expense-list::after {
        content: none !important;
        display: none !important;
    }

    #expenses-modal .expense-modal-expense-item {
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses - corregir header del modal Todos los gastos visibles
      Solo iPad vertical.
    */
    #expenses-modal .modal-header {
        position: relative !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 0 64px 0 24px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        box-sizing: border-box !important;
    }

    #expenses-modal .modal-header h3 {
        width: auto !important;
        max-width: calc(100% - 64px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        text-align: left !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        transform: none !important;
    }

    #expenses-modal .modal-close-btn {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses iPad vertical - header real del modal Todos los gastos visibles.
    */
    #expenses-modal .expenses-modal-header {
        position: relative !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 64px 0 24px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        box-sizing: border-box !important;
    }

    #expenses-modal .expenses-modal-title {
        width: auto !important;
        max-width: calc(100% - 64px) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        display: block !important;
        text-align: left !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    #expenses-modal .expenses-modal-header .modal-close-btn,
    #expenses-modal .expenses-modal-header [data-modal-close],
    #expenses-modal .expenses-modal-header button[aria-label="Cerrar"] {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses - centrar verticalmente titulo del modal
      Todos los gastos visibles.
    */
    #expenses-modal .expenses-modal-header {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 64px 0 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    #expenses-modal .expenses-modal-title {
        height: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        line-height: 1 !important;
        text-align: left !important;
        position: static !important;
        transform: none !important;
    }

    #expenses-modal .expenses-modal-header .modal-close-btn {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses iPad vertical - centrado real del titulo del modal.
      Usar posicion absoluta evita herencias de flex/line-height del header.
    */
    html body #expenses-modal .modal-dialog.modal-content .expenses-modal-header {
        position: relative !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 64px 0 24px !important;
        margin: 0 !important;
        display: block !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body #expenses-modal .modal-dialog.modal-content .expenses-modal-header > h3.expenses-modal-title {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        left: 64px !important;
        right: 64px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        transform: translateY(-50%) !important;
        text-align: center !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body #expenses-modal .modal-dialog.modal-content .expenses-modal-header > .modal-close-btn,
    html body #expenses-modal .modal-dialog.modal-content .expenses-modal-header > [data-modal-close],
    html body #expenses-modal .modal-dialog.modal-content .expenses-modal-header > button[aria-label="Cerrar"] {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses iPad vertical -
      corregir card visible Ultimos gastos agregados.
    */
    .expenses-page .expense-latest-expenses-card {
        padding: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-controls {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .secondary-top-action-btn {
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row label {
        display: block !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        color: #2F3260 !important;
        font-size: 0.86rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row select {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-btn,
    .expenses-page .expense-latest-expenses-card .filter-inline-row button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-list-shell,
    .expenses-page .expense-latest-expenses-card .expense-latest-list {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-list-shell::before,
    .expenses-page .expense-latest-expenses-card .expense-latest-list-shell::after,
    .expenses-page .expense-latest-expenses-card .expense-latest-list::before,
    .expenses-page .expense-latest-expenses-card .expense-latest-list::after {
        content: none !important;
        display: none !important;
    }

    .expenses-page .expense-latest-expenses-card .expense-latest-item {
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /expenses iPad vertical:
      separacion entre Ultimos gastos agregados y Movimientos de caja de hoy.
    */
    .expenses-page [data-expenses-mobile-panel="records"] {
        display: block !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"].expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"].expense-records-grid {
        gap: 16px !important;
        row-gap: 16px !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] .expense-latest-expenses-card {
        margin-bottom: 16px !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] .expense-cash-box-log-card {
        margin-top: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] .expense-latest-expenses-card + .expense-cash-box-log-card {
        margin-top: 16px !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        gap: 16px !important;
        row-gap: 16px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal:
      vista completa en 2 columnas, sin switch.
    */
    .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    .expenses-page [data-expenses-mobile-panel],
    .expenses-page [data-expenses-mobile-panel][hidden] {
        display: block !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
        margin-bottom: 18px !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols,
    .expenses-page [data-expenses-mobile-panel="register"] > .expenses-register-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols {
        grid-column: 1 / -1 !important;
    }

    .expenses-page .expense-entry-card,
    .expenses-page .expense-cash-box-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .expenses-page .expense-entry-card .form-grid,
    .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .expenses-page .expense-entry-card .form-actions,
    .expenses-page .expense-cash-box-card .form-actions {
        margin-top: auto !important;
    }

    .expenses-page .expense-entry-card .btn,
    .expenses-page .expense-cash-box-card .btn {
        width: 100% !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: contents !important;
    }

    .expenses-page .expense-latest-expenses-card,
    .expenses-page .expense-cash-box-log-card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    .expenses-page .expense-cash-box-log-card {
        min-height: 220px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal:
      mantener vista completa, pero sin estirar cards.
    */
    .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    .expenses-page [data-expenses-mobile-panel],
    .expenses-page [data-expenses-mobile-panel][hidden] {
        display: block !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols,
    .expenses-page [data-expenses-mobile-panel="register"] > .expenses-register-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .expenses-page .expense-entry-card,
    .expenses-page .expense-cash-box-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        margin: 0 !important;
        padding: 18px !important;
    }

    .expenses-page .expense-entry-card form,
    .expenses-page .expense-cash-box-card form,
    .expenses-page .expense-entry-card .form-grid,
    .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .expenses-page .expense-entry-card .form-group,
    .expenses-page .expense-cash-box-card .form-group {
        margin: 0 !important;
    }

    .expenses-page .expense-entry-card .form-actions,
    .expenses-page .expense-cash-box-card .form-actions {
        margin-top: 4px !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-entry-card .btn,
    .expenses-page .expense-cash-box-card .btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr) !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: contents !important;
    }

    .expenses-page .expense-latest-expenses-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        margin: 0 !important;
    }

    .expenses-page .expense-cash-box-log-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: none !important;
        align-self: start !important;
        margin: 0 !important;
    }

    .expenses-page .expense-latest-list-shell {
        max-height: 460px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    .expenses-page .expense-latest-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal:
      compactar formularios superiores para eliminar huecos verticales.
    */
    .expenses-page.page-shell {
        gap: 16px !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
        margin-bottom: 16px !important;
    }

    .expenses-page .expense-entry-card,
    .expenses-page .expense-cash-box-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        padding: 18px !important;
    }

    .expenses-page .expense-entry-card .section-header,
    .expenses-page .expense-cash-box-card .section-header {
        margin: 0 !important;
    }

    .expenses-page .expense-entry-card form,
    .expenses-page .expense-cash-box-card form {
        display: grid !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .expenses-page .expense-entry-card .form-grid,
    .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 14px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .expenses-page .expense-entry-card .form-grid .form-group:first-child {
        grid-column: 1 / -1 !important;
    }

    .expenses-page .expense-cash-box-card .form-grid .form-group.full-width {
        grid-column: auto !important;
    }

    .expenses-page .expense-entry-card label,
    .expenses-page .expense-cash-box-card label {
        padding-top: 0 !important;
        margin: 0 0 7px !important;
        line-height: 1.15 !important;
    }

    .expenses-page .expense-entry-card input,
    .expenses-page .expense-entry-card select,
    .expenses-page .expense-cash-box-card input,
    .expenses-page .expense-cash-box-card select {
        min-height: 42px !important;
    }

    .expenses-page .expense-entry-card .form-actions,
    .expenses-page .expense-cash-box-card .form-actions {
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] {
        margin-top: 0 !important;
        align-items: start !important;
    }

    .expenses-page .expense-cash-box-log-card {
        height: auto !important;
        min-height: 150px !important;
        align-self: start !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal:
      usar switch Registrar / Registros.
    */
    .expenses-page .expenses-mobile-section-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 5px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
    }

    .expenses-page .expenses-mobile-switch-btn {
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .expenses-page .expenses-mobile-switch-btn.is-active,
    .expenses-page .expenses-mobile-switch-btn[aria-pressed="true"] {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(74, 88, 153, 0.16) !important;
    }

    .expenses-page [data-expenses-mobile-panel][hidden] {
        display: none !important;
    }

    body.expenses-mobile-tab-register .expenses-page [data-expenses-mobile-panel="register"] {
        display: grid !important;
    }

    body.expenses-mobile-tab-register .expenses-page [data-expenses-mobile-panel="records"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records .expenses-page [data-expenses-mobile-panel="register"] {
        display: none !important;
    }

    body.expenses-mobile-tab-records .expenses-page [data-expenses-mobile-panel="records"] {
        display: grid !important;
    }

    .expenses-page [data-expenses-mobile-panel="register"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .expenses-page .expense-entry-card,
    .expenses-page .expense-cash-box-card,
    .expenses-page .expense-latest-expenses-card,
    .expenses-page .expense-cash-box-log-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: start !important;
    }

    .expenses-page .expense-entry-card .form-actions,
    .expenses-page .expense-cash-box-card .form-actions {
        margin-top: 14px !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-latest-list-shell {
        max-height: 430px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    .expenses-page .expense-cash-box-log-card {
        min-height: 120px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal - modal Editar gasto compacto.
    */
    #edit-expense-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }

    #edit-expense-modal .modal-dialog,
    #edit-expense-modal .modal-content {
        width: min(820px, calc(100vw - 56px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 48px) !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    #edit-expense-modal .modal-header {
        position: relative !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 64px 0 22px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        box-sizing: border-box !important;
    }

    #edit-expense-modal .modal-header h3,
    #edit-expense-modal .modal-title {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #edit-expense-modal .modal-close-btn,
    #edit-expense-modal [data-modal-close] {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    #edit-expense-modal .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 116px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 22px !important;
    }

    #edit-expense-modal form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #edit-expense-modal .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 20px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #edit-expense-modal .form-group {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    #edit-expense-modal label {
        display: block !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #2F3260 !important;
    }

    #edit-expense-modal input,
    #edit-expense-modal select {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    #edit-expense-modal .form-actions,
    #edit-expense-modal .modal-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
    }

    #edit-expense-modal .form-actions .btn,
    #edit-expense-modal .modal-actions .btn,
    #edit-expense-modal button[type="submit"],
    #edit-expense-modal button[type="button"] {
        width: auto !important;
        min-width: 160px !important;
        max-width: none !important;
        min-height: 44px !important;
        padding: 0 20px !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    #edit-expense-modal .btn-ghost,
    #edit-expense-modal .btn-secondary,
    #edit-expense-modal .cancel-btn {
        min-width: 130px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal - Modal Editar gasto:
      separar la X del boton Cancelar.
    */
    #edit-expense-modal .modal-header {
        position: relative !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 64px 0 22px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #edit-expense-modal .modal-header h3,
    #edit-expense-modal .modal-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #edit-expense-modal .modal-header .modal-close-btn {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 14px !important;
        flex: 0 0 42px !important;
    }

    #edit-expense-modal .modal-header .modal-close-btn i,
    #edit-expense-modal .modal-header .modal-close-btn svg {
        margin: 0 !important;
    }

    #edit-expense-modal form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #edit-expense-modal .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 20px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #edit-expense-modal .form-group {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    #edit-expense-modal .form-group input,
    #edit-expense-modal .form-group select {
        width: 100% !important;
        min-height: 44px !important;
    }

    #edit-expense-modal .form-actions,
    #edit-expense-modal .modal-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 12px !important;

        margin: 16px 0 0 0 !important;
        padding: 4px 0 0 0 !important;
    }

    #edit-expense-modal .form-actions .btn,
    #edit-expense-modal .modal-actions .btn {
        width: auto !important;
        min-width: 140px !important;
        max-width: none !important;
        min-height: 44px !important;
        padding: 0 20px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        font-weight: 700 !important;
    }

    #edit-expense-modal .form-actions .btn-ghost,
    #edit-expense-modal .form-actions .btn-secondary,
    #edit-expense-modal .form-actions .cancel-btn,
    #edit-expense-modal .modal-actions .btn-ghost,
    #edit-expense-modal .modal-actions .btn-secondary,
    #edit-expense-modal .modal-actions .cancel-btn {
        width: auto !important;
        min-width: 130px !important;
        max-width: none !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;

        margin: 0 !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop - ordenar vista general y modales.
      No tocar tablet-app-mode ni breakpoints menores.
    */
    body:not(.tablet-app-mode) .expenses-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        align-items: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel][hidden] {
        display: grid !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 22px !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .section-header,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .section-header {
        margin: 0 0 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
        align-items: end !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid .form-group:first-child,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid .form-group.full-width {
        grid-column: 1 / -1 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions {
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 18px !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions .btn {
        width: auto !important;
        min-width: 190px !important;
        min-height: 46px !important;
        padding: 0 22px !important;
        font-weight: 700 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-submit {
        min-width: 250px !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"].expense-records-grid,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"].expenses-bottom-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        min-height: 180px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header {
        margin-bottom: 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 10px !important;
        align-items: end !important;
        margin: 0 0 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group {
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-item {
        min-height: 78px !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-item-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-amount {
        min-width: 110px !important;
        text-align: right !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 28px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .modal-dialog,
    body:not(.tablet-app-mode) #expenses-modal .modal-content {
        width: min(1040px, calc(100vw - 96px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 72px) !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .expenses-modal-header {
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        padding: 0 68px 0 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .expenses-modal-title {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .modal-body {
        padding: 22px 24px 24px !important;
        max-height: calc(100dvh - 134px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 12px !important;
        align-items: end !important;
        margin: 0 0 16px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .expense-modal-list-shell {
        max-height: calc(100dvh - 260px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 28px !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .modal-dialog,
    body:not(.tablet-app-mode) #edit-expense-modal .modal-content {
        width: min(920px, calc(100vw - 120px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 72px) !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .modal-header {
        position: relative !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        padding: 0 68px 0 24px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .modal-header h3 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .modal-header .modal-close-btn {
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .modal-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 134px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 24px !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal form {
        display: grid !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px 20px !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .form-group {
        margin: 0 !important;
        min-width: 0 !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal input,
    body:not(.tablet-app-mode) #edit-expense-modal select {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .form-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) #edit-expense-modal .form-actions .btn {
        width: auto !important;
        min-width: 150px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop:
      usar una sola grilla madre para ordenar las 4 cards.
    */
    body:not(.tablet-app-mode) .expenses-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "expenseRegister expenseCash"
            "expenseLatest expenseCashLog" !important;
        gap: 18px !important;
        align-items: start !important;
        align-content: start !important;
        width: 100% !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"][hidden],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"][hidden] {
        display: contents !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card {
        grid-area: expenseRegister !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card {
        grid-area: expenseCash !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card {
        grid-area: expenseLatest !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        grid-area: expenseCashLog !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
        align-items: end !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid .form-group:first-child,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid .form-group.full-width {
        grid-column: 1 / -1 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin-top: 18px !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions .btn {
        width: auto !important;
        min-width: 190px !important;
        min-height: 46px !important;
        padding: 0 22px !important;
        font-weight: 700 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-submit {
        min-width: 250px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header {
        margin-bottom: 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 10px !important;
        align-items: end !important;
        margin: 0 0 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-item {
        min-height: 78px !important;
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-item-side {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-amount {
        min-width: 110px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        min-height: 180px !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop - layout seguro.
      No usar display: contents en paneles ni grid-template-areas.
    */
    body:not(.tablet-app-mode) .expenses-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 18px !important;
        align-items: start !important;
        align-content: start !important;
        width: 100% !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"][hidden] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"][hidden] {
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] > .expenses-register-grid,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: contents !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        grid-area: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        padding: 22px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
        align-items: end !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid .form-group:first-child,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid .form-group.full-width {
        grid-column: 1 / -1 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin-top: 18px !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions .btn {
        width: auto !important;
        min-width: 190px !important;
        min-height: 46px !important;
        font-weight: 700 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-submit {
        min-width: 250px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 10px !important;
        align-items: end !important;
        margin: 0 0 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-item {
        min-height: 78px !important;
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-item-side {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-amount {
        min-width: 110px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        min-height: 180px !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop - balancear cards superiores y mantener 2 columnas.
      La pagina conserva dos paneles: register y records.
    */
    body:not(.tablet-app-mode) .expenses-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"][hidden] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] > .expenses-register-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 300px !important;
        margin: 0 !important;
        padding: 22px !important;

        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card form,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card form {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 18px !important;
        align-items: end !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-card .form-grid .form-group:first-child,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-grid .form-group.full-width {
        grid-column: 1 / -1 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .expense-entry-actions,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-actions {
        margin-top: auto !important;
        padding-top: 18px !important;

        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-entry-actions .btn,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-card .form-actions .btn {
        width: auto !important;
        min-width: 190px !important;
        min-height: 46px !important;
        padding: 0 22px !important;
        font-weight: 700 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-submit {
        min-width: 250px !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"][hidden] {
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        grid-area: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        min-height: 180px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 10px !important;
        align-items: end !important;
        margin: 0 0 16px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop - fila inferior simetrica con la fila superior.
    */
    body:not(.tablet-app-mode) .expenses-page {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expenses-mobile-section-switcher {
        display: none !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"][hidden],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"],
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"][hidden] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] {
        align-items: stretch !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] {
        align-items: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] > .responsive-grid.two-cols,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="register"] > .expenses-register-grid,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] > .expenses-bottom-grid,
    body:not(.tablet-app-mode) .expenses-page [data-expenses-mobile-panel="records"] > .expense-records-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
        align-items: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page .expense-cash-box-log-card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: end !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop - alineacion exacta de columnas.
      Usar los selectores reales para ganar a reglas previas mas especificas.
    */
    body:not(.tablet-app-mode) .expenses-page {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .expenses-mobile-section-switcher {
        display: none !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .responsive-grid.two-cols[data-expenses-mobile-panel="register"],
    body:not(.tablet-app-mode) .expenses-page > .responsive-grid.two-cols[data-expenses-mobile-panel="register"][hidden] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
        row-gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"],
    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"][hidden] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
        row-gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .responsive-grid.two-cols[data-expenses-mobile-panel="register"] > .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page > .responsive-grid.two-cols[data-expenses-mobile-panel="register"] > .expense-cash-box-card,
    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"] > .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"] > .expense-cash-box-log-card {
        grid-area: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .responsive-grid.two-cols[data-expenses-mobile-panel="register"] > .expense-entry-card,
    body:not(.tablet-app-mode) .expenses-page > .responsive-grid.two-cols[data-expenses-mobile-panel="register"] > .expense-cash-box-card {
        height: 100% !important;
        min-height: 300px !important;
        align-self: stretch !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"] > .expense-latest-expenses-card,
    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"] > .expense-cash-box-log-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    body:not(.tablet-app-mode) .expenses-page > .expense-records-grid.expenses-bottom-grid[data-expenses-mobile-panel="records"] > .expense-cash-box-log-card {
        min-height: 180px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-list-shell {
        max-height: 520px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop - reducir espacio antes de filtros.
    */
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card {
        padding-top: 18px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .section-header {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header h3,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .section-header h3 {
        margin-bottom: 4px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header p,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .section-header p,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .section-subtitle {
        margin-bottom: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group {
        margin-top: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row label {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .modal-body {
        padding-top: 14px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row .form-group {
        margin-top: 0 !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row label {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header::after,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .section-header::after,
    body:not(.tablet-app-mode) #expenses-modal .modal-body::before {
        content: none !important;
        display: none !important;
    }
}

@media (min-width: 1200px) {
    /*
      /expenses desktop:
      eliminar padding global de label solo en filtros de gastos.
    */
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row label,
    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row label {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group,
    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row .form-group {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .filter-inline-row,
    body:not(.tablet-app-mode) #expenses-modal .filter-inline-row {
        margin-top: 0 !important;
    }

    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .table-card-header,
    body:not(.tablet-app-mode) .expenses-page .expense-latest-expenses-card .section-header {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    body:not(.tablet-app-mode) #expenses-modal .modal-body {
        padding-top: 12px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /expenses iPad horizontal - reducir espacio antes de filtros.
    */
    .expenses-page .expense-latest-expenses-card {
        padding-top: 18px !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-header,
    .expenses-page .expense-latest-expenses-card .section-header {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-header h3,
    .expenses-page .expense-latest-expenses-card .section-header h3 {
        margin-bottom: 4px !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-header p,
    .expenses-page .expense-latest-expenses-card .section-header p,
    .expenses-page .expense-latest-expenses-card .section-subtitle {
        margin-bottom: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row .form-group {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .expenses-page .expense-latest-expenses-card .filter-inline-row label {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    #expenses-modal .modal-body {
        padding-top: 12px !important;
    }

    #expenses-modal .filter-inline-row {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        padding-top: 0 !important;
    }

    #expenses-modal .filter-inline-row .form-group {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #expenses-modal .filter-inline-row label {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    .expenses-page .expense-latest-expenses-card .table-card-header::after,
    .expenses-page .expense-latest-expenses-card .section-header::after,
    #expenses-modal .modal-body::before {
        content: none !important;
        display: none !important;
    }
}

/*
  /summary fase 1:
  ordenar base responsive sin tocar calculos, modales ni logica.
*/
.summary-page,
.summary-page-redesigned {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.summary-page > *,
.summary-page .summary-header-card,
.summary-page .summary-kpi-grid,
.summary-page .summary-ledger-grid,
.summary-page .summary-finance-grid,
.summary-page .payments-summary-section,
.summary-page .summary-expenses-card,
.summary-page .summary-balance-strip-card,
.summary-page .summary-operational-card,
.summary-page .summary-operational-kpis,
.summary-page .summary-operational-weekly,
.summary-page .summary-operational-weekly-grid {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.summary-page-redesigned .summary-legacy-balance-card,
.summary-page-redesigned .summary-legacy-cash-card,
.summary-page-redesigned .summary-legacy-operational-balance {
    display: none !important;
}

@media (max-width: 767px) {
    /*
      /summary mobile:
      una columna estable y espacio seguro para bottom nav.
    */
    .summary-page.summary-page-redesigned {
        gap: 14px !important;
        padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page .summary-header-card,
    .summary-page .summary-kpi-card,
    .summary-page .payments-summary-section,
    .summary-page .summary-expenses-card,
    .summary-page .summary-balance-strip-card,
    .summary-page .summary-operational-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .summary-page .summary-kpi-grid,
    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns,
    .summary-page .summary-finance-grid,
    .summary-page .summary-operational-kpis,
    .summary-page .summary-operational-weekly-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .summary-page .summary-two-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .summary-page .summary-block-header,
    .summary-page .summary-header-head {
        min-width: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical:
      reglas oficiales para evitar cruces con bloques tablet antiguos.
    */
    .summary-page.summary-page-redesigned {
        gap: 16px !important;
        padding-bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page .summary-kpi-grid,
    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns,
    .summary-page .summary-finance-grid,
    .summary-page .summary-operational-kpis,
    .summary-page .summary-operational-weekly-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .summary-page .summary-two-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal:
      grillas claras dentro del breakpoint oficial.
    */
    .summary-page.summary-page-redesigned {
        gap: 18px !important;
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page .summary-kpi-grid,
    .summary-page .summary-ledger-grid--two-columns,
    .summary-page .summary-finance-grid,
    .summary-page .summary-operational-kpis,
    .summary-page .summary-operational-weekly-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .summary-page .summary-ledger-grid {
        display: grid !important;
        width: 100% !important;
    }

    .summary-page .summary-two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop:
      mantener flujo desktop limpio y sin padding de bottom nav.
    */
    .summary-page.summary-page-redesigned {
        gap: 22px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .summary-page .summary-ledger-grid--two-columns,
    .summary-page .summary-finance-grid,
    .summary-page .summary-two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .summary-page .summary-operational-kpis,
    .summary-page .summary-operational-weekly-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile fase 2:
      compactar lectura sin tocar logica, calculos ni modales.
    */
    .summary-page.summary-page-redesigned {
        gap: 12px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden !important;
    }

    .summary-page .content-card,
    .summary-page .summary-card,
    .summary-page .summary-block,
    .summary-page .summary-header-card,
    .summary-page .payments-summary-section,
    .summary-page .summary-expenses-card,
    .summary-page .summary-balance-strip-card,
    .summary-page .summary-operational-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .summary-page .section-head,
    .summary-page .summary-header-head,
    .summary-page .summary-block-header,
    .summary-page .section-header,
    .summary-page .table-card-header {
        margin-bottom: 10px !important;
        gap: 10px !important;
    }

    .summary-page .section-title,
    .summary-page .section-header h2,
    .summary-page .section-header h3,
    .summary-page .table-card-header h2,
    .summary-page .table-card-header h3 {
        margin-bottom: 3px !important;
        line-height: 1.15 !important;
    }

    .summary-page .section-subtitle,
    .summary-page .section-header p,
    .summary-page .summary-block-title-group p,
    .summary-page .helper-text {
        margin-bottom: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-header-card .form,
    .summary-page .summary-header-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .summary-page .summary-header-card .form-group {
        margin: 0 !important;
    }

    .summary-page .summary-header-card input,
    .summary-page .summary-header-card select,
    .summary-page .summary-header-card button[type="submit"],
    .summary-page .summary-header-card .btn {
        min-height: 44px !important;
    }

    .summary-page .summary-header-card .form-actions,
    .summary-page .summary-header-card button[type="submit"] {
        width: 100% !important;
        margin: 0 !important;
    }

    .summary-page .summary-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .summary-page .summary-kpi-card {
        min-height: 104px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .summary-page .summary-kpi-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px !important;
        border-radius: 14px !important;
        font-size: 1rem !important;
    }

    .summary-page .summary-kpi-copy {
        gap: 4px !important;
        min-width: 0 !important;
    }

    .summary-page .summary-kpi-label {
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-kpi-card .summary-kpi-value {
        font-size: 1.35rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-kpi-card p {
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
    }

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns,
    .summary-page .summary-finance-grid,
    .summary-page .summary-two-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .summary-page .summary-orders-block .summary-block-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    .summary-page .summary-orders-block .summary-link,
    .summary-page .summary-orders-block .summary-link-button,
    .summary-page .summary-orders-block .btn {
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        font-size: 0.78rem !important;
    }

    .summary-page .summary-empty-state,
    .summary-page .empty-state {
        min-height: 84px !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .summary-page .mobile-summary-orders-list,
    .summary-page .summary-orders-mobile-list,
    .summary-page .mobile-payment-summary-list,
    .summary-page .mobile-expenses-list {
        gap: 10px !important;
    }

    .summary-page .mobile-payment-summary-card,
    .summary-page .mobile-expense-card,
    .summary-page .mobile-summary-order-card {
        min-height: 64px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .summary-page .mobile-payment-total,
    .summary-page .mobile-expense-amount,
    .summary-page .summary-payment-row strong {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .summary-page .mobile-payment-grand-total,
    .summary-page .mobile-expense-total-card {
        min-height: 64px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .summary-page .mobile-payment-grand-total strong,
    .summary-page .mobile-expense-total-info strong {
        font-size: 1.25rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-expenses-card .summary-empty-state,
    .summary-page .summary-expenses-card .empty-state {
        min-height: 76px !important;
    }

    .summary-page .summary-balance-strip-card {
        padding: 14px !important;
    }

    .summary-page .mobile-balance-card,
    .summary-page .mobile-balance-card[hidden] {
        padding: 0 !important;
    }

    .summary-page .mobile-balance-list {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .summary-page .mobile-balance-row {
        min-height: 58px !important;
        padding-bottom: 10px !important;
        gap: 12px !important;
    }

    .summary-page .mobile-balance-row strong {
        font-size: 1.3rem !important;
        line-height: 1 !important;
    }

    .summary-page .mobile-balance-total-card {
        min-height: 96px !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .summary-page .mobile-balance-total-content {
        gap: 5px !important;
    }

    .summary-page .mobile-balance-total-content strong {
        font-size: clamp(1.9rem, 8vw, 2.35rem) !important;
        line-height: 0.95 !important;
    }

    .summary-page .summary-operational-kpis {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .summary-page .summary-operational-kpi {
        min-height: 76px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .summary-page .summary-operational-kpi strong {
        font-size: 1.05rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-operational-status {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .summary-page .summary-operational-status-detail,
    .summary-page .summary-operational-status-action {
        grid-column: 1 / -1 !important;
    }

    .summary-page .summary-operational-status-action .summary-operational-cta,
    .summary-page .cash-box-actions-row .summary-operational-cta {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: center !important;
    }

    .summary-page .summary-operational-meta,
    .summary-page .summary-operational-movements {
        margin-top: 10px !important;
    }

    .summary-page .summary-operational-weekly {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .summary-page .summary-operational-weekly-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .summary-page .summary-operational-weekly-total,
    .summary-page .summary-operational-weekly-footer {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .summary-page .summary-operational-weekly-total strong,
    .summary-page .summary-operational-weekly-footer strong {
        font-size: 1.35rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-operational-weekly-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .summary-page .summary-operational-weekly-item {
        min-height: 78px !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .cash-box-actions-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 12px !important;
        margin-bottom: 16px !important;
    }

    .summary-page .summary-closing-actions .btn,
    .summary-page .cash-box-actions-row .btn {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - Modal Ordenes ingresadas hoy:
      ordenar espaciado interno de cards sin tocar busqueda ni logica.
    */
    #summaryEnteredOrdersModal .summary-orders-modal-body {
        padding: 14px !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }

    #summaryEnteredOrdersModal .summary-orders-mobile-list,
    #summaryEnteredOrdersModal .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .summary-orders-mobile-list[hidden],
    #summaryEnteredOrdersModal .mobile-summary-orders-list[hidden] {
        display: grid !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
        border-radius: 18px !important;

        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas:
            "code status"
            "client client"
            "payment payment"
            "metrics metrics" !important;
        gap: 10px 12px !important;
        align-items: center !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-top {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-code-pill {
        grid-area: code !important;
        width: auto !important;
        min-width: 108px !important;
        max-width: 150px !important;
        min-height: 30px !important;

        padding: 0 12px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
        margin: 0 !important;
        line-height: 1 !important;
        justify-self: start !important;
    }

    #summaryEnteredOrdersModal .mobile-order-client {
        grid-area: client !important;
        min-width: 0 !important;
        margin: 0 !important;

        font-size: 0.94rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status {
        grid-area: status !important;
        justify-self: end !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-meta {
        grid-area: payment !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status,
    #summaryEnteredOrdersModal .mobile-payment-pill {
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-metrics {
        grid-area: metrics !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric {
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric span {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric strong {
        margin: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-bottom {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - Modal Ordenes ingresadas hoy:
      copiar composicion del card base y compactar altura real.
    */
    #summaryEnteredOrdersModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #summaryEnteredOrdersModal .modal-dialog,
    #summaryEnteredOrdersModal .modal-content {
        width: min(368px, calc(100vw - 20px)) !important;
        max-width: min(368px, calc(100vw - 20px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryEnteredOrdersModal .modal-header {
        position: relative !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 58px 0 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #summaryEnteredOrdersModal .modal-header h3,
    #summaryEnteredOrdersModal .modal-title {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.14rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        color: var(--primary) !important;
    }

    #summaryEnteredOrdersModal .modal-header .modal-close-btn,
    #summaryEnteredOrdersModal .modal-header [data-modal-close] {
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-body,
    #summaryEnteredOrdersModal .modal-body {
        padding: 14px !important;
        max-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    #summaryEnteredOrdersModal .summary-orders-mobile-list,
    #summaryEnteredOrdersModal .mobile-summary-orders-list,
    #summaryEnteredOrdersModal .summary-orders-mobile-list[hidden],
    #summaryEnteredOrdersModal .mobile-summary-orders-list[hidden] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-card {
        padding: 12px !important;
        border-radius: 18px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "code status"
            "client payment"
            "metrics metrics" !important;

        column-gap: 10px !important;
        row-gap: 8px !important;

        align-items: center !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-top,
    #summaryEnteredOrdersModal .mobile-summary-order-main,
    #summaryEnteredOrdersModal .mobile-summary-order-side {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-code-pill {
        grid-area: code !important;
        justify-self: start !important;
        align-self: center !important;

        width: auto !important;
        min-width: 112px !important;
        max-width: 150px !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status {
        grid-area: status !important;
        justify-self: end !important;
        align-self: center !important;

        width: auto !important;
        min-width: 94px !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-order-client {
        grid-area: client !important;
        justify-self: start !important;
        align-self: center !important;

        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;

        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #10194A !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-meta {
        grid-area: payment !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill {
        width: auto !important;
        min-width: 72px !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-metrics {
        grid-area: metrics !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric {
        min-width: 0 !important;
        min-height: 54px !important;

        padding: 8px 9px !important;
        border-radius: 14px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;

        margin: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric span {
        margin: 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric strong {
        margin: 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-bottom {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - centrar titulo del modal Ordenes ingresadas hoy.
    */
    #summaryEnteredOrdersModal .modal-header {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;

        min-height: 58px !important;
        height: 58px !important;

        padding: 0 12px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #summaryEnteredOrdersModal .modal-header h3,
    #summaryEnteredOrdersModal .modal-title {
        grid-column: 2 !important;

        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;
        text-align: center !important;

        font-size: 1.14rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #summaryEnteredOrdersModal .modal-header .modal-close-btn,
    #summaryEnteredOrdersModal .modal-header [data-modal-close] {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - Modal Ordenes entregadas hoy:
      copiar UI del modal Ordenes ingresadas hoy.
    */
    #summaryDeliveredOrdersModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #summaryDeliveredOrdersModal .modal-dialog,
    #summaryDeliveredOrdersModal .modal-content {
        width: min(368px, calc(100vw - 20px)) !important;
        max-width: min(368px, calc(100vw - 20px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryDeliveredOrdersModal .modal-header {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;

        min-height: 58px !important;
        height: 58px !important;

        padding: 0 12px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #summaryDeliveredOrdersModal .modal-header h3,
    #summaryDeliveredOrdersModal .modal-title {
        grid-column: 2 !important;

        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;
        text-align: center !important;

        font-size: 1.14rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #summaryDeliveredOrdersModal .modal-header .modal-close-btn,
    #summaryDeliveredOrdersModal .modal-header [data-modal-close] {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #summaryDeliveredOrdersModal .summary-orders-modal-body,
    #summaryDeliveredOrdersModal .modal-body {
        padding: 14px !important;
        max-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #summaryDeliveredOrdersModal .summary-orders-modal-search {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    #summaryDeliveredOrdersModal .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    #summaryDeliveredOrdersModal .summary-orders-mobile-list,
    #summaryDeliveredOrdersModal .mobile-summary-orders-list,
    #summaryDeliveredOrdersModal .summary-orders-mobile-list[hidden],
    #summaryDeliveredOrdersModal .mobile-summary-orders-list[hidden] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        padding: 12px !important;
        border-radius: 18px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "code status"
            "client payment"
            "metrics metrics" !important;

        column-gap: 10px !important;
        row-gap: 8px !important;

        align-items: center !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-order-top,
    #summaryDeliveredOrdersModal .mobile-summary-order-main,
    #summaryDeliveredOrdersModal .mobile-summary-order-side {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryDeliveredOrdersModal .mobile-order-code-pill {
        grid-area: code !important;
        justify-self: start !important;
        align-self: center !important;

        width: auto !important;
        min-width: 112px !important;
        max-width: 150px !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryDeliveredOrdersModal .mobile-order-status {
        grid-area: status !important;
        justify-self: end !important;
        align-self: center !important;

        width: auto !important;
        min-width: 94px !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryDeliveredOrdersModal .mobile-order-client {
        grid-area: client !important;
        justify-self: start !important;
        align-self: center !important;

        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;

        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #10194A !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-order-meta {
        grid-area: payment !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryDeliveredOrdersModal .mobile-payment-pill {
        width: auto !important;
        min-width: 72px !important;
        min-height: 28px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-order-metrics {
        grid-area: metrics !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-metric {
        min-width: 0 !important;
        min-height: 54px !important;

        padding: 8px 9px !important;
        border-radius: 14px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;

        margin: 0 !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-metric span {
        margin: 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-metric strong {
        margin: 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryDeliveredOrdersModal .mobile-summary-order-bottom {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - override final para detalle readonly completo.
    */

    #summaryOrderDetailModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #summaryOrderDetailModal.is-open {
        display: flex !important;
    }

    #summaryOrderDetailModal .modal-dialog,
    #summaryOrderDetailModal .modal-content {
        width: min(368px, calc(100vw - 20px)) !important;
        max-width: min(368px, calc(100vw - 20px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryOrderDetailModal .modal-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 12px !important;
    }

    #summaryOrderDetailModal .order-detail-modal-heading {
        grid-column: 2 !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .modal-title,
    #summaryOrderDetailModal .order-detail-modal-heading h3 {
        margin: 0 !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .order-detail-modal-code {
        margin: 3px 0 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }

    #summaryOrderDetailModal .modal-body {
        padding: 14px !important;
        max-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #summaryOrderDetailModal .order-detail-modal-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #summaryOrderDetailModal .order-detail-section-card {
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.8) !important;
        background: rgba(255, 255, 255, 0.96) !important;
    }

    #summaryOrderDetailModal .search-info-grid,
    #summaryOrderDetailModal .order-detail-info-grid,
    #summaryOrderDetailModal .order-detail-services-list,
    #summaryOrderDetailModal .order-detail-payments-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #summaryOrderDetailModal .order-detail-header-void-btn,
    #summaryOrderDetailModal .order-detail-whatsapp-link,
    #summaryOrderDetailModal .order-detail-search-link,
    #summaryOrderDetailModal .order-ready-btn,
    #summaryOrderDetailModal .btn-mark-ready-soft,
    #summaryOrderDetailModal .order-detail-inline-void-action,
    #summaryOrderDetailModal .payment-method-edit-btn,
    #summaryOrderDetailModal [data-order-ready-action],
    #summaryOrderDetailModal [data-order-void-trigger],
    #summaryOrderDetailModal [data-payment-method-edit-trigger],
    #summaryOrderDetailModal [data-whatsapp-trigger],
    #summaryOrderDetailModal [data-order-detail-search-link] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - Detalle de la orden:
      valores menos pesados y pill Frecuente solido.
    */

    #summaryOrderDetailModal .info-item strong,
    #summaryOrderDetailModal .summary-order-readonly-item strong,
    #summaryOrderDetailModal .summary-order-detail-item strong,
    #summaryOrderDetailModal .summary-order-readonly-card strong {
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        color: #25305F !important;
        letter-spacing: 0 !important;
    }

    #summaryOrderDetailModal .info-item > span,
    #summaryOrderDetailModal .summary-order-readonly-item span,
    #summaryOrderDetailModal .summary-order-detail-item span {
        font-weight: 600 !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        color: #9A96AA !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
    }

    #summaryOrderDetailModal .info-item,
    #summaryOrderDetailModal .summary-order-readonly-item,
    #summaryOrderDetailModal .summary-order-detail-item,
    #summaryOrderDetailModal .summary-order-readonly-card {
        opacity: 1 !important;
    }

    #summaryOrderDetailModal .loyalty-chip,
    #summaryOrderDetailModal .loyalty-chip.frecuente,
    #summaryOrderDetailModal .pill-chip.loyalty-chip,
    #summaryOrderDetailModal .pill-chip.loyalty-chip.frecuente,
    #summaryOrderDetailModal .loyalty-badge,
    #summaryOrderDetailModal .client-loyalty-badge,
    #summaryOrderDetailModal .summary-loyalty-badge,
    #summaryOrderDetailModal .summary-order-loyalty-pill,
    #summaryOrderDetailModal [data-summary-order-detail-loyalty] {
        opacity: 1 !important;
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border: 1px solid #FFE0A6 !important;

        min-height: 28px !important;
        width: fit-content !important;
        max-width: max-content !important;

        padding: 0 12px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;

        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: normal !important;
    }

    #summaryOrderDetailModal .info-item strong:has(.loyalty-chip),
    #summaryOrderDetailModal .summary-order-readonly-item strong:has(.loyalty-chip),
    #summaryOrderDetailModal .summary-order-detail-item strong:has(.loyalty-chip) {
        display: flex !important;
        align-items: center !important;
        color: #B06A1B !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - detalle de orden readonly copiado del modal de ordenes.
    */

    #summaryOrderDetailModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #summaryOrderDetailModal.is-open {
        display: flex !important;
    }

    #summaryOrderDetailModal .modal-dialog,
    #summaryOrderDetailModal .modal-content {
        width: min(368px, calc(100vw - 20px)) !important;
        max-width: min(368px, calc(100vw - 20px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryOrderDetailModal .modal-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 12px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #summaryOrderDetailModal .order-detail-modal-heading {
        grid-column: 2 !important;
        min-width: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .modal-title,
    #summaryOrderDetailModal .order-detail-modal-heading h3 {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #summaryOrderDetailModal .order-detail-modal-code {
        margin: 3px 0 0 !important;
        color: #6f6a7f !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    #summaryOrderDetailModal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #summaryOrderDetailModal .modal-body {
        padding: 14px !important;
        max-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #summaryOrderDetailModal .order-detail-modal-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #summaryOrderDetailModal .order-detail-section-card {
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.8) !important;
        background: rgba(255, 255, 255, 0.96) !important;
    }

    #summaryOrderDetailModal .order-detail-section-card .section-header {
        margin-bottom: 10px !important;
    }

    #summaryOrderDetailModal .order-detail-section-card .section-title {
        margin: 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    #summaryOrderDetailModal .order-detail-section-card .section-subtitle {
        margin: 4px 0 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    #summaryOrderDetailModal .search-info-grid,
    #summaryOrderDetailModal .order-detail-info-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #summaryOrderDetailModal .info-item,
    #summaryOrderDetailModal .summary-order-readonly-observation {
        min-height: 54px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.6) !important;
        background: rgba(248, 251, 255, 0.95) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    #summaryOrderDetailModal .info-item span,
    #summaryOrderDetailModal .summary-order-readonly-observation {
        color: #7a7790 !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    #summaryOrderDetailModal .info-item > span {
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    #summaryOrderDetailModal .info-item strong {
        color: #10194a !important;
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        overflow-wrap: anywhere !important;
    }

    #summaryOrderDetailModal .order-detail-services-list,
    #summaryOrderDetailModal .order-detail-payments-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #summaryOrderDetailModal .order-detail-service-row,
    #summaryOrderDetailModal .order-detail-payment-row {
        padding: 10px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.6) !important;
        background: rgba(248, 251, 255, 0.95) !important;
    }

    #summaryOrderDetailModal .order-detail-header-void-btn,
    #summaryOrderDetailModal .order-detail-whatsapp-link,
    #summaryOrderDetailModal .order-detail-search-link,
    #summaryOrderDetailModal .order-ready-btn,
    #summaryOrderDetailModal .btn-mark-ready-soft,
    #summaryOrderDetailModal .order-detail-inline-void-action,
    #summaryOrderDetailModal .payment-method-edit-btn,
    #summaryOrderDetailModal [data-order-ready-action],
    #summaryOrderDetailModal [data-order-void-trigger],
    #summaryOrderDetailModal [data-payment-method-edit-trigger],
    #summaryOrderDetailModal [data-whatsapp-trigger],
    #summaryOrderDetailModal [data-order-detail-search-link] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - modal reutilizable de detalle de orden.
    */

    .summary-order-detail-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    .summary-order-detail-modal.is-open {
        display: flex !important;
    }

    .summary-order-detail-modal .modal-dialog,
    .summary-order-detail-modal .modal-content {
        width: min(100%, 372px) !important;
        max-width: 372px !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .summary-order-detail-modal .modal-content {
        max-height: calc(100dvh - 24px) !important;
    }

    .summary-order-detail-modal .modal-header {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;

        height: 58px !important;
        min-height: 58px !important;
        padding: 0 12px !important;

        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    .summary-order-detail-modal .modal-title {
        grid-column: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;

        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .summary-order-detail-modal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        position: static !important;
        transform: none !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-order-detail-modal .modal-body {
        max-height: calc(100dvh - 92px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px !important;
    }

    .summary-order-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .summary-order-detail-item,
    .summary-order-detail-money-item {
        min-width: 0 !important;
        padding: 12px 14px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.94) !important;
    }

    .summary-order-detail-item span,
    .summary-order-detail-money-item span {
        display: block !important;
        margin: 0 0 4px !important;

        color: #6f6a7f !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    .summary-order-detail-item strong,
    .summary-order-detail-money-item strong {
        display: block !important;
        margin: 0 !important;

        color: #2f3260 !important;
        font-size: 0.96rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        overflow-wrap: anywhere !important;
    }

    .summary-order-detail-money-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .summary-order-detail-money-item {
        padding: 10px !important;
        text-align: center !important;
    }

    .summary-order-detail-money-item strong {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    .summary-order-detail-money-item:last-child strong {
        color: #d64545 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - Ver otros cierres:
      cards claras para el bloque visible y el modal de todos los cierres.
    */

    .otros-cierres-section,
    .summary-page .summary-closures-card,
    .summary-page .closures-found-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .otros-cierres-section .table-card-header,
    .summary-page .summary-closures-card .section-header,
    .summary-page .closures-found-card .section-header {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    .otros-cierres-section .closures-mobile-list,
    .summary-page .summary-closures-list,
    .summary-page .closures-list,
    #closures-modal .closures-mobile-list,
    #summaryClosuresModal .summary-closures-list,
    #summaryClosuresModal .closures-list,
    #summaryAllClosuresModal .summary-closures-list,
    #summaryAllClosuresModal .closures-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .otros-cierres-section .summary-closure-card,
    .summary-page .summary-closure-card,
    .summary-page .closure-card,
    #closures-modal .summary-closure-card,
    #summaryClosuresModal .summary-closure-card,
    #summaryClosuresModal .closure-card,
    #summaryAllClosuresModal .summary-closure-card,
    #summaryAllClosuresModal .closure-card {
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }

    .otros-cierres-section .summary-closure-card .mobile-card-top,
    .otros-cierres-section .summary-closure-card .mobile-card-meta,
    #closures-modal .summary-closure-card .mobile-card-top,
    #closures-modal .summary-closure-card .mobile-card-meta {
        display: none !important;
    }

    .otros-cierres-section .summary-closure-card-header,
    .summary-page .summary-closure-card-header,
    .summary-page .closure-card-header,
    #closures-modal .summary-closure-card-header,
    #summaryClosuresModal .summary-closure-card-header,
    #summaryClosuresModal .closure-card-header,
    #summaryAllClosuresModal .summary-closure-card-header,
    #summaryAllClosuresModal .closure-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .otros-cierres-section .summary-closure-title,
    .summary-page .summary-closure-title,
    .summary-page .closure-title,
    #closures-modal .summary-closure-title,
    #summaryClosuresModal .summary-closure-title,
    #summaryClosuresModal .closure-title,
    #summaryAllClosuresModal .summary-closure-title,
    #summaryAllClosuresModal .closure-title {
        min-width: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;

        color: #10194A !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .otros-cierres-section .summary-closure-title i,
    .summary-page .summary-closure-title i,
    .summary-page .closure-title i,
    #closures-modal .summary-closure-title i,
    #summaryClosuresModal .summary-closure-title i,
    #summaryClosuresModal .closure-title i,
    #summaryAllClosuresModal .summary-closure-title i,
    #summaryAllClosuresModal .closure-title i {
        flex: 0 0 auto !important;
        color: var(--primary) !important;
        font-size: 0.86rem !important;
    }

    .otros-cierres-section .summary-closure-badge,
    .summary-page .summary-closure-badge,
    .summary-page .closure-badge,
    #closures-modal .summary-closure-badge,
    #summaryClosuresModal .summary-closure-badge,
    #summaryClosuresModal .closure-badge,
    #summaryAllClosuresModal .summary-closure-badge,
    #summaryAllClosuresModal .closure-badge {
        width: auto !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        margin: 0 !important;

        border-radius: 999px !important;
        background: rgba(204, 255, 225, 0.9) !important;
        color: #067A3D !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .otros-cierres-section .summary-closure-meta,
    .summary-page .summary-closure-meta,
    .summary-page .closure-meta,
    #closures-modal .summary-closure-meta,
    #summaryClosuresModal .summary-closure-meta,
    #summaryClosuresModal .closure-meta,
    #summaryAllClosuresModal .summary-closure-meta,
    #summaryAllClosuresModal .closure-meta {
        margin: 0 !important;
        color: #5F6078 !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
    }

    .otros-cierres-section .summary-closure-money-grid,
    .summary-page .summary-closure-money-grid,
    .summary-page .closure-money-grid,
    #closures-modal .summary-closure-money-grid,
    #summaryClosuresModal .summary-closure-money-grid,
    #summaryClosuresModal .closure-money-grid,
    #summaryAllClosuresModal .summary-closure-money-grid,
    #summaryAllClosuresModal .closure-money-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
    }

    .otros-cierres-section .summary-closure-money-item,
    .summary-page .summary-closure-money-item,
    .summary-page .closure-money-item,
    #closures-modal .summary-closure-money-item,
    #summaryClosuresModal .summary-closure-money-item,
    #summaryClosuresModal .closure-money-item,
    #summaryAllClosuresModal .summary-closure-money-item,
    #summaryAllClosuresModal .closure-money-item {
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 9px 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.95) !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .otros-cierres-section .summary-closure-money-item span,
    .summary-page .summary-closure-money-item span,
    .summary-page .closure-money-item span,
    #closures-modal .summary-closure-money-item span,
    #summaryClosuresModal .summary-closure-money-item span,
    #summaryClosuresModal .closure-money-item span,
    #summaryAllClosuresModal .summary-closure-money-item span,
    #summaryAllClosuresModal .closure-money-item span {
        margin: 0 !important;
        color: #7A7790 !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 500 !important;
    }

    .otros-cierres-section .summary-closure-money-item strong,
    .summary-page .summary-closure-money-item strong,
    .summary-page .closure-money-item strong,
    #closures-modal .summary-closure-money-item strong,
    #summaryClosuresModal .summary-closure-money-item strong,
    #summaryClosuresModal .closure-money-item strong,
    #summaryAllClosuresModal .summary-closure-money-item strong,
    #summaryAllClosuresModal .closure-money-item strong {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.86rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .otros-cierres-section .summary-closure-money-result.is-positive strong,
    .summary-page .summary-closure-money-result.is-positive strong,
    #closures-modal .summary-closure-money-result.is-positive strong {
        color: #006B3A !important;
    }

    .otros-cierres-section .summary-closure-money-result.is-negative strong,
    .summary-page .summary-closure-money-result.is-negative strong,
    #closures-modal .summary-closure-money-result.is-negative strong {
        color: #B42318 !important;
    }

    .otros-cierres-section .summary-closure-detail-btn,
    .summary-page .summary-closure-detail-btn,
    .summary-page .closure-detail-btn,
    #closures-modal .summary-closure-detail-btn,
    #summaryClosuresModal .summary-closure-detail-btn,
    #summaryClosuresModal .closure-detail-btn,
    #summaryAllClosuresModal .summary-closure-detail-btn,
    #summaryAllClosuresModal .closure-detail-btn {
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #closures-modal,
    #summaryClosuresModal,
    #summaryAllClosuresModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #closures-modal .modal-dialog,
    #closures-modal .modal-content,
    #summaryClosuresModal .modal-dialog,
    #summaryClosuresModal .modal-content,
    #summaryAllClosuresModal .modal-dialog,
    #summaryAllClosuresModal .modal-content {
        width: min(368px, calc(100vw - 20px)) !important;
        max-width: min(368px, calc(100vw - 20px)) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)) !important;

        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #closures-modal .modal-header,
    #summaryClosuresModal .modal-header,
    #summaryAllClosuresModal .modal-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;

        height: 58px !important;
        min-height: 58px !important;
        padding: 0 12px !important;

        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #closures-modal .modal-title,
    #closures-modal .modal-header h3,
    #summaryClosuresModal .modal-title,
    #summaryClosuresModal .modal-header h3,
    #summaryAllClosuresModal .modal-title,
    #summaryAllClosuresModal .modal-header h3 {
        grid-column: 2 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #closures-modal .modal-close-btn,
    #summaryClosuresModal .modal-close-btn,
    #summaryAllClosuresModal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        position: static !important;
        transform: none !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #closures-modal .modal-body,
    #summaryClosuresModal .modal-body,
    #summaryAllClosuresModal .modal-body {
        padding: 14px !important;
        max-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #closures-modal .modal-body > .form,
    #summaryClosuresModal .modal-body > .form,
    #summaryAllClosuresModal .modal-body > .form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 12px !important;
    }

    #closures-modal .modal-body > .form .form-grid,
    #summaryClosuresModal .modal-body > .form .form-grid,
    #summaryAllClosuresModal .modal-body > .form .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    #closures-modal input,
    #closures-modal select,
    #summaryClosuresModal input,
    #summaryClosuresModal select,
    #summaryAllClosuresModal input,
    #summaryAllClosuresModal select {
        min-height: 44px !important;
        border-radius: 14px !important;
    }

    #closures-modal button[type="submit"],
    #summaryClosuresModal button[type="submit"],
    #summaryAllClosuresModal button[type="submit"] {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - boton Ver detalle en cards de ordenes.
    */

    .summary-page .mobile-summary-order-card,
    #summaryEnteredOrdersModal .mobile-summary-order-card,
    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        gap: 8px !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-card,
    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        grid-template-areas:
            "code status"
            "client payment"
            "metrics metrics"
            "detail detail" !important;
    }

    .summary-page .mobile-summary-order-detail-btn,
    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn {
        grid-area: detail !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-height: 40px !important;
        margin: 2px 0 0 !important;
        padding: 0 14px !important;

        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-page .mobile-summary-order-detail-btn i,
    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn i,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn i {
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-bottom,
    #summaryDeliveredOrdersModal .mobile-summary-order-bottom {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile - override final para detalle readonly completo.
    */

    #summaryOrderDetailModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #summaryOrderDetailModal.is-open {
        display: flex !important;
    }

    #summaryOrderDetailModal .modal-dialog,
    #summaryOrderDetailModal .modal-content {
        width: min(368px, calc(100vw - 20px)) !important;
        max-width: min(368px, calc(100vw - 20px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryOrderDetailModal .modal-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 12px !important;
    }

    #summaryOrderDetailModal .order-detail-modal-heading {
        grid-column: 2 !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .modal-title,
    #summaryOrderDetailModal .order-detail-modal-heading h3 {
        margin: 0 !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .order-detail-modal-code {
        margin: 3px 0 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }

    #summaryOrderDetailModal .modal-body {
        padding: 14px !important;
        max-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #summaryOrderDetailModal .order-detail-modal-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #summaryOrderDetailModal .order-detail-section-card {
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.8) !important;
        background: rgba(255, 255, 255, 0.96) !important;
    }

    #summaryOrderDetailModal .search-info-grid,
    #summaryOrderDetailModal .order-detail-info-grid,
    #summaryOrderDetailModal .order-detail-services-list,
    #summaryOrderDetailModal .order-detail-payments-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #summaryOrderDetailModal .order-detail-header-void-btn,
    #summaryOrderDetailModal .order-detail-whatsapp-link,
    #summaryOrderDetailModal .order-detail-search-link,
    #summaryOrderDetailModal .order-ready-btn,
    #summaryOrderDetailModal .btn-mark-ready-soft,
    #summaryOrderDetailModal .order-detail-inline-void-action,
    #summaryOrderDetailModal .payment-method-edit-btn,
    #summaryOrderDetailModal [data-order-ready-action],
    #summaryOrderDetailModal [data-order-void-trigger],
    #summaryOrderDetailModal [data-payment-method-edit-trigger],
    #summaryOrderDetailModal [data-whatsapp-trigger],
    #summaryOrderDetailModal [data-order-detail-search-link] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      alinear pills especificos del modal Detalle de la orden.
    */

    #summaryOrderDetailModal .summary-order-readonly-item--loyalty,
    #summaryOrderDetailModal .summary-order-readonly-item--order-status,
    #summaryOrderDetailModal .summary-order-readonly-item--payment-status {
        align-items: flex-start !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--loyalty strong,
    #summaryOrderDetailModal .summary-order-readonly-item--order-status strong,
    #summaryOrderDetailModal .summary-order-readonly-item--payment-status strong {
        align-self: flex-start !important;
        justify-self: start !important;
        width: fit-content !important;
        max-width: max-content !important;
        min-width: 0 !important;
        margin: 2px 0 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 12px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--loyalty .pill-chip,
    #summaryOrderDetailModal .summary-order-readonly-item--loyalty .loyalty-badge,
    #summaryOrderDetailModal .summary-order-readonly-item--order-status .pill-chip,
    #summaryOrderDetailModal .summary-order-readonly-item--order-status .status-pill,
    #summaryOrderDetailModal .summary-order-readonly-item--order-status .order-status-pill,
    #summaryOrderDetailModal .summary-order-readonly-item--payment-status .pill-chip,
    #summaryOrderDetailModal .summary-order-readonly-item--payment-status .status-pill,
    #summaryOrderDetailModal .summary-order-readonly-item--payment-status .payment-status-pill {
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        justify-self: start !important;
        align-self: flex-start !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      alineacion real de pills especificos en Detalle de la orden.
    */

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"],
    #summaryOrderDetailModal [data-summary-detail-field="order-status"],
    #summaryOrderDetailModal [data-summary-detail-field="payment-status"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > span,
    #summaryOrderDetailModal [data-summary-detail-field="order-status"] > span,
    #summaryOrderDetailModal [data-summary-detail-field="payment-status"] > span {
        align-self: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal [data-summary-detail-pill] {
        align-self: flex-start !important;
        justify-self: start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        transform: none !important;
        translate: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: left !important;
        white-space: nowrap !important;
        font-weight: 500 !important;
    }

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] .summary-detail-pill,
    #summaryOrderDetailModal [data-summary-detail-field="order-status"] .summary-detail-pill,
    #summaryOrderDetailModal [data-summary-detail-field="payment-status"] .summary-detail-pill,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] [class*="status"],
    #summaryOrderDetailModal [data-summary-detail-field="order-status"] [class*="status"],
    #summaryOrderDetailModal [data-summary-detail-field="payment-status"] [class*="status"],
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] [class*="badge"],
    #summaryOrderDetailModal [data-summary-detail-field="order-status"] [class*="badge"],
    #summaryOrderDetailModal [data-summary-detail-field="payment-status"] [class*="badge"],
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] [class*="pill"],
    #summaryOrderDetailModal [data-summary-detail-field="order-status"] [class*="pill"],
    #summaryOrderDetailModal [data-summary-detail-field="payment-status"] [class*="pill"] {
        margin-left: 0 !important;
        transform: none !important;
        translate: none !important;
        align-self: flex-start !important;
        justify-self: start !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Detalle de la orden: estados en fila y servicios compactos.
    */

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status {
        min-height: 58px !important;
        padding: 10px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status > span {
        margin: 0 !important;
        padding: 0 !important;
        color: #7A7790 !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status strong,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .summary-detail-pill {
        justify-self: end !important;
        align-self: center !important;
        width: auto !important;
        min-width: 92px !important;
        max-width: max-content !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        text-transform: uppercase !important;
    }

    #summaryOrderDetailModal .summary-order-services-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryOrderDetailModal .summary-order-service-card,
    #summaryOrderDetailModal .summary-order-service-row {
        min-height: 76px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.95) !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    #summaryOrderDetailModal .summary-order-service-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
        background: #EEF2FF !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #summaryOrderDetailModal .summary-order-service-icon i {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    #summaryOrderDetailModal .summary-order-service-info {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    #summaryOrderDetailModal .summary-order-service-info strong {
        margin: 0 !important;
        color: #25305F !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #summaryOrderDetailModal .summary-order-service-info span,
    #summaryOrderDetailModal .summary-order-service-info small {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #summaryOrderDetailModal .summary-order-service-price {
        justify-self: end !important;
        align-self: center !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #EEF2FF !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      override final: estados centrados y pills solidos.
    */

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status {
        min-height: 60px !important;
        padding: 0 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status > span,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status > label,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .summary-order-inline-label {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        color: #10194a !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status strong {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
    }

    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .summary-detail-pill,
    #summaryOrderDetailModal .summary-order-readonly-item--inline-status .status-badge {
        margin: 0 !important;
        min-height: 30px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: normal !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    #summaryOrderDetailModal .summary-order-status--pendiente,
    #summaryOrderDetailModal .summary-detail-pill.order-pendiente {
        background: #F7E9BC !important;
        color: #B88321 !important;
        border: 1px solid #E9D189 !important;
    }

    #summaryOrderDetailModal .summary-order-payment-status--cancelado,
    #summaryOrderDetailModal .summary-order-payment-status--pagado,
    #summaryOrderDetailModal .summary-detail-pill.payment-cancelado,
    #summaryOrderDetailModal .summary-detail-pill.payment-pagado {
        background: #DDF1E2 !important;
        color: #5F8E68 !important;
        border: 1px solid #C6E4CF !important;
    }

    #summaryOrderDetailModal .summary-detail-pill::before,
    #summaryOrderDetailModal .summary-detail-pill::after,
    #summaryOrderDetailModal .status-badge::before,
    #summaryOrderDetailModal .status-badge::after {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      separacion consistente entre metricas y boton Ver detalle.
    */

    .summary-page .mobile-summary-order-card,
    #summaryEnteredOrdersModal .mobile-summary-order-card,
    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        row-gap: 10px !important;
    }

    .summary-page .mobile-summary-order-metrics,
    #summaryEnteredOrdersModal .mobile-summary-order-metrics,
    #summaryDeliveredOrdersModal .mobile-summary-order-metrics {
        margin-bottom: 0 !important;
    }

    .summary-page .mobile-summary-order-detail-btn,
    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn {
        margin-top: 10px !important;
    }

    .summary-page .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryEnteredOrdersModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      boton Ver detalle dentro de modales de cobros por metodo.
    */

    .summary-payments-method-modal .mobile-summary-order-card,
    .summary-payment-method-modal .mobile-summary-order-card,
    #summaryPaymentsMethodModal .mobile-summary-order-card,
    #summaryPaymentMethodModal .mobile-summary-order-card {
        row-gap: 10px !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn {
        grid-area: detail !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 12px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-payments-method-modal .mobile-summary-order-detail-btn i,
    .summary-payment-method-modal .mobile-summary-order-detail-btn i,
    #summaryPaymentsMethodModal .mobile-summary-order-detail-btn i,
    #summaryPaymentMethodModal .mobile-summary-order-detail-btn i {
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    .summary-payments-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    .summary-payment-method-modal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentsMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn,
    #summaryPaymentMethodModal .mobile-summary-order-metrics + .mobile-summary-order-detail-btn {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      espaciado entre buscador y cards en modales de cobros por metodo.
    */

    .summary-payments-method-modal .summary-orders-modal-search,
    .summary-payment-method-modal .summary-orders-modal-search,
    #summaryPaymentsMethodModal .summary-orders-modal-search,
    #summaryPaymentMethodModal .summary-orders-modal-search {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-payments-method-modal .summary-orders-modal-search-input,
    .summary-payment-method-modal .summary-orders-modal-search-input,
    #summaryPaymentsMethodModal .summary-orders-modal-search-input,
    #summaryPaymentMethodModal .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .summary-payments-method-modal .summary-orders-mobile-list,
    .summary-payments-method-modal .mobile-summary-orders-list,
    .summary-payment-method-modal .summary-orders-mobile-list,
    .summary-payment-method-modal .mobile-summary-orders-list,
    #summaryPaymentsMethodModal .summary-orders-mobile-list,
    #summaryPaymentsMethodModal .mobile-summary-orders-list,
    #summaryPaymentMethodModal .summary-orders-mobile-list,
    #summaryPaymentMethodModal .mobile-summary-orders-list {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .summary-payments-method-modal .summary-orders-modal-search + .summary-orders-mobile-list,
    .summary-payments-method-modal .summary-orders-modal-search + .mobile-summary-orders-list,
    .summary-payment-method-modal .summary-orders-modal-search + .summary-orders-mobile-list,
    .summary-payment-method-modal .summary-orders-modal-search + .mobile-summary-orders-list,
    #summaryPaymentsMethodModal .summary-orders-modal-search + .summary-orders-mobile-list,
    #summaryPaymentsMethodModal .summary-orders-modal-search + .mobile-summary-orders-list,
    #summaryPaymentMethodModal .summary-orders-modal-search + .summary-orders-mobile-list,
    #summaryPaymentMethodModal .summary-orders-modal-search + .mobile-summary-orders-list {
        margin-top: 14px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      compactar solo card Resumen / Cierre del dia.
    */

    .summary-page .summary-filter-card {
        padding: 14px !important;
    }

    .summary-page .summary-filter-card .section-header,
    .summary-page .summary-filter-card .table-card-header {
        margin-bottom: 10px !important;
    }

    .summary-page .summary-filter-card .summary-closures-action,
    .summary-page .summary-filter-card .summary-view-closures-action,
    .summary-page .summary-filter-card .summary-other-closures-action {
        margin-bottom: 12px !important;
    }

    .summary-page .summary-filter-card .summary-filter-form,
    .summary-page .summary-filter-card form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .summary-page .summary-filter-card .form-group {
        margin: 0 !important;
    }

    .summary-page .summary-filter-card label {
        padding-top: 0 !important;
        margin: 0 0 6px !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-filter-card input,
    .summary-page .summary-filter-card select {
        min-height: 44px !important;
    }

    .summary-page .summary-filter-card .btn,
    .summary-page .summary-filter-card button {
        min-height: 44px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      compactar card real Resumen / Cierre del dia.
    */

    .summary-page .summary-header-card {
        padding: 14px !important;
    }

    .summary-page .summary-header-card .form {
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .summary-page .summary-header-card .summary-header-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .summary-header-filters .form-group {
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .summary-header-filters .form-group + .form-group {
        margin-top: 0 !important;
    }

    .summary-page .summary-header-card .summary-header-filters .form-group label {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-header-card .summary-header-filters input,
    .summary-page .summary-header-card .summary-header-filters select {
        margin: 0 !important;
        min-height: 44px !important;
    }

    .summary-page .summary-header-card .form-actions {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .form-actions .btn,
    .summary-page .summary-header-card .form-actions button,
    .summary-page .summary-header-card .form-actions a {
        margin: 0 !important;
        min-height: 44px !important;
    }

    .summary-page .summary-header-card .form-actions + .summary-header-filters {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      KPIs superiores estables.
      No usar grid-template-areas porque rompio el layout.
    */

    .summary-page .summary-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }

    .summary-page .summary-kpi-card {
        min-height: 124px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    .summary-page .summary-kpi-card > *,
    .summary-page .summary-kpi-card * {
        position: static !important;
        transform: none !important;
        grid-area: auto !important;
        max-width: 100% !important;
    }

    .summary-page .summary-kpi-card .summary-kpi-icon,
    .summary-page .summary-kpi-card .kpi-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 2px !important;
        flex: 0 0 auto !important;
    }

    .summary-page .summary-kpi-card h3,
    .summary-page .summary-kpi-card .summary-kpi-title,
    .summary-page .summary-kpi-card .kpi-title {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        color: #4A5899 !important;
        overflow-wrap: anywhere !important;
    }

    .summary-page .summary-kpi-card .summary-kpi-value,
    .summary-page .summary-kpi-card .kpi-value {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    .summary-page .summary-kpi-card p,
    .summary-page .summary-kpi-card .summary-kpi-description,
    .summary-page .summary-kpi-card .kpi-description {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        font-size: 0.74rem !important;
        line-height: 1.22 !important;
        font-weight: 400 !important;
        color: #6F6A80 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Botones secundarios compactos:
      Ver todas / Ver todo / Ver mas / Ver otros cierres.
    */

    .summary-page .summary-see-all-btn,
    .summary-page .summary-view-all-btn,
    .summary-page .summary-secondary-action-btn,
    .summary-page .summary-orders-card .btn-outline,
    .summary-page .summary-orders-card .btn-secondary,
    .summary-page .summary-closures-card .btn-outline,
    .summary-page .summary-closures-card .btn-secondary,
    .summary-page .summary-orders-block .secondary-top-action-btn,
    .summary-page .summary-header-card .secondary-top-action-btn,
    .summary-page .closures-section .secondary-top-action-btn,
    .summary-page .summary-block-header .secondary-top-action-btn {
        width: auto !important;
        min-width: 112px !important;
        max-width: 142px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 14px !important;
        border-radius: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .section-header,
    .summary-page .summary-orders-card .table-card-header,
    .summary-page .summary-closures-card .section-header,
    .summary-page .summary-closures-card .table-card-header,
    .summary-page .summary-orders-block .summary-block-header,
    .summary-page .summary-header-card .section-head,
    .summary-page .closures-section .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .summary-page .summary-orders-card .section-header h3,
    .summary-page .summary-orders-card .table-card-header h3,
    .summary-page .summary-closures-card .section-header h3,
    .summary-page .summary-closures-card .table-card-header h3,
    .summary-page .summary-orders-block .summary-block-header h3,
    .summary-page .summary-header-card .section-head h2,
    .summary-page .closures-section .table-card-header h3 {
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    .summary-page .summary-orders-card .section-header .btn,
    .summary-page .summary-orders-card .table-card-header .btn,
    .summary-page .summary-closures-card .section-header .btn,
    .summary-page .summary-closures-card .table-card-header .btn,
    .summary-page .summary-orders-block .summary-block-header .btn,
    .summary-page .summary-header-card .section-head .secondary-top-action-btn,
    .summary-page .closures-section .table-card-header .btn {
        justify-self: end !important;
        align-self: start !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Card Dia cerrado compacto.
    */

    .summary-page .summary-closed-day-card {
        padding: 16px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .summary-page .summary-closed-day-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;
        margin: 0 !important;
    }

    .summary-page .summary-closed-day-header h3 {
        margin: 0 0 4px !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-closed-day-header p {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-closed-day-badge {
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-closed-day-money-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .summary-page .summary-closed-day-money-item {
        min-height: 54px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.95) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page .summary-closed-day-money-item span {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    .summary-page .summary-closed-day-money-item strong {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-closed-day-money-item--balance.negative strong {
        color: #D71920 !important;
    }

    .summary-page .summary-closed-day-money-item--balance.positive strong {
        color: #067A3D !important;
    }

    .summary-page .summary-closed-day-date {
        min-height: 54px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page .summary-closed-day-date span {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    .summary-page .summary-closed-day-date strong {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Header del modal Detalle de la orden.
    */

    #summaryOrderDetailModal .summary-order-detail-header {
        min-height: 72px !important;
        height: 72px !important;
        padding: 0 12px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        gap: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    #summaryOrderDetailModal .summary-order-detail-header-spacer {
        grid-column: 1 !important;
        width: 42px !important;
        height: 42px !important;
    }

    #summaryOrderDetailModal .summary-order-detail-title-group {
        grid-column: 2 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .summary-order-detail-title-group .modal-title {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .summary-order-detail-code {
        min-height: 22px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryOrderDetailModal .summary-order-detail-header .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Lealtad en fila dentro del modal Detalle de la orden.
      Selector real confirmado:
      #summaryOrderDetailModal [data-summary-detail-field="loyalty"]
    */

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] {
        min-height: 60px !important;
        padding: 0 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: stretch !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > span,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > label,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] .summary-order-inline-label {
        grid-column: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        color: #10194a !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > strong {
        grid-column: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > strong:not(:has([data-summary-detail-pill])),
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] .summary-detail-pill,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] [data-summary-detail-pill] {
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border: 1px solid #FFE0A6 !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-transform: uppercase !important;
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: normal !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > strong::before,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] > strong::after,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] .summary-detail-pill::before,
    #summaryOrderDetailModal [data-summary-detail-field="loyalty"] .summary-detail-pill::after {
        content: none !important;
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Alinear Total del dia como label de las filas superiores.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        min-height: 70px !important;
        padding: 10px 14px !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: center !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        grid-column: 2 / 4 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label amount"
            "label pill" !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        grid-area: label !important;
        align-self: center !important;
        justify-self: start !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        grid-area: amount !important;
        justify-self: end !important;
        align-self: end !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #3151D3 !important;
        font-size: 1.9rem !important;
        line-height: 0.95 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        grid-area: pill !important;
        justify-self: end !important;
        align-self: start !important;

        margin: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - Cierres encontrados:
      compactar busqueda/resultados y dejar una sola estructura por card.
    */

    .summary-closures-search-card,
    .summary-page .summary-closures-search-card,
    .summary-page .closures-search-card {
        margin-bottom: 8px !important;
        padding-bottom: 14px !important;
    }

    .summary-closures-results-card,
    .summary-closures-found-card,
    .otros-cierres-section.summary-closures-results-card,
    .summary-page .summary-closures-results-card,
    .summary-page .closures-results-card,
    .summary-page .summary-closures-found-card {
        margin-top: 0 !important;
        padding-top: 16px !important;
    }

    .summary-closures-section,
    .summary-closures-wrapper,
    .summary-page .summary-closures-section,
    .summary-page .summary-closures-wrapper {
        gap: 10px !important;
    }

    .summary-closures-results-card .table-card-header,
    .summary-closures-results-card .section-header,
    .summary-closures-found-card .table-card-header,
    .summary-closures-found-card .section-header,
    .otros-cierres-section.summary-closures-results-card .table-card-header,
    .summary-page .summary-closures-results-card .section-header,
    .summary-page .closures-results-card .section-header,
    .summary-page .summary-closures-found-card .section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-closures-results-card .table-card-header h3,
    .summary-closures-results-card .section-header h2,
    .summary-closures-results-card .section-header h3,
    .summary-closures-found-card .table-card-header h3,
    .summary-closures-found-card .section-header h2,
    .summary-closures-found-card .section-header h3,
    .summary-page .summary-closures-results-card .section-header h2,
    .summary-page .closures-results-card .section-header h2,
    .summary-page .summary-closures-found-card .section-header h2 {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .summary-closures-results-card .table-card-header .btn,
    .summary-closures-results-card .section-header .btn,
    .summary-closures-found-card .table-card-header .btn,
    .summary-closures-found-card .section-header .btn,
    .summary-page .summary-closures-results-card .section-header .btn,
    .summary-page .closures-results-card .section-header .btn,
    .summary-page .summary-closures-found-card .section-header .btn {
        width: auto !important;
        min-width: 92px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-closures-results-card .closures-mobile-list,
    .summary-closures-results-card .summary-closures-results-grid,
    .summary-closures-results-card .closures-results-grid,
    .summary-closures-results-card .closures-found-grid,
    .summary-closures-found-card .closures-mobile-list,
    .summary-page .summary-closures-results-grid,
    .summary-page .closures-results-grid,
    .summary-page .closures-found-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-closures-results-card .summary-closure-card,
    .summary-closures-found-card .summary-closure-card,
    .otros-cierres-section .summary-closure-card,
    .summary-page .closure-result-card,
    .summary-page .summary-closure-card,
    .summary-page .closure-history-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.97) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
    }

    .summary-closures-results-card .summary-closure-card .mobile-card-top,
    .summary-closures-results-card .summary-closure-card .mobile-card-meta,
    .summary-closures-found-card .summary-closure-card .mobile-card-top,
    .summary-closures-found-card .summary-closure-card .mobile-card-meta,
    .otros-cierres-section .summary-closure-card .mobile-card-top,
    .otros-cierres-section .summary-closure-card .mobile-card-meta {
        display: none !important;
    }

    .summary-closures-results-card .summary-closure-card p,
    .summary-closures-found-card .summary-closure-card p,
    .summary-page .closure-result-card p,
    .summary-page .summary-closure-card p,
    .summary-page .closure-history-card p {
        margin: 0 !important;
    }

    .summary-closures-results-card .summary-closure-card-header,
    .summary-closures-found-card .summary-closure-card-header,
    .summary-page .closure-result-top,
    .summary-page .summary-closure-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .summary-closures-results-card .summary-closure-title,
    .summary-closures-found-card .summary-closure-title,
    .summary-page .closure-result-title,
    .summary-page .summary-closure-title {
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    .summary-closures-results-card .summary-closure-title i,
    .summary-closures-found-card .summary-closure-title i {
        flex: 0 0 auto !important;
        color: var(--primary) !important;
    }

    .summary-closures-results-card .summary-closure-meta,
    .summary-closures-found-card .summary-closure-meta,
    .summary-page .closure-result-meta,
    .summary-page .summary-closure-meta {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
        color: var(--text) !important;
        opacity: 0.8 !important;
    }

    .summary-closures-results-card .summary-closure-money-grid,
    .summary-closures-found-card .summary-closure-money-grid,
    .summary-page .closure-result-stats,
    .summary-page .summary-closure-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .summary-closures-results-card .summary-closure-money-item,
    .summary-closures-found-card .summary-closure-money-item,
    .summary-page .closure-stat {
        min-height: 62px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.75) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .summary-closures-results-card .summary-closure-money-item span,
    .summary-closures-found-card .summary-closure-money-item span,
    .summary-page .closure-stat span {
        margin: 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
        color: #7A768A !important;
    }

    .summary-closures-results-card .summary-closure-money-item strong,
    .summary-closures-found-card .summary-closure-money-item strong,
    .summary-page .closure-stat strong {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: #10194A !important;
    }

    .summary-closures-results-card .summary-closure-money-result.is-positive strong,
    .summary-closures-found-card .summary-closure-money-result.is-positive strong {
        color: #006B3A !important;
    }

    .summary-closures-results-card .summary-closure-money-result.is-negative strong,
    .summary-closures-found-card .summary-closure-money-result.is-negative strong,
    .summary-page .closure-stat--result strong {
        color: #C62828 !important;
    }

    .summary-closures-results-card .summary-closure-detail-btn,
    .summary-closures-found-card .summary-closure-detail-btn,
    .summary-page .closure-result-card .btn,
    .summary-page .summary-closure-card .btn,
    .summary-page .closure-history-card .btn {
        width: 100% !important;
        min-height: 42px !important;
        margin-top: 2px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final real:
      Ordenes ingresadas / entregadas como preview compacto.
    */

    .summary-page.summary-page-redesigned .summary-ledger-grid,
    .summary-page.summary-page-redesigned .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page.summary-page-redesigned .summary-ledger-grid > .content-card,
    .summary-page.summary-page-redesigned .summary-ledger-grid--two-columns > .content-card,
    .summary-page.summary-page-redesigned .summary-orders-block,
    .summary-page.summary-page-redesigned .summary-orders-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header,
    .summary-page.summary-page-redesigned .summary-orders-block .section-header,
    .summary-page.summary-page-redesigned .summary-orders-block .table-card-header,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-title-group,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-block-title-group {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .section-title,
    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header h2,
    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header h3,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header h2,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header h3,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header h2,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .section-subtitle,
    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header p,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header p,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header .btn,
    .summary-page.summary-page-redesigned .summary-orders-block .secondary-top-action-btn,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header .btn,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header .btn,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-see-all-btn,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-view-all-btn {
        width: auto !important;
        min-width: 104px !important;
        max-width: 124px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 13px !important;
        justify-self: end !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-orders-mobile-list,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-orders-list,
    .summary-page.summary-page-redesigned .summary-orders-block .summary-orders-list,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-orders-mobile-list,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-orders-list,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-card,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-card {
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-top,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-main,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-main {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-side,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-side {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-code-pill,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-code-pill,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-code {
        justify-self: start !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-status,
    .summary-page.summary-page-redesigned .summary-orders-card .status-pill {
        justify-self: end !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status.pending,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status.pending {
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border: 1px solid #FFE0A6 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status.done,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status.cancelled,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status.done,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status.cancelled {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-client,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-client,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-client {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-payment-pill,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-payment-pill,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-payment,
    .summary-page.summary-page-redesigned .summary-orders-card .payment-pill {
        justify-self: end !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: #DDFBEA !important;
        color: #087A3F !important;
        border: 1px solid #B8F2D0 !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-payment-pill i,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-payment-pill i,
    .summary-page.summary-page-redesigned .summary-orders-card .payment-pill i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-metrics,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-metric,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric span,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-metric span,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric span,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-metric span {
        margin: 0 !important;
        padding: 0 !important;
        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric strong,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-metric strong,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric strong,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-metric strong {
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric.danger strong,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric.danger strong {
        color: #D71920 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric.success strong,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric.success strong {
        color: #009B55 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-detail-btn,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-detail-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin-top: 2px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-detail-btn i,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-detail-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-card > i.fa-chevron-right,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-card > i.fa-chevron-right {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Compactar cards Gastos del dia y Balance del dia.
    */

    .summary-page .summary-expenses-day-card,
    .summary-page .summary-day-balance-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .summary-page .summary-expenses-day-card .summary-block-header,
    .summary-page .summary-expenses-day-card .section-header,
    .summary-page .summary-expenses-day-card .table-card-header,
    .summary-page .summary-day-balance-card .summary-block-header,
    .summary-page .summary-day-balance-card .section-header,
    .summary-page .summary-day-balance-card .table-card-header {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-expenses-day-card h2,
    .summary-page .summary-expenses-day-card h3,
    .summary-page .summary-day-balance-card h2,
    .summary-page .summary-day-balance-card h3 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-expenses-day-card p,
    .summary-page .summary-expenses-day-card .section-subtitle,
    .summary-page .summary-day-balance-card p,
    .summary-page .summary-day-balance-card .section-subtitle {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-expenses-day-card .mobile-expenses-list,
    .summary-page .summary-expenses-day-card .summary-expenses-list {
        margin-bottom: 10px !important;
    }

    .summary-page .summary-expenses-day-card .summary-total-box--expense,
    .summary-page .summary-expenses-day-card .mobile-expense-total-card,
    .summary-page .summary-expenses-day-card .summary-expense-total-card,
    .summary-page .summary-expenses-day-card .summary-total-expenses-card,
    .summary-page .summary-expenses-day-card .expense-total-card {
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        min-height: 74px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page .summary-expenses-day-card .summary-total-box--expense {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .summary-page .summary-expenses-day-card .mobile-expense-total-icon,
    .summary-page .summary-expenses-day-card .summary-expense-total-card .icon,
    .summary-page .summary-expenses-day-card .summary-total-expenses-card .icon,
    .summary-page .summary-expenses-day-card .expense-total-card .icon,
    .summary-page .summary-expenses-day-card .summary-expense-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
    }

    .summary-page .summary-expenses-day-card .summary-total-box--expense span,
    .summary-page .summary-expenses-day-card .mobile-expense-total-info span,
    .summary-page .summary-expenses-day-card .summary-expense-total-card span,
    .summary-page .summary-expenses-day-card .summary-total-expenses-card span,
    .summary-page .summary-expenses-day-card .expense-total-card span {
        margin: 0 0 4px !important;
        line-height: 1.1 !important;
    }

    .summary-page .summary-expenses-day-card .summary-total-box--expense strong,
    .summary-page .summary-expenses-day-card .mobile-expense-total-info strong,
    .summary-page .summary-expenses-day-card .summary-expense-total-card strong,
    .summary-page .summary-expenses-day-card .summary-total-expenses-card strong,
    .summary-page .summary-expenses-day-card .expense-total-card strong {
        margin: 0 !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-expenses-day-card .summary-expense-note {
        margin-top: 10px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-card,
    .summary-page .summary-day-balance-card .mobile-balance-card[hidden] {
        padding: 0 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-header {
        margin-bottom: 12px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-header h3 {
        margin: 0 0 4px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-header p {
        margin: 0 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-list,
    .summary-page .summary-day-balance-card .summary-balance-list,
    .summary-page .summary-day-balance-card .summary-balance-rows,
    .summary-page .summary-day-balance-card .balance-list,
    .summary-page .summary-day-balance-card .balance-rows {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-row,
    .summary-page .summary-day-balance-card .summary-balance-row,
    .summary-page .summary-day-balance-card .balance-row {
        min-height: 46px !important;
        padding: 8px 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-row-left {
        gap: 10px !important;
        min-width: 0 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-row span,
    .summary-page .summary-day-balance-card .summary-balance-row span,
    .summary-page .summary-day-balance-card .balance-row span {
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-row strong,
    .summary-page .summary-day-balance-card .summary-balance-row strong,
    .summary-page .summary-day-balance-card .balance-row strong {
        margin: 0 !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-day-balance-card hr,
    .summary-page .summary-day-balance-card .summary-balance-divider,
    .summary-page .summary-day-balance-card .balance-divider {
        margin: 6px 0 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-total-card,
    .summary-page .summary-day-balance-card .summary-balance-total,
    .summary-page .summary-day-balance-card .summary-total-day-card,
    .summary-page .summary-day-balance-card .balance-total-card {
        margin-top: 10px !important;
        min-height: 92px !important;
        padding: 14px 12px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-total-content {
        gap: 6px !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page .summary-day-balance-card .summary-balance-total span,
    .summary-page .summary-day-balance-card .summary-total-day-card span,
    .summary-page .summary-day-balance-card .balance-total-card span {
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page .summary-day-balance-card .summary-balance-total strong,
    .summary-page .summary-day-balance-card .summary-total-day-card strong,
    .summary-page .summary-day-balance-card .balance-total-card strong {
        margin: 0 !important;
        font-size: 1.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page .summary-day-balance-card .summary-balance-result-pill,
    .summary-page .summary-day-balance-card .balance-result-pill,
    .summary-page .summary-day-balance-card .result-pill {
        margin: 0 !important;
        min-height: 26px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Ocultar card antiguo duplicado de Total de gastos.
      Mantener solo el card con icono.
    */

    .summary-page .summary-expense-total-legacy-card {
        display: none !important;
    }

    .summary-page .summary-expenses-day-card,
    .summary-page .summary-expenses-card,
    .summary-page .summary-expenses-section {
        padding-top: 14px !important;
    }

    .summary-page .summary-expenses-day-card .summary-block-header,
    .summary-page .summary-expenses-day-card .section-header,
    .summary-page .summary-expenses-card .summary-block-header,
    .summary-page .summary-expenses-card .section-header,
    .summary-page .summary-expenses-section .section-header {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-expenses-day-card h2,
    .summary-page .summary-expenses-day-card h3,
    .summary-page .summary-expenses-card h2,
    .summary-page .summary-expenses-card h3,
    .summary-page .summary-expenses-section h2,
    .summary-page .summary-expenses-section h3 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-expenses-day-card p,
    .summary-page .summary-expenses-day-card .section-subtitle,
    .summary-page .summary-expenses-card p,
    .summary-page .summary-expenses-card .section-subtitle,
    .summary-page .summary-expenses-section p,
    .summary-page .summary-expenses-section .section-subtitle {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-expenses-day-card .mobile-expense-total-card,
    .summary-page .summary-expenses-card .mobile-expense-total-card,
    .summary-page .summary-expenses-section .mobile-expense-total-card {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        min-height: 74px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .summary-page .summary-day-balance-card,
    .summary-page .summary-balance-card,
    .summary-page .summary-balance-section {
        padding-top: 14px !important;
    }

    .summary-page .summary-day-balance-card .summary-block-header,
    .summary-page .summary-day-balance-card .section-header,
    .summary-page .summary-balance-card .section-header,
    .summary-page .summary-balance-section .section-header {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-day-balance-card h2,
    .summary-page .summary-day-balance-card h3,
    .summary-page .summary-balance-card h2,
    .summary-page .summary-balance-card h3,
    .summary-page .summary-balance-section h2,
    .summary-page .summary-balance-section h3 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-day-balance-card p,
    .summary-page .summary-day-balance-card .section-subtitle,
    .summary-page .summary-balance-card p,
    .summary-page .summary-balance-card .section-subtitle,
    .summary-page .summary-balance-section p,
    .summary-page .summary-balance-section .section-subtitle {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-day-balance-card .mobile-balance-list,
    .summary-page .summary-day-balance-card .summary-balance-list,
    .summary-page .summary-day-balance-card .summary-balance-rows,
    .summary-page .summary-day-balance-card .balance-list,
    .summary-page .summary-day-balance-card .balance-rows,
    .summary-page .summary-balance-card .summary-balance-list,
    .summary-page .summary-balance-card .summary-balance-rows,
    .summary-page .summary-balance-card .balance-list,
    .summary-page .summary-balance-card .balance-rows,
    .summary-page .summary-balance-section .summary-balance-list,
    .summary-page .summary-balance-section .summary-balance-rows,
    .summary-page .summary-balance-section .balance-list,
    .summary-page .summary-balance-section .balance-rows {
        margin-top: 10px !important;
    }

    .summary-page .summary-day-balance-card hr,
    .summary-page .summary-day-balance-card .summary-balance-divider,
    .summary-page .summary-day-balance-card .balance-divider,
    .summary-page .summary-balance-card hr,
    .summary-page .summary-balance-card .summary-balance-divider,
    .summary-page .summary-balance-card .balance-divider,
    .summary-page .summary-balance-section hr,
    .summary-page .summary-balance-section .summary-balance-divider,
    .summary-page .summary-balance-section .balance-divider {
        margin: 8px 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Fix real: eliminar del flujo el total legado sin icono.
      En mobile .tablet-card-hide no siempre oculta, por eso usamos atributo propio.
    */

    html body .summary-page.summary-page-redesigned .summary-expenses-day-card > .summary-expense-total-legacy-card[data-summary-expense-total-legacy],
    html body .summary-page .summary-expenses-card > .summary-total-box--expense.summary-expense-total-legacy-card[data-summary-expense-total-legacy],
    html body .summary-page .summary-expenses-day-card > .summary-total-box--expense.tablet-card-hide[data-summary-expense-total-legacy] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    html body .summary-page .summary-expenses-day-card .summary-block-header {
        margin-bottom: 6px !important;
        padding-bottom: 0 !important;
    }

    html body .summary-page .summary-expenses-day-card .summary-block-title-group {
        gap: 3px !important;
    }

    html body .summary-page .summary-expenses-day-card .summary-block-title-group h3,
    html body .summary-page .summary-expenses-day-card .section-title {
        margin-bottom: 3px !important;
        line-height: 1.12 !important;
    }

    html body .summary-page .summary-expenses-day-card .summary-block-title-group p,
    html body .summary-page .summary-expenses-day-card .section-subtitle {
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    html body .summary-page .summary-expenses-day-card .mobile-expense-total-card {
        margin-top: 8px !important;
        min-height: 70px !important;
        padding: 11px 12px !important;
    }

    html body .summary-page .summary-day-balance-card .summary-block-header {
        margin-bottom: 6px !important;
        padding-bottom: 0 !important;
    }

    html body .summary-page .summary-day-balance-card .mobile-balance-header {
        margin-bottom: 8px !important;
    }

    html body .summary-page .summary-day-balance-card .mobile-balance-list {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        gap: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Card Resumen operativo del dia.
    */

    .summary-page .summary-operational-day-card {
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .summary-page .summary-operational-day-card .summary-block-header,
    .summary-page .summary-operational-day-card .section-header,
    .summary-page .summary-operational-day-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-operational-day-card .summary-block-title-group {
        min-width: 0 !important;
        gap: 4px !important;
    }

    .summary-page .summary-operational-day-card .section-header h2,
    .summary-page .summary-operational-day-card .section-header h3,
    .summary-page .summary-operational-day-card .summary-block-header h2,
    .summary-page .summary-operational-day-card .summary-block-header h3,
    .summary-page .summary-operational-day-card .table-card-header h2,
    .summary-page .summary-operational-day-card .table-card-header h3 {
        margin: 0 0 4px !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-operational-day-card .section-header p,
    .summary-page .summary-operational-day-card .summary-block-header p,
    .summary-page .summary-operational-day-card .section-subtitle,
    .summary-page .summary-operational-day-card .table-card-header p {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-badge,
    .summary-page .summary-operational-day-card .status-badge,
    .summary-page .summary-operational-day-card .summary-status-badge,
    .summary-page .summary-operational-day-card .cash-status-badge {
        justify-self: end !important;
        align-self: start !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-operational-metrics-grid,
    .summary-page .summary-operational-day-card .summary-operational-kpis,
    .summary-page .summary-operational-day-card .summary-cash-metrics-grid,
    .summary-page .summary-operational-day-card .cash-metrics-grid,
    .summary-page .summary-operational-day-card .summary-operational-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-operational-metric-card,
    .summary-page .summary-operational-day-card .summary-operational-kpi,
    .summary-page .summary-operational-day-card .summary-cash-metric,
    .summary-page .summary-operational-day-card .cash-metric-card,
    .summary-page .summary-operational-day-card .operational-metric-card {
        min-height: 82px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .summary-page .summary-operational-metric-card span,
    .summary-page .summary-operational-metric-card small,
    .summary-page .summary-operational-day-card .summary-operational-kpi span,
    .summary-page .summary-operational-day-card .summary-cash-metric span,
    .summary-page .summary-operational-day-card .cash-metric-card span,
    .summary-page .summary-operational-day-card .operational-metric-card span {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F5878 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
        max-width: 100% !important;
    }

    .summary-page .summary-operational-metric-card strong,
    .summary-page .summary-operational-day-card .summary-operational-kpi strong,
    .summary-page .summary-operational-day-card .summary-cash-metric strong,
    .summary-page .summary-operational-day-card .cash-metric-card strong,
    .summary-page .summary-operational-day-card .operational-metric-card strong {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-operational-status-card,
    .summary-page .summary-operational-day-card .summary-operational-status,
    .summary-page .summary-operational-day-card .cash-ready-card,
    .summary-page .summary-operational-day-card .summary-cash-ready-card,
    .summary-page .summary-operational-day-card .operational-status-card {
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        background: linear-gradient(135deg, #E9FFF1 0%, #DDFBEA 100%) !important;
        border: 1px solid #B8F2D0 !important;
        margin: 0 !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-status-icon,
    .summary-page .summary-operational-status-card .status-icon,
    .summary-page .summary-operational-day-card .cash-ready-icon,
    .summary-page .summary-operational-day-card .summary-cash-ready-icon,
    .summary-page .summary-operational-day-card .operational-status-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        color: #08A64B !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-status-copy {
        min-width: 0 !important;
    }

    .summary-page .summary-operational-status-card h4,
    .summary-page .summary-operational-status-card strong,
    .summary-page .summary-operational-day-card .cash-ready-card h4,
    .summary-page .summary-operational-day-card .summary-cash-ready-card h4,
    .summary-page .summary-operational-day-card .operational-status-card h4 {
        margin: 0 0 4px !important;
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-operational-status-card p,
    .summary-page .summary-operational-status-card span,
    .summary-page .summary-operational-day-card .cash-ready-card p,
    .summary-page .summary-operational-day-card .summary-cash-ready-card p,
    .summary-page .summary-operational-day-card .operational-status-card p {
        margin: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-status-detail,
    .summary-page .summary-operational-status-card .cash-detail-lines,
    .summary-page .summary-operational-day-card .cash-ready-lines,
    .summary-page .summary-operational-day-card .summary-cash-ready-lines {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        margin: 0 !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-status-action {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
    }

    .summary-page .summary-operational-movements-btn,
    .summary-page .summary-operational-day-card .cash-ready-card .btn,
    .summary-page .summary-operational-day-card .summary-cash-ready-card .btn,
    .summary-page .summary-operational-day-card .operational-status-card .btn {
        width: 100% !important;
        min-height: 40px !important;
        margin: 2px 0 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .summary-page .summary-operational-day-card .cash-box-actions-row {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    .summary-page .summary-close-day-btn,
    .summary-page .summary-operational-day-card .close-day-btn,
    .summary-page .summary-operational-day-card .cash-box-actions-row button[type="submit"] {
        width: 100% !important;
        min-height: 46px !important;
        margin-top: 10px !important;
        border-radius: 14px !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Ocultar solo el Cerrar dia duplicado dentro de Resumen operativo.
      El boton principal de .summary-closing-actions queda visible.
    */

    .summary-page .summary-operational-day-card .cash-box-actions-row .summary-close-day-btn--duplicate-mobile {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Ocultar solo el boton rosado + Registrar movimiento de caja
      dentro de Resumen operativo.
    */

    .summary-page .summary-operational-day-card .summary-operational-cash-movement-duplicate {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Mejorar bloque verde Caja operativa lista con selectores reales.
    */

    .summary-page .summary-operational-day-card .summary-operational-status-card {
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        background: linear-gradient(135deg, #E9FFF1 0%, #DDFBEA 100%) !important;
        border: 1px solid #B8F2D0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        color: #08A64B !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: 0 8px 18px rgba(8, 166, 75, 0.12) !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-copy {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        align-self: center !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-copy strong {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.96rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-copy span {
        margin: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.8rem !important;
        line-height: 1.28 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-detail {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-detail span {
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        border: 1px solid rgba(184, 242, 208, 0.82) !important;
        background: rgba(255, 255, 255, 0.76) !important;
        color: #3F6650 !important;
        font-size: 0.74rem !important;
        line-height: 1.12 !important;
        font-weight: 600 !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        color: var(--white) !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn i,
    .summary-page .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn span {
        flex: 0 0 auto !important;
        margin: 0 !important;
        color: inherit !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Corregir boton visible dentro de Caja operativa lista.
    */

    .summary-page .summary-operational-day-card .cash-ready-card .btn,
    .summary-page .summary-operational-day-card .summary-cash-ready-card .btn,
    .summary-page .summary-operational-day-card .operational-status-card .btn,
    .summary-page .summary-operational-status-card .btn,
    .summary-page .summary-operational-movements-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 10px 0 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }

    .summary-page .summary-operational-day-card .cash-ready-card .btn *,
    .summary-page .summary-operational-day-card .summary-cash-ready-card .btn *,
    .summary-page .summary-operational-day-card .operational-status-card .btn *,
    .summary-page .summary-operational-status-card .btn *,
    .summary-page .summary-operational-movements-btn * {
        color: var(--primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page .summary-operational-day-card .cash-ready-card .btn i,
    .summary-page .summary-operational-day-card .summary-cash-ready-card .btn i,
    .summary-page .summary-operational-day-card .operational-status-card .btn i,
    .summary-page .summary-operational-status-card .btn i,
    .summary-page .summary-operational-movements-btn i {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        border-radius: 999px !important;
        background: var(--primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-operational-day-card .cash-ready-card .btn span,
    .summary-page .summary-operational-day-card .summary-cash-ready-card .btn span,
    .summary-page .summary-operational-day-card .operational-status-card .btn span,
    .summary-page .summary-operational-status-card .btn span,
    .summary-page .summary-operational-movements-btn span {
        display: inline !important;
        color: var(--primary) !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: 700 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Boton visible dentro de Caja operativa lista.
      Selector real confirmado: .summary-operational-movements-btn
    */

    .summary-page .summary-operational-day-card .summary-operational-movements-btn,
    .summary-page .summary-operational-status-card .summary-operational-movements-btn,
    .summary-page a.summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 10px 0 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-movements-btn span,
    .summary-page .summary-operational-status-card .summary-operational-movements-btn span,
    .summary-page a.summary-operational-movements-btn span {
        display: inline-flex !important;
        align-items: center !important;
        max-width: calc(100% - 28px) !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-movements-btn i,
    .summary-page .summary-operational-status-card .summary-operational-movements-btn i,
    .summary-page a.summary-operational-movements-btn i {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: var(--primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page .summary-operational-movements-btn.btn-secondary,
    .summary-page .summary-operational-movements-btn.btn-secondary span {
        color: var(--primary) !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Override definitivo: igualar la especificidad del boton real
      dentro de .summary-operational-status-action.
    */

    .summary-page .summary-operational-day-card .summary-operational-status-action a.summary-operational-movements-btn,
    .summary-page .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn.btn-secondary,
    .summary-page .summary-operational-status-card .summary-operational-status-action a.summary-operational-movements-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 10px 0 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-action a.summary-operational-movements-btn span,
    .summary-page .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn.btn-secondary span,
    .summary-page .summary-operational-status-card .summary-operational-status-action a.summary-operational-movements-btn span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: calc(100% - 28px) !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-action a.summary-operational-movements-btn i,
    .summary-page .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn.btn-secondary i,
    .summary-page .summary-operational-status-card .summary-operational-status-action a.summary-operational-movements-btn i {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: var(--primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/*
  /summary -
  UI unificado para boton Ver movimientos completos en Gastos.
  Debe verse igual en mobile, tablet y desktop.
*/

.summary-page .summary-operational-movements-btn,
.summary-page .summary-operational-status-action .summary-operational-movements-btn,
.summary-page a.summary-operational-movements-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 10px 0 0 !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(74, 88, 153, 0.28) !important;
    background: #FFFFFF !important;
    background-image: none !important;
    color: var(--primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
}

.summary-page .summary-operational-movements-btn span,
.summary-page .summary-operational-status-action .summary-operational-movements-btn span,
.summary-page a.summary-operational-movements-btn span {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
}

.summary-page .summary-operational-movements-btn i,
.summary-page .summary-operational-status-action .summary-operational-movements-btn i,
.summary-page a.summary-operational-movements-btn i {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--primary) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.summary-page .summary-operational-movements-btn.btn-secondary,
.summary-page .summary-operational-movements-btn.btn-secondary span {
    color: var(--primary) !important;
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Hacer que el wrapper del boton ocupe todo el ancho real
      del bloque Caja operativa lista.
    */

    .summary-page .summary-operational-status-card .summary-operational-status-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-status-action a.summary-operational-movements-btn,
    .summary-page .summary-operational-status-card a.summary-operational-movements-btn,
    .summary-page a.summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-movements-btn span {
        display: inline-flex !important;
        align-items: center !important;
        color: var(--primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-movements-btn i {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: var(--primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.summary-page .summary-operational-movements-btn i {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: none !important;
    background: var(--primary) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
}

.summary-page .summary-operational-movements-btn i::before {
    color: #FFFFFF !important;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Reducir espacio entre chips de caja y boton.
    */

    .summary-page .summary-operational-status-card .summary-operational-status-detail {
        margin-bottom: 4px !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-status-action {
        margin-top: 4px !important;
    }

    .summary-page .summary-operational-status-card .summary-operational-movements-btn {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Compactar realmente la separacion entre chips de caja y boton.
      El espacio venia tambien del gap del grid del card verde.
    */

    .summary-page .summary-operational-day-card .summary-operational-status-card {
        column-gap: 12px !important;
        row-gap: 6px !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-card .summary-operational-status-detail {
        margin: 0 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-card .summary-operational-status-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-status-card .summary-operational-status-action a.summary-operational-movements-btn,
    .summary-page .summary-operational-day-card .summary-operational-status-card a.summary-operational-movements-btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Compactar bloque Movimientos recientes dentro de Resumen operativo.
    */

    .summary-page .summary-operational-day-card .summary-operational-movements,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements {
        margin-top: 6px !important;
        padding-top: 6px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-movements .cash-box-movements-header,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header {
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-movements .cash-box-movements-header strong,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header strong,
    .summary-page .summary-operational-movements h3,
    .summary-page .cash-box-movements.summary-operational-movements h3 {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-movements .cash-box-empty-copy,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-empty-copy,
    .summary-page .summary-operational-movements > p,
    .summary-page .cash-box-movements.summary-operational-movements > p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-movements .cash-box-movements-list,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-list {
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-weekly,
    .summary-page .summary-operational-day-card .summary-operational-movements + .summary-operational-weekly,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements + .summary-operational-weekly {
        margin-top: 8px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Ajuste real de separacion: el espacio entre Movimientos recientes
      y Efectivo libre acumulado venia del gap del grid padre.
    */

    .summary-page .summary-operational-day-card {
        row-gap: 8px !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements {
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
        border-top: 0 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements-header {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements-header strong {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-empty-copy.helper-text,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements > .cash-box-empty-copy {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements + .summary-operational-weekly {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Compactar SOLO el espacio entre titulo Movimientos recientes
      y el texto de estado vacio.
    */

    .summary-page .cash-box-movements.summary-operational-movements,
    .summary-page .summary-operational-movements {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 4px !important;
        margin-top: 14px !important;
        padding-top: 12px !important;
    }

    .summary-page .cash-box-movements.summary-operational-movements .cash-box-movements-header,
    .summary-page .summary-operational-movements .cash-box-movements-header {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    .summary-page .cash-box-movements.summary-operational-movements .cash-box-movements-header strong,
    .summary-page .summary-operational-movements .cash-box-movements-header strong,
    .summary-page .cash-box-movements.summary-operational-movements h3,
    .summary-page .summary-operational-movements h3 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15 !important;
    }

    .summary-page .cash-box-movements.summary-operational-movements > p,
    .summary-page .summary-operational-movements > p,
    .summary-page .cash-box-movements.summary-operational-movements > .cash-box-empty-copy,
    .summary-page .summary-operational-movements > .cash-box-empty-copy {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .cash-box-movements.summary-operational-movements + .summary-operational-weekly,
    .summary-page .summary-operational-movements + .summary-operational-weekly {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Titulo especifico Movimientos recientes.
      No tocar strong global.
    */

    .summary-page .summary-operational-day-card .summary-operational-movements-title {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        font-size: 1rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements-header {
        margin: 0 0 4px !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements-header + .cash-box-empty-copy,
    .summary-page .summary-operational-day-card .cash-box-movements-header + p {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Compactar header real de Movimientos recientes.
      El problema viene del tooltip inline.
    */

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements {
        margin-top: 12px !important;
        padding-top: 12px !important;
        row-gap: 4px !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header {
        margin: 0 0 4px !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header strong,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .summary-operational-movements-title {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 1rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header .field-help-tooltip,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header .summary-info-tooltip {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        border-radius: 999px !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header .field-help-tooltip i,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-movements-header .summary-info-tooltip i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements .cash-box-empty-copy,
    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements > p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-operational-day-card .cash-box-movements.summary-operational-movements + .summary-operational-weekly {
        margin-top: 12px !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Compactar solo card TOTAL ACUMULADO.
    */

    .summary-page .summary-weekly-total-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .summary-page .summary-weekly-total-card span,
    .summary-page .summary-weekly-total-card small,
    .summary-page .summary-weekly-total-card .summary-weekly-total-label {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

    .summary-page .summary-weekly-total-card strong,
    .summary-page .summary-weekly-total-card .summary-weekly-total-value {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-weekly-total-card p,
    .summary-page .summary-weekly-total-card .summary-weekly-total-description {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-operational-weekly .summary-weekly-total-card {
        min-height: 124px !important;
        max-height: none !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Reducir espacio final sobre bottom nav.
      Mantener solo aire seguro de 16px + altura del nav.
    */

    body.summary-mobile-tab-records .summary-page,
    body.summary-mobile-tab-register .summary-page,
    .summary-page.summary-page-redesigned,
    .summary-page .page-section,
    .summary-page .page-content,
    .summary-page .content-area {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page .summary-page-shell,
    .summary-page .page-shell,
    .summary-page .summary-content,
    .summary-page .summary-sections,
    .summary-page .summary-grid {
        margin-bottom: 0 !important;
    }

    .summary-page .summary-operational-day-card:last-child,
    .summary-page .content-card:last-child,
    .summary-page section.card:last-child {
        margin-bottom: 16px !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .summary-actions,
    .summary-page .form-actions:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Evitar doble padding inferior.
      El espacio seguro vive en .content-area.page-content,
      no se repite dentro de .summary-page.
    */

    body.summary-mobile-tab-records .summary-page.summary-page-redesigned,
    body.summary-mobile-tab-register .summary-page.summary-page-redesigned,
    .summary-page.summary-page-redesigned {
        padding-bottom: 16px !important;
        margin-bottom: 0 !important;
    }

    body.summary-mobile-tab-records .content-area,
    body.summary-mobile-tab-records .page-content,
    body.summary-mobile-tab-register .content-area,
    body.summary-mobile-tab-register .page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area,
    body:has(.summary-page.summary-page-redesigned) .page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area.page-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card,
    .summary-page.summary-page-redesigned .summary-page-shell,
    .summary-page.summary-page-redesigned .summary-grid,
    .summary-page.summary-page-redesigned .summary-content {
        margin-bottom: 0 !important;
    }

    .summary-page.summary-page-redesigned > :last-child,
    .summary-page.summary-page-redesigned section:last-child,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Corregir espacio final real.
      DevTools confirmo que el espacio viene de .content-area / .page-content.
    */

    body:has(.summary-page.summary-page-redesigned) .content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area,
    body:has(.summary-page.summary-page-redesigned) .page-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.summary-mobile-tab-records .content-area.page-content,
    body.summary-mobile-tab-register .content-area.page-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page.summary-page-redesigned {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .summary-page.summary-page-redesigned > :last-child,
    .summary-page.summary-page-redesigned section:last-child,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Layout general tipo tablet, no mobile estirado.
    */

    .summary-page.summary-page-redesigned {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page .summary-header-card {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .summary-page .summary-header-card .section-head,
    .summary-page .summary-header-card .summary-header-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .summary-page .summary-header-card form,
    .summary-page .summary-header-card .summary-header-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: end !important;
    }

    .summary-page .summary-header-card .form-actions {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .form-actions .btn,
    .summary-page .summary-header-card .form-actions button {
        width: 100% !important;
        min-height: 44px !important;
    }

    .summary-page .summary-header-card label {
        padding-top: 0 !important;
        margin: 0 0 6px !important;
    }

    .summary-page .summary-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .summary-page .summary-kpi-card {
        min-height: 112px !important;
        padding: 16px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-ledger-grid .content-card,
    .summary-page .summary-ledger-grid--two-columns .content-card {
        min-width: 0 !important;
        height: 100% !important;
    }

    .summary-page .mobile-summary-order-card {
        padding: 14px !important;
        border-radius: 16px !important;
        row-gap: 10px !important;
    }

    .summary-page .mobile-summary-order-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .summary-page .mobile-summary-order-detail-btn {
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 10px !important;
    }

    .summary-page .summary-finance-grid,
    .summary-page .summary-two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-finance-grid .content-card,
    .summary-page .summary-two-columns .content-card {
        min-width: 0 !important;
        height: 100% !important;
    }

    .summary-page .summary-day-balance-card,
    .summary-page .summary-balance-strip-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page .summary-operational-card,
    .summary-page .summary-operational-day-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page .summary-operational-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .summary-page .summary-operational-metric-card {
        min-height: 84px !important;
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .summary-page .summary-operational-status-card {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .summary-page .summary-operational-status-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .summary-page .summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
    }

    .summary-page .summary-operational-weekly {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .summary-page .summary-operational-weekly-grid,
    .summary-page .summary-weekly-days-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .summary-page .summary-weekly-total-card {
        min-height: 110px !important;
        padding: 16px !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .summary-actions {
        margin-top: 14px !important;
    }

    .summary-page .summary-closing-actions .btn,
    .summary-page .summary-actions .btn {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Corregir grids, alturas y Balance del dia.
    */

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-ledger-grid > .content-card,
    .summary-page .summary-ledger-grid--two-columns > .content-card,
    .summary-page .summary-ledger-grid .summary-orders-card,
    .summary-page .summary-ledger-grid--two-columns .summary-orders-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .summary-page .summary-finance-grid,
    .summary-page .summary-two-columns,
    .summary-page .summary-two-columns.summary-finance-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-finance-grid > .content-card,
    .summary-page .summary-two-columns > .content-card,
    .summary-page .summary-finance-grid .content-card,
    .summary-page .summary-two-columns .content-card {
        min-width: 0 !important;
        height: auto !important;
        align-self: start !important;
    }

    .summary-page .summary-payment-methods-card,
    .summary-page .summary-cobros-card,
    .summary-page .summary-expenses-day-card,
    .summary-page .summary-expenses-card {
        min-width: 0 !important;
        height: auto !important;
    }

    .summary-page .summary-day-balance-card,
    .summary-page .summary-balance-strip-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page .summary-day-balance-card .section-header,
    .summary-page .summary-day-balance-card .table-card-header,
    .summary-page .summary-balance-strip-card .section-header,
    .summary-page .summary-balance-strip-card .table-card-header {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-day-balance-card .section-header h2,
    .summary-page .summary-day-balance-card .section-header h3,
    .summary-page .summary-balance-strip-card .section-header h2,
    .summary-page .summary-balance-strip-card .section-header h3 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
    }

    .summary-page .summary-day-balance-card .section-subtitle,
    .summary-page .summary-day-balance-card .section-header p,
    .summary-page .summary-balance-strip-card .section-subtitle,
    .summary-page .summary-balance-strip-card .section-header p {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-day-balance-card .summary-balance-inner-title,
    .summary-page .summary-balance-strip-card .summary-balance-inner-title,
    .summary-page .summary-day-balance-card .balance-inner-title,
    .summary-page .summary-balance-strip-card .balance-inner-title {
        display: none !important;
    }

    .summary-page .summary-day-balance-card .summary-balance-rows,
    .summary-page .summary-day-balance-card .balance-rows,
    .summary-page .summary-balance-strip-card .summary-balance-rows,
    .summary-page .summary-balance-strip-card .balance-rows {
        margin-top: 12px !important;
    }

    .summary-page .summary-day-balance-card .summary-balance-row,
    .summary-page .summary-day-balance-card .balance-row,
    .summary-page .summary-balance-strip-card .summary-balance-row,
    .summary-page .summary-balance-strip-card .balance-row {
        min-height: 42px !important;
        padding: 8px 0 !important;
    }

    .summary-page .summary-day-balance-card .summary-balance-total,
    .summary-page .summary-day-balance-card .summary-total-day-card,
    .summary-page .summary-day-balance-card .balance-total-card,
    .summary-page .summary-balance-strip-card .summary-balance-total,
    .summary-page .summary-balance-strip-card .summary-total-day-card,
    .summary-page .summary-balance-strip-card .balance-total-card {
        margin-top: 10px !important;
        min-height: 88px !important;
        padding: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Card Resumen / Cierre del dia.
    */

    .summary-page .summary-header-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page .summary-header-card .section-head,
    .summary-page .summary-header-card .summary-header-head,
    .summary-page .summary-header-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: start !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .section-head h2,
    .summary-page .summary-header-card .section-head h3,
    .summary-page .summary-header-card .summary-header-head h2,
    .summary-page .summary-header-card .summary-header-head h3,
    .summary-page .summary-header-card .table-card-header h2,
    .summary-page .summary-header-card .table-card-header h3 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-header-card .section-head p,
    .summary-page .summary-header-card .summary-header-head p,
    .summary-page .summary-header-card .section-subtitle,
    .summary-page .summary-header-card .table-card-header p {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-header-card .section-head .btn,
    .summary-page .summary-header-card .summary-header-head .btn,
    .summary-page .summary-header-card .table-card-header .btn {
        justify-self: end !important;
        align-self: start !important;
        width: auto !important;
        min-width: 136px !important;
        max-width: 180px !important;
        min-height: 42px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-header-card form.form,
    .summary-page .summary-header-card form,
    .summary-page .summary-header-card > .form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .summary-header-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: end !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .summary-header-filters .form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .summary-header-filters label {
        padding-top: 0 !important;
        margin: 0 0 6px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-header-card .summary-header-filters input,
    .summary-page .summary-header-card .summary-header-filters select {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .summary-page .summary-header-card .form-actions {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .form-actions .btn,
    .summary-page .summary-header-card .form-actions button {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      KPIs en 4 columnas para evitar cards anchas con espacio vacio.
    */

    .summary-page .summary-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .summary-page .summary-kpi-card {
        min-height: 128px !important;
        padding: 14px 12px !important;
        border-radius: 18px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 7px !important;
        overflow: hidden !important;
    }

    .summary-page .summary-kpi-card > *,
    .summary-page .summary-kpi-card * {
        position: static !important;
        transform: none !important;
        grid-area: auto !important;
    }

    .summary-page .summary-kpi-icon,
    .summary-page .summary-kpi-card .kpi-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .summary-page .summary-kpi-icon i,
    .summary-page .summary-kpi-card .kpi-icon i {
        font-size: 0.95rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-kpi-copy {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 4px !important;
    }

    .summary-page .summary-kpi-label,
    .summary-page .summary-kpi-title,
    .summary-page .summary-kpi-card .summary-kpi-label,
    .summary-page .summary-kpi-card .summary-kpi-title,
    .summary-page .summary-kpi-card .kpi-title,
    .summary-page .summary-kpi-card h3 {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #4A5899 !important;
        font-size: 0.68rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;

        overflow-wrap: anywhere !important;
    }

    .summary-page .summary-kpi-card .summary-kpi-value,
    .summary-page .summary-kpi-card .kpi-value,
    .summary-page .summary-kpi-card strong {
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-kpi-note,
    .summary-page .summary-kpi-description,
    .summary-page .summary-kpi-card .summary-kpi-note,
    .summary-page .summary-kpi-card .summary-kpi-description,
    .summary-page .summary-kpi-card .kpi-description,
    .summary-page .summary-kpi-card p {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.68rem !important;
        line-height: 1.22 !important;
        font-weight: 400 !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Ordenar cards Ordenes ingresadas / entregadas.
    */

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-ledger-grid > .content-card,
    .summary-page .summary-ledger-grid--two-columns > .content-card,
    .summary-page .summary-ledger-grid .summary-orders-block,
    .summary-page .summary-ledger-grid--two-columns .summary-orders-block,
    .summary-page .summary-orders-card {
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .summary-page .summary-orders-block .summary-block-header,
    .summary-page .summary-orders-card .section-header,
    .summary-page .summary-orders-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;

        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-block .summary-block-header h2,
    .summary-page .summary-orders-block .summary-block-header h3,
    .summary-page .summary-orders-card .section-header h2,
    .summary-page .summary-orders-card .section-header h3,
    .summary-page .summary-orders-card .table-card-header h2,
    .summary-page .summary-orders-card .table-card-header h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;

        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-orders-block .summary-block-header p,
    .summary-page .summary-orders-block .section-subtitle,
    .summary-page .summary-orders-card .section-header p,
    .summary-page .summary-orders-card .table-card-header p,
    .summary-page .summary-orders-card .section-subtitle {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-orders-block .summary-block-header .btn,
    .summary-page .summary-orders-block .summary-see-all-btn,
    .summary-page .summary-orders-block .summary-view-all-btn,
    .summary-page .summary-orders-card .section-header .btn,
    .summary-page .summary-orders-card .table-card-header .btn,
    .summary-page .summary-orders-card .summary-see-all-btn,
    .summary-page .summary-orders-card .summary-view-all-btn {
        justify-self: end !important;
        align-self: start !important;

        width: auto !important;
        min-width: 118px !important;
        max-width: 144px !important;
        min-height: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        border-radius: 13px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .summary-orders-list,
    .summary-page .summary-orders-block .mobile-summary-orders-list,
    .summary-page .summary-orders-block .summary-orders-mobile-list,
    .summary-page .summary-orders-card .summary-orders-list,
    .summary-page .summary-orders-card .mobile-summary-orders-list,
    .summary-page .summary-orders-card .summary-orders-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-card,
    .summary-page .summary-orders-card .mobile-summary-order-card {
        padding: 14px !important;
        border-radius: 16px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px 12px !important;
        align-items: start !important;

        min-height: 0 !important;
        height: auto !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-top,
    .summary-page .summary-orders-card .mobile-summary-order-top {
        grid-column: 1 / -1 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px 10px !important;
        align-items: start !important;

        margin: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-main,
    .summary-page .summary-orders-card .mobile-summary-order-main {
        min-width: 0 !important;
        display: grid !important;
        gap: 6px !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-side,
    .summary-page .summary-orders-card .mobile-summary-order-side {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-order-code-pill,
    .summary-page .summary-orders-block .mobile-summary-order-code,
    .summary-page .summary-orders-block .summary-order-code,
    .summary-page .summary-orders-card .mobile-order-code-pill,
    .summary-page .summary-orders-card .mobile-summary-order-code,
    .summary-page .summary-orders-card .summary-order-code {
        justify-self: start !important;
        align-self: center !important;

        margin: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-orders-block .mobile-order-status,
    .summary-page .summary-orders-block .mobile-summary-order-status,
    .summary-page .summary-orders-block .summary-order-status,
    .summary-page .summary-orders-card .mobile-order-status,
    .summary-page .summary-orders-card .mobile-summary-order-status,
    .summary-page .summary-orders-card .summary-order-status {
        justify-self: end !important;
        align-self: center !important;

        margin: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: lowercase !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .mobile-order-client,
    .summary-page .summary-orders-block .mobile-summary-order-client,
    .summary-page .summary-orders-block .summary-order-client,
    .summary-page .summary-orders-card .mobile-order-client,
    .summary-page .summary-orders-card .mobile-summary-order-client,
    .summary-page .summary-orders-card .summary-order-client {
        margin: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill,
    .summary-page .summary-orders-block .mobile-summary-order-payment,
    .summary-page .summary-orders-block .summary-order-payment,
    .summary-page .summary-orders-card .mobile-payment-pill,
    .summary-page .summary-orders-card .mobile-summary-order-payment,
    .summary-page .summary-orders-card .summary-order-payment {
        justify-self: end !important;
        align-self: center !important;

        margin: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-metrics,
    .summary-page .summary-orders-card .mobile-summary-order-metrics {
        grid-column: 1 / -1 !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric,
    .summary-page .summary-orders-block .mobile-summary-order-metric,
    .summary-page .summary-orders-block .summary-order-metric,
    .summary-page .summary-orders-card .mobile-summary-metric,
    .summary-page .summary-orders-card .mobile-summary-order-metric,
    .summary-page .summary-orders-card .summary-order-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;

        border-radius: 13px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;

        gap: 4px !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric span,
    .summary-page .summary-orders-block .mobile-summary-order-metric span,
    .summary-page .summary-orders-block .summary-order-metric span,
    .summary-page .summary-orders-card .mobile-summary-metric span,
    .summary-page .summary-orders-card .mobile-summary-order-metric span,
    .summary-page .summary-orders-card .summary-order-metric span {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.7rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric strong,
    .summary-page .summary-orders-block .mobile-summary-order-metric strong,
    .summary-page .summary-orders-block .summary-order-metric strong,
    .summary-page .summary-orders-card .mobile-summary-metric strong,
    .summary-page .summary-orders-card .mobile-summary-order-metric strong,
    .summary-page .summary-orders-card .summary-order-metric strong {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-detail-btn,
    .summary-page .summary-orders-card .mobile-summary-order-detail-btn {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-height: 40px !important;

        margin-top: 2px !important;
        border-radius: 13px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Cards de ordenes con UI mobile aprobado.
    */

    .summary-page .summary-orders-block .mobile-summary-order-card {
        padding: 14px !important;
        border-radius: 18px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;

        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px 10px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-main,
    .summary-page .summary-orders-block .mobile-summary-order-side {
        display: contents !important;
    }

    .summary-page .summary-orders-block .mobile-order-code-pill {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;

        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #F3F1FF !important;
        color: #4A5BA8 !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .mobile-order-status {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;

        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .summary-page .summary-orders-block .mobile-order-status.pending {
        background: #FFF0C9 !important;
        color: #A66300 !important;
        border: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-order-status.cancelado,
    .summary-page .summary-orders-block .mobile-order-status.done {
        background: #DDF7E7 !important;
        color: #147A3F !important;
        border: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-order-client {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        margin: 0 !important;

        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end !important;

        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        background: #F1F2F7 !important;
        color: #4A5BA8 !important;
        border: 0 !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill.yape {
        background: #EEE5FF !important;
        color: #6F2BD9 !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill.efectivo {
        background: #DDF7E7 !important;
        color: #147A3F !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill.plin {
        background: #DFF6F4 !important;
        color: #0F766E !important;
    }

    .summary-page .summary-orders-block .mobile-payment-pill.tarjeta {
        background: #E8F1FF !important;
        color: #2563EB !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric span {
        margin: 0 !important;
        padding: 0 !important;

        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric strong {
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.8rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric.danger strong {
        color: #D71920 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-metric.success strong {
        color: #009B55 !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-detail-btn {
        width: 100% !important;
        min-height: 40px !important;

        margin-top: 2px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-detail-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical - Modales de ordenes con UI mobile aprobado.
      Solo aplica a Ordenes ingresadas hoy y Ordenes entregadas hoy.
    */

    #summaryEnteredOrdersModal,
    #summaryDeliveredOrdersModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    #summaryEnteredOrdersModal .modal-dialog,
    #summaryEnteredOrdersModal .modal-content,
    #summaryDeliveredOrdersModal .modal-dialog,
    #summaryDeliveredOrdersModal .modal-content {
        width: min(720px, calc(100vw - 32px)) !important;
        max-width: 720px !important;
        height: auto !important;
        max-height: calc(100dvh - 48px) !important;

        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryEnteredOrdersModal .modal-header,
    #summaryDeliveredOrdersModal .modal-header {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 16px !important;

        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;

        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #summaryEnteredOrdersModal .modal-header h3,
    #summaryEnteredOrdersModal .modal-title,
    #summaryDeliveredOrdersModal .modal-header h3,
    #summaryDeliveredOrdersModal .modal-title {
        grid-column: 2 !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #summaryEnteredOrdersModal .modal-close-btn,
    #summaryEnteredOrdersModal [data-modal-close],
    #summaryDeliveredOrdersModal .modal-close-btn,
    #summaryDeliveredOrdersModal [data-modal-close] {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }

    #summaryEnteredOrdersModal .modal-body,
    #summaryDeliveredOrdersModal .modal-body {
        max-height: calc(100dvh - 112px) !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search,
    #summaryDeliveredOrdersModal .summary-orders-modal-search {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search-input,
    #summaryDeliveredOrdersModal .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-table-shell,
    #summaryDeliveredOrdersModal .summary-orders-modal-table-shell {
        display: none !important;
    }

    #summaryEnteredOrdersModal .summary-orders-mobile-list,
    #summaryEnteredOrdersModal .mobile-summary-orders-list,
    #summaryDeliveredOrdersModal .summary-orders-mobile-list,
    #summaryDeliveredOrdersModal .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-card,
    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "code status"
            "client payment"
            "metrics metrics"
            "detail detail" !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        align-items: center !important;

        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 10px 24px rgba(74, 88, 153, 0.08) !important;
        box-sizing: border-box !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-top,
    #summaryDeliveredOrdersModal .mobile-summary-order-top {
        display: contents !important;
    }

    #summaryEnteredOrdersModal .mobile-order-code-pill,
    #summaryDeliveredOrdersModal .mobile-order-code-pill {
        grid-area: code !important;
        justify-self: start !important;

        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 10px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        background: #F3F1FF !important;
        color: #4A5BA8 !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status,
    #summaryDeliveredOrdersModal .mobile-order-status {
        grid-area: status !important;
        justify-self: end !important;

        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 10px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status.pending,
    #summaryDeliveredOrdersModal .mobile-order-status.pending {
        background: #FFF0C9 !important;
        color: #A66300 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status.done,
    #summaryEnteredOrdersModal .mobile-order-status.cancelled,
    #summaryDeliveredOrdersModal .mobile-order-status.done,
    #summaryDeliveredOrdersModal .mobile-order-status.cancelled {
        background: #DDF7E7 !important;
        color: #147A3F !important;
    }

    #summaryEnteredOrdersModal .mobile-order-client,
    #summaryDeliveredOrdersModal .mobile-order-client {
        grid-area: client !important;
        min-width: 0 !important;
        margin: 0 !important;

        color: #17204F !important;
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-meta,
    #summaryDeliveredOrdersModal .mobile-summary-order-meta {
        grid-area: payment !important;
        justify-self: end !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill,
    #summaryDeliveredOrdersModal .mobile-payment-pill {
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 10px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 999px !important;
        background: #F1F2F7 !important;
        color: #4A5BA8 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill.yape,
    #summaryDeliveredOrdersModal .mobile-payment-pill.yape {
        background: #EEE5FF !important;
        color: #6F2BD9 !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill.efectivo,
    #summaryDeliveredOrdersModal .mobile-payment-pill.efectivo {
        background: #DDF7E7 !important;
        color: #147A3F !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill.plin,
    #summaryDeliveredOrdersModal .mobile-payment-pill.plin {
        background: #DFF6F4 !important;
        color: #0F766E !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill.tarjeta,
    #summaryDeliveredOrdersModal .mobile-payment-pill.tarjeta {
        background: #E8F1FF !important;
        color: #2563EB !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-metrics,
    #summaryDeliveredOrdersModal .mobile-summary-order-metrics {
        grid-area: metrics !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric,
    #summaryDeliveredOrdersModal .mobile-summary-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric span,
    #summaryDeliveredOrdersModal .mobile-summary-metric span {
        margin: 0 !important;
        padding: 0 !important;

        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric strong,
    #summaryDeliveredOrdersModal .mobile-summary-metric strong {
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.8rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric.danger strong,
    #summaryDeliveredOrdersModal .mobile-summary-metric.danger strong {
        color: #D71920 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric.success strong,
    #summaryDeliveredOrdersModal .mobile-summary-metric.success strong {
        color: #009B55 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn {
        grid-area: detail !important;

        width: 100% !important;
        min-height: 40px !important;
        margin: 2px 0 0 !important;
        padding: 0 14px !important;

        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn i,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-bottom,
    #summaryDeliveredOrdersModal .mobile-summary-order-bottom {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Vista principal: las secciones de ordenes son preview, no listas completas.
      El modal mantiene todas las ordenes.
    */

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns {
        align-items: start !important;
    }

    .summary-page .summary-orders-block,
    .summary-page .summary-orders-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .summary-page .summary-orders-block .summary-orders-mobile-list,
    .summary-page .summary-orders-block .mobile-summary-orders-list,
    .summary-page .summary-orders-block .summary-orders-list,
    .summary-page .summary-orders-card .summary-orders-mobile-list,
    .summary-page .summary-orders-card .mobile-summary-orders-list,
    .summary-page .summary-orders-card .summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        max-height: none !important;
    }

    .summary-page .summary-orders-block .mobile-summary-order-card,
    .summary-page .summary-orders-card .mobile-summary-order-card {
        margin: 0 !important;
    }

    .summary-page .summary-orders-block .summary-orders-mobile-list > .mobile-summary-order-card:nth-child(n+3),
    .summary-page .summary-orders-block .mobile-summary-orders-list > .mobile-summary-order-card:nth-child(n+3),
    .summary-page .summary-orders-card .summary-orders-mobile-list > .mobile-summary-order-card:nth-child(n+3),
    .summary-page .summary-orders-card .mobile-summary-orders-list > .mobile-summary-order-card:nth-child(n+3) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Resumen de cobros del dia con UI mobile aprobado.
    */

    .summary-page .summary-payment-methods-card,
    .summary-page .payments-summary-section.summary-payment-methods-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page .summary-payment-methods-card .summary-block-header,
    .summary-page .summary-payment-methods-card .section-header,
    .summary-page .summary-payment-methods-card .table-card-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page .summary-payment-methods-card .section-title,
    .summary-page .summary-payment-methods-card .section-header h2,
    .summary-page .summary-payment-methods-card .section-header h3,
    .summary-page .summary-payment-methods-card .table-card-header h2,
    .summary-page .summary-payment-methods-card .table-card-header h3 {
        margin: 0 0 4px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-payment-methods-card .section-subtitle,
    .summary-page .summary-payment-methods-card .summary-block-title-group p,
    .summary-page .summary-payment-methods-card .section-header p {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .summary-page .summary-payment-methods-card .table-wrapper,
    .summary-page .summary-payment-methods-card table,
    .summary-page .summary-payment-methods-card .summary-total-box--income {
        display: none !important;
    }

    .summary-page .summary-payment-methods-card .mobile-payment-summary-list,
    .summary-page .summary-payment-methods-card .summary-payment-methods-list,
    .summary-page .summary-payment-methods-card .summary-payments-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-row,
    .summary-page .summary-payment-methods-card .mobile-payment-summary-card {
        min-height: 66px !important;
        width: 100% !important;
        padding: 12px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;

        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) auto 34px !important;
        gap: 10px !important;
        align-items: center !important;

        text-decoration: none !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.07) !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-copy-wrap,
    .summary-page .summary-payment-methods-card .mobile-payment-summary-left {
        display: contents !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-icon,
    .summary-page .summary-payment-methods-card .mobile-payment-icon {
        grid-column: 1 !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;

        border-radius: 12px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-row.efectivo .summary-payment-method-icon {
        background: #E8F8EE !important;
        color: #15803D !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-row.yape .summary-payment-method-icon {
        background: #F2E8FF !important;
        color: #7C3AED !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-row.plin .summary-payment-method-icon {
        background: #DFF7F4 !important;
        color: #0F766E !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-row.tarjeta .summary-payment-method-icon {
        background: #F2F3F7 !important;
        color: #4B5563 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-icon i,
    .summary-page .summary-payment-methods-card .mobile-payment-icon i {
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-copy,
    .summary-page .summary-payment-methods-card .mobile-payment-info {
        grid-column: 2 !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-payment-methods-card .mobile-payment-pill {
        min-height: 26px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-payment-methods-card .mobile-payment-info small,
    .summary-page .summary-payment-methods-card .summary-payment-method-copy small {
        margin: 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-amount,
    .summary-page .summary-payment-methods-card .mobile-payment-total {
        grid-column: 3 !important;
        justify-self: end !important;

        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-chevron,
    .summary-page .summary-payment-methods-card .mobile-payment-open-btn {
        grid-column: 4 !important;
        justify-self: end !important;

        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: var(--primary) !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-chevron i,
    .summary-page .summary-payment-methods-card .mobile-payment-open-btn i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-total,
    .summary-page .summary-payment-methods-card .mobile-payment-grand-total {
        min-height: 48px !important;
        width: 100% !important;
        padding: 0 14px !important;
        margin: 12px 0 0 !important;

        border-radius: 15px !important;
        border: 1px solid #B8F2D0 !important;
        background: #F0FFF6 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-total span,
    .summary-page .summary-payment-methods-card .mobile-payment-grand-total span {
        margin: 0 !important;
        color: #305C42 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-total strong,
    .summary-page .summary-payment-methods-card .mobile-payment-grand-total strong {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Bloque final Balance del dia. Total del dia como label de filas.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page .summary-day-balance-card .summary-balance-total,
    .summary-page .summary-day-balance-card .summary-total-day-card,
    .summary-page .summary-day-balance-card .balance-total-card,
    .summary-page .summary-balance-strip-card .summary-balance-total,
    .summary-page .summary-balance-strip-card .summary-total-day-card,
    .summary-page .summary-balance-strip-card .balance-total-card {
        min-height: 64px !important;
        height: auto !important;
        padding: 10px 14px !important;

        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: center !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        grid-column: 2 / 4 !important;
        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label amount"
            "label pill" !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page .summary-day-balance-card .summary-balance-total-label,
    .summary-page .summary-day-balance-card .summary-total-day-label,
    .summary-page .summary-day-balance-card .balance-total-label,
    .summary-page .summary-day-balance-card .summary-balance-total span:first-of-type,
    .summary-page .summary-day-balance-card .summary-total-day-card span:first-of-type,
    .summary-page .summary-day-balance-card .balance-total-card span:first-of-type {
        grid-area: label !important;
        grid-column: 1 !important;
        align-self: center !important;
        justify-self: start !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        grid-area: amount !important;
        justify-self: end !important;
        align-self: end !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #3151D3 !important;
        font-size: 1.75rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        grid-area: pill !important;
        justify-self: end !important;
        align-self: start !important;

        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 10px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Restaurar jerarquia visual de Resumen de cobros del dia.
      Compacto si, miniatura no.
    */

    .summary-page .summary-payment-methods-card,
    .summary-page .payments-summary-section.summary-payment-methods-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page .summary-payment-methods-card .section-title,
    .summary-page .summary-payment-methods-card h2,
    .summary-page .summary-payment-methods-card h3 {
        margin: 0 0 6px !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-payment-methods-card .section-subtitle,
    .summary-page .summary-payment-methods-card .summary-block-title-group p {
        margin: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-row,
    .summary-page .summary-payment-methods-card .mobile-payment-summary-card {
        min-height: 76px !important;
        padding: 14px !important;

        grid-template-columns: 42px minmax(0, 1fr) auto 34px !important;
        gap: 12px !important;

        border-radius: 16px !important;
        align-items: center !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-icon,
    .summary-page .summary-payment-methods-card .mobile-payment-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 13px !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-icon i,
    .summary-page .summary-payment-methods-card .mobile-payment-icon i {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-payment-methods-card .mobile-payment-pill {
        min-height: 28px !important;
        padding: 0 11px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-payment-methods-card .mobile-payment-info small,
    .summary-page .summary-payment-methods-card .summary-payment-method-copy small {
        margin: 2px 0 0 !important;
        font-size: 0.8rem !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;
        color: #6F6A80 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-amount,
    .summary-page .summary-payment-methods-card .mobile-payment-total {
        font-size: 1.35rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-chevron,
    .summary-page .summary-payment-methods-card .mobile-payment-open-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-method-chevron i,
    .summary-page .summary-payment-methods-card .mobile-payment-open-btn i {
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-total,
    .summary-page .summary-payment-methods-card .mobile-payment-grand-total {
        min-height: 52px !important;
        padding: 0 16px !important;
        margin-top: 14px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-total span,
    .summary-page .summary-payment-methods-card .mobile-payment-grand-total span {
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .summary-page .summary-payment-methods-card .summary-payment-total strong,
    .summary-page .summary-payment-methods-card .mobile-payment-grand-total strong {
        font-size: 0.98rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Correccion fuerte de tamanos reales en Resumen de cobros del dia.
      Selector real del card para ganar a overrides tablet previos.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .summary-block-header,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .summary-block-header,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .summary-block-header {
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .section-title,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .section-title,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .section-title {
        margin: 0 0 6px !important;
        font-size: 1.15rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .section-subtitle,
    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .summary-block-title-group p,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .section-subtitle,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .summary-block-title-group p,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .section-subtitle,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .summary-block-title-group p {
        margin: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-list,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-list,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-list {
        gap: 12px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card {
        min-height: 88px !important;
        padding: 16px !important;

        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto 36px !important;
        gap: 14px !important;
        align-items: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 15px !important;
        font-size: 1.12rem !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon i,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon i {
        font-size: 1.12rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-pill,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-pill,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-pill {
        min-height: 30px !important;
        padding: 0 12px !important;

        font-size: 0.95rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info small,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info small {
        margin: 4px 0 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-total,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-total,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-total {
        font-size: 1.6rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn i,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn i {
        font-size: 0.86rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total {
        min-height: 60px !important;
        padding: 0 18px !important;
        margin-top: 16px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total span,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total span {
        font-size: 0.95rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total strong,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total strong {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Corregir alto y alineacion real de filas de cobros.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-list,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-list,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card {
        min-height: 76px !important;
        height: auto !important;
        padding: 12px 14px !important;

        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto 32px !important;
        grid-template-rows: 1fr !important;
        gap: 12px !important;
        align-items: center !important;
        justify-items: stretch !important;

        border-radius: 16px !important;
        overflow: hidden !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card > *,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card > *,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card > * {
        align-self: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-left,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-left,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-left {
        display: contents !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon {
        grid-column: 1 !important;
        justify-self: center !important;
        align-self: center !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        border-radius: 13px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon i,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-icon i {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 1rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info {
        grid-column: 2 !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-pill,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-pill,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-pill {
        min-height: 28px !important;
        padding: 0 11px !important;
        margin: 0 !important;

        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info small,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-info small {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.8rem !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;
        color: #6F6A80 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-total,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-total,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-total {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 1.35rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn {
        grid-column: 4 !important;
        justify-self: end !important;
        align-self: center !important;

        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn i,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-open-btn i {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-grand-total {
        min-height: 52px !important;
        margin-top: 14px !important;
        padding: 0 16px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Fix real de filas en Resumen de cobros del dia:
      compactas, centradas y sin chevron flotando abajo.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row {
        width: 100% !important;
        min-height: 72px !important;
        height: 72px !important;
        max-height: 72px !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) max-content 30px !important;
        grid-template-rows: 52px !important;
        column-gap: 12px !important;
        row-gap: 0 !important;

        align-items: center !important;
        justify-items: stretch !important;
        align-content: center !important;

        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row > *,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row > *,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row > * {
        min-height: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-summary-left,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-summary-left,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-summary-left {
        display: contents !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-icon,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        justify-self: center !important;
        align-self: center !important;

        border-radius: 13px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-info,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-info,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-info {
        grid-column: 2 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;

        align-self: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-pill,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-pill,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-pill {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: 0 !important;
        color: #10194A !important;

        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-info small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-info small,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-info small {
        margin: 0 !important;
        padding: 0 !important;

        color: #4A4260 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-total,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-total,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-total {
        grid-column: 3 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        justify-self: end !important;
        align-self: center !important;

        color: var(--primary) !important;
        font-size: 1.3rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-open-btn,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-open-btn,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-open-btn {
        grid-column: 4 !important;
        grid-row: 1 !important;

        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-self: end !important;
        align-self: center !important;

        border: 0 !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: var(--primary) !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
        transform: none !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-open-btn i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-open-btn i,
    .summary-page.summary-page-redesigned .payments-summary-section.summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row .mobile-payment-open-btn i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Modales de cobros por metodo con UI mobile aprobado.
      Estos modales viven fuera de .summary-page, por eso se scopean por ID.
    */

    [id^="summaryPaymentsMethodModal-"].summary-payments-method-modal,
    [id^="summaryPaymentsMethodModal-"].modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-dialog,
    [id^="summaryPaymentsMethodModal-"] .modal-content {
        width: min(720px, calc(100vw - 32px)) !important;
        max-width: 720px !important;
        height: auto !important;
        max-height: calc(100dvh - 48px) !important;

        border-radius: 22px !important;
        overflow: hidden !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-header {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 16px !important;

        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;

        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-header h3,
    [id^="summaryPaymentsMethodModal-"] .modal-title {
        grid-column: 2 !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-close-btn,
    [id^="summaryPaymentsMethodModal-"] [data-modal-close] {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-body {
        max-height: calc(100dvh - 112px) !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-search {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] input[type="search"],
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table-shell,
    [id^="summaryPaymentsMethodModal-"] .table-wrapper.tablet-card-hide {
        display: none !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-mobile-list,
    [id^="summaryPaymentsMethodModal-"] .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .mobile-summary-order-card.summary-payment-order-card,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "code status"
            "client payment"
            "metrics metrics"
            "detail detail" !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        align-items: center !important;

        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-top,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-main,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-side {
        display: contents !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-code-pill {
        grid-area: code !important;
        justify-self: start !important;

        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status {
        grid-area: status !important;
        justify-self: end !important;

        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        border: 1px solid transparent !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.pending {
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border-color: #FFE0A6 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.done,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.cancelado,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.cancelled {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border-color: #B8F2D0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-client {
        grid-area: client !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill {
        grid-area: payment !important;
        justify-self: end !important;

        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        border-radius: 999px !important;
        border: 1px solid transparent !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.efectivo {
        background: #DDF7E7 !important;
        color: #147A3F !important;
        border-color: #B8F2D0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.yape {
        background: #EEE5FF !important;
        color: #6F2BD9 !important;
        border-color: #DDCAFF !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.plin {
        background: #DFF6F4 !important;
        color: #0F766E !important;
        border-color: #B7ECE7 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.tarjeta {
        background: #E8F1FF !important;
        color: #2563EB !important;
        border-color: #C7DAFF !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-metrics {
        grid-area: metrics !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric span {
        margin: 0 !important;
        padding: 0 !important;

        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric strong {
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric.danger strong {
        color: #D71920 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric.success strong {
        color: #009B55 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-detail-btn {
        grid-area: detail !important;

        width: 100% !important;
        min-height: 40px !important;
        margin: 2px 0 0 !important;
        padding: 0 14px !important;

        border-radius: 14px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-detail-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-bottom,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card > i.fa-chevron-right {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Card Gastos del dia con UI mobile aprobado.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card,
    .summary-page.summary-page-redesigned .summary-expenses-day-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-header,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-header,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .section-title,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .section-title,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .section-title {
        margin: 0 0 5px !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .section-subtitle,
    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-title-group p,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .section-subtitle,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-title-group p,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-title-group p {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expenses-list,
    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expenses-list,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expenses-list,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row {
        min-height: 72px !important;
        height: auto !important;
        width: 100% !important;
        padding: 13px 14px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;

        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;

        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.07) !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy-wrap,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy-wrap,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy-wrap {
        display: contents !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-icon,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-icon {
        grid-column: 1 !important;
        justify-self: center !important;
        align-self: center !important;

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;

        margin: 0 !important;
        border-radius: 13px !important;
        background: #FFE4E4 !important;
        color: #D71920 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-icon i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-icon i,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-icon i {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy {
        grid-column: 2 !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-label,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-label,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-label {
        display: none !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-title,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-title,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-title {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-meta,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-meta,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-meta {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-amount,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-amount,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-amount {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #B71919 !important;
        font-size: 1.25rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-card,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-card {
        min-height: 78px !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 14px !important;

        border-radius: 18px !important;
        border: 1px solid #FFB7B7 !important;
        background: #FFF3F3 !important;

        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-icon,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;
        border-radius: 16px !important;
        background: #FFE1E1 !important;
        color: #D71920 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy span,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy span {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy strong,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-total-copy strong {
        margin: 0 !important;
        color: #C51414 !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Balance del dia con UI mobile aprobado, sin titulo duplicado.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-title,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-title,
    .summary-page.summary-page-redesigned .summary-day-balance-card .section-title {
        margin: 0 0 5px !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p,
    .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-strip,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-strip,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-strip {
        display: none !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card,
    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card[hidden],
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card[hidden],
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card[hidden] {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-inner-header,
    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-header,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-inner-header,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-header,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-inner-header,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-header {
        display: none !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-list,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-list,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row {
        min-height: 54px !important;
        height: auto !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row:last-child,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row:last-child,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row:last-child {
        border-bottom: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success .mobile-balance-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success .mobile-balance-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success .mobile-balance-icon {
        background: #E8F8EE !important;
        color: #15803D !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger .mobile-balance-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger .mobile-balance-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger .mobile-balance-icon {
        background: #FFE4E4 !important;
        color: #D71920 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span {
        margin: 0 !important;
        padding: 0 !important;

        color: #10194A !important;
        font-size: 0.88rem !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong {
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success strong {
        color: #15803D !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger strong {
        color: #D71920 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        width: 100% !important;
        min-height: 82px !important;
        height: auto !important;
        margin: 14px 0 0 !important;
        padding: 14px 16px !important;

        border-radius: 18px !important;
        border: 1px solid rgba(74, 88, 153, 0.22) !important;
        background: linear-gradient(180deg, #F8F9FF 0%, #F3F5FF 100%) !important;

        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        border-radius: 15px !important;
        background: #E8F1FF !important;
        color: #3151D3 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        margin: 0 !important;
        color: #3151D3 !important;
        font-size: 2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        width: fit-content !important;
        min-height: 26px !important;
        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Adaptar Balance del dia a escala tablet sin mover estructura.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-title,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-title,
    .summary-page.summary-page-redesigned .summary-day-balance-card .section-title {
        margin: 0 0 8px !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p,
    .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p {
        margin: 0 !important;
        color: #5E5870 !important;
        font-size: 0.96rem !important;
        line-height: 1.28 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row {
        min-height: 64px !important;
        padding: 12px 0 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left {
        gap: 12px !important;
        align-items: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i {
        font-size: 0.9rem !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span {
        color: #10194A !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong {
        font-size: 1.32rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        min-height: 112px !important;
        margin: 18px 0 0 !important;
        padding: 18px 20px !important;

        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 16px !important;

        border-radius: 20px !important;
        border: 1px solid rgba(74, 88, 153, 0.22) !important;
        background: linear-gradient(180deg, #F8F9FF 0%, #F2F4FF 100%) !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        border-radius: 16px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        gap: 7px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        color: #5E5870 !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        color: #3151D3 !important;
        font-size: 2.45rem !important;
        line-height: 0.95 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        min-height: 28px !important;
        padding: 0 12px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Balance del dia: monto protagonista a la derecha y resultado debajo.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 16px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        min-width: 0 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 7px !important;

        text-align: right !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        width: 100% !important;
        margin: 0 !important;

        color: #5E5870 !important;
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
        text-align: right !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        width: 100% !important;
        margin: 0 !important;

        color: #3151D3 !important;
        font-size: 2.45rem !important;
        line-height: 0.95 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        align-self: flex-end !important;
        width: fit-content !important;
        max-width: max-content !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 12px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-negative,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-negative,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-negative {
        background: #FFE8E8 !important;
        border: 1px solid #FFC7C7 !important;
        color: #B71919 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-positive,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-positive,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-positive {
        background: #E7F8EC !important;
        border: 1px solid #B8F2D0 !important;
        color: #15803D !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Balance del dia: total final horizontal, mas delgado y equilibrado.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        min-height: 76px !important;
        height: auto !important;
        margin: 14px 0 0 !important;
        padding: 10px 16px !important;

        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;

        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        grid-column: 2 / 4 !important;
        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label amount"
            ". pill" !important;
        column-gap: 14px !important;
        row-gap: 5px !important;
        align-items: center !important;
        justify-content: stretch !important;

        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        grid-area: label !important;
        align-self: center !important;
        justify-self: start !important;

        width: auto !important;
        margin: 0 !important;

        color: #5E5870 !important;
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        grid-area: amount !important;
        justify-self: end !important;

        width: auto !important;
        margin: 0 !important;

        color: #3151D3 !important;
        font-size: 2.1rem !important;
        line-height: 0.95 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        grid-area: pill !important;
        justify-self: end !important;
        align-self: start !important;

        width: fit-content !important;
        max-width: max-content !important;
        min-height: 24px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Ajuste final: Total del dia alineado como label de filas.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        min-height: 64px !important;
        padding: 10px 14px !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        grid-column: 2 / 4 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label amount"
            "label pill" !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        grid-area: label !important;
        align-self: center !important;
        justify-self: start !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        grid-area: amount !important;
        justify-self: end !important;
        align-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #3151D3 !important;
        font-size: 1.75rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        grid-area: pill !important;
        justify-self: end !important;
        align-self: start !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Resumen operativo del dia con UI compacta tipo mobile.
    */

    .summary-page.summary-page-redesigned .summary-operational-day-card {
        padding: 18px !important;
        border-radius: 20px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-block-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-block-title-group {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .section-title {
        margin: 0 0 5px !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .section-subtitle {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge {
        grid-column: 2 !important;
        justify-self: end !important;
        align-self: start !important;
        width: auto !important;
        max-width: max-content !important;
        min-width: 112px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge.is-complete {
        background: #D9FBE7 !important;
        border: 1px solid #B8F2D0 !important;
        color: #067A3D !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge.is-replenishable {
        background: #FEF3C7 !important;
        border: 1px solid #FDE68A !important;
        color: #92400E !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge.is-insufficient {
        background: #FFE1E1 !important;
        border: 1px solid #FFC2C2 !important;
        color: #C51414 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpis,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpi,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metric-card {
        min-height: 74px !important;
        padding: 13px 14px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpi span,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metric-card span {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpi strong,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metric-card strong {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 10px 12px !important;
        align-items: center !important;
        background: #EAFBF1 !important;
        border: 1px solid #B8F2D0 !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: start !important;
        justify-self: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy {
        grid-column: 2 !important;
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy strong {
        margin: 0 !important;
        color: #0F5132 !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy span {
        margin: 0 !important;
        color: #3E6F55 !important;
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail span {
        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(184, 242, 208, 0.92) !important;
        color: #0F5132 !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-movements-btn span {
        display: inline-flex !important;
        align-items: center !important;
        color: var(--primary) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-movements-btn i {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-meta,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-cash-movement-duplicate {
        display: none !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-movements {
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        border-top: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-weekly {
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Caja operativa lista: chips a la derecha y boton abajo.
    */

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-card,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "icon copy detail"
            "action action action" !important;
        gap: 12px !important;
        align-items: start !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;

        background: linear-gradient(135deg, #E9FFF1 0%, #DDFBEA 100%) !important;
        border: 1px solid #B8F2D0 !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-icon {
        grid-area: icon !important;
        align-self: start !important;
        justify-self: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;

        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: #08A64B !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-icon i {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy {
        grid-area: copy !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 4px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy strong {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy span,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy p {
        margin: 0 !important;
        padding: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.82rem !important;
        line-height: 1.28 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail {
        grid-area: detail !important;
        grid-column: auto !important;
        justify-self: end !important;
        align-self: start !important;

        width: auto !important;
        min-width: 150px !important;
        max-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail span,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail small {
        width: fit-content !important;
        max-width: max-content !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(35, 168, 92, 0.22) !important;

        color: #305C42 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action {
        grid-area: action !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action a.summary-operational-movements-btn,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        color: var(--primary) !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Reducir espacio final sobre bottom nav.
    */

    .summary-page.summary-page-redesigned {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    .summary-page.summary-page-redesigned > :last-child,
    .summary-page.summary-page-redesigned section:last-child,
    .summary-page.summary-page-redesigned .content-card:last-child,
    .summary-page.summary-page-redesigned .summary-operational-day-card:last-child {
        margin-bottom: 0 !important;
    }

    body:has(.summary-page.summary-page-redesigned) .content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area,
    body:has(.summary-page.summary-page-redesigned) .page-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Correccion final del padding real en section.content-area.page-content.
    */

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned > :last-child,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned section:last-child,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned .content-card:last-child,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned > :last-child,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned section:last-child,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Recuperar sombra final sin recrear espacio vacio.
    */

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content {
        overflow: visible !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card,
    .summary-page.summary-page-redesigned section.content-card:last-of-type,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 12px !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.10),
            0 4px 12px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page.summary-page-redesigned .summary-closing-actions {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Recuperar sombra inferior del ultimo bloque sin crear espacio vacio grande.
    */

    body:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area,
    body:has(.summary-page.summary-page-redesigned) .page-content {
        overflow: visible !important;
    }

    body:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area.page-content {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card,
    .summary-page.summary-page-redesigned .summary-operational-card,
    .summary-page.summary-page-redesigned section.content-card:last-of-type,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 12px !important;
        overflow: visible !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.10),
            0 4px 12px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .summary-actions,
    .summary-page .summary-footer-actions,
    .summary-page .summary-close-day-wrap {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .summary-page .summary-closing-actions .btn,
    .summary-page .summary-actions .btn,
    .summary-page .summary-footer-actions .btn,
    .summary-page .summary-close-day-btn,
    .summary-page button[data-close-day] {
        margin-bottom: 0 !important;
    }

    .summary-page .summary-operational-weekly,
    .summary-page .summary-operational-movements,
    .summary-page .cash-box-movements,
    .summary-page .summary-legacy-operational-balance {
        margin-bottom: 0 !important;
    }

    .summary-page .summary-closing-actions-card,
    .summary-page .summary-close-day-card,
    .summary-page .summary-footer-card {
        margin-bottom: 10px !important;
        border-radius: 18px !important;
        overflow: visible !important;
        box-shadow:
            0 12px 24px rgba(74, 88, 153, 0.10),
            0 4px 10px rgba(74, 88, 153, 0.06) !important;
    }
}

@media (max-width: 767px) {
    /*
      /summary mobile -
      Reducir aire final manteniendo sombra inferior visible.
    */

    body:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area,
    body:has(.summary-page.summary-page-redesigned) .page-content,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        overflow: visible !important;
    }

    body:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .content-area.page-content {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card,
    .summary-page.summary-page-redesigned .summary-operational-card,
    .summary-page.summary-page-redesigned section.content-card:last-of-type,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 6px !important;
        overflow: visible !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.10),
            0 4px 12px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .summary-actions,
    .summary-page .summary-footer-actions,
    .summary-page .summary-close-day-wrap {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .summary-page .summary-closing-actions .btn,
    .summary-page .summary-actions .btn,
    .summary-page .summary-footer-actions .btn,
    .summary-page .summary-close-day-btn,
    .summary-page button[data-close-day] {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final real:
      Resumen / Cierre del dia en una sola fila de filtros.
    */

    .summary-page.summary-page-redesigned .summary-header-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: start !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-header {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-title {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-subtitle {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-actions {
        justify-self: end !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-actions .btn {
        width: auto !important;
        min-width: 142px !important;
        max-width: 176px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card form.form,
    .summary-page.summary-page-redesigned .summary-header-card form {
        display: grid !important;
        grid-template-columns: 240px 320px minmax(220px, 1fr) !important;
        gap: 14px !important;
        align-items: end !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-filters,
    .summary-page.summary-page-redesigned .summary-header-card .form-grid {
        display: contents !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card label {
        display: block !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        color: #1D1634 !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card input,
    .summary-page.summary-page-redesigned .summary-header-card select {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-actions {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-actions .btn,
    .summary-page.summary-page-redesigned .summary-header-card .form-actions button {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal -
      Card Resumen / Cierre del dia compacto y balanceado.
    */

    .summary-page.summary-page-redesigned .summary-header-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-head,
    .summary-page.summary-page-redesigned .summary-header-card .summary-header-head,
    .summary-page.summary-page-redesigned .summary-header-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: start !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-header {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-title,
    .summary-page.summary-page-redesigned .summary-header-card .section-head h2,
    .summary-page.summary-page-redesigned .summary-header-card .summary-header-head h2,
    .summary-page.summary-page-redesigned .summary-header-card .table-card-header h2 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-header-card .section-head p,
    .summary-page.summary-page-redesigned .summary-header-card .summary-header-head p,
    .summary-page.summary-page-redesigned .summary-header-card .table-card-header p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-actions {
        justify-self: end !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-actions .btn,
    .summary-page.summary-page-redesigned .summary-header-card .section-head .btn,
    .summary-page.summary-page-redesigned .summary-header-card .summary-header-head .btn,
    .summary-page.summary-page-redesigned .summary-header-card .table-card-header .btn {
        justify-self: end !important;
        align-self: start !important;
        width: auto !important;
        min-width: 142px !important;
        max-width: 176px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card form.form,
    .summary-page.summary-page-redesigned .summary-header-card form {
        display: grid !important;
        grid-template-columns: 240px 320px minmax(220px, 1fr) !important;
        gap: 14px !important;
        align-items: end !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-filters,
    .summary-page.summary-page-redesigned .summary-header-card .form-grid {
        display: contents !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card label {
        display: block !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        color: #1D1634 !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card input,
    .summary-page.summary-page-redesigned .summary-header-card select {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-actions {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-actions .btn,
    .summary-page.summary-page-redesigned .summary-header-card .form-actions button {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal -
      Orden general de vista principal.
    */

    .summary-page.summary-page-redesigned {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .summary-page .content-card,
    .summary-page section.card {
        border-radius: 20px !important;
    }

    .summary-page .summary-header-card {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .summary-page .summary-header-card form,
    .summary-page .summary-header-card .summary-header-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: end !important;
    }

    .summary-page .summary-header-card .form-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-header-card .form-actions .btn,
    .summary-page .summary-header-card .form-actions button {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    .summary-page .summary-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .summary-page .summary-kpi-card {
        min-height: 108px !important;
        padding: 15px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page .summary-kpi-icon,
    .summary-page .summary-kpi-card .kpi-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page .summary-kpi-copy {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .summary-page .summary-kpi-title,
    .summary-page .summary-kpi-card h3 {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .summary-page .summary-kpi-value,
    .summary-page .summary-kpi-card .kpi-value {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-kpi-description,
    .summary-page .summary-kpi-card p {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-ledger-grid > .content-card,
    .summary-page .summary-ledger-grid--two-columns > .content-card,
    .summary-page .summary-orders-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .summary-page .summary-orders-card .section-header,
    .summary-page .summary-orders-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-card .section-header .btn,
    .summary-page .summary-orders-card .table-card-header .btn,
    .summary-page .summary-orders-card .summary-see-all-btn,
    .summary-page .summary-orders-card .summary-view-all-btn {
        width: auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 13px !important;
        justify-self: end !important;
        align-self: start !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .summary-orders-mobile-list,
    .summary-page .summary-orders-card .mobile-summary-orders-list,
    .summary-page .summary-orders-card .summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-top,
    .summary-page .summary-orders-card .mobile-summary-order-middle {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-code {
        justify-self: start !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-status,
    .summary-page .summary-orders-card .status-pill {
        justify-self: end !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-client {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-payment,
    .summary-page .summary-orders-card .payment-pill {
        justify-self: end !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: #DDFBEA !important;
        color: #087A3F !important;
        border: 1px solid #B8F2D0 !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-metric span {
        margin: 0 !important;
        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-metric strong {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    .summary-page .summary-orders-card .mobile-summary-order-detail-btn {
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 2px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-finance-grid,
    .summary-page .summary-two-columns,
    .summary-page .summary-two-columns.summary-finance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page .summary-finance-grid > .content-card,
    .summary-page .summary-two-columns > .content-card {
        min-width: 0 !important;
        height: auto !important;
        align-self: start !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      Reducir aire inferior manteniendo sombra del ultimo card.
    */

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        overflow: visible !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card,
    .summary-page.summary-page-redesigned .summary-operational-card,
    .summary-page.summary-page-redesigned section.content-card:last-of-type,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 8px !important;
        overflow: visible !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.10),
            0 4px 12px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .summary-actions,
    .summary-page .summary-footer-actions,
    .summary-page .summary-close-day-wrap {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .summary-page .summary-closing-actions .btn,
    .summary-page .summary-actions .btn,
    .summary-page .summary-footer-actions .btn,
    .summary-page .summary-close-day-btn,
    .summary-page button[data-close-day] {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final real:
      Resumen / Cierre del dia en una sola fila de filtros.
    */

    .summary-page.summary-page-redesigned .summary-header-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: start !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-header {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-title {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .section-subtitle {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-actions {
        justify-self: end !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-actions .btn {
        width: auto !important;
        min-width: 142px !important;
        max-width: 176px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card form.form,
    .summary-page.summary-page-redesigned .summary-header-card form {
        display: grid !important;
        grid-template-columns: 240px 320px minmax(220px, 1fr) !important;
        gap: 14px !important;
        align-items: end !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .summary-header-filters,
    .summary-page.summary-page-redesigned .summary-header-card .form-grid {
        display: contents !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card label {
        display: block !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        color: #1D1634 !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card input,
    .summary-page.summary-page-redesigned .summary-header-card select {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-actions {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    .summary-page.summary-page-redesigned .summary-header-card .form-actions .btn,
    .summary-page.summary-page-redesigned .summary-header-card .form-actions button {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      Ordenes ingresadas / entregadas como preview compacto.
    */

    .summary-page.summary-page-redesigned .summary-ledger-grid,
    .summary-page.summary-page-redesigned .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block,
    .summary-page.summary-page-redesigned .summary-orders-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-title-group,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-block-title-group {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .section-title,
    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header h3,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header h3,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .section-subtitle,
    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header p,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header p,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-block-header .btn,
    .summary-page.summary-page-redesigned .summary-orders-block .secondary-top-action-btn,
    .summary-page.summary-page-redesigned .summary-orders-card .section-header .btn,
    .summary-page.summary-page-redesigned .summary-orders-card .table-card-header .btn {
        width: auto !important;
        min-width: 104px !important;
        max-width: 124px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 13px !important;
        justify-self: end !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .summary-orders-mobile-list,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-orders-list,
    .summary-page.summary-page-redesigned .summary-orders-card .summary-orders-mobile-list,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-card,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-card {
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-top,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-main,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-main,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-side,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-side {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-main,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-main {
        min-width: 0 !important;
        align-items: flex-start !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-side,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-side {
        align-items: flex-end !important;
        justify-content: flex-start !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-code-pill,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-code-pill {
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status {
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status.pending,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status.pending {
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border: 1px solid #FFE0A6 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status.done,
    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-status.cancelled,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status.done,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-status.cancelled {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-order-client,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-order-client {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-payment-pill,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-payment-pill {
        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-metrics,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric span,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric span {
        margin: 0 !important;
        padding: 0 !important;
        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-metric strong,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-metric strong {
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-orders-block .mobile-summary-order-detail-btn,
    .summary-page.summary-page-redesigned .summary-orders-card .mobile-summary-order-detail-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin-top: 2px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      Modales Ordenes ingresadas / entregadas con UI mobile aprobado.
    */

    #summaryEnteredOrdersModal,
    #summaryDeliveredOrdersModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    #summaryEnteredOrdersModal .modal-dialog,
    #summaryEnteredOrdersModal .modal-content,
    #summaryDeliveredOrdersModal .modal-dialog,
    #summaryDeliveredOrdersModal .modal-content {
        width: min(920px, calc(100vw - 48px)) !important;
        max-width: 920px !important;
        height: auto !important;
        max-height: calc(100dvh - 48px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #summaryEnteredOrdersModal .modal-header,
    #summaryDeliveredOrdersModal .modal-header {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 18px !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    #summaryEnteredOrdersModal .modal-header h3,
    #summaryEnteredOrdersModal .modal-title,
    #summaryDeliveredOrdersModal .modal-header h3,
    #summaryDeliveredOrdersModal .modal-title {
        grid-column: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #summaryEnteredOrdersModal .modal-close-btn,
    #summaryEnteredOrdersModal [data-modal-close],
    #summaryDeliveredOrdersModal .modal-close-btn,
    #summaryDeliveredOrdersModal [data-modal-close] {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    #summaryEnteredOrdersModal .modal-body,
    #summaryDeliveredOrdersModal .modal-body {
        max-height: calc(100dvh - 112px) !important;
        padding: 16px 18px 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search,
    #summaryDeliveredOrdersModal .summary-orders-modal-search {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-search-input,
    #summaryDeliveredOrdersModal .summary-orders-modal-search-input,
    #summaryEnteredOrdersModal input[type="search"],
    #summaryDeliveredOrdersModal input[type="search"] {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
    }

    #summaryEnteredOrdersModal .summary-orders-modal-table-shell,
    #summaryDeliveredOrdersModal .summary-orders-modal-table-shell {
        display: none !important;
    }

    #summaryEnteredOrdersModal .summary-orders-mobile-list,
    #summaryEnteredOrdersModal .mobile-summary-orders-list,
    #summaryDeliveredOrdersModal .summary-orders-mobile-list,
    #summaryDeliveredOrdersModal .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-card,
    #summaryDeliveredOrdersModal .mobile-summary-order-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-top,
    #summaryDeliveredOrdersModal .mobile-summary-order-top,
    #summaryEnteredOrdersModal .mobile-summary-order-middle,
    #summaryDeliveredOrdersModal .mobile-summary-order-middle {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-code-pill,
    #summaryEnteredOrdersModal .mobile-summary-order-code,
    #summaryDeliveredOrdersModal .mobile-order-code-pill,
    #summaryDeliveredOrdersModal .mobile-summary-order-code {
        justify-self: start !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status,
    #summaryEnteredOrdersModal .mobile-summary-order-status,
    #summaryDeliveredOrdersModal .mobile-order-status,
    #summaryDeliveredOrdersModal .mobile-summary-order-status {
        justify-self: end !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status.pending,
    #summaryDeliveredOrdersModal .mobile-order-status.pending {
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border: 1px solid #FFE0A6 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-status.done,
    #summaryEnteredOrdersModal .mobile-order-status.cancelled,
    #summaryDeliveredOrdersModal .mobile-order-status.done,
    #summaryDeliveredOrdersModal .mobile-order-status.cancelled {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
    }

    #summaryEnteredOrdersModal .mobile-order-client,
    #summaryEnteredOrdersModal .mobile-summary-order-client,
    #summaryDeliveredOrdersModal .mobile-order-client,
    #summaryDeliveredOrdersModal .mobile-summary-order-client {
        justify-self: start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill,
    #summaryEnteredOrdersModal .mobile-summary-order-payment,
    #summaryDeliveredOrdersModal .mobile-payment-pill,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment {
        justify-self: end !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #summaryEnteredOrdersModal .mobile-payment-pill i,
    #summaryDeliveredOrdersModal .mobile-payment-pill i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-metrics,
    #summaryDeliveredOrdersModal .mobile-summary-order-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric,
    #summaryEnteredOrdersModal .mobile-summary-order-metric,
    #summaryDeliveredOrdersModal .mobile-summary-metric,
    #summaryDeliveredOrdersModal .mobile-summary-order-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric span,
    #summaryEnteredOrdersModal .mobile-summary-order-metric span,
    #summaryDeliveredOrdersModal .mobile-summary-metric span,
    #summaryDeliveredOrdersModal .mobile-summary-order-metric span {
        margin: 0 !important;
        padding: 0 !important;
        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric strong,
    #summaryEnteredOrdersModal .mobile-summary-order-metric strong,
    #summaryDeliveredOrdersModal .mobile-summary-metric strong,
    #summaryDeliveredOrdersModal .mobile-summary-order-metric strong {
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric.danger strong,
    #summaryDeliveredOrdersModal .mobile-summary-metric.danger strong {
        color: #D71920 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-metric.success strong,
    #summaryDeliveredOrdersModal .mobile-summary-metric.success strong {
        color: #009B55 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin: 2px 0 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-detail-btn i,
    #summaryDeliveredOrdersModal .mobile-summary-order-detail-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-bottom,
    #summaryDeliveredOrdersModal .mobile-summary-order-bottom,
    #summaryEnteredOrdersModal .mobile-summary-order-card > i.fa-chevron-right,
    #summaryDeliveredOrdersModal .mobile-summary-order-card > i.fa-chevron-right {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      pills de metodo de pago en modales de ordenes.
    */

    #summaryEnteredOrdersModal .mobile-summary-order-middle,
    #summaryDeliveredOrdersModal .mobile-summary-order-middle {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-payment,
    #summaryEnteredOrdersModal .payment-pill,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment,
    #summaryDeliveredOrdersModal .payment-pill {
        justify-self: end !important;
        align-self: center !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 11px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-payment i,
    #summaryEnteredOrdersModal .payment-pill i,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment i,
    #summaryDeliveredOrdersModal .payment-pill i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #summaryEnteredOrdersModal .payment-pill--cash,
    #summaryEnteredOrdersModal .payment-pill--efectivo,
    #summaryEnteredOrdersModal .mobile-summary-order-payment.efectivo,
    #summaryEnteredOrdersModal .mobile-summary-order-payment[data-method="efectivo"],
    #summaryDeliveredOrdersModal .payment-pill--cash,
    #summaryDeliveredOrdersModal .payment-pill--efectivo,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment.efectivo,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment[data-method="efectivo"] {
        background: #DDFBEA !important;
        color: #087A3F !important;
        border: 1px solid #B8F2D0 !important;
    }

    #summaryEnteredOrdersModal .payment-pill--yape,
    #summaryEnteredOrdersModal .mobile-summary-order-payment.yape,
    #summaryEnteredOrdersModal .mobile-summary-order-payment[data-method="yape"],
    #summaryDeliveredOrdersModal .payment-pill--yape,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment.yape,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment[data-method="yape"] {
        background: #F1E8FF !important;
        color: #6C35B8 !important;
        border: 1px solid #DEC8FF !important;
    }

    #summaryEnteredOrdersModal .payment-pill--plin,
    #summaryEnteredOrdersModal .mobile-summary-order-payment.plin,
    #summaryEnteredOrdersModal .mobile-summary-order-payment[data-method="plin"],
    #summaryDeliveredOrdersModal .payment-pill--plin,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment.plin,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment[data-method="plin"] {
        background: #DDFBF6 !important;
        color: #087A72 !important;
        border: 1px solid #B8F2EA !important;
    }

    #summaryEnteredOrdersModal .payment-pill--card,
    #summaryEnteredOrdersModal .payment-pill--tarjeta,
    #summaryEnteredOrdersModal .mobile-summary-order-payment.tarjeta,
    #summaryEnteredOrdersModal .mobile-summary-order-payment[data-method="tarjeta"],
    #summaryDeliveredOrdersModal .payment-pill--card,
    #summaryDeliveredOrdersModal .payment-pill--tarjeta,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment.tarjeta,
    #summaryDeliveredOrdersModal .mobile-summary-order-payment[data-method="tarjeta"] {
        background: #EEF1F6 !important;
        color: #39445E !important;
        border: 1px solid #DDE3EF !important;
    }

    #summaryEnteredOrdersModal .mobile-summary-order-payment:not([class*="payment-pill--"]),
    #summaryDeliveredOrdersModal .mobile-summary-order-payment:not([class*="payment-pill--"]) {
        background: #DDFBEA !important;
        color: #087A3F !important;
        border: 1px solid #B8F2D0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      header alineado a la izquierda del modal Detalle de la orden.
    */

    #summaryOrderDetailModal .summary-order-detail-header {
        min-height: 72px !important;
        height: 72px !important;
        padding: 0 18px 0 28px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px !important;
        gap: 12px !important;
        align-items: center !important;
        justify-items: stretch !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-sizing: border-box !important;
    }

    #summaryOrderDetailModal .summary-order-detail-title-group {
        grid-column: 1 !important;
        justify-self: start !important;
        align-self: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 6px !important;
        text-align: left !important;
    }

    #summaryOrderDetailModal .summary-order-detail-title-group .modal-title {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    #summaryOrderDetailModal .summary-order-detail-code {
        min-height: 22px !important;
        width: fit-content !important;
        max-width: max-content !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #summaryOrderDetailModal .summary-order-detail-header .modal-close-btn {
        grid-column: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #summaryOrderDetailModal .summary-order-detail-header .modal-close-btn i {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      compactar Resumen de cobros del dia y Gastos del dia.
    */

    .summary-page.summary-page-redesigned .summary-finance-grid,
    .summary-page.summary-page-redesigned .summary-two-columns.summary-finance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card,
    .summary-page.summary-page-redesigned .summary-expenses-day-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-block-header,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .section-title,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .section-title {
        margin: 0 0 5px !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-block-title-group p,
    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-block-title-group p {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-summary-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-summary-card.summary-payment-method-row {
        width: 100% !important;
        min-height: 70px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) max-content 30px !important;
        gap: 12px !important;
        align-items: center !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.07) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-summary-left {
        display: contents !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-icon {
        grid-column: 1 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-info {
        grid-column: 2 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-pill {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #10194A !important;
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-info small {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-total {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.28rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-open-btn {
        grid-column: 4 !important;
        justify-self: end !important;
        align-self: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-grand-total {
        min-height: 50px !important;
        margin: 12px 0 0 !important;
        padding: 0 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        border-radius: 15px !important;
        border: 1px solid #B8F2D0 !important;
        background: #F0FFF6 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-grand-total span {
        margin: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-grand-total strong {
        margin: 0 !important;
        color: #087A3F !important;
        font-size: 0.98rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-card.summary-expense-row {
        width: 100% !important;
        min-height: 70px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        gap: 12px !important;
        align-items: center !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.07) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-left {
        grid-column: 1 !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        background: #FFE4E4 !important;
        color: #D71920 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-info {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-label {
        margin: 0 !important;
        color: #9A96AA !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-title {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.9rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-meta {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.74rem !important;
        line-height: 1.12 !important;
        font-weight: 400 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-amount {
        grid-column: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #B71919 !important;
        font-size: 1.24rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-total-card.summary-expense-total-card {
        width: 100% !important;
        min-height: 72px !important;
        margin: 12px 0 0 !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
        border: 1px solid #FFB7B7 !important;
        background: #FFF3F3 !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-total-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 15px !important;
        background: #FFE1E1 !important;
        color: #D71920 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-total-info {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-total-info span {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-total-info strong {
        margin: 0 !important;
        color: #C51414 !important;
        font-size: 1.42rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-note {
        margin: 10px 0 0 !important;
        color: #6F6A80 !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      Balance del dia compacto, sin titulo duplicado.
    */

    .summary-page.summary-page-redesigned .summary-day-balance-card {
        padding: 18px !important;
        border-radius: 20px !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: start !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .section-title {
        margin: 0 0 5px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-strip,
    .summary-page.summary-page-redesigned .summary-day-balance-card .tablet-card-hide {
        display: none !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-card[hidden] {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-inner-header,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-header {
        display: none !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row {
        min-height: 48px !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row:last-child {
        border-bottom: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row-left {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success .mobile-balance-icon {
        background: #E8F8EE !important;
        color: #15803D !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger .mobile-balance-icon {
        background: #FFE4E4 !important;
        color: #D71920 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-icon i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row span {
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.88rem !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row strong {
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.success strong {
        color: #15803D !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-row.danger strong {
        color: #D71920 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        width: 100% !important;
        min-height: 66px !important;
        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 10px 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(74, 88, 153, 0.22) !important;
        background: linear-gradient(180deg, #F8F9FF 0%, #F3F5FF 100%) !important;
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        background: #EAF0FF !important;
        color: #3151D3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label value"
            "label result" !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        grid-area: label !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.88rem !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        grid-area: value !important;
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #3151D3 !important;
        font-size: 1.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        grid-area: result !important;
        justify-self: end !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-negative {
        background: #FFE1E1 !important;
        color: #C51414 !important;
        border: 1px solid #FFC2C2 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-positive {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
    }
}

.summary-page .summary-balance-header-result-pill {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait),
       (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad vertical + horizontal - final fisico:
      pill Resultado dentro del header real de Balance del dia.
    */

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: start !important;
        padding-right: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-block-title-group {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-header-result-pill {
        justify-self: end !important;
        align-self: start !important;

        width: fit-content !important;
        max-width: max-content !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 999px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-header-result-pill.is-negative {
        background: #FFE1E1 !important;
        color: #C51414 !important;
        border: 1px solid #FFC2C2 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-header-result-pill.is-positive {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        display: none !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        grid-template-areas: "label value" !important;
        row-gap: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical - final fisico:
      mantener solo el pill superior de Balance del dia.
    */

    .summary-page.summary-page-redesigned .summary-day-balance-card .summary-balance-header-result-pill,
    .summary-page .summary-day-balance-card .summary-balance-header-result-pill {
        display: inline-flex !important;
    }

    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-positive,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small.is-negative,
    .summary-page .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page .summary-day-balance-card .mobile-balance-total-content small.is-positive,
    .summary-page .summary-day-balance-card .mobile-balance-total-content small.is-negative,
    .summary-page .summary-day-balance-card .summary-balance-total .summary-balance-result-pill,
    .summary-page .summary-day-balance-card .summary-balance-total .balance-result-pill,
    .summary-page .summary-day-balance-card .summary-balance-total .result-pill,
    .summary-page .summary-day-balance-card .summary-total-day-card .summary-balance-result-pill,
    .summary-page .summary-day-balance-card .summary-total-day-card .balance-result-pill,
    .summary-page .summary-day-balance-card .summary-total-day-card .result-pill,
    .summary-page .summary-day-balance-card .balance-total-card .summary-balance-result-pill,
    .summary-page .summary-day-balance-card .balance-total-card .balance-result-pill,
    .summary-page .summary-day-balance-card .balance-total-card .result-pill,
    .summary-page .summary-day-balance-card .summary-balance-total-value-wrap .summary-balance-result-pill,
    .summary-page .summary-day-balance-card .summary-balance-total-value-wrap .balance-result-pill,
    .summary-page .summary-day-balance-card .summary-balance-total-value-wrap .result-pill {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      ordenar Resumen operativo del dia.
    */

    .summary-page.summary-page-redesigned .summary-operational-day-card {
        padding: 18px !important;
        border-radius: 20px !important;
        min-height: 0 !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-block-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 14px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-block-title-group {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .section-title {
        margin: 0 0 5px !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .section-subtitle {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge {
        justify-self: end !important;
        align-self: start !important;
        width: auto !important;
        max-width: max-content !important;
        min-width: 112px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge.is-complete {
        background: #D9FBE7 !important;
        border: 1px solid #B8F2D0 !important;
        color: #067A3D !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge.is-replenishable {
        background: #FEF3C7 !important;
        border: 1px solid #FDE68A !important;
        color: #92400E !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-badge.is-insufficient {
        background: #FFE1E1 !important;
        border: 1px solid #FFC2C2 !important;
        color: #C51414 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpis,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpi,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metric-card {
        min-height: 76px !important;
        padding: 13px 14px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.82) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.06) !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpi span,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metric-card span {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-kpi strong,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-metric-card strong {
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.16rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-card,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
        border: 1px solid #B8F2D0 !important;
        background: linear-gradient(135deg, #E9FFF1 0%, #DDFBEA 100%) !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "icon copy detail"
            "action action action" !important;
        gap: 12px 14px !important;
        align-items: start !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-icon {
        grid-area: icon !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: #08A64B !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy {
        grid-area: copy !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy strong {
        margin: 0 !important;
        color: #0F5132 !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy span,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-copy p {
        margin: 0 !important;
        color: #3E6F55 !important;
        font-size: 0.82rem !important;
        line-height: 1.28 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail {
        grid-area: detail !important;
        min-width: 160px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail span,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-detail small {
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid rgba(35, 168, 92, 0.22) !important;
        color: #305C42 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action {
        grid-area: action !important;
        width: 100% !important;
        max-width: none !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action a.summary-operational-movements-btn,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-status-action .summary-operational-movements-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-movements-btn span {
        color: var(--primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-movements-btn i {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-movements-btn i::before {
        color: #FFFFFF !important;
        line-height: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-meta,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-cash-movement-duplicate {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      compactar componente Efectivo libre acumulado.
    */

    .summary-page.summary-page-redesigned .summary-free-cash-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
        border: 1px solid #B8F2D0 !important;
        background: linear-gradient(180deg, #F2FFF8 0%, #EFFFF6 100%) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card .summary-block-header,
    .summary-page.summary-page-redesigned .summary-operational-weekly .summary-block-header {
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card .section-title,
    .summary-page.summary-page-redesigned .summary-operational-weekly .section-title {
        margin: 0 0 5px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-operational-weekly .section-subtitle {
        margin: 0 !important;
        padding: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card,
    .summary-page.summary-page-redesigned .summary-weekly-total-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total {
        min-height: 78px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(35, 168, 92, 0.24) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "label value"
            "desc value" !important;
        gap: 4px 16px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card span,
    .summary-page.summary-page-redesigned .summary-weekly-total-card span,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total span {
        grid-area: label !important;
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card strong,
    .summary-page.summary-page-redesigned .summary-weekly-total-card strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total strong {
        grid-area: value !important;
        justify-self: end !important;
        margin: 0 !important;
        color: #006B3F !important;
        font-size: 1.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card small,
    .summary-page.summary-page-redesigned .summary-weekly-total-card small,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total small {
        grid-area: desc !important;
        margin: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-days {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-days-grid,
    .summary-page.summary-page-redesigned .summary-operational-weekly-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item {
        min-height: 72px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        align-items: start !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card.is-today,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item.is-today {
        border-color: #8DF2B6 !important;
        background: linear-gradient(180deg, #F3FFF8 0%, #EFFFF6 100%) !important;
        box-shadow: 0 8px 18px rgba(35, 168, 92, 0.10) !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-day {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-label {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.84rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-pill {
        justify-self: end !important;
        min-height: 20px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border: 1px solid #B8F2D0 !important;
        font-size: 0.64rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card small,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item small {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item strong {
        margin: 0 !important;
        color: #006B3F !important;
        font-size: 0.94rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card.is-negative strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item.is-negative strong {
        color: #C51414 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer {
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(35, 168, 92, 0.22) !important;
        background: rgba(255, 255, 255, 0.72) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card span,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer span {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer strong {
        justify-self: end !important;
        margin: 0 !important;
        color: #006B3F !important;
        font-size: 1.08rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card.negative strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer.negative strong {
        color: #C51414 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final fisico:
      reducir espacio inferior sobre bottom nav sin perder sombra.
    */

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        overflow: visible !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) main.dashboard-main > section.content-area.page-content,
    body:has(.summary-page.summary-page-redesigned) section.content-area.page-content {
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    body.tablet-app-mode:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned,
    body:has(.summary-page.summary-page-redesigned) .summary-page.summary-page-redesigned {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card,
    .summary-page.summary-page-redesigned .summary-operational-card,
    .summary-page.summary-page-redesigned section.content-card:last-of-type,
    .summary-page.summary-page-redesigned .content-card:last-child {
        margin-bottom: 10px !important;
        overflow: visible !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.10),
            0 4px 12px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page .summary-closing-actions,
    .summary-page .summary-actions,
    .summary-page .summary-footer-actions,
    .summary-page .summary-close-day-wrap {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .summary-page .summary-closing-actions .btn,
    .summary-page .summary-actions .btn,
    .summary-page .summary-footer-actions .btn,
    .summary-page .summary-close-day-btn,
    .summary-page button[data-close-day] {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal - final real:
      colores por metodo de pago en Resumen de cobros del dia.
    */

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-icon,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        opacity: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-icon i,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .mobile-payment-icon i {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.efectivo .summary-payment-method-icon,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.efectivo .mobile-payment-icon {
        background: #DDF7E7 !important;
        color: #147A3F !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.efectivo .summary-payment-method-icon i,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.efectivo .mobile-payment-icon i {
        color: #147A3F !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.yape .summary-payment-method-icon,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.yape .mobile-payment-icon {
        background: #EEE5FF !important;
        color: #6F2BD9 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.yape .summary-payment-method-icon i,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.yape .mobile-payment-icon i {
        color: #6F2BD9 !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.plin .summary-payment-method-icon,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.plin .mobile-payment-icon {
        background: #DFF6F4 !important;
        color: #0F766E !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.plin .summary-payment-method-icon i,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.plin .mobile-payment-icon i {
        color: #0F766E !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.tarjeta .summary-payment-method-icon,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.tarjeta .mobile-payment-icon {
        background: #E8F1FF !important;
        color: #2563EB !important;
    }

    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.tarjeta .summary-payment-method-icon i,
    .summary-page.summary-page-redesigned .summary-payment-methods-card .summary-payment-method-row.tarjeta .mobile-payment-icon i {
        color: #2563EB !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /summary iPad horizontal -
      modales de cobros por metodo de pago con UI de cards responsive.
    */

    [id^="summaryPaymentsMethodModal-"].modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 18px !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-dialog,
    [id^="summaryPaymentsMethodModal-"] .modal-content {
        width: min(920px, calc(100vw - 48px)) !important;
        max-width: 920px !important;
        height: auto !important;
        max-height: calc(100dvh - 48px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-header {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 18px !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-sizing: border-box !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-header h3,
    [id^="summaryPaymentsMethodModal-"] .modal-title {
        grid-column: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-close-btn,
    [id^="summaryPaymentsMethodModal-"] [data-modal-close] {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [id^="summaryPaymentsMethodModal-"] .modal-body {
        max-height: calc(100dvh - 112px) !important;
        padding: 16px 18px 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-search {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] input[type="search"],
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-search-input {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table-shell,
    [id^="summaryPaymentsMethodModal-"] .table-wrapper.tablet-card-hide {
        display: none !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-mobile-list,
    [id^="summaryPaymentsMethodModal-"] .mobile-summary-orders-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .mobile-summary-order-card.summary-payment-order-card,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "code status"
            "client payment"
            "metrics metrics"
            "detail detail" !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        align-items: center !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-top,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-main,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-side {
        display: contents !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-code-pill {
        grid-area: code !important;
        justify-self: start !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: #F2F0FF !important;
        color: #4A5899 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status {
        grid-area: status !important;
        justify-self: end !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.pending {
        background: #FFF2D6 !important;
        color: #B06A1B !important;
        border-color: #FFE0A6 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.done,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.cancelado,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-status.cancelled {
        background: #D9FBE7 !important;
        color: #067A3D !important;
        border-color: #B8F2D0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-order-client {
        grid-area: client !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill {
        grid-area: payment !important;
        justify-self: end !important;
        min-height: 28px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.efectivo {
        background: #DDF7E7 !important;
        color: #147A3F !important;
        border-color: #B8F2D0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.yape {
        background: #EEE5FF !important;
        color: #6F2BD9 !important;
        border-color: #DDCAFF !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.plin {
        background: #DFF6F4 !important;
        color: #0F766E !important;
        border-color: #B7ECE7 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-payment-pill.tarjeta {
        background: #E8F1FF !important;
        color: #2563EB !important;
        border-color: #C7DAFF !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-metrics {
        grid-area: metrics !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(248, 251, 255, 0.96) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric span {
        margin: 0 !important;
        padding: 0 !important;
        color: #7A768A !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        font-weight: 400 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric strong {
        margin: 0 !important;
        padding: 0 !important;
        color: #10194A !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric.danger strong {
        color: #D71920 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-metric.success strong {
        color: #009B55 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-detail-btn {
        grid-area: detail !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin: 2px 0 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-detail-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card .mobile-summary-order-bottom,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card > i.fa-chevron-right,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-order-card > .fa-chevron-right {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /summary iPad vertical -
      centrar verticalmente monto del bloque Total del dia.
    */

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-card {
        min-height: 64px !important;
        height: auto !important;
        padding: 10px 14px !important;
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-icon {
        grid-column: 1 !important;
        align-self: center !important;
        justify-self: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content {
        grid-column: 2 / 4 !important;
        min-height: 44px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "label value" !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
        align-items: center !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content span {
        grid-area: label !important;
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content strong {
        grid-area: value !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    body.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    html.tablet-app-mode .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small,
    .summary-page.summary-page-redesigned .summary-day-balance-card .mobile-balance-total-content small {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      tablas de ordenes ingresadas / entregadas.
    */

    .summary-page .summary-ledger-grid,
    .summary-page .summary-ledger-grid--two-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: start !important;
    }

    .summary-page .summary-orders-card {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .summary-page .summary-orders-card .section-header,
    .summary-page .summary-orders-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: start !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    .summary-page .summary-orders-card .section-header .btn,
    .summary-page .summary-orders-card .table-card-header .btn,
    .summary-page .summary-orders-card .summary-see-all-btn,
    .summary-page .summary-orders-card .summary-view-all-btn {
        width: auto !important;
        min-width: 136px !important;
        max-width: 160px !important;
        min-height: 42px !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        justify-self: end !important;
        align-self: start !important;
        font-size: 0.86rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .table-responsive,
    .summary-page .summary-orders-card .table-wrapper,
    .summary-page .summary-orders-card .summary-table-wrapper,
    .summary-page .summary-orders-card .summary-ledger-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .summary-page .summary-orders-card table,
    .summary-page .summary-orders-card .data-table,
    .summary-page .summary-orders-card .summary-ledger-table {
        width: 100% !important;
        min-width: 620px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    .summary-page .summary-orders-card th,
    .summary-page .summary-orders-card td {
        padding: 14px 10px !important;
        vertical-align: middle !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .summary-page .summary-orders-card th {
        color: var(--primary) !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .summary-page .summary-orders-card td {
        color: #1D1634 !important;
        text-align: center !important;
    }

    .summary-page .summary-orders-card th:nth-child(1),
    .summary-page .summary-orders-card td:nth-child(1) {
        width: 18% !important;
    }

    .summary-page .summary-orders-card th:nth-child(2),
    .summary-page .summary-orders-card td:nth-child(2) {
        width: 22% !important;
    }

    .summary-page .summary-orders-card th:nth-child(3),
    .summary-page .summary-orders-card td:nth-child(3) {
        width: 16% !important;
    }

    .summary-page .summary-orders-card th:nth-child(4),
    .summary-page .summary-orders-card td:nth-child(4),
    .summary-page .summary-orders-card th:nth-child(5),
    .summary-page .summary-orders-card td:nth-child(5),
    .summary-page .summary-orders-card th:nth-child(6),
    .summary-page .summary-orders-card td:nth-child(6) {
        width: 13% !important;
    }

    .summary-page .summary-orders-card th:nth-child(7),
    .summary-page .summary-orders-card td:nth-child(7) {
        width: 15% !important;
    }

    .summary-page .summary-orders-card .status-pill,
    .summary-page .summary-orders-card .payment-pill,
    .summary-page .summary-orders-card .code-pill,
    .summary-page .summary-orders-card .order-code-pill,
    .summary-page .summary-orders-card .summary-code-pill,
    .summary-page .summary-orders-card .pill-chip,
    .summary-page .summary-orders-card .status-chip {
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card td:nth-child(4),
    .summary-page .summary-orders-card td:nth-child(5),
    .summary-page .summary-orders-card td:nth-child(6) {
        white-space: nowrap !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      accion Ver detalle en tablas principales de ordenes.
    */

    .summary-page .summary-orders-block table,
    .summary-page .summary-orders-block .data-table,
    .summary-page .summary-orders-block .summary-ledger-table {
        table-layout: fixed !important;
        min-width: 760px !important;
    }

    .summary-page .summary-orders-block .table-wrapper,
    .summary-page .summary-orders-block .summary-ledger-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .summary-page .summary-orders-block th,
    .summary-page .summary-orders-block td {
        vertical-align: middle !important;
    }

    .summary-page .summary-orders-block th:nth-child(1),
    .summary-page .summary-orders-block td:nth-child(1) {
        width: 13% !important;
    }

    .summary-page .summary-orders-block th:nth-child(2),
    .summary-page .summary-orders-block td:nth-child(2) {
        width: 18% !important;
    }

    .summary-page .summary-orders-block th:nth-child(3),
    .summary-page .summary-orders-block td:nth-child(3) {
        width: 14% !important;
    }

    .summary-page .summary-orders-block th:nth-child(4),
    .summary-page .summary-orders-block td:nth-child(4),
    .summary-page .summary-orders-block th:nth-child(5),
    .summary-page .summary-orders-block td:nth-child(5),
    .summary-page .summary-orders-block th:nth-child(6),
    .summary-page .summary-orders-block td:nth-child(6) {
        width: 10% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block th:nth-child(7),
    .summary-page .summary-orders-block td:nth-child(7) {
        width: 13% !important;
    }

    .summary-page .summary-orders-block th:nth-child(8),
    .summary-page .summary-orders-block td:nth-child(8),
    .summary-page .summary-orders-block td.summary-order-actions-cell {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .summary-page .summary-orders-block .summary-order-actions-cell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .summary-page .summary-orders-block .summary-order-actions-cell .mobile-summary-order-detail-btn,
    .summary-page .summary-orders-block .summary-table-detail-btn {
        width: 100% !important;
        max-width: 116px !important;
        min-height: 36px !important;
        margin: 0 auto !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .summary-page .summary-orders-block .summary-order-actions-cell .mobile-summary-order-detail-btn i,
    .summary-page .summary-orders-block .summary-table-detail-btn i {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      accion compacta en tablas principales de ordenes.
    */

    .summary-page .summary-orders-card {
        overflow: hidden !important;
    }

    .summary-page .summary-orders-card table,
    .summary-page .summary-orders-card .data-table,
    .summary-page .summary-orders-block table,
    .summary-page .summary-orders-block .data-table,
    .summary-page .summary-orders-block .summary-ledger-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .summary-page .summary-orders-card .table-wrapper,
    .summary-page .summary-orders-card .summary-ledger-table-wrapper,
    .summary-page .summary-orders-block .table-wrapper,
    .summary-page .summary-orders-block .summary-ledger-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .summary-page .summary-orders-card table th,
    .summary-page .summary-orders-card table td,
    .summary-page .summary-orders-card .data-table th,
    .summary-page .summary-orders-card .data-table td {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .summary-page .summary-orders-card th:nth-child(1),
    .summary-page .summary-orders-card td:nth-child(1) {
        width: 14% !important;
    }

    .summary-page .summary-orders-card th:nth-child(2),
    .summary-page .summary-orders-card td:nth-child(2) {
        width: 18% !important;
    }

    .summary-page .summary-orders-card th:nth-child(3),
    .summary-page .summary-orders-card td:nth-child(3) {
        width: 14% !important;
    }

    .summary-page .summary-orders-card th:nth-child(4),
    .summary-page .summary-orders-card td:nth-child(4),
    .summary-page .summary-orders-card th:nth-child(5),
    .summary-page .summary-orders-card td:nth-child(5),
    .summary-page .summary-orders-card th:nth-child(6),
    .summary-page .summary-orders-card td:nth-child(6) {
        width: 10% !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    .summary-page .summary-orders-card th:nth-child(7),
    .summary-page .summary-orders-card td:nth-child(7) {
        width: 16% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card th.summary-order-actions-head,
    .summary-page .summary-orders-card td.summary-order-actions-cell,
    .summary-page .summary-orders-card th:nth-child(8),
    .summary-page .summary-orders-card td:nth-child(8) {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-card .summary-order-actions-cell .summary-table-detail-btn,
    .summary-page .summary-orders-block .summary-order-actions-cell .summary-table-detail-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 1px solid var(--border, #d7dff4) !important;
        border-radius: 12px !important;
        background: #eef0ff !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease !important;
    }

    .summary-page .summary-orders-card .summary-order-actions-cell .summary-table-detail-btn:hover,
    .summary-page .summary-orders-block .summary-order-actions-cell .summary-table-detail-btn:hover {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
        transform: translateY(-1px) !important;
    }

    .summary-page .summary-orders-card .summary-order-actions-cell .summary-table-detail-btn span,
    .summary-page .summary-orders-block .summary-order-actions-cell .summary-table-detail-btn span {
        display: none !important;
    }

    .summary-page .summary-orders-card .summary-order-actions-cell .summary-table-detail-btn i,
    .summary-page .summary-orders-block .summary-order-actions-cell .summary-table-detail-btn i {
        margin: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        color: currentColor !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      refuerzo con selector real de tablas: .summary-orders-block.
    */

    .summary-page .summary-orders-block th:nth-child(1),
    .summary-page .summary-orders-block td:nth-child(1) {
        width: 14% !important;
    }

    .summary-page .summary-orders-block th:nth-child(2),
    .summary-page .summary-orders-block td:nth-child(2) {
        width: 18% !important;
    }

    .summary-page .summary-orders-block th:nth-child(3),
    .summary-page .summary-orders-block td:nth-child(3) {
        width: 14% !important;
    }

    .summary-page .summary-orders-block th:nth-child(4),
    .summary-page .summary-orders-block td:nth-child(4),
    .summary-page .summary-orders-block th:nth-child(5),
    .summary-page .summary-orders-block td:nth-child(5),
    .summary-page .summary-orders-block th:nth-child(6),
    .summary-page .summary-orders-block td:nth-child(6) {
        width: 10% !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    .summary-page .summary-orders-block th:nth-child(7),
    .summary-page .summary-orders-block td:nth-child(7) {
        width: 16% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block th.summary-order-actions-head,
    .summary-page .summary-orders-block td.summary-order-actions-cell,
    .summary-page .summary-orders-block th:nth-child(8),
    .summary-page .summary-orders-block td:nth-child(8) {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      hover transparente y fila clickeable en tablas de ordenes.
    */

    .summary-page .summary-orders-block .summary-order-row-clickable {
        position: relative !important;
        cursor: pointer !important;
        transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable > td {
        position: relative !important;
        z-index: 1 !important;
        background: transparent !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable::after {
        content: "" !important;
        position: absolute !important;
        inset: 4px 8px !important;
        border-radius: 16px !important;
        background: rgba(84, 88, 153, 0.08) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;
        transition: opacity 0.18s ease !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(84, 88, 153, 0.16) !important;
        background:
            radial-gradient(circle at center, var(--primary) 0 4px, transparent 4.5px),
            radial-gradient(ellipse at center, transparent 0 10px, var(--primary) 10.5px 11.5px, transparent 12px),
            rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 10px 24px rgba(84, 88, 153, 0.12) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 2 !important;
        transform: translate(-50%, -50%) scale(0.92) !important;
        transition: opacity 0.18s ease, transform 0.18s ease !important;
        backdrop-filter: blur(2px) !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable:hover::after,
    .summary-page .summary-orders-block .summary-order-row-clickable:focus-within::after {
        opacity: 1 !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable:hover::before,
    .summary-page .summary-orders-block .summary-order-row-clickable:focus-within::before {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable:hover > td,
    .summary-page .summary-orders-block .summary-order-row-clickable:focus-within > td {
        opacity: 1 !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable .summary-table-icon-action {
        position: relative !important;
        z-index: 3 !important;
    }

    .summary-page .summary-orders-block .summary-order-row-clickable:focus-within {
        outline: none !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      realinear tablas de ordenes sin alterar el comportamiento nativo de tabla.
    */

    .summary-page .summary-orders-block .summary-orders-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .summary-page .summary-orders-block .summary-orders-table thead th {
        padding: 14px 10px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: normal !important;
        font-weight: 700 !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody td {
        padding: 18px 10px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: normal !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(1),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) {
        width: 14% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(2),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(2) {
        width: 18% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(3),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(3) {
        width: 14% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(4),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(4),
    .summary-page .summary-orders-block .summary-orders-table th:nth-child(5),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(5),
    .summary-page .summary-orders-block .summary-orders-table th:nth-child(6),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(6) {
        width: 10% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(7),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) {
        width: 14% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(8),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(8),
    .summary-page .summary-orders-block .summary-orders-table th.summary-order-actions-head,
    .summary-page .summary-orders-block .summary-orders-table td.summary-order-actions-cell {
        width: 10% !important;
        min-width: 64px !important;
        max-width: 72px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr,
    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable {
        display: table-row !important;
        position: static !important;
        cursor: pointer !important;
        transition: background-color 0.18s ease !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody td {
        display: table-cell !important;
        position: static !important;
        z-index: auto !important;
        background: transparent !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable::before,
    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable::after {
        content: none !important;
        display: none !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable:hover {
        background: rgba(84, 88, 153, 0.05) !important;
    }

    .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) .pill-chip,
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(3) .payment-pill,
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(3) .mobile-payment-pill,
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) .status-pill,
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) .status-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .summary-orders-table td:nth-child(2) {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .summary-page .summary-orders-block .summary-orders-table .summary-table-icon-action {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      tablas limpias de ordenes: sin columna Acciones.
    */

    .summary-page .summary-orders-block .table-wrapper,
    .summary-page .summary-orders-block .summary-ledger-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .summary-page .summary-orders-block .summary-orders-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tr {
        display: table-row !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th,
    .summary-page .summary-orders-block .summary-orders-table td {
        display: table-cell !important;
        padding: 16px 10px !important;
        text-align: center !important;
        vertical-align: middle !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th {
        color: var(--primary) !important;
        font-size: 0.86rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    .summary-page .summary-orders-block .summary-orders-table td {
        color: #1D1634 !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        white-space: normal !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(1),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) {
        width: 15% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(2),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(2) {
        width: 21% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(3),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(3) {
        width: 16% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(4),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(4),
    .summary-page .summary-orders-block .summary-orders-table th:nth-child(5),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(5),
    .summary-page .summary-orders-block .summary-orders-table th:nth-child(6),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(6) {
        width: 13% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th:nth-child(7),
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) {
        width: 17% !important;
    }

    .summary-page .summary-orders-block .summary-orders-table th.summary-order-actions-head,
    .summary-page .summary-orders-block .summary-orders-table td.summary-order-actions-cell,
    .summary-page .summary-orders-block .summary-orders-table .summary-table-icon-action,
    .summary-page .summary-orders-block .summary-orders-table .summary-row-detail-action,
    .summary-page .summary-orders-block .summary-orders-table .summary-table-detail-btn {
        display: none !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable {
        position: static !important;
        cursor: pointer !important;
        transition: background-color 0.18s ease !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable::before,
    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable::after {
        content: none !important;
        display: none !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable:hover {
        background: rgba(74, 88, 153, 0.055) !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable td:nth-child(4) {
        position: relative !important;
    }

    .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable:focus {
        outline: 2px solid rgba(74, 88, 153, 0.28) !important;
        outline-offset: -2px !important;
    }

    .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) .pill-chip,
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(3) [class*="pill"],
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) [class*="pill"],
    .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) .status-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    .summary-page .summary-orders-block .summary-orders-table td:nth-child(2) {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      accion con ojo en modales de cobros por metodo.
    */

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table-shell {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    [id^="summaryPaymentsMethodModal-"] table,
    [id^="summaryPaymentsMethodModal-"] .data-table,
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th,
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td {
        padding: 14px 10px !important;
        text-align: center !important;
        vertical-align: middle !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th {
        color: var(--primary) !important;
        font-size: 0.86rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td {
        color: #1D1634 !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        white-space: normal !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(1),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(1) {
        width: 13% !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(2),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(2) {
        width: 20% !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(3),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(3) {
        width: 13% !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(4),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(4) {
        width: 18% !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(5),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(5) {
        width: 15% !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(6),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(6) {
        width: 14% !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table th:nth-child(7),
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table td:nth-child(7),
    [id^="summaryPaymentsMethodModal-"] .summary-payment-modal-action-head,
    [id^="summaryPaymentsMethodModal-"] .summary-payment-modal-action-cell {
        width: 7% !important;
        min-width: 64px !important;
        max-width: 72px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-modal-eye-action {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(74, 88, 153, 0.22) !important;
        background: #EEF0FF !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        text-decoration: none !important;
        transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-modal-eye-action:hover {
        background: var(--primary) !important;
        color: #FFFFFF !important;
        border-color: var(--primary) !important;
        transform: translateY(-1px) !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-modal-eye-action span {
        display: none !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-payment-modal-eye-action i {
        margin: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        color: currentColor !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table tbody tr {
        transition: background-color 0.18s ease !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table tbody tr:hover {
        background: rgba(74, 88, 153, 0.045) !important;
    }

    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table .pill-chip,
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table .payment-pill,
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table .status-pill,
    [id^="summaryPaymentsMethodModal-"] .summary-orders-modal-table .status-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      reducir espacio entre header y formula del Balance del dia.
    */

    .summary-page .summary-day-balance-card,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active {
        padding-top: 22px !important;
    }

    .summary-page .summary-day-balance-card .summary-block-header,
    .summary-page .summary-day-balance-card .section-header,
    .summary-page .summary-day-balance-card .table-card-header,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-block-header,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .section-header,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .table-card-header {
        margin-bottom: 18px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-day-balance-card .summary-block-header h2,
    .summary-page .summary-day-balance-card .summary-block-header h3,
    .summary-page .summary-day-balance-card .section-header h2,
    .summary-page .summary-day-balance-card .section-header h3,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-block-header h2,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-block-header h3,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .section-header h2,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .section-header h3 {
        margin-bottom: 6px !important;
    }

    .summary-page .summary-day-balance-card .summary-block-header p,
    .summary-page .summary-day-balance-card .section-header p,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-block-header p,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .section-header p {
        margin-bottom: 0 !important;
    }

    .summary-page .summary-day-balance-card .summary-balance-strip,
    .summary-page .summary-day-balance-card .summary-balance-equation,
    .summary-page .summary-day-balance-card .summary-balance-formula,
    .summary-page .summary-day-balance-card .summary-balance-desktop-equation,
    .summary-page .summary-day-balance-card .summary-balance-cards,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-strip,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-equation,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-formula,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-desktop-equation,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-cards {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      Balance del dia: reducir gap real entre header y formula.
    */

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 12px !important;
        gap: 12px !important;
    }

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-block-header,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .section-header,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .table-card-header,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-block-header,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .section-header,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .table-card-header {
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-block-header h2,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-block-header h3,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .section-header h2,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .section-header h3,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-block-header h2,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-block-header h3,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .section-header h2,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .section-header h3 {
        margin: 0 0 6px !important;
        padding: 0 !important;
    }

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-block-header p,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .section-header p,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-block-header p,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .section-header p {
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-balance-equation,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-balance-formula,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-balance-desktop-equation,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-balance-cards,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-balance-strip,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-balance-strip-row,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-balance-equation,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-balance-formula,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-balance-desktop-equation,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-balance-cards,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-balance-strip,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-balance-strip-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .summary-block-header + *,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active > .section-header + *,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .summary-block-header + *,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active > .section-header + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .summary-page .summary-day-balance-card.summary-balance-strip-card--active .summary-balance-equation,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active .summary-balance-formula,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active .summary-balance-desktop-equation,
    .summary-page .summary-day-balance-card.summary-balance-strip-card--active .summary-balance-cards,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-equation,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-formula,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-desktop-equation,
    .summary-page .summary-balance-strip-card.summary-balance-strip-card--active .summary-balance-cards {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: center !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      reducir espacio entre header y metricas del Resumen operativo del dia.
    */

    .summary-page .summary-operational-day-card > .summary-block-header,
    .summary-page .summary-operational-card > .summary-block-header {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    .summary-page .summary-operational-day-card > .summary-block-header h2,
    .summary-page .summary-operational-day-card > .summary-block-header h3,
    .summary-page .summary-operational-card > .summary-block-header h2,
    .summary-page .summary-operational-card > .summary-block-header h3 {
        margin-bottom: 4px !important;
    }

    .summary-page .summary-operational-day-card > .summary-block-header p,
    .summary-page .summary-operational-card > .summary-block-header p {
        margin-bottom: 0 !important;
    }

    .summary-page .summary-operational-day-card .summary-operational-metrics-grid,
    .summary-page .summary-operational-day-card .summary-operational-kpis,
    .summary-page .summary-operational-day-card .summary-operational-stats-grid,
    .summary-page .summary-operational-card .summary-operational-metrics-grid,
    .summary-page .summary-operational-card .summary-operational-kpis,
    .summary-page .summary-operational-card .summary-operational-stats-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (min-width: 1200px) {
    /*
      /summary desktop -
      ordenar Movimientos recientes + Efectivo libre acumulado.
    */

    .summary-page.summary-page-redesigned .summary-operational-day-card {
        overflow: visible !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.10),
            0 4px 12px rgba(74, 88, 153, 0.06) !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements-header {
        margin: 12px 0 8px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements-header strong,
    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements-header h3 {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-empty-copy {
        margin: 0 0 14px !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly {
        min-height: 0 !important;
        height: auto !important;
        padding: 18px !important;
        border-radius: 20px !important;
        border: 1px solid #B8F2D0 !important;
        background: linear-gradient(180deg, #F3FFF8 0%, #EFFFF6 100%) !important;
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        grid-template-areas:
            "header header"
            "total days"
            "total week" !important;
        gap: 14px !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card > .summary-block-header,
    .summary-page.summary-page-redesigned .summary-operational-weekly > .summary-block-header {
        grid-area: header !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card .section-title,
    .summary-page.summary-page-redesigned .summary-operational-weekly .section-title {
        margin: 0 0 6px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-card .section-subtitle,
    .summary-page.summary-page-redesigned .summary-operational-weekly .section-subtitle {
        margin: 0 !important;
        padding: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-body {
        display: contents !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total {
        grid-area: total !important;
        min-height: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 24px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(35, 168, 92, 0.24) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card span,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total span {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total strong {
        margin: 0 !important;
        color: #006B3F !important;
        font-size: 2.55rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-total-card small,
    .summary-page.summary-page-redesigned .summary-operational-weekly-total small {
        margin: 0 !important;
        color: #4D6A5B !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-days {
        display: contents !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-days-grid,
    .summary-page.summary-page-redesigned .summary-operational-weekly-grid {
        grid-area: days !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item {
        min-height: 88px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto auto !important;
        gap: 6px !important;
        align-items: start !important;
        box-shadow: none !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card.is-today,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item.is-today {
        border-color: #8DF2B6 !important;
        background: linear-gradient(180deg, #F3FFF8 0%, #EFFFF6 100%) !important;
        box-shadow: 0 8px 18px rgba(35, 168, 92, 0.10) !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-day {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-label {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-weekly-pill {
        justify-self: end !important;
        min-height: 22px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        border: 1px solid #B8F2D0 !important;
        background: #D9FBE7 !important;
        color: #067A3D !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card small,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item small {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item strong {
        grid-column: 1 / -1 !important;
        margin: 2px 0 0 !important;
        color: #006B3F !important;
        font-size: 0.98rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-day-card.is-negative strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-item.is-negative strong {
        color: #B42318 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer {
        grid-area: week !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(35, 168, 92, 0.22) !important;
        background: rgba(255, 255, 255, 0.58) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card span,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer span {
        margin: 0 !important;
        color: #10194A !important;
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer strong {
        margin: 0 !important;
        color: #006B3F !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-free-cash-week-total-card.negative strong,
    .summary-page.summary-page-redesigned .summary-operational-weekly-footer.negative strong {
        color: #B42318 !important;
    }

    .summary-page.summary-page-redesigned .summary-closing-actions {
        margin-top: 16px !important;
        padding-top: 16px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid rgba(180, 207, 221, 0.38) !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-closing-actions form {
        margin: 0 !important;
        padding: 0 !important;
    }

    .summary-page.summary-page-redesigned .summary-close-day-btn,
    .summary-page.summary-page-redesigned .summary-closing-actions .btn {
        width: auto !important;
        min-width: 140px !important;
        max-width: 180px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 22px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}


@media (min-width: 1200px) {
    /* /dashboard desktop - prioridad final: UI del modal de pendientes de /orders. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog {
        width: min(96vw, 1500px) !important;
        max-width: min(96vw, 1500px) !important;
        height: 94vh !important;
        max-height: 94vh !important;
        border-radius: 22px !important;
        background: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
        min-height: 64px !important;
        padding: 18px 22px !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.7) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
        color: #304A9A !important;
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
        background: #F4F5FB !important;
        color: #111827 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        max-height: none !important;
        padding: 20px 22px 8px !important;
        background: #fff !important;
        gap: 14px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(300px, 1.55fr) repeat(4, minmax(145px, 0.9fr)) minmax(170px, 0.9fr) !important;
        align-items: end !important;
        gap: 14px 16px !important;
        margin: 0 0 12px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-from { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-to { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions { order: 5 !important; }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal label {
        margin: 0 0 7px !important;
        color: #6F6A7F !important;
        font-size: 0.76rem !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal input,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal select {
        min-height: 46px !important;
        border-radius: 14px !important;
        border-color: rgba(80, 172, 198, 0.55) !important;
        color: #2f2440 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-btn {
        min-height: 46px !important;
        border-radius: 14px !important;
        background: #DB3CA2 !important;
        color: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell table {
        min-width: 1320px !important;
        table-layout: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th {
        padding: 14px 12px !important;
        background: #fff !important;
        color: #46589D !important;
        font-size: 0.84rem !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.9) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td {
        padding: 16px 12px !important;
        background: #fff !important;
        color: #2f2440 !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.78) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell tbody tr:hover td {
        background: #fff !important;
    }
}

/* Admin dashboard: primary KPIs, operational capacity and recent activity. */
.dashboard-primary-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

.dashboard-primary-kpi {
  min-width: 0;
  min-height: 118px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(190, 220, 230, 0.88);
  overflow: hidden;
}

.dashboard-primary-kpi-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: var(--primary);
  background: rgba(74, 88, 153, 0.1);
  font-size: 18px;
}

.dashboard-primary-kpi--income .dashboard-primary-kpi-icon {
  color: #237a48;
  background: rgba(76, 175, 114, 0.12);
}

.dashboard-primary-kpi--clients .dashboard-primary-kpi-icon {
  color: #8c4b73;
  background: rgba(218, 68, 160, 0.1);
}

.dashboard-primary-kpi--pending .dashboard-primary-kpi-icon {
  color: #a4672e;
  background: rgba(226, 158, 79, 0.13);
}

.dashboard-primary-kpi > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.dashboard-primary-kpi > div > span {
  color: #736278;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.dashboard-primary-kpi strong {
  color: var(--color-title);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-primary-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #766f7e;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}

.dashboard-primary-kpi-trend--positive .dashboard-primary-kpi-trend-value,
.dashboard-primary-kpi-trend--positive i,
.dashboard-primary-kpi-trend--new .dashboard-primary-kpi-trend-value {
  color: #237a48;
}

.dashboard-primary-kpi-trend--negative .dashboard-primary-kpi-trend-value,
.dashboard-primary-kpi-trend--negative i {
  color: #b5475a;
}

.dashboard-primary-kpi-trend--neutral .dashboard-primary-kpi-trend-value,
.dashboard-primary-kpi-trend--neutral i {
  color: #766f7e;
}

.dashboard-primary-kpi-trend-value {
  font-weight: 600;
}

.dashboard-primary-kpi-trend-context {
  color: #766f7e;
  font-weight: 500;
}

.dashboard-primary-kpi-trend i {
  flex: 0 0 auto;
  font-size: 0.7rem;
}

.dashboard-operational-load {
  min-width: 0;
  overflow: hidden;
}

.dashboard-operational-load-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-plant-capacity {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(74, 88, 153, 0.16);
  background: rgba(74, 88, 153, 0.07);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-operational-layout {
  display: grid;
  grid-template-columns: minmax(430px, 0.9fr) minmax(0, 1.5fr);
  gap: 22px;
  margin-top: 20px;
  min-width: 0;
}

.dashboard-load-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.dashboard-load-day {
  min-width: 0;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 14px 12px;
  border: 1px solid rgba(190, 220, 230, 0.9);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.88);
  color: #514b61;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-load-day:hover {
  transform: translateY(-1px);
  border-color: rgba(74, 88, 153, 0.3);
  background: rgba(248, 249, 255, 0.98);
}

.dashboard-load-day:focus-visible {
  outline: 3px solid rgba(74, 88, 153, 0.2);
  outline-offset: 2px;
}

.dashboard-load-day.is-active {
  border-color: rgba(74, 88, 153, 0.45);
  background: #f5f6ff;
  box-shadow: 0 8px 20px rgba(53, 65, 128, 0.1);
}

.dashboard-load-day > span {
  font-size: 0.85rem;
  font-weight: 700;
}

.dashboard-load-day small {
  color: #898294;
  font-size: 0.7rem;
}

.dashboard-load-day strong {
  margin-top: 5px;
  color: var(--color-title);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 700;
}

.dashboard-load-day em,
.dashboard-load-level {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
  font-style: normal;
  font-weight: 700;
}

.dashboard-load-day em,
.dashboard-load-level.is-low {
  color: #327052;
  background: #e9f7ef;
}

.dashboard-load-day.is-medium em,
.dashboard-load-level.is-medium {
  color: #8c641f;
  background: #fff4d9;
}

.dashboard-load-day.is-high em,
.dashboard-load-level.is-high {
  color: #a4512f;
  background: #ffeadf;
}

.dashboard-load-day.is-critical em,
.dashboard-load-level.is-critical {
  color: #a1354b;
  background: #fde8ed;
}

.dashboard-load-details {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(190, 220, 230, 0.88);
  border-radius: 20px;
  background: rgba(251, 250, 255, 0.78);
}

.dashboard-load-detail[hidden] {
  display: none !important;
}

.dashboard-load-detail-heading,
.dashboard-load-process-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-load-detail-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-load-detail-heading > div > span,
.dashboard-load-process > span {
  color: #80778a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.dashboard-load-detail-heading strong {
  color: var(--color-title);
  font-size: 1rem;
  font-weight: 700;
}

.dashboard-load-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.dashboard-load-process {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(204, 217, 231, 0.86);
  border-radius: 16px;
  background: #fff;
}

.dashboard-load-process-title span {
  color: #5d5668;
  font-weight: 700;
}

.dashboard-load-process-title strong,
.dashboard-load-process--informative strong {
  color: var(--color-title);
  font-size: 0.9rem;
  font-weight: 700;
}

.dashboard-load-process small {
  color: #7e7789;
  line-height: 1.3;
}

.dashboard-load-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f5;
}

.dashboard-load-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #62ad82;
}

.dashboard-load-progress span.is-medium { background: #d8a03f; }
.dashboard-load-progress span.is-high { background: #df7b4d; }
.dashboard-load-progress span.is-critical { background: #d5536b; }

.dashboard-load-recommendation {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(74, 88, 153, 0.07);
  color: #5d5672;
  font-size: 0.82rem;
  line-height: 1.4;
}

.dashboard-load-recommendation i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--primary);
}

.dashboard-load-recommendation.is-critical {
  background: rgba(213, 83, 107, 0.09);
  color: #873b4b;
}

.dashboard-load-recommendation.is-critical i { color: #b33f56; }

.dashboard-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.dashboard-insights-grid > .content-card {
  min-width: 0;
  min-height: 0;
  align-self: start;
  overflow: hidden;
}

.dashboard-insights-grid .chart-shell {
  min-height: 0;
}

.dashboard-recent-orders-card {
  display: flex;
  flex-direction: column;
}

.dashboard-recent-orders-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-recent-orders-link {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-recent-orders-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dashboard-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(216, 74, 107, 0.16);
  border-radius: 999px;
  background: rgba(255, 239, 243, 0.78);
  color: #9c4d62;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-live-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d84a6b;
  box-shadow: 0 0 0 0 rgba(216, 74, 107, 0.35);
  animation: dashboard-live-pulse 1.8s ease-out infinite;
}

@keyframes dashboard-live-pulse {
  0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(216, 74, 107, 0.3); }
  25% { box-shadow: 0 0 0 4px rgba(216, 74, 107, 0.08); }
}

.dashboard-recent-orders-list {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.dashboard-recent-order {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto auto;
  align-items: center;
  gap: 6px 8px;
  min-height: 56px;
  padding: 7px 8px;
  border: 1px solid rgba(205, 218, 231, 0.42);
  border-radius: 11px;
  background: rgba(249, 250, 255, 0.58);
  color: inherit;
  text-decoration: none;
}

.dashboard-recent-order:hover .dashboard-recent-order-code {
  background: rgba(74, 88, 153, 0.16);
}

.dashboard-recent-order-code {
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(74, 88, 153, 0.09);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background 160ms ease;
}

.dashboard-recent-order-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-recent-order-copy strong,
.dashboard-recent-order-copy small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-recent-order-copy strong {
  color: var(--color-title);
  font-size: 0.8rem;
  font-weight: 700;
}

.dashboard-recent-order-copy small,
.dashboard-recent-order-payment {
  color: #857e90;
  font-size: 0.68rem;
}

.dashboard-recent-order-payment {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.dashboard-recent-order-method {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(91, 108, 182, 0.12);
  border-radius: 999px;
  background: rgba(239, 243, 255, 0.78);
  color: #4b668f;
  font-size: 0.68rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-recent-order-amount {
  color: #4b668f;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-recent-order-method--efectivo {
  border-color: rgba(54, 157, 107, 0.16);
  background: rgba(228, 248, 237, 0.82);
  color: #287a52;
}

.dashboard-recent-order-method--yape {
  border-color: rgba(144, 92, 184, 0.16);
  background: rgba(244, 235, 255, 0.82);
  color: #7749a1;
}

.dashboard-recent-order-method--plin {
  border-color: rgba(60, 161, 174, 0.16);
  background: rgba(229, 248, 249, 0.82);
  color: #267f8b;
}

.dashboard-recent-order-method--tarjeta,
.dashboard-recent-order-method--transferencia {
  border-color: rgba(74, 116, 190, 0.16);
  background: rgba(233, 241, 255, 0.82);
  color: #3f64a3;
}

.dashboard-recent-order-method--mixto,
.dashboard-recent-order-method--sin-pago {
  border-color: rgba(135, 126, 144, 0.14);
  background: rgba(246, 244, 248, 0.82);
  color: #857e90;
}

.dashboard-recent-order .status-chip {
  max-width: 100%;
  font-size: 0.64rem;
  white-space: nowrap;
}

.dashboard-recent-order-chevron {
  align-self: center;
  color: rgba(74, 88, 153, 0.6);
  font-size: 0.7rem;
}

.dashboard-recent-orders-empty {
  flex: 1;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #837b8b;
  text-align: center;
}

.dashboard-recent-orders-empty i {
  font-size: 1.4rem;
  color: rgba(74, 88, 153, 0.55);
}

.dashboard-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: stretch;
  min-width: 0;
}

.dashboard-insight-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1rem;
}

.dashboard-insight-icon--income {
  color: #31945a;
  background: #e6f8ed;
}

.dashboard-insight-icon--status {
  color: #d14b9d;
  background: #fce8f4;
}

.dashboard-insight-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-insight-period {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(82, 108, 185, 0.12);
  border-radius: 999px;
  background: rgba(239, 243, 255, 0.82);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-indicators-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.dashboard-orders-status-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.dashboard-orders-status-header .dashboard-insight-heading {
  display: grid;
  gap: 5px;
}

.dashboard-mini-metrics,
.dashboard-status-mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.dashboard-mini-metric,
.dashboard-status-mini {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border: 1px solid rgba(183, 197, 222, 0.46);
  border-radius: 12px;
  background: rgba(249, 250, 255, 0.72);
}

.dashboard-mini-metric-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-mini-metric small,
.dashboard-status-mini small {
  overflow: hidden;
  color: #7d7587;
  font-size: 0.62rem;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mini-metric strong,
.dashboard-status-mini strong {
  color: var(--primary);
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-mini-metric-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  font-size: 0.7rem;
}

.dashboard-mini-metric--income .dashboard-mini-metric-icon {
  color: #31945a;
  background: #e6f8ed;
}

.dashboard-mini-metric--expense .dashboard-mini-metric-icon {
  color: #c65379;
  background: #fde8ef;
}

.dashboard-mini-metric--result .dashboard-mini-metric-icon {
  color: #4b67be;
  background: #e9edff;
}

.dashboard-orders-status-body {
  display: grid;
  grid-template-columns: minmax(148px, 0.9fr) minmax(150px, 1.1fr);
  align-items: center;
  gap: 18px;
  padding: 2px 4px;
}

.dashboard-orders-status-legend-values {
  display: grid;
  align-content: center;
  gap: 5px;
  width: min(100%, 230px);
  justify-self: center;
}

.dashboard-orders-status-legend-value {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 44px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.dashboard-orders-status-legend-value-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #676076;
  font-size: 0.7rem;
  white-space: nowrap;
}

.dashboard-orders-status-legend-value-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d84aa6;
}

.dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-dot { background: #4ea6b5; }
.dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-dot { background: #4a5aaa; }

.dashboard-orders-status-legend-value strong {
  color: var(--primary);
  font-size: 0.9rem;
  line-height: 1;
  text-align: right;
}

.dashboard-orders-status-legend-value small {
  color: #81798c;
  font-size: 0.68rem;
  text-align: right;
}

.dashboard-status-mini {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  text-align: left;
}

.dashboard-status-mini-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.78rem;
}

.dashboard-status-mini-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-insights-grid > .dashboard-indicators-card,
.dashboard-insights-grid > .dashboard-orders-status-card {
  height: auto;
  min-height: 0;
  align-self: start;
}

.dashboard-insights-grid > .dashboard-indicators-card .chart-shell {
  flex: 0 0 auto;
  min-height: 0;
}

.dashboard-status-mini-metrics {
  margin-top: 14px;
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .dashboard-insights-grid > .dashboard-orders-status-card {
    align-self: stretch;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-orders-status-body {
    flex: 1 1 auto;
    align-content: center;
  }

  .dashboard-insights-grid > .dashboard-orders-status-card .dashboard-status-mini-metrics {
    margin-top: auto;
  }
}

.dashboard-status-mini--pending { background: rgba(252, 232, 244, 0.62); border-color: rgba(216, 74, 166, 0.16); }
.dashboard-status-mini--ready { background: rgba(230, 248, 249, 0.62); border-color: rgba(78, 166, 181, 0.18); }
.dashboard-status-mini--delivered { background: rgba(235, 239, 255, 0.7); border-color: rgba(74, 90, 170, 0.16); }

.dashboard-status-mini--pending strong { color: #d84aa6; }
.dashboard-status-mini--ready strong { color: #4ea6b5; }
.dashboard-status-mini--delivered strong { color: #4a5aaa; }

.dashboard-status-mini--pending .dashboard-status-mini-icon { color: #d84aa6; background: rgba(252, 232, 244, 0.92); }
.dashboard-status-mini--ready .dashboard-status-mini-icon { color: #3197a7; background: rgba(230, 248, 249, 0.94); }
.dashboard-status-mini--delivered .dashboard-status-mini-icon { color: #4a5aaa; background: rgba(235, 239, 255, 0.94); }

.dashboard-financial-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  overflow: visible;
}

.dashboard-financial-chart-grid line {
  stroke: rgba(159, 171, 204, 0.28);
  stroke-width: 1;
}

.dashboard-financial-chart-labels text {
  fill: #857d90;
  font-size: 10px;
  font-weight: 600;
}

.dashboard-financial-chart-labels tspan:first-child {
  font-weight: 700;
}

.dashboard-financial-chart-hit-area {
  fill: transparent;
  cursor: pointer;
}

.dashboard-financial-chart-point {
  cursor: pointer;
  transition: r 150ms ease;
}

.dashboard-financial-chart-point.is-active {
  r: 5.5;
}

.dashboard-financial-tooltip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 148px;
  padding: 9px 11px;
  border: 1px solid rgba(183, 197, 222, 0.7);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 20px rgba(69, 78, 133, 0.13);
  color: #5d5670;
  font-size: 0.68rem;
  line-height: 1.25;
  pointer-events: none;
}

.dashboard-financial-tooltip[hidden] {
  display: none;
}

.dashboard-financial-tooltip strong {
  margin-bottom: 2px;
  color: var(--primary);
  font-size: 0.72rem;
}

.dashboard-financial-tooltip-income { color: #31945a; }
.dashboard-financial-tooltip-expense { color: #cf5b78; }
.dashboard-financial-tooltip-result { color: #4b67be; }

.dashboard-financial-chart-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-financial-chart-point {
  stroke: #fff;
  stroke-width: 2;
}

.dashboard-financial-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
  color: #726b80;
  font-size: 0.7rem;
  font-weight: 700;
}

.dashboard-financial-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-financial-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #31945a;
}

.dashboard-financial-legend--expense i { background: #cf5b78; }
.dashboard-financial-legend--result i { background: #4b67be; }

.dashboard-status-donut-wrap {
  min-width: 0;
  display: grid;
  place-items: center;
}

.dashboard-status-donut {
  width: clamp(148px, 15vw, 188px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    #d84aa6 0 calc(var(--status-pending) * 1%),
    #4ea6b5 0 calc((var(--status-pending) + var(--status-ready)) * 1%),
    #4a5aaa 0 calc((var(--status-pending) + var(--status-ready) + var(--status-delivered)) * 1%),
    #edf0f7 0 100%
  );
}

.dashboard-status-donut > span {
  width: 68%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(183, 197, 222, 0.3);
}

.dashboard-status-donut strong {
  color: var(--primary);
  font-size: 1.7rem;
  line-height: 1;
}

.dashboard-status-donut small {
  margin-top: 5px;
  color: #878093;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Dashboard visual refinement: expressive surfaces without adding new data. */
.dashboard-primary-kpi {
  position: relative;
  min-height: 112px;
  padding: 16px 18px;
  border-color: rgba(174, 190, 220, 0.42);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.995), rgba(247, 248, 255, 0.62));
  box-shadow: 0 7px 18px rgba(69, 78, 133, 0.045);
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.dashboard-primary-kpi::before {
  content: "";
  position: absolute;
  left: -42px;
  bottom: -70px;
  width: 176px;
  height: 132px;
  border-radius: 52% 48% 0 0;
  background: rgba(112, 129, 194, 0.026);
  transform: rotate(-12deg);
  pointer-events: none;
}

.dashboard-primary-kpi::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -40px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgba(112, 129, 194, 0.038);
  pointer-events: none;
}

.dashboard-primary-kpi > * {
  position: relative;
  z-index: 1;
}

.dashboard-primary-kpi-decorative-icon {
  position: absolute !important;
  right: 13px;
  top: 50%;
  z-index: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  transform: translateY(-50%);
  color: rgba(92, 117, 207, 0.17);
  font-size: 2.75rem;
  opacity: 0.52;
  pointer-events: none;
}

.dashboard-primary-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 115, 181, 0.35);
  box-shadow: 0 16px 32px rgba(69, 78, 133, 0.11);
}

.dashboard-primary-kpi-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(74, 88, 153, 0.14);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(229, 232, 255, 0.96), rgba(246, 247, 255, 0.9));
  box-shadow: 0 8px 18px rgba(74, 88, 153, 0.1);
  font-size: 19px;
}

.dashboard-primary-kpi--income {
  border-color: rgba(118, 194, 145, 0.32);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.995), rgba(238, 250, 243, 0.64));
}

.dashboard-primary-kpi--income::before {
  background: rgba(76, 175, 114, 0.032);
}

.dashboard-primary-kpi--income::after {
  background: rgba(76, 175, 114, 0.045);
}

.dashboard-primary-kpi--income .dashboard-primary-kpi-icon {
  border-color: rgba(76, 175, 114, 0.16);
  background: linear-gradient(145deg, rgba(213, 246, 224, 0.98), rgba(243, 253, 247, 0.92));
}

.dashboard-primary-kpi--clients {
  border-color: rgba(226, 141, 194, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.995), rgba(254, 241, 249, 0.64));
}

.dashboard-primary-kpi--clients::before {
  background: rgba(218, 68, 160, 0.028);
}

.dashboard-primary-kpi--clients::after {
  background: rgba(218, 68, 160, 0.042);
}

.dashboard-primary-kpi--clients .dashboard-primary-kpi-icon {
  border-color: rgba(218, 68, 160, 0.15);
  background: linear-gradient(145deg, rgba(253, 224, 243, 0.98), rgba(255, 246, 251, 0.92));
}

.dashboard-primary-kpi--pending {
  border-color: rgba(231, 185, 108, 0.34);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.995), rgba(255, 248, 233, 0.64));
}

.dashboard-primary-kpi--pending::before {
  background: rgba(226, 158, 79, 0.03);
}

.dashboard-primary-kpi--pending::after {
  background: rgba(226, 158, 79, 0.045);
}

.dashboard-primary-kpi--pending .dashboard-primary-kpi-icon {
  border-color: rgba(226, 158, 79, 0.17);
  background: linear-gradient(145deg, rgba(255, 237, 201, 0.98), rgba(255, 249, 237, 0.92));
}

.dashboard-primary-kpi--income .dashboard-primary-kpi-decorative-icon {
  color: rgba(54, 153, 91, 0.18);
}

.dashboard-primary-kpi--clients .dashboard-primary-kpi-decorative-icon {
  color: rgba(207, 79, 157, 0.16);
}

.dashboard-primary-kpi--pending .dashboard-primary-kpi-decorative-icon {
  color: rgba(215, 150, 54, 0.17);
}

.dashboard-primary-kpi > div {
  gap: 8px;
}

.dashboard-primary-kpi > div > span {
  color: #756a80;
  font-size: 0.73rem;
  letter-spacing: 0.07em;
}

.dashboard-primary-kpi strong {
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  letter-spacing: -0.035em;
}

.dashboard-primary-kpi > div {
  gap: 6px;
}

.dashboard-primary-kpi > div > span {
  font-size: 0.7rem;
  letter-spacing: 0.055em;
}

.dashboard-primary-kpi-trend {
  gap: 4px;
  font-size: 0.68rem;
}

.dashboard-primary-kpi-trend-value {
  font-weight: 700;
}

.dashboard-operational-load {
  border-color: rgba(172, 186, 222, 0.68);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 255, 0.93));
  box-shadow: 0 16px 34px rgba(69, 78, 133, 0.08);
}

.dashboard-operational-load .section-title {
  color: #3f4d94;
  font-size: clamp(1.2rem, 1.4vw, 1.42rem);
  letter-spacing: -0.02em;
}

.dashboard-operational-load .section-subtitle {
  color: #71667c;
  line-height: 1.45;
}

.dashboard-operational-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.dashboard-operational-heading-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(74, 88, 153, 0.16);
  border-radius: 14px;
  background: linear-gradient(145deg, #e8ebff, #f7f8ff);
  box-shadow: 0 7px 16px rgba(74, 88, 153, 0.09);
  color: #4a58a1;
  font-size: 1rem;
}

.dashboard-operational-heading > div {
  min-width: 0;
}

.dashboard-plant-capacity {
  padding: 9px 13px;
  border-color: rgba(89, 108, 182, 0.2);
  background: linear-gradient(145deg, rgba(231, 234, 255, 0.94), rgba(249, 249, 255, 0.92));
  box-shadow: 0 7px 15px rgba(74, 88, 153, 0.07);
  letter-spacing: 0.01em;
}

.dashboard-load-day {
  min-height: 196px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 7px;
  border-color: rgba(183, 198, 224, 0.8);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 247, 0.9));
  box-shadow: 0 8px 18px rgba(60, 83, 105, 0.05);
  text-align: center;
}

.dashboard-load-day.is-low {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(244, 251, 247, 0.72));
  border-color: rgba(183, 198, 224, 0.7);
}

.dashboard-load-day.is-medium {
  background: linear-gradient(160deg, rgba(255, 253, 247, 0.99), rgba(255, 245, 215, 0.82));
  border-color: rgba(216, 160, 63, 0.38);
}

.dashboard-load-day.is-high {
  background: linear-gradient(160deg, rgba(255, 250, 249, 0.99), rgba(255, 229, 232, 0.86));
  border-color: rgba(201, 94, 121, 0.35);
}

.dashboard-load-day.is-critical {
  background: linear-gradient(160deg, rgba(255, 249, 250, 0.99), rgba(253, 232, 237, 0.9));
  border-color: rgba(213, 83, 107, 0.38);
}

.dashboard-load-day.is-closed {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(244, 245, 248, 0.88));
  border-color: rgba(139, 145, 166, 0.3);
}

.dashboard-load-day.is-active {
  border-color: rgba(73, 91, 167, 0.72);
  box-shadow: 0 0 0 2px rgba(105, 121, 197, 0.13), 0 12px 24px rgba(66, 80, 152, 0.16);
}

.dashboard-load-day.is-critical.is-active {
  border-color: rgba(213, 83, 107, 0.72);
  box-shadow: 0 0 0 2px rgba(213, 83, 107, 0.13), 0 12px 24px rgba(168, 56, 78, 0.12);
}

.dashboard-load-day > span {
  color: #4b4560;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.dashboard-load-day small {
  color: #83798d;
  font-size: 0.76rem;
}

.dashboard-load-day strong {
  margin-top: 8px;
  font-size: 1.6rem;
}

.dashboard-load-day-copy {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 0;
}

.dashboard-load-day-ring {
  --load-ring-color: #d6dce8;
  width: min(62px, 100%);
  aspect-ratio: 1;
  height: auto;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin: 3px 0;
  border-radius: 50%;
  border: 6px solid var(--load-ring-color);
  background: #fff;
  color: var(--load-ring-color);
}

.dashboard-load-day-ring i {
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
}

.dashboard-load-day > .dashboard-load-day-ring {
  color: var(--load-ring-color);
}

.dashboard-load-day-percentage {
  margin: 0 !important;
  color: #19377f !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
}

.dashboard-load-day.is-low .dashboard-load-day-ring {
  --load-ring-color: #62ad82;
}

.dashboard-load-day.is-medium .dashboard-load-day-ring {
  --load-ring-color: #d8a03f;
}

.dashboard-load-day.is-high .dashboard-load-day-ring {
  --load-ring-color: #d5536b;
}

.dashboard-load-day.is-critical .dashboard-load-day-ring {
  --load-ring-color: #d5536b;
}

.dashboard-load-day.is-closed .dashboard-load-day-ring {
  --load-ring-color: #c7ced9;
}

.dashboard-load-day.is-active .dashboard-load-day-ring {
  box-shadow: 0 0 0 5px rgba(91, 109, 188, 0.08);
}

.dashboard-load-day.is-critical.is-active .dashboard-load-day-ring {
  box-shadow: 0 0 0 5px rgba(213, 83, 107, 0.08);
}

.dashboard-load-day em,
.dashboard-load-level {
  padding: 5px 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.dashboard-load-day.is-high em,
.dashboard-load-level.is-high {
  color: #a43d62;
  background: #ffe3eb;
}

.dashboard-load-day.is-critical em,
.dashboard-load-level.is-critical {
  color: #a1354b;
  background: #fde8ed;
}

.dashboard-load-day.is-closed em {
  color: #687084;
  background: #edf0f4;
}

.dashboard-load-day.is-closed .dashboard-load-day-percentage {
  color: #687084 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0;
}

.dashboard-load-details {
  padding: 20px;
  border-color: rgba(174, 188, 222, 0.72);
  background: linear-gradient(145deg, rgba(252, 252, 255, 0.98), rgba(243, 245, 255, 0.86));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

.dashboard-load-detail-heading {
  align-items: flex-start;
}

.dashboard-load-detail-title {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 11px;
}

.dashboard-load-detail-title > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-load-detail-title > .dashboard-load-detail-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #edf0ff;
  color: #5464ad;
  font-size: 0.88rem;
}

.dashboard-load-detail-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.dashboard-load-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7d7585;
  font-size: 0.68rem;
  font-weight: 700;
}

.dashboard-load-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dashboard-load-legend i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #63a881;
}

.dashboard-load-legend .is-medium i { background: #d39b38; }
.dashboard-load-legend .is-high i { background: #c85776; }

.dashboard-load-process {
  position: relative;
  overflow: hidden;
}

.dashboard-load-process.dashboard-load-process--washing {
  --process-border: rgba(91, 166, 123, 0.42);
  --process-background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 252, 248, 0.9));
  border: 1px solid rgba(91, 166, 123, 0.42);
}

.dashboard-load-process.dashboard-load-process--ironing {
  --process-border: rgba(218, 163, 68, 0.46);
  --process-background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(255, 252, 242, 0.9));
  border: 1px solid rgba(218, 163, 68, 0.46);
}

.dashboard-load-process.dashboard-load-process--drying {
  --process-border: rgba(104, 161, 202, 0.42);
  --process-background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 251, 255, 0.9));
  border: 1px solid rgba(104, 161, 202, 0.42);
}

.dashboard-load-process.dashboard-load-process--piece {
  --process-border: rgba(159, 111, 169, 0.42);
  --process-background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(251, 247, 252, 0.9));
  border: 1px solid rgba(159, 111, 169, 0.42);
}

.dashboard-load-detail-heading strong {
  font-size: 1.08rem;
}

.dashboard-load-process {
  gap: 10px;
  border-color: var(--process-border, rgba(192, 207, 229, 0.78));
  background: var(--process-background, rgba(255, 255, 255, 0.94));
  box-shadow: 0 6px 14px rgba(75, 94, 139, 0.045);
}

.dashboard-load-process-title {
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.dashboard-load-process-title > div {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.dashboard-load-process-title > div > span {
  min-width: 0;
  color: #5d5668;
  font-size: 0.82rem;
  font-weight: 700;
}

.dashboard-load-process-title > .dashboard-load-process-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #e9f7ef;
  color: #3c9564;
  font-size: 1rem;
}

.dashboard-load-process-title > .dashboard-load-process-icon,
.dashboard-load-process-title > .dashboard-load-process-icon i {
  color: inherit;
}

.dashboard-load-process--washing .dashboard-load-process-title > .dashboard-load-process-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  color: #3c9564;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-load-process--ironing .dashboard-load-process-icon {
  background: #fff4d9;
  color: #b97d16;
}

.dashboard-load-process--drying .dashboard-load-process-icon {
  background: #e7f3fb;
  color: #4a83ae;
}

.dashboard-load-process--piece .dashboard-load-process-icon {
  background: #f3e9f7;
  color: #87518f;
}

.dashboard-load-process-title strong,
.dashboard-load-process--informative strong {
  font-size: 0.96rem;
  text-align: right;
}

.dashboard-load-progress {
  height: 9px;
  background: #e7ebf2;
  box-shadow: inset 0 1px 2px rgba(58, 72, 109, 0.08);
}

.dashboard-load-progress span {
  background: linear-gradient(90deg, #61b183, #3c9465);
}

.dashboard-load-progress span.is-medium {
  background: linear-gradient(90deg, #edc15c, #cf9130);
}

.dashboard-load-progress span.is-high {
  background: linear-gradient(90deg, #ed8a9d, #c84e70);
}

.dashboard-load-progress span.is-critical {
  background: linear-gradient(90deg, #ef7b86, #d5536b);
}

.dashboard-load-process-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #327052 !important;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.dashboard-load-process.is-medium .dashboard-load-process-status {
  background: #fff4d9;
  color: #8c641f !important;
}

.dashboard-load-process.is-high .dashboard-load-process-status {
  background: #fde8ed;
  color: #a1354b !important;
}

.dashboard-load-process.is-critical .dashboard-load-process-status,
.dashboard-load-process--washing.is-at-capacity .dashboard-load-process-status {
  background: #fde8ed;
  color: #a1354b !important;
}

.dashboard-load-process-status.is-neutral {
  background: #f0eef7;
  color: #6f6880 !important;
}

.dashboard-load-recommendation {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(104, 120, 187, 0.15);
  background: linear-gradient(135deg, rgba(232, 235, 255, 0.76), rgba(248, 249, 255, 0.94));
  align-items: center;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.84);
}

.dashboard-load-recommendation i {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  border-radius: 10px;
  background: #e7edff;
  color: #5363ad;
}

.dashboard-load-recommendation.is-high {
  border-color: rgba(201, 94, 121, 0.18);
  background: linear-gradient(135deg, rgba(255, 235, 240, 0.88), rgba(255, 249, 250, 0.95));
  color: #874558;
}

.dashboard-load-recommendation.is-critical {
  border-color: rgba(213, 83, 107, 0.2);
  background: linear-gradient(135deg, rgba(253, 232, 237, 0.9), rgba(255, 248, 249, 0.95));
  color: #873b4b;
}

.dashboard-load-recommendation.is-critical i {
  background: #fff;
  color: #b33f56;
}

@media (min-width: 1200px) {
  .dashboard-load-day {
    min-height: 328px;
    padding: 20px 10px;
    border-radius: 18px;
  }

  .dashboard-load-day-copy {
    gap: 5px;
  }

  .dashboard-load-day-copy > span {
    color: #1f326c;
    font-size: 0.84rem;
  }

  .dashboard-load-day-copy small {
    color: #5f6782;
    font-size: 0.78rem;
  }

  .dashboard-load-day-ring {
    width: min(64px, 100%);
    margin: 14px 0 5px;
  }

  .dashboard-load-day-percentage {
    font-size: 1.62rem !important;
  }

  .dashboard-load-day em {
    margin-top: 3px;
    padding: 7px 13px;
    font-size: 0.73rem;
  }
}

.dashboard-insights-grid > .content-card,
.dashboard-support-grid > .content-card {
  border-color: rgba(183, 197, 222, 0.7);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.99), rgba(249, 250, 255, 0.92));
  box-shadow: 0 12px 27px rgba(69, 78, 133, 0.065);
}

.dashboard-insights-grid > .content-card {
  display: flex;
  flex-direction: column;
}

.dashboard-insights-grid > .content-card .section-title,
.dashboard-support-grid > .content-card .section-title {
  color: #454f92;
  letter-spacing: -0.015em;
}

.dashboard-insights-grid > .content-card .section-subtitle,
.dashboard-support-grid > .content-card .section-subtitle {
  color: #766d80;
  line-height: 1.42;
}

.dashboard-insights-grid .chart-shell {
  flex: 1 1 auto;
}

.dashboard-recent-orders-list {
  gap: 7px;
}

.dashboard-recent-order {
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(249, 250, 255, 0.62);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dashboard-recent-order:hover {
  border-color: rgba(115, 129, 191, 0.22);
  background: rgba(240, 243, 255, 0.88);
  transform: translateX(2px);
}

.dashboard-recent-order-code {
  padding: 6px 9px;
  border: 1px solid rgba(91, 108, 182, 0.12);
  font-size: 0.73rem;
}

.dashboard-recent-order .status-chip {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.dashboard-recent-order time {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1199px) {
  .dashboard-primary-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-operational-layout,
  .dashboard-support-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-load-days {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
  }

  .dashboard-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-insights-grid > .dashboard-recent-orders-card {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .dashboard-recent-orders-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .dashboard-operational-layout {
    grid-template-columns: minmax(390px, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
  }

  .dashboard-load-days {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .dashboard-primary-kpis,
  .dashboard-load-days,
  .dashboard-load-process-grid,
  .dashboard-insights-grid,
  .dashboard-recent-orders-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-primary-kpi {
    min-height: 96px;
    padding: 16px;
  }

  .dashboard-primary-kpi strong {
    white-space: normal;
  }

  .dashboard-operational-load-header {
    display: grid;
    justify-items: center;
  }

  .dashboard-plant-capacity {
    width: 100%;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .dashboard-operational-layout {
    margin-top: 16px;
  }

  .dashboard-load-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-load-day {
    min-height: 116px;
  }

  .dashboard-load-day-ring {
    width: 58px;
    height: auto;
    margin-top: 5px;
  }

  .dashboard-load-detail-heading {
    flex-direction: column;
    gap: 12px;
  }

  .dashboard-load-detail-tools {
    width: 100%;
    justify-content: center;
  }

  .dashboard-load-legend {
    width: 100%;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
  }

  .dashboard-load-process-title > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-load-process-title strong {
    text-align: left;
  }

  .dashboard-load-day:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .dashboard-load-details {
    padding: 14px;
  }

  .dashboard-load-detail-heading,
  .dashboard-load-process-title {
    align-items: flex-start;
  }

  .dashboard-mini-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 9px 10px;
  }

  .dashboard-mini-metric-label {
    min-width: 0;
  }

  .dashboard-mini-metric > strong {
    flex: 0 0 auto;
    margin-left: 12px;
    text-align: right;
  }

  .dashboard-insights-grid > .content-card {
    min-height: 0;
  }

  .dashboard-insights-grid .chart-shell {
    min-height: 270px;
  }

  .dashboard-recent-order {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "code copy status chevron"
      "code payment status chevron";
    align-items: center;
  }

  .dashboard-recent-order-code { grid-area: code; }
  .dashboard-recent-order-copy { grid-area: copy; }
  .dashboard-recent-order-payment {
    grid-area: payment;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dashboard-recent-order .status-chip { grid-area: status; }
  .dashboard-recent-order-chevron { grid-area: chevron; }
  .dashboard-mini-metrics,
  .dashboard-status-mini-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-orders-status-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-financial-legend {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

/* Dashboard layout: keep the main cards readable on portrait tablets. */
@media (min-width: 768px) and (max-width: 899px) {
  .dashboard-insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-insights-grid > .dashboard-recent-orders-card {
    grid-column: auto;
  }
}

/* Dashboard layout: desktop rows use the full content width. */
@media (min-width: 1200px) {
  .dashboard-page-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }

  .dashboard-page-shell > .dashboard-primary-kpis,
  .dashboard-page-shell > .dashboard-operational-load,
  .dashboard-page-shell > .dashboard-insights-grid,
  .dashboard-page-shell > .dashboard-support-grid,
  .dashboard-page-shell > .delayed-orders-card {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .dashboard-primary-kpis,
  .dashboard-operational-load,
  .dashboard-insights-grid,
  .dashboard-support-grid {
    width: 100%;
  }

  .dashboard-primary-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-insights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 1199px) {
    /* /dashboard mobile + iPad - chip de dias pendiente en cards del modal. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info strong,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info span {
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info strong {
        overflow-wrap: anywhere !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        justify-self: end !important;
        align-self: center !important;
        min-width: 84px !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--neutral {
        background: rgba(80, 172, 198, 0.16) !important;
        color: #2D7F91 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--warning {
        background: rgba(255, 193, 7, 0.22) !important;
        color: #946200 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--danger {
        background: rgba(220, 38, 38, 0.14) !important;
        color: #B91C1C !important;
    }
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 76px !important;
        max-width: 96px !important;
        padding: 7px 9px !important;
        font-size: 0.68rem !important;
        line-height: 1.08 !important;
    }
}

/* Order corrections: shared, scoped presentation for dynamic detail actions. */
.order-correction-menu,
.payment-correction-menu {
  position: relative;
}

.order-detail-correction-trigger,
.order-service-remove-trigger,
.payment-correction-menu > [data-order-actions-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.order-correction-modal .modal-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
}

.order-correction-modal .modal-body {
  padding: 20px 22px 22px;
}

.order-correction-panel[hidden] {
  display: none !important;
}

.order-correction-panel,
.order-correction-panel .form,
.order-correction-panel .form-group,
.order-correction-panel .client-search-shell {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.correction-summary-card {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 207, 221, 0.6);
  border-radius: 14px;
  background: rgba(246, 247, 255, 0.72);
}

.correction-summary-card span,
.correction-summary-card small {
  color: var(--text-muted, #736278);
}

.correction-summary-card strong {
  color: var(--primary, #4a5899);
}

.order-correction-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(226, 160, 150, 0.55);
  border-radius: 12px;
  background: rgba(255, 244, 243, 0.86);
  color: #8b3d3c;
}

.order-correction-panel .client-search-results {
  z-index: 10;
}

.order-correction-panel .form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.order-correction-panel .form-actions .btn {
  width: 100%;
  min-height: 44px;
}

.order-services-detail-table .service-actions-column,
.order-services-detail-table .service-actions-cell {
  white-space: nowrap;
  text-align: center;
}

.order-services-detail-table .service-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.order-services-detail-mobile-card .order-service-remove-trigger {
  width: 100%;
  margin-top: 12px;
}

@media (max-width: 767px) {
  .order-correction-modal .modal-dialog {
    width: calc(100vw - 32px);
    max-width: 390px;
  }

  .order-correction-modal .modal-body {
    padding: 16px;
  }

  .order-correction-panel .form-actions {
    grid-template-columns: 1fr;
  }

  .order-correction-panel input,
  .order-correction-panel select,
  .order-correction-panel textarea {
    font-size: 16px;
  }

  .order-detail-correction-trigger span {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Search order correction menu: fit its two actions without excess width. */
  [data-search-order-card] .order-correction-menu .order-actions-dropdown {
    width: max-content !important;
    min-width: 210px !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
  }

  [data-search-order-card] .order-correction-menu .order-actions-item {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 104px !important;
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 0.74rem !important;
    }
}

@media (max-width: 1199px) {
    /* /dashboard mobile + iPad - dias pendientes dentro de cada card del modal. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info strong {
        margin: 0 !important;
        padding: 0 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info span {
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        justify-self: end !important;
        align-self: center !important;
        min-width: 84px !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--neutral {
        background: rgba(80, 172, 198, 0.16) !important;
        color: #2D7F91 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--warning {
        background: rgba(255, 193, 7, 0.22) !important;
        color: #946200 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--danger {
        background: rgba(220, 38, 38, 0.14) !important;
        color: #B91C1C !important;
    }
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 76px !important;
        max-width: 96px !important;
        padding: 7px 9px !important;
        font-size: 0.68rem !important;
        line-height: 1.08 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 104px !important;
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 0.74rem !important;
    }
}

/* /dashboard mobile - header y filtros del modal de pendientes. */
@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header {
        position: relative !important;
        width: 100% !important;
        min-height: 60px !important;
        height: 60px !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h2,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h3,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header .modal-title {
        position: static !important;
        width: auto !important;
        max-width: calc(100% - 56px) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-align: left !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-close,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header .modal-close-btn {
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: rgba(247, 247, 249, 0.96) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools input,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: inherit !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle > i {
        flex: 0 0 auto !important;
        color: var(--primary) !important;
        transition: transform 160ms ease !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-list,
    #reportDelayedOrdersModal .pending-orders-mobile-results {
        margin-top: 8px !important;
    }
}

/* /dashboard iPad vertical - modal pendientes con UI mobile real. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 16px 20px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        order: 2 !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden],
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        order: 3 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: 1 / -1 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 0 20px 24px !important;
        margin: 0 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 6px !important;
        background: #eaf1ff !important;
        color: #2468df !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-total,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-total {
        background: #e5efff !important;
        color: #2468df !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-debt,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-debt {
        background: #ffeadf !important;
        color: #f06b21 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-payment,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-payment {
        background: #def7e8 !important;
        color: #18a957 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon i,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon i {
        color: inherit !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }
}

/* /dashboard iPad horizontal - correccion final del acordeon de filtros. */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 18px 24px 14px !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-modal-tools
        > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-modal-tools
        > .dashboard-pending-orders-filter-search {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-modal-tools
        > .dashboard-pending-orders-filters-toggle {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-filters-toggle > span {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-filters-toggle > i {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-advanced-filters {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-advanced-filters
        .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-advanced-filters
        .dashboard-delayed-filter-actions {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal
        .dashboard-pending-orders-advanced-filters
        .dashboard-delayed-filter-actions .btn {
        width: auto !important;
        min-width: 140px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }
}

.report-page-shell .reports-overdue-orders-list {
    display: none;
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /reports iPad horizontal - delayed-ready orders use compact operational cards. */
    .report-page-shell .delayed-orders-list-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 18px !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .delayed-orders-list-card .table-card-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
    }

    .report-page-shell .delayed-orders-list-card .table-card-header > .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .delayed-orders-list-card > .table-wrapper {
        display: none !important;
    }

    .report-page-shell .reports-overdue-orders-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-overdue-order-card {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        text-align: left !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .report-page-shell .reports-overdue-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
    }

    .report-page-shell .reports-overdue-order-header strong,
    .report-page-shell .reports-overdue-order-client strong {
        display: block !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .report-page-shell .reports-overdue-order-header span,
    .report-page-shell .reports-overdue-order-client span {
        display: block !important;
        margin: 3px 0 0 !important;
        color: #6f6a80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    .report-page-shell .reports-overdue-order-header .status-pill {
        justify-self: end !important;
        align-self: start !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .report-page-shell .reports-overdue-order-client {
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(240, 238, 255, 0.9) !important;
    }

    .report-page-shell .reports-overdue-order-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .report-page-shell .reports-overdue-order-field {
        min-width: 0 !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-overdue-order-field span {
        color: #736278 !important;
        font-size: 0.7rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    .report-page-shell .reports-overdue-order-field strong {
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    /* The page card is a four-order preview; the modal retains the full list. */
    .report-page-shell .delayed-orders-list-card .reports-overdue-order-card:nth-child(n + 5) {
        display: none !important;
    }
}

/* Client insight lists are an alternate small-screen/tablet representation. */
.report-page-shell .reports-client-insights-list {
    display: none;
}

@media (max-width: 767px) {
    .report-page-shell .reports-client-insights-list {
        display: grid !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /reports iPad vertical - Clients uses stacked insight blocks. */
    .report-page-shell .reports-tab-panel[data-report-panel="clients"].is-active {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .reports-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        margin: 0 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .admin-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin: 0 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-top-clients-card,
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-oldest-clients-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 20px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .table-wrapper {
        display: none !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insights-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /reports iPad horizontal - Clients uses two wide report blocks. */
    .report-page-shell .reports-tab-panel[data-report-panel="clients"].is-active {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .section-header,
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .reports-kpi-grid,
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .admin-grid {
        grid-column: 1 / -1 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .reports-kpi-grid,
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] > .admin-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        margin: 0 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-top-clients-card,
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-oldest-clients-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .table-wrapper {
        display: none !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insights-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* /reports iPad - shared KPI and client insight card presentation. */
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-kpi-grid > .card.content-card {
        min-height: 132px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 8px !important;
        padding: 22px 18px !important;
        text-align: center !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-card {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-field {
        min-width: 0 !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* /reports iPad - premium identity header for client insight cards. */
    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-card {
        padding: 16px !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96)) !important;
        gap: 14px !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-header {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
        background: rgba(111, 97, 225, 0.10) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-identity {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-identity strong {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-identity span {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #6f6a80 !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-pill {
        justify-self: end !important;
        align-self: center !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-pill--frequent {
        background: rgba(255, 168, 76, 0.16) !important;
        color: #9a5400 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-pill--inactive {
        background: rgba(47, 36, 64, 0.07) !important;
        color: #5f5870 !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-fields {
        gap: 10px !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-field {
        min-height: 64px !important;
        gap: 5px !important;
        padding: 12px 14px !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-field span {
        font-size: 0.72rem !important;
    }

    .report-page-shell .reports-tab-panel[data-report-panel="clients"] .reports-client-insight-field strong {
        font-size: 0.98rem !important;
    }
}

@media (max-width: 767px) {
    /* /admin/administration mobile - users modal uses cards instead of a compressed table. */
    #users-modal.administration-users-modal .users-list-modal {
        width: min(94vw, 390px) !important;
        max-width: min(94vw, 390px) !important;
        max-height: 88vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #users-modal.administration-users-modal .modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 18px 18px 14px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
    }

    #users-modal.administration-users-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #users-modal.administration-users-modal .modal-close-btn {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(47, 36, 64, 0.06) !important;
        color: #17112a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #users-modal.administration-users-modal .modal-body {
        min-height: 0 !important;
        max-height: calc(88vh - 76px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 16px 18px 18px !important;
        margin: 0 !important;
    }

    #users-modal.administration-users-modal .table-wrapper {
        display: none !important;
    }

    #users-modal.administration-users-modal .users-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
    }

    #users-modal.administration-users-modal .user-mobile-card {
        min-width: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    #users-modal.administration-users-modal .user-mobile-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #users-modal.administration-users-modal .user-mobile-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    #users-modal.administration-users-modal .user-mobile-title strong {
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    #users-modal.administration-users-modal .user-mobile-title span {
        color: #6f6a80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    #users-modal.administration-users-modal .user-status-pill {
        padding: 7px 11px !important;
        border-radius: 999px !important;
        background: rgba(0, 166, 90, 0.14) !important;
        color: #007a46 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #users-modal.administration-users-modal .user-status-pill--inactive {
        background: rgba(220, 38, 38, 0.12) !important;
        color: #b91c1c !important;
    }

    #users-modal.administration-users-modal .user-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #users-modal.administration-users-modal .user-mobile-field {
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        gap: 4px !important;
        align-content: center !important;
    }

    #users-modal.administration-users-modal .user-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    #users-modal.administration-users-modal .user-mobile-field span {
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    #users-modal.administration-users-modal .user-mobile-field strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    #users-modal.administration-users-modal .user-mobile-actions {
        display: grid !important;
        gap: 8px !important;
    }

    #users-modal.administration-users-modal .user-mobile-actions form {
        margin: 0 !important;
    }

    #users-modal.administration-users-modal .user-mobile-edit-btn,
    #users-modal.administration-users-modal .user-mobile-deactivate-btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #users-modal.administration-users-modal .user-mobile-deactivate-btn {
        border: 1px solid rgba(220, 38, 38, 0.28) !important;
        background: #fff !important;
        color: #b91c1c !important;
    }

    #users-modal.administration-users-modal .user-mobile-principal {
        color: #6f6a80 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
}

/* /dashboard mobile - correccion final del header de pendientes. */
@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 60px !important;
        height: auto !important;
        padding: 18px 18px 14px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h2,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        text-align: left !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-close {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 44px !important;
        align-self: center !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        order: 1 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filters-toggle {
        order: 2 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-advanced-filters {
        order: 3 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }
}

/* /dashboard mobile - herramientas al ancho real de las cards. */
@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header.dashboard-pending-orders-modal-header {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        min-height: 54px !important;
        height: 54px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header.dashboard-pending-orders-modal-header h2,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header.dashboard-pending-orders-modal-header h3 {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        font-size: 1rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
        justify-self: center !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header.dashboard-pending-orders-modal-header .dashboard-pending-orders-modal-close {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools.dashboard-pending-orders-modal-tools {
        gap: 8px !important;
        padding-top: 6px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools.dashboard-pending-orders-modal-tools.dashboard-pending-orders-modal-tools {
        padding-top: 6px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools.dashboard-pending-orders-modal-tools {
        gap: 8px !important;
        padding: 8px 18px 10px !important;
    }

}

/* /dashboard iPad horizontal - modal de pendientes en cards. */
    @media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-content {
            width: min(96vw, 1040px) !important;
            max-width: min(96vw, 1040px) !important;
            height: min(86vh, 760px) !important;
            max-height: min(86vh, 760px) !important;
            margin: auto !important;
            border-radius: 24px !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
            width: 100% !important;
            min-height: 64px !important;
            padding: 18px 24px 16px !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 16px !important;
            border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
            display: block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            width: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            position: static !important;
            transform: none !important;
            text-align: left !important;
            color: var(--primary) !important;
            font-size: 1.25rem !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-close,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header .modal-close-btn {
            position: static !important;
            inset: auto !important;
            transform: none !important;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            min-height: 42px !important;
            margin: 0 !important;
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: 0 !important;
            border-radius: 14px !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 10px !important;
            padding: 18px 24px 14px !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            order: 1 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools label {
            display: block !important;
            margin: 0 0 6px !important;
            padding: 0 !important;
            text-align: left !important;
            font-size: 0.78rem !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools input,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools select {
            width: 100% !important;
            min-width: 0 !important;
            min-height: 46px !important;
            height: 46px !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
            width: 100% !important;
            min-height: 46px !important;
            margin: 0 !important;
            padding: 0 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            border-radius: 14px !important;
            box-sizing: border-box !important;
            order: 2 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 12px !important;
            margin: 4px 0 0 !important;
            padding: 0 !important;
            order: 3 !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
            display: none !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .orders-table-desktop,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal table {
            display: none !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results .mobile-order-card.mobile-order-card-airy {
            width: 100% !important;
            min-width: 0 !important;
            padding: 14px !important;
            border-radius: 16px !important;
            border: 1px solid rgba(80, 172, 198, 0.38) !important;
            background: #fff !important;
            box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 12px !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-header {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            gap: 10px !important;
            align-items: start !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-code {
            margin: 0 !important;
            color: var(--primary) !important;
            font-size: 1rem !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
            word-break: break-word !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-subline {
            margin: 3px 0 0 !important;
            color: #6F6A80 !important;
            font-size: 0.78rem !important;
            line-height: 1.2 !important;
            font-weight: 400 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-status-pill {
            justify-self: end !important;
            align-self: start !important;
            padding: 7px 12px !important;
            border-radius: 999px !important;
            font-size: 0.72rem !important;
            line-height: 1 !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-box {
            width: 100% !important;
            padding: 12px !important;
            margin: 0 !important;
            border-radius: 14px !important;
            background: rgba(111, 97, 225, 0.08) !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-icon {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            border-radius: 13px !important;
            background: rgba(111, 97, 225, 0.12) !important;
            color: var(--primary) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1rem !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-info {
            min-width: 0 !important;
            flex: 1 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-info strong {
            display: block !important;
            margin: 0 !important;
            color: #201735 !important;
            font-size: 0.95rem !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-info span {
            display: block !important;
            margin: 3px 0 0 !important;
            color: #6F6A80 !important;
            font-size: 0.82rem !important;
            line-height: 1.2 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metrics-grid {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric {
            min-width: 0 !important;
            min-height: 88px !important;
            padding: 10px !important;
            border-radius: 14px !important;
            background: rgba(248, 250, 255, 0.95) !important;
            border: 1px solid rgba(180, 207, 221, 0.55) !important;
            display: grid !important;
            align-content: center !important;
            gap: 5px !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon {
            width: 28px !important;
            height: 28px !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 0.82rem !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric > span:not(.mobile-order-metric-icon) {
            color: #6F6A80 !important;
            font-size: 0.76rem !important;
            line-height: 1.1 !important;
            font-weight: 500 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric strong {
            color: var(--primary) !important;
            font-size: 0.92rem !important;
            line-height: 1.1 !important;
            font-weight: 700 !important;
            word-break: normal !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-detail-btn {
            width: 100% !important;
            max-width: none !important;
            min-height: 44px !important;
            margin: 0 !important;
            padding: 0 16px !important;
            border-radius: 14px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            font-size: 0.9rem !important;
            line-height: 1 !important;
            font-weight: 700 !important;
        }

        /* Copia exacta del patrón de cards usado por #otherPendingOrdersModal. */
        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-card.mobile-order-card-airy {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 12px !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            padding: 14px !important;
            margin: 0 !important;
            overflow: visible !important;
            border-radius: 18px !important;
            background: #fff !important;
            border: 1px solid rgba(190, 220, 230, 0.9) !important;
            box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-header {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            align-items: flex-start !important;
            gap: 10px !important;
            width: 100% !important;
            margin: 0 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-code {
            color: var(--primary) !important;
            font-size: 1rem !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-subline {
            display: block !important;
            color: var(--muted) !important;
            font-size: 0.78rem !important;
            line-height: 1.3 !important;
            margin: 0 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-status-pill {
            justify-self: end !important;
            align-self: start !important;
            margin-left: 8px !important;
            white-space: nowrap !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-client-box {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
            padding: 12px !important;
            margin: 0 !important;
            border-radius: 16px !important;
            background: #F4F3FF !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-client-icon {
            display: inline-flex !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            flex: 0 0 44px !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 14px !important;
            background: #E7E6FF !important;
            color: #4A5BA8 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-client-info strong {
            display: block !important;
            color: #2F3260 !important;
            font-size: 1rem !important;
            line-height: 1.2 !important;
            font-weight: 700 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-client-info span {
            display: block !important;
            color: var(--muted) !important;
            font-size: 0.82rem !important;
            line-height: 1.2 !important;
            font-weight: 500 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-metrics-grid {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
            width: 100% !important;
            margin: 0 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-metric {
            display: grid !important;
            gap: 6px !important;
            min-height: 82px !important;
            padding: 10px 12px !important;
            border-radius: 14px !important;
            background: #F8FAFF !important;
            border: 1px solid rgba(210, 225, 235, 0.8) !important;
            overflow: visible !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-metric-icon {
            display: inline-flex !important;
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 999px !important;
            margin: 0 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-metric > span:not(.mobile-order-metric-icon) {
            color: #6F6A7F !important;
            font-size: 0.76rem !important;
            line-height: 1.1 !important;
            font-weight: 500 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-metric strong {
            color: #1F2A5A !important;
            font-size: 0.92rem !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
            word-break: break-word !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-detail-btn {
            display: flex !important;
            width: 100% !important;
            min-height: 42px !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            border-radius: 12px !important;
            margin: 0 !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .mobile-order-actions {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal.dashboard-pending-orders-modal .delayed-orders-modal-body {
            width: 100% !important;
            min-height: 0 !important;
            height: auto !important;
            max-height: none !important;
            padding: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 14px !important;
            margin: 0 !important;
            padding: 0 18px 24px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }

        #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results .mobile-order-card,
        #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .mobile-order-card {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }
    }

@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > div.dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > div.dashboard-pending-orders-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > button.dashboard-pending-orders-filters-toggle {
        width: calc(100% + 36px) !important;
        max-width: none !important;
        margin-left: -18px !important;
        margin-right: -18px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > div.dashboard-delayed-filter-search input,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > div.dashboard-pending-orders-filter-search input,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > button.dashboard-pending-orders-filters-toggle {
        box-sizing: border-box !important;
    }
}

/* /dashboard mobile - header y filtros del modal de pendientes. */
@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header {
        position: relative !important;
        width: 100% !important;
        min-height: 60px !important;
        height: 60px !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h2,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h3,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header .modal-title {
        position: static !important;
        width: auto !important;
        max-width: calc(100% - 56px) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-align: left !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-close,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header .modal-close-btn {
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: rgba(247, 247, 249, 0.96) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools input,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: inherit !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle > i {
        flex: 0 0 auto !important;
        color: var(--primary) !important;
        transition: transform 160ms ease !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-list,
    #reportDelayedOrdersModal .pending-orders-mobile-results {
        margin-top: 8px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /dashboard iPad horizontal -
      Resumen general: mini cards centradas y legibles.
    */

    body.tablet-app-mode .dashboard-page-shell .general-summary-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card {
        padding: 18px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .section-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .section-header {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .section-title,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .section-title,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card h2,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card h2,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card h3,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.14rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .section-subtitle,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .section-subtitle,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card p,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .general-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .kpi-card-grid,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .dashboard-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .dashboard-summary-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(104px, 1fr)) !important;
        gap: 14px !important;
        column-gap: 14px !important;
        row-gap: 14px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .kpi-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card {
        width: 100% !important;
        height: 100% !important;
        min-height: 104px !important;
        margin: 0 !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .general-summary-item .info-chip-label,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .kpi-card .info-chip-label,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item .info-chip-label,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card .info-chip-label {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #736278 !important;
        font-size: 0.86rem !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .kpi-card strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card strong {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - ajuste final del doughnut. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 278px !important;
        height: 278px !important;
        min-width: 278px !important;
        min-height: 278px !important;
        max-width: 278px !important;
        max-height: 278px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 260px !important;
        height: 260px !important;
        max-width: 260px !important;
        max-height: 260px !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 10px !important;
        align-self: start !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - Ordenes por estado y Resumen general. */
    .dashboard-page-shell .dashboard-overview-grid,
    .dashboard-page-shell .admin-actions-grid.dashboard-overview-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page-shell .dashboard-summary-card {
        grid-column: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 18px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 14px !important;
        padding: 8px 0 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 170px !important;
        height: 170px !important;
        min-width: 170px !important;
        min-height: 170px !important;
        max-width: 170px !important;
        max-height: 170px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 162px !important;
        height: 162px !important;
        max-width: 162px !important;
        max-height: 162px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 390px) !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-summary-card {
        padding: 18px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card .kpi-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 14px !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card .kpi-card {
        min-height: 82px !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .kpi-card .info-chip-label {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .kpi-card strong {
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    /* /dashboard iPad horizontal - Ordenes por estado. */
    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 18px !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .section-title,
    .dashboard-page-shell .dashboard-orders-status-card h2,
    .dashboard-page-shell .dashboard-orders-status-card h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .section-subtitle,
    .dashboard-page-shell .dashboard-orders-status-card p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 0 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: start !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 220px !important;
        height: 220px !important;
        min-width: 220px !important;
        min-height: 220px !important;
        max-width: 220px !important;
        max-height: 220px !important;
        margin: 4px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 212px !important;
        height: 212px !important;
        min-width: 212px !important;
        min-height: 212px !important;
        max-width: 212px !important;
        max-height: 212px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 420px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 10px 8px !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-dot,
    .dashboard-page-shell .dashboard-orders-status-card .legend-dot,
    .dashboard-page-shell .dashboard-orders-status-card .dot {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.38rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending {
        background: rgba(216, 74, 166, 0.08) !important;
        border: 1px solid rgba(216, 74, 166, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending strong {
        color: #d84aa6 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready {
        background: rgba(78, 166, 181, 0.10) !important;
        border: 1px solid rgba(78, 166, 181, 0.28) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready strong {
        color: #4ea6b5 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered {
        background: rgba(74, 90, 170, 0.08) !important;
        border: 1px solid rgba(74, 90, 170, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered strong {
        color: #4a5aaa !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - Resumen general al final de la cascada. */
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card,
    .dashboard-page-shell .dashboard-summary-card {
        padding: 18px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header,
    .dashboard-page-shell .dashboard-summary-card > .section-header {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header h3,
    .dashboard-page-shell .dashboard-summary-card > .section-header h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        font-size: 1.14rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header p,
    .dashboard-page-shell .dashboard-summary-card > .section-header p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(104px, 1fr)) !important;
        gap: 14px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item {
        width: 100% !important;
        height: 100% !important;
        min-height: 104px !important;
        margin: 0 !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - tamano final real del doughnut. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        align-content: start !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 236px !important;
        height: 236px !important;
        min-width: 236px !important;
        min-height: 236px !important;
        max-width: 236px !important;
        max-height: 236px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 224px !important;
        height: 224px !important;
        max-width: 224px !important;
        max-height: 224px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 10px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - override final del tamano del chart. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        align-content: start !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 236px !important;
        height: 236px !important;
        min-width: 236px !important;
        min-height: 236px !important;
        max-width: 236px !important;
        max-height: 236px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 224px !important;
        height: 224px !important;
        max-width: 224px !important;
        max-height: 224px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 10px !important;
    }
}

/* Final real: iPad horizontal, solo el doughnut de Ordenes por estado. */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 18px !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 0 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 176px !important;
        height: 176px !important;
        min-width: 176px !important;
        min-height: 176px !important;
        max-width: 176px !important;
        max-height: 176px !important;
        margin: 4px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 168px !important;
        height: 168px !important;
        min-width: 168px !important;
        min-height: 168px !important;
        max-width: 168px !important;
        max-height: 168px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 420px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 10px 8px !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-dot,
    .dashboard-page-shell .dashboard-orders-status-card .legend-dot,
    .dashboard-page-shell .dashboard-orders-status-card .dot {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - override final de Ordenes por estado. */
    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 18px !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 0 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: start !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 176px !important;
        height: 176px !important;
        min-width: 176px !important;
        min-height: 176px !important;
        max-width: 176px !important;
        max-height: 176px !important;
        margin: 4px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 168px !important;
        height: 168px !important;
        min-width: 168px !important;
        min-height: 168px !important;
        max-width: 168px !important;
        max-height: 168px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 420px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 10px 8px !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-dot,
    .dashboard-page-shell .dashboard-orders-status-card .legend-dot,
    .dashboard-page-shell .dashboard-orders-status-card .dot {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.38rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending {
        background: rgba(216, 74, 166, 0.08) !important;
        border: 1px solid rgba(216, 74, 166, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending strong {
        color: #d84aa6 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready {
        background: rgba(78, 166, 181, 0.10) !important;
        border: 1px solid rgba(78, 166, 181, 0.28) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready strong {
        color: #4ea6b5 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered {
        background: rgba(74, 90, 170, 0.08) !important;
        border: 1px solid rgba(74, 90, 170, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered strong {
        color: #4a5aaa !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - balance final de ambas cards. */
    .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page-shell .dashboard-summary-card {
        min-height: 310px !important;
        height: 100% !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin-bottom: 10px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        flex: 1 1 auto !important;
        grid-template-rows: auto auto !important;
        align-content: center !important;
        gap: 10px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 176px !important;
        height: 176px !important;
        min-width: 176px !important;
        min-height: 176px !important;
        max-width: 176px !important;
        max-height: 176px !important;
        margin: 0 auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 168px !important;
        height: 168px !important;
        max-width: 168px !important;
        max-height: 168px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-height: 62px !important;
        padding: 10px 8px !important;
        gap: 4px !important;
    }

    .dashboard-page-shell .dashboard-summary-card {
        padding: 18px !important;
    }

    .dashboard-page-shell .dashboard-summary-card .section-header,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-grid,
    .dashboard-page-shell .dashboard-summary-card .kpi-card-grid {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item,
    .dashboard-page-shell .dashboard-summary-card .kpi-card {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item span,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item span,
    .dashboard-page-shell .dashboard-summary-card .kpi-card span {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .kpi-card strong {
        margin: 0 !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }
}

    /*
      /summary desktop -
      Card Dia cerrado compacto y alineado.
    */

    .summary-page.summary-page-redesigned .summary-closed-day-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 22px !important;
        border-radius: 22px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-header {
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-heading {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-heading h2,
    .summary-page.summary-page-redesigned .summary-closed-day-heading h3,
    .summary-page.summary-page-redesigned .summary-closed-day-card > h2,
    .summary-page.summary-page-redesigned .summary-closed-day-card > h3 {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-heading p,
    .summary-page.summary-page-redesigned .summary-closed-day-card > p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-badge,
    .summary-page.summary-page-redesigned .summary-closed-day-card .closure-type-badge {
        justify-self: end !important;
        align-self: start !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        border: 1px solid #B8F2D0 !important;
        background: #D9FBE7 !important;
        color: #067A3D !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-transform: uppercase !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-grid,
    .summary-page.summary-page-redesigned .summary-closed-day-money-grid {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric,
    .summary-page.summary-page-redesigned .summary-closed-day-money-item,
    .summary-page.summary-page-redesigned .summary-closed-day-date {
        min-height: 82px !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.72) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 6px !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.05) !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric span,
    .summary-page.summary-page-redesigned .summary-closed-day-money-item span,
    .summary-page.summary-page-redesigned .summary-closed-day-date span {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F5470 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric strong,
    .summary-page.summary-page-redesigned .summary-closed-day-money-item strong,
    .summary-page.summary-page-redesigned .summary-closed-day-date strong {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.28rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric--balance.negative,
    .summary-page.summary-page-redesigned .summary-closed-day-money-item--balance.negative {
        background: #FFF3F3 !important;
        border-color: #FFB7B7 !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric--balance.negative strong,
    .summary-page.summary-page-redesigned .summary-closed-day-money-item--balance.negative strong {
        color: #D71920 !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric--balance.positive strong,
    .summary-page.summary-page-redesigned .summary-closed-day-money-item--balance.positive strong {
        color: #067A3D !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-metric--date strong,
    .summary-page.summary-page-redesigned .summary-closed-day-date strong {
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.05 !important;
    }

    .summary-page.summary-page-redesigned .summary-closed-day-card .summary-closed-date-row,
    .summary-page.summary-page-redesigned .summary-closed-day-card .closed-day-date-row,
    .summary-page.summary-page-redesigned .summary-closed-day-card .closure-date-row {
        margin: 0 !important;
        padding: 0 !important;
    }
}


@media (min-width: 1200px) {
    /*
      /summary desktop -
      reducir espacios internos de Movimientos recientes.
    */

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements.summary-operational-movements,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements.summary-operational-movements {
        gap: 4px !important;
        row-gap: 4px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding-top: 8px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid rgba(180, 207, 221, 0.35) !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements-header,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements-header {
        margin: 0 0 2px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements-header strong,
    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements-header h3,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements-header strong,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements-header h3 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-empty-copy,
    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements .helper-text,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-empty-copy,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements .helper-text {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements + .summary-operational-weekly,
    .summary-page.summary-page-redesigned .summary-operational-day-card .cash-box-movements + .summary-free-cash-card,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements + .summary-operational-weekly,
    .summary-page.summary-page-redesigned .summary-operational-card .cash-box-movements + .summary-free-cash-card {
        margin-top: 6px !important;
    }

    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-operational-weekly,
    .summary-page.summary-page-redesigned .summary-operational-day-card .summary-free-cash-card,
    .summary-page.summary-page-redesigned .summary-operational-card .summary-operational-weekly,
    .summary-page.summary-page-redesigned .summary-operational-card .summary-free-cash-card {
        margin-top: 6px !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - UI del modal igual al listado de pendientes de /orders. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog {
        width: min(96vw, 1500px) !important;
        max-width: min(96vw, 1500px) !important;
        height: 94vh !important;
        max-height: 94vh !important;
        border-radius: 22px !important;
        background: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
        min-height: 64px !important;
        padding: 18px 22px !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.7) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
        color: #304A9A !important;
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
        background: #F4F5FB !important;
        color: #111827 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        max-height: none !important;
        padding: 20px 22px 8px !important;
        background: #fff !important;
        gap: 14px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(300px, 1.55fr) repeat(4, minmax(145px, 0.9fr)) minmax(170px, 0.9fr) !important;
        align-items: end !important;
        gap: 14px 16px !important;
        margin: 0 0 12px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions {
        grid-column: auto !important;
        grid-row: auto !important;
        order: initial !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-from { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-to { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions { order: 5 !important; }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal label {
        margin: 0 0 7px !important;
        color: #6F6A7F !important;
        font-size: 0.76rem !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal input,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal select {
        min-height: 46px !important;
        border-radius: 14px !important;
        border-color: rgba(80, 172, 198, 0.55) !important;
        color: #2f2440 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-btn {
        min-height: 46px !important;
        border-radius: 14px !important;
        background: #DB3CA2 !important;
        color: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell table {
        min-width: 1320px !important;
        table-layout: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th {
        padding: 14px 12px !important;
        background: #fff !important;
        color: #46589D !important;
        font-size: 0.84rem !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.9) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td {
        padding: 16px 12px !important;
        background: #fff !important;
        color: #2f2440 !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.78) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell tbody tr:hover td {
        background: #fff !important;
    }
}




@media (max-width: 767px) {
    /*
      /dashboard mobile -
      modal Ordenes pendientes de entrega.
    */

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-content,
    #reportDelayedOrdersModal .modal-dialog,
    #reportDelayedOrdersModal .modal-content {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 24px) !important;
        margin: 12px auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header,
    #reportDelayedOrdersModal .modal-header {
        min-height: 66px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: stretch !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h3,
    #reportDelayedOrdersModal .modal-header h3,
    #reportDelayedOrdersModal .modal-title {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #reportDelayedOrdersModal .modal-close,
    #reportDelayedOrdersModal .modal-close-btn {
        position: static !important;
        justify-self: end !important;
        align-self: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    #reportDelayedOrdersModal .delayed-orders-modal-body,
    #reportDelayedOrdersModal .modal-body {
        padding: 14px 16px 18px !important;
        max-height: calc(100vh - 92px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters,
    #reportDelayedOrdersModal .dashboard-delayed-filters,
    #reportDelayedOrdersModal .filters,
    #reportDelayedOrdersModal .modal-filters {
        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: end !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-filter-search {
        grid-column: 1 / -1 !important;
        order: 1 !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-laundry {
        order: 2 !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-sort {
        order: 3 !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-start {
        order: 4 !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-end {
        order: 5 !important;
    }

    #reportDelayedOrdersModal .dashboard-delayed-filter-actions {
        grid-column: 1 / -1 !important;
        order: 6 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filter-field,
    #reportDelayedOrdersModal .filter-group,
    #reportDelayedOrdersModal .history-filter-group {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal label,
    #reportDelayedOrdersModal .field-label,
    #reportDelayedOrdersModal .form-label {
        display: block !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    #reportDelayedOrdersModal input[type="search"],
    #reportDelayedOrdersModal input[type="text"],
    #reportDelayedOrdersModal input[type="date"],
    #reportDelayedOrdersModal select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-clear-btn,
    #reportDelayedOrdersModal .clear-filters-btn,
    #reportDelayedOrdersModal button[data-delayed-clear],
    #reportDelayedOrdersModal button[data-clear-filters] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 2px 0 0 !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-list,
    #reportDelayedOrdersModal .orders-list,
    #reportDelayedOrdersModal .pending-orders-list,
    #reportDelayedOrdersModal .pending-orders-mobile-results {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    #reportDelayedOrdersModal .pending-orders-mobile-results[style] {
        display: grid !important;
    }

    #reportDelayedOrdersModal .orders-table-desktop,
    #reportDelayedOrdersModal .delayed-orders-table-shell,
    #reportDelayedOrdersModal table {
        display: none !important;
    }

    #reportDelayedOrdersModal .order-card,
    #reportDelayedOrdersModal .pending-order-card,
    #reportDelayedOrdersModal .mobile-order-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .order-card .btn,
    #reportDelayedOrdersModal .pending-order-card .btn,
    #reportDelayedOrdersModal .mobile-order-card .btn {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - filtros limpios del modal de pendientes. */
    #reportDelayedOrdersModal .dashboard-pending-orders-filters,
    #reportDelayedOrdersModal .dashboard-delayed-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filter-field,
    #reportDelayedOrdersModal .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-delayed-filter-laundry,
    #reportDelayedOrdersModal .dashboard-delayed-filter-sort,
    #reportDelayedOrdersModal .dashboard-delayed-filter-start,
    #reportDelayedOrdersModal .dashboard-delayed-filter-end,
    #reportDelayedOrdersModal .dashboard-delayed-filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: 1 / -1 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filter-field label,
    #reportDelayedOrdersModal .dashboard-delayed-filters label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    #reportDelayedOrdersModal input[type="text"],
    #reportDelayedOrdersModal input[type="date"],
    #reportDelayedOrdersModal select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-clear-btn,
    #reportDelayedOrdersModal button[data-delayed-clear] {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      card Ordenes por estado.
    */

    .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page-shell .dashboard-status-card {
        padding: 16px !important;
        border-radius: 18px !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header,
    .dashboard-page-shell .dashboard-status-card .section-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .section-title,
    .dashboard-page-shell .dashboard-status-card .section-title {
        margin: 0 0 4px !important;
        padding: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .section-subtitle,
    .dashboard-page-shell .dashboard-status-card .section-subtitle,
    .dashboard-page-shell .dashboard-orders-status-card .helper-text,
    .dashboard-page-shell .dashboard-status-card .helper-text {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body,
    .dashboard-page-shell .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-status-card .donut-chart-shell {
        width: 100% !important;
        min-height: 220px !important;
        height: 220px !important;
        margin: 0 !important;
        padding: 2px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart,
    .dashboard-page-shell .dashboard-status-card #orderStatusChart,
    #orderStatusChart.dashboard-orders-status-chart {
        display: block !important;
        width: 100% !important;
        height: 214px !important;
        max-width: 260px !important;
        max-height: 214px !important;
        margin: 0 auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body > *:last-child,
    .dashboard-page-shell .dashboard-status-card .order-status-chart-wrapper > *:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      recentrar doughnut Ordenes por estado y conservar tooltip nativo.
    */

    .dashboard-page-shell .dashboard-orders-status-body,
    .dashboard-page-shell .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-status-card .donut-chart-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 238px !important;
        height: 238px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        justify-items: center !important;
        align-items: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart,
    .dashboard-page-shell .orders-status-chart,
    .dashboard-page-shell #orderStatusChart,
    #orderStatusChart.dashboard-orders-status-chart {
        display: block !important;
        width: min(248px, 100%) !important;
        height: 226px !important;
        max-width: 248px !important;
        max-height: 226px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        justify-self: center !important;
        align-self: center !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Ordenes por estado: eliminar leyenda duplicada
      y usar una unica leyenda con datos.
    */

    .dashboard-page-shell .dashboard-orders-status-card .is-hidden-mobile-orders-status-legend {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .legend:not(.dashboard-orders-status-legend-values),
    .dashboard-page-shell .dashboard-orders-status-card .chart-legend:not(.dashboard-orders-status-legend-values),
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-legend:not(.dashboard-orders-status-legend-values),
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend:not(.dashboard-orders-status-legend-values),
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-custom {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        justify-items: center !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-status-card .donut-chart-shell {
        width: 168px !important;
        height: 168px !important;
        min-height: 168px !important;
        max-width: 168px !important;
        max-height: 168px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart,
    .dashboard-page-shell .dashboard-status-card canvas.dashboard-orders-status-chart,
    .dashboard-page-shell #orderStatusChart {
        width: 168px !important;
        height: 168px !important;
        max-width: 168px !important;
        max-height: 168px !important;

        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;

        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-values {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 58px !important;

        padding: 8px 5px !important;
        border-radius: 13px !important;
        border: 1px solid rgba(180, 207, 221, 0.56) !important;
        background: rgba(248, 251, 255, 0.9) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value-label {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        color: #6F6A80 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value-label span:last-child {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value-dot {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;

        border-radius: 999px !important;
        flex: 0 0 auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value--pending .dashboard-orders-status-legend-value-dot {
        background: #D83FA6 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-dot {
        background: #58A9B4 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-dot {
        background: #4A5899 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Ocultar labels flotantes/duplicados alrededor del doughnut.
    */

    .dashboard-page-shell .dashboard-orders-status-card .chartjs-datalabels,
    .dashboard-page-shell .dashboard-orders-status-card .chart-data-label,
    .dashboard-page-shell .dashboard-orders-status-card .chart-floating-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-floating-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-inline-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-annotation,
    .dashboard-page-shell .dashboard-orders-status-card .chart-annotation-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-chart-extra-labels,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-chart-labels,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-chart-legend-old {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        display: grid !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Doughnut Ordenes por estado sin leyenda interna de Chart.js.
    */

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap {
        width: 156px !important;
        height: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;

        margin: 0 auto 4px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 156px !important;
        height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Ordenes por estado: quitar puntos sueltos y compactar layout.
    */

    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 16px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 0 !important;
        padding-top: 8px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart-wrap {
        width: 148px !important;
        height: 148px !important;
        min-height: 148px !important;
        max-width: 148px !important;
        max-height: 148px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 148px !important;
        height: 148px !important;
        max-width: 148px !important;
        max-height: 148px !important;

        display: block !important;
        margin: 0 auto !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-inline-legend,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-dots,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-inline-legend,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-dots,
    .dashboard-page-shell .dashboard-orders-status-card .chart-legend,
    .dashboard-page-shell .dashboard-orders-status-card .legend-inline,
    .dashboard-page-shell .dashboard-orders-status-card .legend-row-old {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 10px 8px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.6) !important;
        background: rgba(248, 251, 255, 0.78) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        text-align: center !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-dot {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-label {
        margin: 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.76rem !important;
        line-height: 1.05 !important;
        font-weight: 500 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - centrar verticalmente el doughnut. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        align-items: center !important;
        row-gap: 4px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
        display: block !important;
        margin: 0 auto !important;
        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        align-self: center !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Evitar que el estado vacio del chart deje una capsula punteada.
    */

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-empty-state,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-empty-state[hidden],
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap .chart-empty-state[hidden] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Centrar grafico de Ordenes por estado y reducir espacio inferior.
    */

    .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page .dashboard-orders-status-card,
    .dashboard-page .orders-status-card {
        padding: 16px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body,
    .dashboard-page .dashboard-orders-status-body,
    .dashboard-page .orders-status-card .card-body,
    .dashboard-page .orders-status-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;

        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart-wrap,
    .dashboard-page .dashboard-orders-status-chart-wrap,
    .dashboard-page .orders-status-chart-wrap,
    .dashboard-page .orders-status-donut-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 160px !important;
        height: 160px !important;
        max-height: 160px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 4px auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-chart-wrap canvas,
    .dashboard-page-shell .dashboard-orders-status-chart,
    .dashboard-page .dashboard-orders-status-chart-wrap canvas,
    .dashboard-page .dashboard-orders-status-chart,
    .dashboard-page .orders-status-chart-wrap canvas,
    .dashboard-page .orders-status-donut-wrap canvas,
    .dashboard-page .orders-status-chart {
        display: block !important;

        width: 160px !important;
        height: 160px !important;
        max-width: 160px !important;
        max-height: 160px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-values,
    .dashboard-page-shell .dashboard-orders-status-stats,
    .dashboard-page .dashboard-orders-status-legend-values,
    .dashboard-page .dashboard-orders-status-stats,
    .dashboard-page .orders-status-stats,
    .dashboard-page .orders-status-legend {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value,
    .dashboard-page-shell .dashboard-orders-status-stat,
    .dashboard-page .dashboard-orders-status-legend-value,
    .dashboard-page .dashboard-orders-status-stat,
    .dashboard-page .orders-status-stat,
    .dashboard-page .orders-status-legend-item {
        min-height: 54px !important;
        padding: 8px 6px !important;
        border-radius: 14px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        text-align: center !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-stat-label,
    .dashboard-page .dashboard-orders-status-legend-value-label,
    .dashboard-page .dashboard-orders-status-stat-label,
    .dashboard-page .orders-status-stat-label,
    .dashboard-page .orders-status-legend-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-legend-value strong,
    .dashboard-page-shell .dashboard-orders-status-stat-value,
    .dashboard-page .dashboard-orders-status-legend-value strong,
    .dashboard-page .dashboard-orders-status-stat-value,
    .dashboard-page .orders-status-stat-value,
    .dashboard-page .orders-status-legend-item strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.1rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Colores por estado en las cards inferiores de Ordenes por estado.
    */

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-height: 62px !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
        text-align: center !important;
        border: 1px solid #d9e6ef !important;
        background: #ffffff !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending {
        background: rgba(216, 74, 166, 0.08) !important;
        border-color: rgba(216, 74, 166, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending strong {
        color: #d84aa6 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready {
        background: rgba(78, 166, 181, 0.10) !important;
        border-color: rgba(78, 166, 181, 0.28) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready strong {
        color: #4ea6b5 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered {
        background: rgba(74, 90, 170, 0.08) !important;
        border-color: rgba(74, 90, 170, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered strong {
        color: #4a5aaa !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile --
      Reducir espacio inferior sin perder sombra del ultimo card.
    */

    body:has(.dashboard-page-shell) .dashboard-main,
    body:has(.dashboard-page-shell) .main-content {
        padding-bottom: 8px !important;
    }

    body:has(.dashboard-page-shell) .content-area,
    body:has(.dashboard-page-shell) .page-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
    }

    .dashboard-page-shell {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        gap: 14px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .dashboard-page-shell > :last-child {
        margin-bottom: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-card {
        margin-bottom: 10px !important;
        overflow: visible !important;
        box-shadow:
            0 14px 28px rgba(74, 88, 153, 0.12),
            0 4px 12px rgba(74, 88, 153, 0.08) !important;
    }

    .dashboard-page-shell .dashboard-audit-card,
    .dashboard-page-shell .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-summary-card {
        margin-bottom: 0 !important;
    }

    .mobile-bottom-nav {
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Card alerta: Ordenes pendientes de entrega.
    */

    .dashboard-page-shell .delayed-orders-card {
        padding: 16px !important;
        border-radius: 22px !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .delayed-orders-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "copy count"
            "action action" !important;

        gap: 14px 12px !important;
        align-items: start !important;

        width: 100% !important;
        height: auto !important;
    }

    .dashboard-page-shell .delayed-orders-info {
        grid-area: copy !important;
        min-width: 0 !important;

        display: grid !important;
        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-info .alert-label,
    .dashboard-page-shell .delayed-orders-info .delayed-orders-label {
        width: fit-content !important;

        margin: 0 !important;
        padding: 0 !important;

        color: var(--secondary) !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .dashboard-page-shell .delayed-orders-info h3 {
        max-width: 160px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .delayed-orders-info p {
        max-width: 180px !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
    }

    .dashboard-page-shell .delayed-orders-actions {
        grid-area: count !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;

        width: auto !important;
        min-width: 74px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-count-stack {
        display: grid !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 3px !important;

        min-width: 62px !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    .dashboard-page-shell .delayed-orders-count {
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 2.05rem !important;
        line-height: 0.9 !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
    }

    .dashboard-page-shell .delayed-orders-count-label {
        margin: 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .dashboard-page-shell .delayed-orders-action-desktop {
        display: none !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile-wrap {
        grid-area: action !important;

        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile,
    .dashboard-page-shell .delayed-orders-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        border-radius: 16px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Card Ordenes pendientes de entrega: composicion final.
    */

    .dashboard-page-shell .delayed-orders-card {
        padding: 16px !important;
        border-radius: 22px !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .delayed-orders-content {
        width: 100% !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "copy count"
            "action action" !important;

        gap: 14px 12px !important;
        align-items: start !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-info {
        grid-area: copy !important;
        min-width: 0 !important;

        display: grid !important;
        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-info .alert-label,
    .dashboard-page-shell .delayed-orders-info .delayed-orders-label {
        margin: 0 !important;
        padding: 0 !important;

        width: fit-content !important;

        color: var(--secondary) !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        letter-spacing: 0.045em !important;
        text-transform: uppercase !important;
    }

    .dashboard-page-shell .delayed-orders-info h3 {
        max-width: 190px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.04 !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
    }

    .dashboard-page-shell .delayed-orders-info p {
        max-width: 210px !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.28 !important;
        font-weight: 400 !important;
    }

    .dashboard-page-shell .delayed-orders-actions {
        grid-area: count !important;

        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-count-stack {
        min-width: 70px !important;
        min-height: 66px !important;

        padding: 8px 10px !important;
        border-radius: 18px !important;

        background: rgba(74, 88, 153, 0.08) !important;
        border: 1px solid rgba(74, 88, 153, 0.14) !important;

        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 3px !important;

        margin: 0 !important;
        text-align: center !important;
    }

    .dashboard-page-shell .delayed-orders-count {
        margin: 0 !important;
        padding: 0 !important;

        color: var(--primary) !important;
        font-size: 2rem !important;
        line-height: 0.9 !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
    }

    .dashboard-page-shell .delayed-orders-count-label {
        margin: 0 !important;
        padding: 0 !important;

        color: #6F6A80 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .dashboard-page-shell .delayed-orders-action-desktop {
        display: none !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile-wrap {
        grid-area: action !important;

        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile,
    .dashboard-page-shell .delayed-orders-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        border-radius: 16px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Centrar verticalmente el circulo de Ordenes por estado.
    */

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        gap: 8px !important;
        padding-top: 8px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap {
        margin: 10px auto 2px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Centrar doughnut Ordenes por estado desde un area cuadrada estable.
    */

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 164px !important;
        height: 164px !important;
        min-width: 164px !important;
        min-height: 164px !important;
        max-width: 164px !important;
        max-height: 164px !important;

        display: grid !important;
        place-items: center !important;

        margin: 10px auto 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart {
        width: 148px !important;
        height: 148px !important;
        max-width: 148px !important;
        max-height: 148px !important;

        display: block !important;
        margin: 0 auto !important;

        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        margin-top: 6px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - compactar realmente doughnut y estados. */
    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 18px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin-bottom: 8px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        flex: 1 1 auto !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 4px 0 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 240px !important;
        height: 240px !important;
        min-width: 240px !important;
        min-height: 240px !important;
        max-width: 240px !important;
        max-height: 240px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 auto 2px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 228px !important;
        height: 228px !important;
        max-width: 228px !important;
        max-height: 228px !important;
        margin: 0 auto !important;
        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 10px !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-grid,
    .dashboard-page-shell .dashboard-summary-card .kpi-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item,
    .dashboard-page-shell .dashboard-summary-card .kpi-card {
        min-height: 92px !important;
        padding: 16px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        text-align: center !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .kpi-card .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .kpi-card strong {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .dashboard-page-shell .dashboard-summary-card .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .kpi-card .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .dashboard-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .kpi-card strong {
        display: block !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /*
      /dashboard iPad horizontal -
      Ajuste final: doughnut mas grande y estados mas cerca.
    */
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 18px !important;
        overflow: visible !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .section-header,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin: 0 0 6px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        align-items: start !important;
        align-content: start !important;

        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 272px !important;
        height: 244px !important;
        min-width: 272px !important;
        min-height: 244px !important;
        max-width: 272px !important;
        max-height: 244px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 auto !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart,
    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 244px !important;
        height: 244px !important;
        max-width: 244px !important;
        max-height: 244px !important;

        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;

        position: static !important;
        transform: none !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 10px !important;
        align-self: start !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - Terceros pendientes y Auditoria. */
    .dashboard-page-shell .dashboard-secondary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-secondary-grid .dashboard-audit-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .section-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .section-header h2,
    .dashboard-page-shell .dashboard-secondary-grid .section-header h3 {
        margin: 0 0 5px !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .section-header p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.84rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-dashboard-grid,
    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-pairs {
        order: 1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-records {
        order: 2 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment,
    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        grid-column: 1 / -1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment {
        order: 3 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        order: 4 !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .general-summary-item,
    .dashboard-page-shell .dashboard-secondary-grid .kpi-card {
        min-width: 0 !important;
        min-height: 82px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .info-chip-label {
        margin: 0 !important;
        padding: 0 !important;
        color: #736278 !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .dashboard-page-shell .dashboard-secondary-grid .kpi-card strong {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) and (width: 0px) {
    /* /dashboard iPad horizontal - Terceros pendientes y Auditoria. */
    .dashboard-page-shell {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-indicators-card,
    .dashboard-page-shell .delayed-orders-card {
        grid-column: 1 / -1 !important;
    }

    .dashboard-page-shell .dashboard-overview-grid {
        display: contents !important;
    }

    .dashboard-page-shell .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-audit-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .section-header,
    .dashboard-page-shell .dashboard-audit-card .section-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .section-header h3,
    .dashboard-page-shell .dashboard-audit-card .section-header h3 {
        margin: 0 0 5px !important;
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-dashboard-grid,
    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-pairs {
        order: 1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-records {
        order: 2 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment,
    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        grid-column: 1 / -1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment {
        order: 3 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        order: 4 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .general-summary-item,
    .dashboard-page-shell .dashboard-third-party-card .kpi-card,
    .dashboard-page-shell .dashboard-audit-card .general-summary-item,
    .dashboard-page-shell .dashboard-audit-card .kpi-card {
        min-width: 0 !important;
        min-height: 82px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .info-chip-label,
    .dashboard-page-shell .dashboard-audit-card .info-chip-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card strong,
    .dashboard-page-shell .dashboard-audit-card .kpi-card strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - revert visual de Terceros y Auditoria. */
    .dashboard-page-shell .dashboard-overview-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-third-party-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        grid-column: auto !important;
    }

    .dashboard-page-shell .dashboard-audit-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        grid-column: 1 / -1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-dashboard-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment,
    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        grid-column: auto !important;
        order: initial !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card,
    .dashboard-page-shell .dashboard-audit-card .kpi-card {
        min-height: 74px !important;
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .info-chip-label,
    .dashboard-page-shell .dashboard-audit-card .info-chip-label {
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-third-party-card strong,
    .dashboard-page-shell .dashboard-audit-card strong {
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) and (width: 0px) {
    /* /dashboard iPad horizontal - fila 3/5 para Terceros y Auditoria. */
    .dashboard-page-shell {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-indicators-card,
    .dashboard-page-shell .delayed-orders-card {
        grid-column: 1 / -1 !important;
    }

    .dashboard-page-shell .dashboard-overview-grid {
        display: contents !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page-shell .dashboard-summary-card {
        grid-column: span 4 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card {
        grid-column: span 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .dashboard-page-shell .dashboard-audit-card {
        grid-column: span 5 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-dashboard-grid {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment {
        order: 1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-pairs {
        order: 2 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-records {
        order: 3 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        grid-column: auto !important;
        order: 4 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card,
    .dashboard-page-shell .dashboard-audit-card .kpi-card {
        min-height: 74px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .info-chip-label,
    .dashboard-page-shell .dashboard-audit-card .info-chip-label {
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .dashboard-page-shell .dashboard-third-party-card strong,
    .dashboard-page-shell .dashboard-audit-card strong {
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-audit-card .kpi-card {
        min-height: 86px !important;
        padding: 16px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - fila exclusiva Terceros y Auditoria. */
    .dashboard-page-shell .dashboard-third-audit-row {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        column-gap: 16px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        margin: 0 !important;
        padding: 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row > .dashboard-audit-card {
        grid-column: auto !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .section-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-dashboard-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-payment {
        order: 1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-pairs {
        order: 2 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .kpi-card--third-party-records {
        order: 3 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        grid-column: 1 / -1 !important;
        order: 4 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 auto !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .kpi-card {
        min-height: 72px !important;
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .audit-action-desktop {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .audit-action-mobile-wrap {
        display: block !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row .audit-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (min-width: 1200px) {
    /* Mantener la composicion previa fuera del viewport iPad horizontal. */
    .dashboard-page-shell .dashboard-third-audit-row {
        display: contents;
    }

    .dashboard-page-shell .dashboard-overview-grid > .dashboard-audit-card {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - override al final del layout. */
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card,
    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 16px 18px 18px !important;
        overflow: visible !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .section-header,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin: 0 0 6px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        align-content: start !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 230px !important;
        height: 218px !important;
        min-width: 230px !important;
        min-height: 218px !important;
        max-width: 230px !important;
        max-height: 218px !important;
        margin: 0 auto 4px !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart,
    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 320px !important;
        height: 320px !important;
        max-width: 320px !important;
        max-height: 320px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: relative !important;
        top: -32px !important;
        transform: none !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: min(100%, 430px) !important;
        margin: -6px auto 0 !important;
        padding: 0 !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-height: 58px !important;
        padding: 8px 10px !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-align: center !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - Resumen general mas legible. */
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card-grid--four,
    .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card .kpi-card-grid,
    .dashboard-page-shell .dashboard-summary-card .kpi-card-grid--four {
        gap: 16px !important;
        column-gap: 16px !important;
        row-gap: 14px !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card,
    .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card .kpi-card {
        border-radius: 16px !important;
        margin: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card strong,
    .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card .kpi-card strong {
        font-size: 2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /*
      /dashboard mobile -
      Card Ordenes por estado: version final limpia.
    */

    .dashboard-page-shell .dashboard-orders-status-card {
        padding: 16px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header,
    .dashboard-page-shell .dashboard-orders-status-card .section-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .section-title,
    .dashboard-page-shell .dashboard-orders-status-card h2,
    .dashboard-page-shell .dashboard-orders-status-card h3 {
        margin: 0 0 4px !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .section-subtitle,
    .dashboard-page-shell .dashboard-orders-status-card p {
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-body {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: start !important;

        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 156px !important;
        height: 132px !important;
        min-width: 156px !important;
        min-height: 132px !important;
        max-width: 156px !important;
        max-height: 132px !important;

        display: grid !important;
        place-items: center !important;

        margin: 14px auto 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 156px !important;
        height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;

        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;

        position: static !important;
        left: auto !important;
        right: auto !important;

        transform: translateY(6px) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .chartjs-datalabels,
    .dashboard-page-shell .dashboard-orders-status-card .chart-data-label,
    .dashboard-page-shell .dashboard-orders-status-card .chart-floating-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-floating-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-inline-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-annotation,
    .dashboard-page-shell .dashboard-orders-status-card .chart-annotation-label,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-chart-extra-labels,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-chart-labels,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-chart-legend-old,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-inline-legend,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-dots,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-inline-legend,
    .dashboard-page-shell .dashboard-orders-status-card .orders-status-dots,
    .dashboard-page-shell .dashboard-orders-status-card .chart-legend,
    .dashboard-page-shell .dashboard-orders-status-card .legend-inline,
    .dashboard-page-shell .dashboard-orders-status-card .legend-row-old {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-empty-state,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-empty-state[hidden],
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap .chart-empty-state[hidden] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 62px !important;

        padding: 10px 8px !important;
        border-radius: 14px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-dot {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-label {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending {
        background: rgba(216, 74, 166, 0.08) !important;
        border: 1px solid rgba(216, 74, 166, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending strong {
        color: #d84aa6 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready {
        background: rgba(78, 166, 181, 0.10) !important;
        border: 1px solid rgba(78, 166, 181, 0.28) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready strong {
        color: #4ea6b5 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered {
        background: rgba(74, 90, 170, 0.08) !important;
        border: 1px solid rgba(74, 90, 170, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered strong {
        color: #4a5aaa !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - ajuste final de Resumen general. */
    /* FINAL-RESUMEN-GENERAL-REALIGN */
    /* REAL-ALIGN-TAIL */
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card,
    .dashboard-page-shell .dashboard-summary-card {
        padding: 18px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header,
    .dashboard-page-shell .dashboard-summary-card > .section-header {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header h3,
    .dashboard-page-shell .dashboard-summary-card > .section-header h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        font-size: 1.14rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header p,
    .dashboard-page-shell .dashboard-summary-card > .section-header p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(104px, 1fr)) !important;
        gap: 14px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item {
        width: 100% !important;
        height: 100% !important;
        min-height: 104px !important;
        margin: 0 !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - Resumen general como Auditoria. */
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item {
        width: 100% !important;
        min-height: 88px !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label {
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong {
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: right !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - listas internas estables. */
    body.tablet-app-mode .dashboard-page-shell .general-summary-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card {
        padding: 18px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .section-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .section-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .section-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .section-header {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .third-party-dashboard-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .dashboard-audit-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: minmax(72px, auto) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .kpi-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .kpi-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .info-chip-label,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .info-chip-label,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .info-chip-label {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .kpi-card strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .kpi-card strong {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .third-party-action-area,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .kpi-card-action-area {
        width: 100% !important;
        grid-column: 1 !important;
        order: 99 !important;
        margin: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn,
    body.tablet-app-mode .dashboard-page-shell .dashboard-audit-card .dashboard-header-action-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - Resumen general compacto. */
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card {
        padding: 16px !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header h3 {
        margin: 0 0 3px !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .section-header p {
        margin: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item {
        min-height: 56px !important;
        height: auto !important;
        padding: 10px 14px !important;
        margin: 0 !important;
        border-radius: 15px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.42rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - alerta operativa como mobile. */
    body.tablet-app-mode .dashboard-page-shell .delayed-orders-card {
        padding: 18px !important;
        border-radius: 22px !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-content {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "copy count"
            "action action" !important;
        gap: 14px 16px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-info {
        grid-area: copy !important;
        min-width: 0 !important;
        display: grid !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-info .alert-label,
    body.tablet-app-mode .dashboard-page-shell .delayed-orders-info .delayed-orders-label {
        width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.74rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        letter-spacing: 0.045em !important;
        text-transform: uppercase !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-info h2,
    body.tablet-app-mode .dashboard-page-shell .delayed-orders-info h3 {
        max-width: 440px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.28rem !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-info p {
        max-width: 460px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.28 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-actions {
        grid-area: count !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-count-stack {
        min-width: 76px !important;
        min-height: 68px !important;
        padding: 8px 12px !important;
        border-radius: 18px !important;
        background: rgba(74, 88, 153, 0.08) !important;
        border: 1px solid rgba(74, 88, 153, 0.16) !important;
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 3px !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-count {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 2.1rem !important;
        line-height: 0.9 !important;
        font-weight: 700 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-count-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-action-desktop {
        display: none !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-action-mobile-wrap {
        grid-area: action !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .delayed-orders-action-mobile,
    body.tablet-app-mode .dashboard-page-shell .delayed-orders-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - compactar Terceros y Auditoria. */
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row {
        align-items: start !important;
        gap: 16px !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card {
        padding: 16px !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .section-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .section-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .third-party-dashboard-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .dashboard-audit-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .kpi-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .general-summary-item,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .kpi-card,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .general-summary-item {
        min-height: 58px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border-radius: 15px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .info-chip-label,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .info-chip-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .kpi-card strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-third-party-card .general-summary-item strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .kpi-card strong,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .dashboard-audit-card .general-summary-item strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.42rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .third-party-action-area,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .kpi-card-action-area {
        width: 100% !important;
        order: 99 !important;
        margin: 0 !important;
    }

    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .third-party-action-area .btn,
    body.tablet-app-mode .dashboard-page-shell .dashboard-third-audit-row .audit-action-mobile {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - Resumen general mas compacto. */
    .dashboard-page-shell .dashboard-summary-card {
        height: auto !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .section-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .kpi-card {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        border-radius: 15px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.42rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - compactar Terceros y Auditoria. */
    .dashboard-page-shell .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-audit-card {
        height: auto !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    .dashboard-page-shell .dashboard-third-party-card > .section-header,
    .dashboard-page-shell .dashboard-audit-card > .section-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid,
    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .kpi-card,
    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid > .kpi-card {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        border-radius: 15px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .info-chip-label,
    .dashboard-page-shell .dashboard-audit-card .info-chip-label {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-third-party-card .kpi-card strong,
    .dashboard-page-shell .dashboard-audit-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-audit-card .kpi-card strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.42rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area,
    .dashboard-page-shell .dashboard-third-party-card .kpi-card-action-area,
    .dashboard-page-shell .dashboard-audit-card .audit-action-mobile-wrap {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn,
    .dashboard-page-shell .dashboard-audit-card .audit-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - separar Terceros y Auditoria. */
    .dashboard-page-shell .dashboard-third-party-card,
    .dashboard-page-shell .third-party-summary-card,
    .dashboard-page-shell .third-parties-card {
        margin-bottom: 16px !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .dashboard-page-shell .dashboard-audit-card,
    .dashboard-page-shell .orders-audit-card,
    .dashboard-page-shell .audit-orders-card {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - alerta operativa con contador en mini card. */
    .dashboard-page-shell .delayed-orders-card {
        padding: 16px !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .delayed-orders-content {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "copy count"
            "action action" !important;
        gap: 14px 12px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-info {
        grid-area: copy !important;
        min-width: 0 !important;
        display: grid !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-actions {
        grid-area: count !important;
        width: auto !important;
        min-width: 74px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    .dashboard-page-shell .delayed-orders-count-stack {
        min-width: 76px !important;
        min-height: 68px !important;
        padding: 8px 12px !important;
        border-radius: 18px !important;
        background: rgba(74, 88, 153, 0.08) !important;
        border: 1px solid rgba(74, 88, 153, 0.16) !important;
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 3px !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .delayed-orders-count {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 2.05rem !important;
        line-height: 0.9 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .delayed-orders-count-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .dashboard-page-shell .delayed-orders-action-desktop {
        display: none !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile-wrap {
        grid-area: action !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile,
    .dashboard-page-shell .delayed-orders-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - centrado vertical definitivo del doughnut. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        align-items: center !important;
        justify-items: center !important;
        row-gap: 4px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
        margin: 0 auto !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        margin: 0 !important;
        align-self: center !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - override final del acordeon de filtros. */
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 18px 24px 14px !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filters-toggle {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid rgba(74, 88, 153, 0.24) !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        background-image: none !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: left !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle > span {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle > i {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle:hover {
        border-color: rgba(74, 88, 153, 0.36) !important;
        background: rgba(248, 250, 255, 0.9) !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-delayed-filter-actions {
        grid-column: 4 !important;
        grid-row: 2 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-delayed-filter-actions .btn {
        width: auto !important;
        min-width: 140px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field--date-from {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field--date-to {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field--laundry {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field--order {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-actions .btn {
        width: 100% !important;
        max-width: none !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: stretch !important;
        align-items: center !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-actions .btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric {
        min-height: 92px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-total {
        background: #e8f1ff !important;
        color: #2563eb !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-debt {
        background: #fff1d6 !important;
        color: #f97316 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-payment {
        background: #e2fbea !important;
        color: #16a34a !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 18px 24px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-card.mobile-order-card-airy {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-header {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-box {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        margin: 12px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 16px !important;
        background: #f4f3ff !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-icon {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: #e7e6ff !important;
        color: #4a5ba8 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metrics-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric {
        min-width: 0 !important;
        min-height: 92px !important;
        padding: 10px !important;
        display: grid !important;
        align-content: center !important;
        gap: 6px !important;
        border-radius: 14px !important;
        background: #f8faff !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-actions,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-detail-btn {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-detail-btn {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 12px !important;
        margin-top: 12px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-status-pill,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-status-pill {
        min-height: 24px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon {
        margin-bottom: 8px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric > span:not(.mobile-order-metric-icon) {
        display: block !important;
        margin-bottom: 4px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric strong {
        display: block !important;
        font-size: 0.875rem !important;
        line-height: 1.15 !important;
    }
}

/* /dashboard iPad vertical - Ordenes por estado con UI de tablet horizontal. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        align-content: start !important;
        row-gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* El wrapper conserva la altura original; solo el dibujo crece dentro. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 176px !important;
        height: 176px !important;
        min-width: 176px !important;
        min-height: 176px !important;
        max-width: 176px !important;
        max-height: 176px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 212px !important;
        height: 212px !important;
        min-width: 212px !important;
        min-height: 212px !important;
        max-width: 212px !important;
        max-height: 212px !important;
        display: block !important;
        margin: 0 auto !important;
        position: static !important;
        transform: scale(1.48) !important;
        transform-origin: center center !important;
        z-index: 1 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value {
        min-width: 0 !important;
        min-height: 62px !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-dot {
        display: none !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value strong {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending {
        background: rgba(216, 74, 166, 0.08) !important;
        border: 1px solid rgba(216, 74, 166, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--pending strong {
        color: #d84aa6 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready {
        background: rgba(78, 166, 181, 0.1) !important;
        border: 1px solid rgba(78, 166, 181, 0.28) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--ready strong {
        color: #4ea6b5 !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered {
        background: rgba(74, 90, 170, 0.08) !important;
        border: 1px solid rgba(74, 90, 170, 0.26) !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered .dashboard-orders-status-legend-value-label,
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-value--delivered strong {
        color: #4a5aaa !important;
    }
}

/* /dashboard iPad vertical - modal de pendientes con UI mobile. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-content {
        width: min(94vw, 680px) !important;
        max-width: min(94vw, 680px) !important;
        height: min(88vh, 980px) !important;
        max-height: min(88vh, 980px) !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
        width: 100% !important;
        min-height: 64px !important;
        padding: 18px 20px 15px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-close,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header .modal-close-btn {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 16px 20px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools label {
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools input,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools select {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        color: var(--primary) !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle > i {
        flex: 0 0 auto !important;
        color: var(--primary) !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-actions,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-actions .btn {
        width: 100% !important;
        max-width: none !important;
        grid-column: 1 / -1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .orders-table-desktop,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal table {
        display: none !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 20px 24px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-card.mobile-order-card-airy {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 14px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        border: 1px solid rgba(190, 220, 230, 0.9) !important;
        box-shadow: 0 4px 12px rgba(38, 55, 90, 0.07) !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-header {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-client-box {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        margin: 12px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 16px !important;
        background: #f4f3ff !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metrics-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric {
        min-width: 0 !important;
        min-height: 92px !important;
        padding: 10px !important;
        display: grid !important;
        align-content: center !important;
        gap: 6px !important;
        border-radius: 14px !important;
        background: #f8faff !important;
        border: 1px solid rgba(210, 225, 235, 0.8) !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-actions,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-detail-btn {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-detail-btn {
        min-height: 42px !important;
        margin-top: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - reducir 20px entre doughnut y datos. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        height: 136px !important;
        min-height: 136px !important;
        max-height: 136px !important;
        overflow: visible !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - mantener el card y ampliar el dibujo interno. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
    }

    .dashboard-page-shell .dashboard-orders-status-card #orderStatusChart,
    .dashboard-page-shell .dashboard-orders-status-card canvas.dashboard-orders-status-chart {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - reducir 20px entre doughnut y datos. */
    .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-chart-wrap,
    .dashboard-page-shell .dashboard-orders-status-card .order-status-chart-wrapper,
    .dashboard-page-shell .dashboard-orders-status-card .donut-chart-shell {
        height: 136px !important;
        min-height: 136px !important;
        max-height: 136px !important;
        overflow: visible !important;
    }
}
@media (max-width: 767px) {
    /* /dashboard mobile - filtros limpios al final de la cascada. */
    #reportDelayedOrdersModal .dashboard-pending-orders-filters,
    #reportDelayedOrdersModal .dashboard-delayed-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filter-field,
    #reportDelayedOrdersModal .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-delayed-filter-laundry,
    #reportDelayedOrdersModal .dashboard-delayed-filter-sort,
    #reportDelayedOrdersModal .dashboard-delayed-filter-start,
    #reportDelayedOrdersModal .dashboard-delayed-filter-end,
    #reportDelayedOrdersModal .dashboard-delayed-filter-actions {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: 1 / -1 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filter-field label,
    #reportDelayedOrdersModal .dashboard-delayed-filters label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    #reportDelayedOrdersModal input[type="text"],
    #reportDelayedOrdersModal input[type="date"],
    #reportDelayedOrdersModal select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-clear-btn,
    #reportDelayedOrdersModal button[data-delayed-clear] {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }
}

/* /dashboard mobile - header y filtros del modal de pendientes. */
@media (max-width: 767px) {
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header {
        position: relative !important;
        width: 100% !important;
        min-height: 60px !important;
        height: 60px !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.42) !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h2,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header h3,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header .modal-title {
        position: static !important;
        width: auto !important;
        max-width: calc(100% - 56px) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-align: left !important;
        color: var(--primary) !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-close,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-header .modal-close-btn {
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: rgba(247, 247, 249, 0.96) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-delayed-filter-search,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools input,
    #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.62) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: inherit !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle > i {
        flex: 0 0 auto !important;
        color: var(--primary) !important;
        transition: transform 160ms ease !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-filters-toggle.is-open > i {
        transform: rotate(180deg) !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-advanced-filters .dashboard-pending-orders-filter-field {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportDelayedOrdersModal .dashboard-pending-orders-list,
    #reportDelayedOrdersModal .pending-orders-mobile-results {
        margin-top: 8px !important;
    }
}

/* /dashboard iPad vertical - Resumen general con boxes mas delgados. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .kpi-card {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

/* /dashboard iPad vertical - separar subtitulo de Resumen general. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .section-header,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .section-header {
        margin-bottom: 14px !important;
    }

    body.tablet-app-mode .dashboard-page-shell .general-summary-card .general-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .general-summary-card .kpi-card-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .general-summary-grid,
    body.tablet-app-mode .dashboard-page-shell .dashboard-summary-card .kpi-card-grid {
        margin-top: 8px !important;
    }
}

/* /dashboard iPad vertical - compactar boxes de Terceros y Auditoria. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid,
    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .kpi-card,
    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid > .kpi-card {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .info-chip-label,
    .dashboard-page-shell .dashboard-audit-card .info-chip-label {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .general-summary-item strong,
    .dashboard-page-shell .dashboard-audit-card .general-summary-item strong {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

/* /dashboard iPad vertical - separar cards de Terceros y Auditoria. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .dashboard-page-shell .dashboard-third-audit-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        row-gap: 16px !important;
        align-items: start !important;
    }

    .dashboard-page-shell .dashboard-third-audit-row > .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-third-audit-row > .dashboard-audit-card {
        margin: 0 !important;
    }
}

/* /dashboard iPad vertical - cierre final del modal de pendientes. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        order: 2 !important;
        width: 100% !important;
        min-height: 46px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        order: 3 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 6px !important;
        background: #e5efff !important;
        color: #2468df !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-debt {
        background: #ffeadf !important;
        color: #f06b21 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon.metric-payment {
        background: #def7e8 !important;
        color: #18a957 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-metric-icon i {
        color: inherit !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }
}

/* /dashboard iPad vertical - filtros del modal a ancho completo. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search,
    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle,
    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
    }

    body.tablet-app-mode #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > *,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--date-from {
        order: 1 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--date-to {
        order: 2 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--laundry {
        order: 3 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--order {
        order: 4 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--actions {
        order: 5 !important;
    }
}

/* /dashboard iPad vertical - compactar espacio bajo el header del modal. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-body {
        padding-top: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }
}

/* /dashboard iPad vertical - alerta operativa con UI compacto. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    .dashboard-page-shell .delayed-orders-card {
        padding: 18px !important;
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .delayed-orders-content {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "info count" !important;
        align-items: start !important;
        gap: 14px !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-info {
        grid-area: info !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-actions {
        grid-area: count !important;
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .dashboard-page-shell .delayed-orders-count-stack {
        min-width: 76px !important;
        min-height: 68px !important;
        padding: 8px 12px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(74, 88, 153, 0.2) !important;
        background: rgba(244, 243, 255, 0.92) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .delayed-orders-count {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 2.1rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .delayed-orders-count-label {
        margin: 0 !important;
        padding: 0 !important;
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    .dashboard-page-shell .delayed-orders-action-desktop {
        display: none !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile-wrap {
        width: 100% !important;
        display: block !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile-wrap .delayed-orders-action-mobile,
    .dashboard-page-shell .delayed-orders-action-mobile-wrap .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* /dashboard desktop - card interiors. Row placement is owned by their wrappers. */
@media (min-width: 1200px) {
    .dashboard-page-shell .dashboard-support-grid {
        align-items: stretch !important;
        grid-auto-rows: 1fr !important;
    }

    .dashboard-page-shell .dashboard-support-grid > .dashboard-third-party-card,
    .dashboard-page-shell .dashboard-support-grid > .dashboard-audit-card {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }

    .dashboard-page-shell .dashboard-audit-card {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .general-summary-item {
        min-height: 62px !important;
        height: 62px !important;
        padding: 12px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .general-summary-item .info-chip-label,
    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .general-summary-item strong {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .dashboard-page-shell .dashboard-summary-card > .general-summary-grid > .general-summary-item strong,
    .dashboard-page-shell .dashboard-third-party-card > .general-summary-grid > .general-summary-item strong {
        justify-self: end !important;
        text-align: right !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area {
        width: 100% !important;
        margin: 0 !important;
        grid-column: 1 / -1 !important;
    }

    .dashboard-page-shell .dashboard-third-party-card .third-party-action-area .btn {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 14px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        align-content: stretch !important;
    }

    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid > .general-summary-item {
        min-height: 88px !important;
        height: auto !important;
        padding: 16px 16px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell .dashboard-audit-card .dashboard-audit-metric-icon {
        width: 32px !important;
        height: 32px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 10px !important;
        font-size: 0.78rem !important;
    }

    .dashboard-page-shell .dashboard-audit-card > .general-summary-grid > .general-summary-item strong {
        justify-self: end !important;
        text-align: right !important;
        font-size: 1.6rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .dashboard-page-shell .delayed-orders-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 24px !important;
    }

    .dashboard-page-shell .delayed-orders-actions {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .dashboard-page-shell .delayed-orders-count-stack {
        min-width: 76px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .dashboard-page-shell .delayed-orders-action-desktop {
        display: inline-flex !important;
        min-width: 160px !important;
        min-height: 46px !important;
        margin: 0 !important;
    }

    .dashboard-page-shell .delayed-orders-action-mobile-wrap {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    /* Desktop - compact only the global sidebar navigation items. */
    .sidebar-nav {
        gap: 6px !important;
    }

    .sidebar-nav .sidebar-link {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 14px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

    .sidebar-nav .sidebar-link i {
        width: 18px !important;
        min-width: 18px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sidebar-nav .sidebar-link span {
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    .sidebar-nav .sidebar-link.active {
        min-height: 40px !important;
        height: 40px !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - keep the existing audit modal action visible. */
    .dashboard-page-shell .dashboard-audit-card .audit-action-mobile-wrap {
        display: block !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell .dashboard-audit-card .audit-action-mobile {
        display: inline-flex !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* The audit table remains the desktop presentation; mobile uses cards below. */
.audit-mobile-list {
    display: none;
}

@media (max-width: 767px) {
    /* /dashboard mobile - Auditoria de ordenes as responsive cards. */
    #orderAuditModal .audit-modal {
        width: min(94vw, 390px) !important;
        max-width: min(94vw, 390px) !important;
        height: min(88dvh, 760px) !important;
        max-height: min(88dvh, 760px) !important;
        margin: auto !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orderAuditModal .modal-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        min-height: 66px !important;
        padding: 12px 18px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
    }

    #orderAuditModal .modal-header h3 {
        grid-column: 2 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #orderAuditModal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #orderAuditModal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 16px 18px 22px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #orderAuditModal .audit-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
    }

    #orderAuditModal .audit-filter-pills {
        display: flex !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
    }

    #orderAuditModal .audit-filter-pill {
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-toolbar-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    #orderAuditModal .audit-selection-count {
        margin: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    #orderAuditModal .audit-bulk-resolve-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-table-shell {
        display: none !important;
    }

    #orderAuditModal .audit-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderAuditModal .audit-mobile-card {
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        gap: 12px !important;
    }

    #orderAuditModal .audit-mobile-card-header {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #orderAuditModal .audit-mobile-check {
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #orderAuditModal .audit-mobile-card-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    #orderAuditModal .audit-mobile-card-title strong {
        color: var(--primary) !important;
        font-size: 0.96rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-mobile-card-title span {
        color: #6f6a80 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    #orderAuditModal .audit-mobile-card .audit-status-chip {
        justify-self: end !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #orderAuditModal .audit-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #orderAuditModal .audit-mobile-field {
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        gap: 5px !important;
        align-content: center !important;
    }

    #orderAuditModal .audit-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    #orderAuditModal .audit-mobile-field span {
        color: #736278 !important;
        font-size: 0.68rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    #orderAuditModal .audit-mobile-field strong {
        color: var(--primary) !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    #orderAuditModal .audit-mobile-notes {
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(111, 97, 225, 0.08) !important;
        color: #2f2440 !important;
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    #orderAuditModal .audit-mobile-notes strong {
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-mobile-resolve-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - audit modal with natural height and no blank footer. */
    #orderAuditModal .audit-modal {
        height: auto !important;
        min-height: 0 !important;
        max-height: 88dvh !important;
    }

    #orderAuditModal .modal-body {
        flex: 0 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(88dvh - 76px) !important;
        padding: 16px 18px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #orderAuditModal .audit-mobile-list {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 8px !important;
    }

    #orderAuditModal .audit-mobile-card {
        margin-bottom: 0 !important;
    }

    #orderAuditModal .audit-mobile-card[hidden] {
        display: none !important;
    }

    #orderAuditModal .audit-mobile-selection-toolbar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderAuditModal .audit-select-all-btn {
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid rgba(80, 172, 198, 0.45) !important;
        border-radius: 999px !important;
        background: rgba(80, 172, 198, 0.10) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #orderAuditModal .audit-bulk-resolve-btn {
        margin: 0 !important;
    }
}

@media (min-width: 768px) {
    #orderAuditModal .audit-mobile-selection-toolbar {
        display: none !important;
    }
}

/* iPad vertical: keep order correction beside the close button. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  #order-detail-modal-orders .modal-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "heading" "actions" !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding-right: 20px !important;
  }

  #order-detail-modal-orders .order-detail-modal-heading {
    grid-area: heading !important;
    min-width: 0 !important;
    padding-right: 104px !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools {
    position: absolute !important;
    top: 12px !important;
    right: 20px !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    z-index: 5 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu,
  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    padding: 0 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools .order-correction-menu > [data-order-actions-toggle] span {
    display: none !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-header-void-btn,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-whatsapp-link,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-search-link {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #order-detail-modal-orders .order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: max-content !important;
    height: auto !important;
  }

  #order-detail-modal-orders .order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) .order-detail-service-amount {
    margin: 0 !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  #order-detail-modal-orders .order-detail-payment-row {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row:has(.payment-correction-menu.is-open) {
    z-index: 20 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu {
    position: absolute !important;
    z-index: 2 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open {
    z-index: 30 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 31 !important;
  }
}

@media (max-width: 767px) {
    /* /dashboard mobile - equal-width audit filter tabs. */
    #orderAuditModal .audit-filter-pills {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #orderAuditModal .audit-filter-pill {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-filter-pill span {
        flex: 0 0 auto !important;
        margin-left: 2px !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - resolved audit cards do not reserve checkbox space. */
    #orderAuditModal .audit-mobile-card--resolved .audit-mobile-check {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderAuditModal .audit-mobile-card--resolved .audit-mobile-card-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
    }

    #orderAuditModal .audit-mobile-card--resolved .audit-mobile-card-title {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /dashboard iPad vertical - use the approved audit card view. */
    #orderAuditModal .audit-modal {
        width: min(94vw, 720px) !important;
        max-width: min(94vw, 720px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 88dvh !important;
        margin: auto !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orderAuditModal .modal-body {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(88dvh - 76px) !important;
        padding: 16px 20px 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #orderAuditModal .audit-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - use the approved audit card view in two columns. */
    #orderAuditModal .audit-modal {
        width: min(94vw, 1040px) !important;
        max-width: min(94vw, 1040px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 86dvh !important;
        margin: auto !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #orderAuditModal .modal-body {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(86dvh - 76px) !important;
        padding: 16px 24px 20px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #orderAuditModal .audit-mobile-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* /dashboard iPad - shared mobile-style audit modal controls and cards. */
    #orderAuditModal .modal-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        min-height: 66px !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
    }

    #orderAuditModal .modal-header h3 {
        grid-column: 2 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.2rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #orderAuditModal .modal-close-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #orderAuditModal .audit-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
    }

    #orderAuditModal .audit-filter-pills {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderAuditModal .audit-filter-pill {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-toolbar-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #orderAuditModal .audit-mobile-selection-toolbar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderAuditModal .audit-select-all-btn {
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.45) !important;
        border-radius: 999px !important;
        background: rgba(80, 172, 198, 0.10) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #orderAuditModal .audit-bulk-resolve-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-table-shell {
        display: none !important;
    }

    #orderAuditModal .audit-mobile-list {
        width: 100% !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #orderAuditModal .audit-mobile-card {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    #orderAuditModal .audit-mobile-card[hidden] {
        display: none !important;
    }

    #orderAuditModal .audit-mobile-card-header {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #orderAuditModal .audit-mobile-card--resolved .audit-mobile-card-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
    }

    #orderAuditModal .audit-mobile-check {
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #orderAuditModal .audit-mobile-card-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderAuditModal .audit-mobile-card-title strong {
        color: var(--primary) !important;
        font-size: 0.98rem !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
    }

    #orderAuditModal .audit-mobile-card-title span {
        color: #6f6a80 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    #orderAuditModal .audit-mobile-card .audit-status-chip {
        justify-self: end !important;
        align-self: start !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #orderAuditModal .audit-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #orderAuditModal .audit-mobile-field {
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        gap: 4px !important;
        align-content: center !important;
    }

    #orderAuditModal .audit-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    #orderAuditModal .audit-mobile-field span {
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    #orderAuditModal .audit-mobile-field strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    #orderAuditModal .audit-mobile-notes {
        padding: 11px 12px !important;
        border-radius: 14px !important;
        background: rgba(111, 97, 225, 0.08) !important;
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    #orderAuditModal .audit-mobile-resolve-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - compact the final gap above the bottom navigation. */
    section.content-area.page-content,
    .dashboard-main section.content-area.page-content,
    main.dashboard-main section.content-area.page-content,
    .main-content section.content-area.page-content {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
    }

    .dashboard-page-shell,
    .page-shell.dashboard-page-shell,
    .dashboard-page-shell.page-shell {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .dashboard-page-shell > .card:last-child,
    .dashboard-page-shell > .content-card:last-child,
    .dashboard-page-shell > section:last-child,
    .dashboard-page-shell > article:last-child {
        margin-bottom: 8px !important;
    }

    .dashboard-page-shell .dashboard-overview-grid:last-child,
    .dashboard-page-shell .admin-actions-grid:last-child,
    .dashboard-page-shell .general-summary-card:last-child,
    .dashboard-page-shell .dashboard-summary-card:last-child {
        margin-bottom: 8px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /dashboard iPad horizontal - keep the quick-access card in normal flow. */
    html.tablet-app-mode section.content-area.page-content > section.card.content-card:has(.quick-links-grid),
    body.tablet-app-mode section.content-area.page-content > section.card.content-card:has(.quick-links-grid) {
        position: relative !important;
        z-index: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        margin-top: 18px !important;
        margin-bottom: 18px !important;
        overflow: visible !important;
    }

    /* The metrics section remains after the quick-access container; never overlap it. */
    html.tablet-app-mode section.content-area.page-content > section.card.content-card:has(.quick-links-grid) + .dashboard-metrics-compact,
    body.tablet-app-mode section.content-area.page-content > section.card.content-card:has(.quick-links-grid) + .dashboard-metrics-compact {
        position: relative !important;
        z-index: 0 !important;
        margin-top: 0 !important;
    }
}

/* Keep the administration user cards exclusive to the mobile users modal. */
#users-modal.administration-users-modal .users-mobile-list {
    display: none !important;
}

@media (max-width: 767px) {
    #users-modal.administration-users-modal .users-mobile-list {
        display: grid !important;
    }
}

/* Keep the administration client cards exclusive to the mobile clients modal. */
#clients-modal.registered-clients-modal .clients-mobile-list {
    display: none !important;
}

@media (max-width: 767px) {
    /* /admin/administration mobile - registered clients modal uses cards. */
    #clients-modal.registered-clients-modal .clients-list-modal {
        width: min(94vw, 390px) !important;
        max-width: min(94vw, 390px) !important;
        max-height: 88vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #clients-modal.registered-clients-modal .modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 18px 18px 14px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
    }

    #clients-modal.registered-clients-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #clients-modal.registered-clients-modal .modal-close-btn {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(47, 36, 64, 0.06) !important;
        color: #17112a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #clients-modal.registered-clients-modal .modal-body {
        min-height: 0 !important;
        max-height: calc(88vh - 76px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 16px 18px 18px !important;
        margin: 0 !important;
    }

    #clients-modal.registered-clients-modal .client-search-block {
        display: grid !important;
        gap: 8px !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    #clients-modal.registered-clients-modal .client-search-block .form-grid,
    #clients-modal.registered-clients-modal .client-search-block .form-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #clients-modal.registered-clients-modal .client-search-block label {
        margin: 0 !important;
        padding: 0 !important;
        color: #2f2440 !important;
        font-size: 0.86rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    #clients-modal.registered-clients-modal .client-search-block input {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.55) !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    #clients-modal.registered-clients-modal .clients-table-wrapper {
        display: none !important;
    }

    #clients-modal.registered-clients-modal .clients-mobile-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-card {
        min-width: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-title strong {
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-title span {
        color: #6f6a80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    #clients-modal.registered-clients-modal .client-loyalty-pill {
        padding: 7px 11px !important;
        border-radius: 999px !important;
        background: rgba(255, 168, 76, 0.16) !important;
        color: #9a5400 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-field {
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        gap: 4px !important;
        align-content: center !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-field span {
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-field strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-actions form {
        margin: 0 !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-edit-btn,
    #clients-modal.registered-clients-modal .client-mobile-delete-btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #clients-modal.registered-clients-modal .client-mobile-delete-btn {
        border: 1px solid rgba(220, 38, 38, 0.22) !important;
        background: rgba(220, 38, 38, 0.08) !important;
        color: #dc2626 !important;
    }
}

@media (max-width: 767px) {
    /* /admin/administration mobile - organize WhatsApp template controls. */
    .admin-whatsapp-card .admin-whatsapp-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .admin-whatsapp-card .admin-whatsapp-new-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .admin-whatsapp-card .admin-whatsapp-editor {
        gap: 0 !important;
    }

    .admin-whatsapp-card .admin-whatsapp-template-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .admin-whatsapp-card .admin-whatsapp-template-pill {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .admin-whatsapp-card .admin-whatsapp-form {
        gap: 16px !important;
    }

    .admin-whatsapp-card .admin-whatsapp-variables {
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /admin/administration iPad vertical - render the users modal as cards. */
    html.tablet-app-mode #users-modal.administration-users-modal .users-list-modal,
    body.tablet-app-mode #users-modal.administration-users-modal .users-list-modal {
        width: min(94vw, 720px) !important;
        max-width: min(94vw, 720px) !important;
        max-height: 88vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-header,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 18px 20px 15px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-header h3,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-close-btn,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-close-btn {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(47, 36, 64, 0.06) !important;
        color: #17112a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-body,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-body {
        min-height: 0 !important;
        max-height: calc(88vh - 76px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 18px 20px 20px !important;
        margin: 0 !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .table-wrapper,
    body.tablet-app-mode #users-modal.administration-users-modal .table-wrapper {
        display: none !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .users-mobile-list,
    body.tablet-app-mode #users-modal.administration-users-modal .users-mobile-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-card,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-card {
        min-width: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-card-header,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-fields,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field {
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        gap: 4px !important;
        align-content: center !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field--full,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-actions,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-actions {
        display: grid !important;
        gap: 8px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-edit-btn,
    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-deactivate-btn,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-edit-btn,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-deactivate-btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /admin/administration iPad vertical - reuse the approved mobile card styling. */
    html.tablet-app-mode #users-modal.administration-users-modal .users-list-modal,
    body.tablet-app-mode #users-modal.administration-users-modal .users-list-modal {
        width: min(92vw, 720px) !important;
        max-width: min(92vw, 720px) !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-header,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-header {
        gap: 12px !important;
        padding: 18px 18px 14px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-header h3,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-header h3 {
        font-size: 1.12rem !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .modal-body,
    body.tablet-app-mode #users-modal.administration-users-modal .modal-body {
        padding: 16px 18px 18px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-card,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-title,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-title strong,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-title strong {
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-title span,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-title span {
        color: #6f6a80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-status-pill,
    body.tablet-app-mode #users-modal.administration-users-modal .user-status-pill {
        padding: 7px 11px !important;
        border-radius: 999px !important;
        background: rgba(0, 166, 90, 0.14) !important;
        color: #007a46 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-status-pill--inactive,
    body.tablet-app-mode #users-modal.administration-users-modal .user-status-pill--inactive {
        background: rgba(220, 38, 38, 0.12) !important;
        color: #b91c1c !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field span,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field span {
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field strong,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-field strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-deactivate-btn,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-deactivate-btn {
        border: 1px solid rgba(220, 38, 38, 0.28) !important;
        background: #fff !important;
        color: #b91c1c !important;
    }

    html.tablet-app-mode #users-modal.administration-users-modal .user-mobile-principal,
    body.tablet-app-mode #users-modal.administration-users-modal .user-mobile-principal {
        color: #6f6a80 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /admin/administration iPad vertical - registered clients reuse the mobile card UI. */
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .clients-list-modal {
        width: min(92vw, 720px) !important;
        max-width: min(92vw, 720px) !important;
        max-height: 88vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 18px 18px 14px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.12rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-close-btn {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(47, 36, 64, 0.06) !important;
        color: #17112a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-body {
        min-height: 0 !important;
        max-height: calc(88vh - 76px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 16px 18px 18px !important;
        margin: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block .form-grid,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block .form-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block input {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.55) !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .clients-table-wrapper {
        display: none !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .clients-mobile-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-card {
        min-width: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-title strong {
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-title span {
        color: #6f6a80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-loyalty-pill {
        padding: 7px 11px !important;
        border-radius: 999px !important;
        background: rgba(255, 168, 76, 0.16) !important;
        color: #9a5400 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-field {
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        gap: 4px !important;
        align-content: center !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-field span {
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-field strong {
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-actions form {
        margin: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-edit-btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-delete-btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-delete-btn {
        border: 1px solid rgba(220, 38, 38, 0.22) !important;
        background: rgba(220, 38, 38, 0.08) !important;
        color: #dc2626 !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /admin/administration iPad vertical - full-width actions in the three primary cards. */
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-cashbox-card .admin-management-card__actions,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card .admin-management-card__actions,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card .admin-management-card__actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 14px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-cashbox-card .admin-management-card__actions .btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card .admin-management-card__actions .btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card .admin-management-card__actions .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /* /admin/administration iPad vertical - WhatsApp template controls fill the card width. */
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-whatsapp-card .admin-whatsapp-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-whatsapp-card .admin-whatsapp-new-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-whatsapp-card .admin-whatsapp-template-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 10px 0 18px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-whatsapp-card .admin-whatsapp-template-pill {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1200px) {
    /* /admin/administration desktop - primary card actions sit on the right. */
    .admin-management-grid > .admin-cashbox-card,
    .admin-management-grid > .admin-appearance-card,
    .admin-management-grid > .admin-sequences-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 180px !important;
        align-items: center !important;
        column-gap: 32px !important;
        padding: 28px 32px !important;
        box-sizing: border-box !important;
    }

    .admin-management-grid > .admin-cashbox-card > .admin-management-card__content,
    .admin-management-grid > .admin-appearance-card > .admin-management-card__content,
    .admin-management-grid > .admin-sequences-card > .admin-management-card__content {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        gap: 8px !important;
    }

    .admin-management-grid > .admin-cashbox-card > .admin-management-card__actions,
    .admin-management-grid > .admin-appearance-card > .admin-management-card__actions,
    .admin-management-grid > .admin-sequences-card > .admin-management-card__actions {
        width: 180px !important;
        min-width: 180px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .admin-management-grid > .admin-cashbox-card > .admin-management-card__actions .btn,
    .admin-management-grid > .admin-appearance-card > .admin-management-card__actions .btn,
    .admin-management-grid > .admin-sequences-card > .admin-management-card__actions .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    /* /reports mobile - report center tabs use an equal 2 by 2 grid. */
    .report-page-shell .report-main-shell .reports-tab-bar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 16px 0 18px !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .report-main-shell .reports-tab-button,
    .report-page-shell .report-main-shell .reports-tab-button.active {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    /* /reports mobile - center the six KPIs in the General summary panel only. */
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 8px !important;
        min-height: 124px !important;
        padding: 20px 18px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card > .info-chip-label {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #736278 !important;
        font-size: 0.82rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card > .kpi-money,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card > .kpi-number,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card > .metric-value {
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.55rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card > .kpi-money {
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="general"] .reports-kpi-grid > .card.content-card > .card-subtitle {
        width: 100% !important;
        max-width: 260px !important;
        margin: 2px auto 0 !important;
        padding: 0 !important;
        color: #6f6a80 !important;
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    /* /reports mobile - center KPI cards in Operation and Clients. */
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .reports-kpi-grid > .card.content-card,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="clients"] .reports-kpi-grid > .card.content-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 10px !important;
        min-height: 132px !important;
        padding: 20px 18px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .reports-kpi-grid > .card.content-card > .info-chip-label,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="clients"] .reports-kpi-grid > .card.content-card > .info-chip-label {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #736278 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .reports-kpi-grid > .card.content-card > .metric-value,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="clients"] .reports-kpi-grid > .card.content-card > .metric-value {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.65rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        text-align: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .reports-kpi-grid > .card.content-card > .card-subtitle,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="clients"] .reports-kpi-grid > .card.content-card > .card-subtitle {
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        color: #6f6a80 !important;
        font-size: 0.98rem !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        text-align: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row .info-chip-label,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row .metric-value,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-description {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* /reports mobile - center export actions without changing form controls. */
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 12px !important;
        min-height: 156px !important;
        padding: 22px 18px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button .quick-link-icon,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button .quick-link-title,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button .quick-link-text {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button .quick-link-icon {
        justify-self: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button .quick-link-title {
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="export"] .report-export-button .quick-link-text {
        max-width: 250px !important;
        color: #6f6a80 !important;
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
        font-weight: 400 !important;
    }
}

@media (max-width: 767px) {
    /* /reports mobile - keep delayed orders in the modal's approved card UI. */
    .report-page-shell .delayed-orders-list-card .table-wrapper,
    .report-page-shell .delayed-orders-list-card table {
        display: none !important;
    }

    .report-page-shell .delayed-orders-list-card {
        min-height: 0 !important;
    }

    #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 767px) {
    /* /reports mobile - replace client report tables with readable insight cards. */
    .report-page-shell .reports-top-clients-card,
    .report-page-shell .reports-oldest-clients-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-top-clients-card .table-wrapper,
    .report-page-shell .reports-top-clients-card table,
    .report-page-shell .reports-oldest-clients-card .table-wrapper,
    .report-page-shell .reports-oldest-clients-card table {
        display: none !important;
    }

    .report-page-shell .reports-client-insights-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-client-insight-card {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .report-page-shell .reports-client-insight-header {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
    }

    .report-page-shell .reports-client-insight-header strong {
        display: block !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    .report-page-shell .reports-client-insight-header > div > span {
        display: block !important;
        margin: 3px 0 0 !important;
        color: #6f6a80 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    .report-page-shell .reports-client-insight-pill {
        justify-self: end !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;
        background: rgba(255, 168, 76, 0.16) !important;
        color: #9a5400 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .report-page-shell .reports-client-insight-fields {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .report-page-shell .reports-client-insight-field {
        min-width: 0 !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .reports-client-insight-field span {
        color: #736278 !important;
        font-size: 0.7rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .report-page-shell .reports-client-insight-field strong {
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /reports iPad horizontal - keep Operation KPIs balanced in a 2 by 2 grid. */
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 150px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 10px !important;
        padding: 22px 20px !important;
        border-radius: 18px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .info-chip-label,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .metric-value,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .card-subtitle,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-description {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .info-chip-label {
        color: #736278 !important;
        font-size: 0.9rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .metric-value {
        color: var(--primary) !important;
        font-size: 2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .card-subtitle,
    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-description {
        max-width: 280px !important;
        color: #6f6a80 !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
    }

    .report-page-shell .report-main-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 10px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* /reports iPad - Exportar: cuatro descargas equilibradas en 2x2. */
    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="export"].is-active .report-export-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="export"].is-active .report-export-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 180px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 22px 20px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: center !important;
        justify-items: start !important;
        gap: 12px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="export"].is-active .report-export-button .quick-link-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="export"].is-active .report-export-button .quick-link-title {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.05rem !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="export"].is-active .report-export-button .quick-link-text {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #6f6a80 !important;
        font-size: 0.96rem !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        text-align: left !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    /*
      /reports iPad vertical - mantener el aire seguro del bottom nav sin
      reservar el padding global excesivo y sin recortar la sombra final.
    */
    body.tablet-app-mode:has(.report-page-shell) main.dashboard-main,
    body.tablet-app-mode:has(.report-page-shell) .dashboard-main,
    body.tablet-app-mode:has(.report-page-shell) .main-content {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
    }

    body.tablet-app-mode:has(.report-page-shell) section.content-area.page-content,
    body.tablet-app-mode:has(.report-page-shell) .content-area.page-content {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
    }

    body.tablet-app-mode:has(.report-page-shell) .report-page-shell,
    body.tablet-app-mode:has(.report-page-shell) .page-shell.report-page-shell {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode:has(.report-page-shell) .report-page-shell > .report-main-shell,
    body.tablet-app-mode:has(.report-page-shell) .report-page-shell > .card.content-card:last-child {
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    body.tablet-app-mode:has(.report-page-shell) .report-main-shell,
    body.tablet-app-mode:has(.report-page-shell) .report-main-shell .reports-tab-panel,
    body.tablet-app-mode:has(.report-page-shell) .report-main-shell .reports-kpi-grid,
    body.tablet-app-mode:has(.report-page-shell) .report-main-shell .admin-grid,
    body.tablet-app-mode:has(.report-page-shell) .report-main-shell .report-export-grid {
        overflow: visible !important;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* /reports iPad - Operacion: cuatro KPI equilibrados en una grilla 2x2. */
    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 140px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 20px 18px !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 8px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .info-chip-label,
    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row .info-chip-label {
        width: 100% !important;
        margin: 0 !important;
        color: #736278 !important;
        font-size: 0.86rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .metric-value,
    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row .metric-value {
        width: 100% !important;
        margin: 2px 0 0 !important;
        color: var(--primary) !important;
        font-size: 1.8rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        text-align: center !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] > .reports-kpi-grid > .card.content-card > .card-subtitle,
    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-description {
        width: 100% !important;
        max-width: 280px !important;
        margin: 2px auto 0 !important;
        color: #6f6a80 !important;
        font-size: 0.94rem !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
        text-align: center !important;
    }

    body.tablet-app-mode .report-page-shell .reports-tab-panel[data-report-panel="operation"] .report-alert-card .operation-stat-title-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 8px !important;
    }

    /* /reports iPad - Ordenes listas vencidas: usar cards, no tabla. */
    body.tablet-app-mode .report-page-shell .delayed-orders-list-card {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 18px !important;
        border-radius: 20px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .delayed-orders-list-card .table-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        margin: 0 !important;
    }

    body.tablet-app-mode .report-page-shell .delayed-orders-list-card .table-card-header > .btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .delayed-orders-list-card > .table-wrapper {
        display: none !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-orders-list {
        width: 100% !important;
        display: grid !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96)) !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        text-align: left !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-header strong,
    body.tablet-app-mode .report-page-shell .reports-overdue-order-client strong {
        display: block !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-header span,
    body.tablet-app-mode .report-page-shell .reports-overdue-order-client span {
        display: block !important;
        margin: 3px 0 0 !important;
        color: #6f6a80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-client {
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(240, 238, 255, 0.9) !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-field {
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.95) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: center !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-field span {
        color: #736278 !important;
        font-size: 0.7rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    body.tablet-app-mode .report-page-shell .reports-overdue-order-field strong {
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
    body.tablet-app-mode .report-page-shell .reports-overdue-orders-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    body.tablet-app-mode .report-page-shell .reports-overdue-orders-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* /reports iPad - el card principal es un preview; el modal conserva todas. */
    body.tablet-app-mode .report-page-shell .delayed-orders-list-card .reports-overdue-order-card:nth-child(n + 5) {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - alerta de ordenes pendientes de entrega. */
    .dashboard-page-shell > .delayed-orders-card {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 28px !important;
        padding: 28px 32px !important;
        border: 1px solid rgba(180, 207, 221, 0.75) !important;
        border-radius: 22px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 251, 0.96)) !important;
        box-shadow: 0 14px 32px rgba(47, 36, 64, 0.08) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-content {
        display: contents !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-info {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .dashboard-page-shell > .delayed-orders-card .alert-label {
        margin: 0 !important;
        padding: 0 !important;
        color: #db3ca2 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-info h3 {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-info p {
        margin: 0 !important;
        padding: 0 !important;
        color: #6f6a80 !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
        text-align: left !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-actions,
    .collaborator-dashboard-components .collaborator-dashboard-slot--pending > .delayed-orders-card .delayed-orders-actions {
        min-width: 270px !important;
        display: grid !important;
        grid-template-columns: auto 170px !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-count-stack,
    .collaborator-dashboard-components .collaborator-dashboard-slot--pending > .delayed-orders-card .delayed-orders-count-stack {
        min-width: 88px !important;
        min-height: 70px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.2) !important;
        border-radius: 18px !important;
        background: rgba(244, 243, 255, 0.92) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-count,
    .collaborator-dashboard-components .collaborator-dashboard-slot--pending > .delayed-orders-card .delayed-orders-count {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 2.1rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-count-label,
    .collaborator-dashboard-components .collaborator-dashboard-slot--pending > .delayed-orders-card .delayed-orders-count-label {
        margin: 0 !important;
        color: #736278 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-action-desktop,
    .collaborator-dashboard-components .collaborator-dashboard-slot--pending > .delayed-orders-card .delayed-orders-action-desktop {
        width: 170px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .dashboard-page-shell > .delayed-orders-card .delayed-orders-action-mobile-wrap {
        display: none !important;
    }

    /* /dashboard desktop - modal de ordenes pendientes de entrega. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog {
        width: min(94vw, 1380px) !important;
        max-width: min(94vw, 1380px) !important;
        max-height: 88vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 24px 70px rgba(47, 36, 64, 0.22) !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 26px 28px 22px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.55) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
        margin: 0 !important;
        color: #2f2440 !important;
        font-size: 1.45rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-close {
        position: static !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(47, 36, 64, 0.06) !important;
        color: #17112a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        min-height: 0 !important;
        max-height: calc(88vh - 94px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 28px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal label {
        margin: 0 0 6px !important;
        color: #736278 !important;
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal input,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal select {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(80, 172, 198, 0.55) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: #17112a !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-from { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-to { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order { order: 4 !important; }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions {
        grid-column: 4 !important;
        order: 5 !important;
        width: 100% !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions .btn {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        width: 100% !important;
        margin: 20px 0 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(180, 207, 221, 0.55) !important;
        border-radius: 18px !important;
        background: #fff !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell table {
        width: 100% !important;
        min-width: 1120px !important;
        border-collapse: collapse !important;
        background: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th {
        padding: 16px 14px !important;
        color: var(--primary) !important;
        background: rgba(248, 250, 255, 0.82) !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.65) !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td {
        padding: 16px 14px !important;
        color: #2f2440 !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.45) !important;
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell .dashboard-delayed-detail-btn {
        min-width: 136px !important;
        min-height: 44px !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - acabado visual del modal de pendientes. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog {
        box-shadow: 0 28px 80px rgba(47, 36, 64, 0.24) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 251, 0.94)) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        margin-bottom: 22px !important;
        padding: 18px !important;
        border: 1px solid rgba(180, 207, 221, 0.5) !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 10px 24px rgba(47, 36, 64, 0.04) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        cursor: pointer !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        margin-top: 2px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions {
        grid-column: 4 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: end !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        margin-top: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 28px rgba(47, 36, 64, 0.05) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell table {
        min-width: 0 !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th {
        background: rgba(248, 250, 255, 0.92) !important;
        font-size: 0.84rem !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td {
        background: #fff !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell tbody tr:hover td {
        background: rgba(248, 250, 255, 0.76) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell .pill-chip,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell .status-chip,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell .amount-pill {
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - patron de toolbar y tabla del modal de Auditoria. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        gap: 14px !important;
        flex: 0 0 auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal input:focus,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal select:focus {
        outline: 0 !important;
        border-color: rgba(74, 88, 153, 0.58) !important;
        box-shadow: 0 0 0 3px rgba(74, 88, 153, 0.1) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle:hover,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle[aria-expanded="true"] {
        border-color: rgba(74, 88, 153, 0.48) !important;
        background: rgba(74, 88, 153, 0.06) !important;
        box-shadow: 0 8px 18px rgba(74, 88, 153, 0.08) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-btn {
        border-color: rgba(74, 88, 153, 0.28) !important;
        background: #fff !important;
        color: var(--primary) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-btn:hover {
        border-color: rgba(74, 88, 153, 0.48) !important;
        background: rgba(74, 88, 153, 0.08) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell tbody tr {
        transition: background 0.2s ease !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - filtros y tabla como el modal Todas las ordenes. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog {
        width: min(96vw, 1500px) !important;
        max-width: min(96vw, 1500px) !important;
        border-radius: 22px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
        padding: 24px 28px 20px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        text-align: left !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        max-height: calc(88vh - 84px) !important;
        padding: 28px !important;
        background: #fff !important;
        gap: 12px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        display: grid !important;
        grid-template-columns: minmax(280px, 1.35fr) repeat(4, minmax(170px, 1fr)) !important;
        gap: 18px 16px !important;
        align-items: end !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search {
        grid-column: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: contents !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field {
        gap: 8px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-from { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-to { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order { order: 4 !important; }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions {
        grid-column: 5 !important;
        grid-row: 2 !important;
        order: 5 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal label {
        margin: 0 !important;
        color: #8a8194 !important;
        font-size: 0.76rem !important;
        text-align: left !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal input,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal select {
        min-height: 48px !important;
        padding: 0 16px !important;
        color: #2f2440 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-btn {
        width: 100% !important;
        min-height: 48px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #db3ca2 !important;
        color: #fff !important;
        font-size: 0.95rem !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        margin: 0 !important;
        border: 1px solid rgba(180, 207, 221, 0.68) !important;
        border-radius: 18px !important;
        overflow: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell table {
        min-width: 1180px !important;
        table-layout: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th {
        background: rgba(248, 250, 255, 0.95) !important;
        white-space: normal !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th:last-child,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td:last-child {
        width: 150px !important;
        min-width: 150px !important;
        padding-right: 16px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell .dashboard-delayed-detail-btn {
        width: 132px !important;
        min-width: 132px !important;
    }
}

@media (max-width: 1199px) {
    /* /dashboard mobile + iPad - chip de dias pendiente en cards del modal. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info strong,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info span {
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-order-customer-info strong {
        overflow-wrap: anywhere !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        justify-self: end !important;
        align-self: center !important;
        min-width: 84px !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--neutral {
        background: rgba(80, 172, 198, 0.16) !important;
        color: #2D7F91 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--warning {
        background: rgba(255, 193, 7, 0.22) !important;
        color: #946200 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip--danger {
        background: rgba(220, 38, 38, 0.14) !important;
        color: #B91C1C !important;
    }
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 76px !important;
        max-width: 96px !important;
        padding: 7px 9px !important;
        font-size: 0.68rem !important;
        line-height: 1.08 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 104px !important;
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 0.74rem !important;
    }
}

@media (max-width: 767px) {
    /* /dashboard mobile - cierre seguro antes del bottom nav y lista del modal. */
    body:has(.dashboard-page-shell) .dashboard-main {
        overflow: visible !important;
    }

    body:has(.dashboard-page-shell) .dashboard-page-shell {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) .dashboard-page-shell > section:last-child,
    body:has(.dashboard-page-shell) .dashboard-page-shell > article:last-child,
    body:has(.dashboard-page-shell) .dashboard-page-shell > .card:last-child,
    body:has(.dashboard-page-shell) .dashboard-page-shell > .content-card:last-child {
        margin-bottom: 14px !important;
        overflow: visible !important;
    }

    body:has(.dashboard-page-shell) .dashboard-page-shell .delayed-orders-card {
        margin-bottom: 18px !important;
        overflow: visible !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .pending-orders-mobile-results,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list {
        padding-bottom: 18px !important;
        margin-bottom: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .mobile-order-card:last-child {
        margin-bottom: 8px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-days-chip {
        min-width: 68px !important;
        max-width: 86px !important;
        min-height: 32px !important;
        padding: 7px 10px !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - pill de dias de atraso en la tabla del modal. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-delay-days-cell {
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-delay-days-pill {
        min-width: 82px !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /admin/administration iPad horizontal - acciones de las tres cards principales. */
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-cashbox-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 190px !important;
        align-items: center !important;
        column-gap: 28px !important;
        padding: 24px 28px !important;
        box-sizing: border-box !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-cashbox-card > .admin-management-card__content {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        gap: 6px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-cashbox-card > .admin-management-card__actions {
        width: 190px !important;
        min-width: 190px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-cashbox-card > .admin-management-card__actions .btn {
        width: 190px !important;
        max-width: 190px !important;
        min-height: 48px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 16px !important;
        padding: 24px 28px !important;
        box-sizing: border-box !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card > .admin-management-card__content,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card > .admin-management-card__content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        gap: 6px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card > .admin-management-card__actions,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card > .admin-management-card__actions {
        width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card > .admin-management-card__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card > .admin-management-card__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-appearance-card > .admin-management-card__actions .btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) .admin-management-grid > .admin-sequences-card > .admin-management-card__actions .btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /admin/administration iPad horizontal - usuarios y clientes con UI de cards. */
    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .users-list-modal,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .clients-list-modal {
        width: min(94vw, 1040px) !important;
        max-width: min(94vw, 1040px) !important;
        max-height: 88vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 24px 70px rgba(47, 36, 64, 0.22) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .modal-header,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 22px 24px 18px !important;
        border-bottom: 1px solid rgba(180, 207, 221, 0.58) !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .modal-header h3,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-header h3 {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .modal-close-btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-close-btn {
        position: static !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(47, 36, 64, 0.06) !important;
        color: #17112A !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .modal-body,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .modal-body {
        min-height: 0 !important;
        max-height: calc(88vh - 84px) !important;
        margin: 0 !important;
        padding: 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 251, 0.94)) !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .table-wrapper,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .clients-table-wrapper {
        display: none !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block .form-grid,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block .form-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-search-block input {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid rgba(80, 172, 198, 0.58) !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .users-mobile-list,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .clients-mobile-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-card,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-card {
        min-width: 0 !important;
        padding: 16px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96)) !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-card-header,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-card-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-avatar,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
        background: rgba(111, 97, 225, 0.10) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-title,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
        text-align: left !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-fields,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-field,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-field {
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.58) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.98) !important;
        display: grid !important;
        align-content: center !important;
        gap: 5px !important;
        text-align: left !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-field--full,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-actions,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-edit-btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-deactivate-btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-edit-btn,
    :is(html.tablet-app-mode, body.tablet-app-mode) #clients-modal.registered-clients-modal .client-mobile-delete-btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
}

@media (max-width: 1199px) {
    /* /admin/administration mobile + iPad - UI operativa de cards de usuarios. */
    body:has(.admin-management-grid) #users-modal.administration-users-modal .table-wrapper {
        display: none !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .users-mobile-list {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        border: 1px solid rgba(80, 172, 198, 0.38) !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96)) !important;
        box-shadow: 0 10px 22px rgba(47, 36, 64, 0.06) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-card-header {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
        background: rgba(111, 97, 225, 0.10) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-title {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
        text-align: left !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-title strong {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-title span {
        margin: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-status-pill {
        width: auto !important;
        max-width: max-content !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-fields {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-field {
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(180, 207, 221, 0.58) !important;
        border-radius: 14px !important;
        background: rgba(248, 250, 255, 0.98) !important;
        display: grid !important;
        align-content: center !important;
        gap: 5px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-field--full {
        grid-column: 1 / -1 !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-field span {
        margin: 0 !important;
        color: #736278 !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-field strong {
        margin: 0 !important;
        color: var(--primary) !important;
        font-size: 0.98rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-actions,
    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-actions form {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-edit-btn,
    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-deactivate-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    body:has(.admin-management-grid) #users-modal.administration-users-modal .user-mobile-principal {
        margin: -2px 0 0 !important;
        padding: 0 !important;
        color: #6F6A80 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    body:has(.admin-management-grid) #users-modal.administration-users-modal .users-mobile-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    /* /admin/administration iPad horizontal - pill ACTIVO del modal de usuarios. */
    :is(html.tablet-app-mode, body.tablet-app-mode) #users-modal.administration-users-modal .user-mobile-card-header .admin-user-status-pill--active {
        grid-column: auto !important;
        width: auto !important;
        max-width: max-content !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(24, 160, 88, 0.12) !important;
        border-radius: 999px !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(24, 160, 88, 0.16) !important;
        color: #087A3D !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1199px) {
    /* /admin/administration mobile + iPad - pills de lealtad del modal de clientes. */
    body:has(.admin-management-grid) #clients-modal.registered-clients-modal .client-mobile-card-header .admin-client-loyalty-pill {
        grid-column: auto !important;
        width: auto !important;
        max-width: max-content !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body:has(.admin-management-grid) #clients-modal.registered-clients-modal .admin-client-loyalty-pill--frequent {
        background: rgba(255, 168, 76, 0.18) !important;
        color: #9A5400 !important;
        border: 1px solid rgba(255, 168, 76, 0.18) !important;
    }

    body:has(.admin-management-grid) #clients-modal.registered-clients-modal .admin-client-loyalty-pill--no-orders {
        background: rgba(47, 36, 64, 0.08) !important;
        color: #5F5870 !important;
        border: 1px solid rgba(47, 36, 64, 0.08) !important;
    }

    body:has(.admin-management-grid) #clients-modal.registered-clients-modal .admin-client-loyalty-pill--inactive {
        background: rgba(111, 97, 225, 0.10) !important;
        color: #4A5899 !important;
        border: 1px solid rgba(111, 97, 225, 0.10) !important;
    }

    body:has(.admin-management-grid) #clients-modal.registered-clients-modal .admin-client-loyalty-pill--neutral {
        background: rgba(80, 172, 198, 0.14) !important;
        color: #2D7F91 !important;
        border: 1px solid rgba(80, 172, 198, 0.12) !important;
    }
}

@media (min-width: 1200px) {
    /* /dashboard desktop - UI final del modal de pendientes, copiado de /orders. */
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .modal-dialog {
        width: min(96vw, 1500px) !important;
        max-width: min(96vw, 1500px) !important;
        height: 94vh !important;
        max-height: 94vh !important;
        border-radius: 22px !important;
        background: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header {
        min-height: 64px !important;
        padding: 18px 22px !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.7) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-header h2 {
        color: #304A9A !important;
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
        background: #F4F5FB !important;
        color: #111827 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-modal-body {
        max-height: none !important;
        padding: 20px 22px 8px !important;
        background: #fff !important;
        gap: 14px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(300px, 1.55fr) repeat(4, minmax(145px, 0.9fr)) minmax(170px, 0.9fr) !important;
        align-items: end !important;
        gap: 14px 16px !important;
        margin: 0 0 12px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-from { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-to { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-actions { order: 5 !important; }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal label {
        margin: 0 0 7px !important;
        color: #6F6A7F !important;
        font-size: 0.76rem !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal input,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal select {
        min-height: 46px !important;
        border-radius: 14px !important;
        border-color: rgba(80, 172, 198, 0.55) !important;
        color: #2f2440 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-clear-btn {
        min-height: 46px !important;
        border-radius: 14px !important;
        background: #DB3CA2 !important;
        color: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell {
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell table {
        min-width: 1320px !important;
        table-layout: auto !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell th {
        padding: 14px 12px !important;
        background: #fff !important;
        color: #46589D !important;
        font-size: 0.84rem !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.9) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell td {
        padding: 16px 12px !important;
        background: #fff !important;
        color: #2f2440 !important;
        border-bottom: 1px solid rgba(210, 225, 235, 0.78) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-orders-table-shell tbody tr:hover td {
        background: #fff !important;
    }
}
/* Order evidence gallery: private images load only from short-lived R2 URLs. */
.order-photo-evidence-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.order-photo-evidence-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(74, 88, 153, 0.1);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.order-photo-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  gap: 12px;
}

.order-photo-evidence-thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(180, 207, 221, 0.78);
  border-radius: 14px;
  background: #f7f8ff;
  cursor: zoom-in;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.order-photo-evidence-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .order-photo-evidence-thumbnail:hover {
    border-color: rgba(74, 88, 153, 0.5);
    box-shadow: 0 8px 18px rgba(74, 88, 153, 0.14);
    transform: translateY(-2px);
  }
}

@media (max-width: 767px) {
  /* Flujo de foto mobile: estado único, centrado y visible. */
  .r2-capture-body .r2-capture-status {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(74, 88, 153, 0.18) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  .r2-capture-body .r2-capture-status-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
  }

  .r2-capture-body .r2-capture-status-text {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .r2-capture-body .photo-upload-status--ready,
  .r2-capture-body .r2-capture-status[data-state=""] {
    background: rgba(74, 88, 153, 0.08) !important;
    border-color: rgba(74, 88, 153, 0.18) !important;
    color: var(--primary) !important;
  }

  .r2-capture-body .photo-upload-status--ready .r2-capture-status-icon,
  .r2-capture-body .r2-capture-status[data-state=""] .r2-capture-status-icon {
    background: rgba(74, 88, 153, 0.12) !important;
    color: var(--primary) !important;
  }

  .r2-capture-body .photo-upload-status--error,
  .r2-capture-body .r2-capture-status[data-state="error"] {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.16) !important;
    color: #b91c1c !important;
  }

  .r2-capture-body .photo-upload-status--error .r2-capture-status-icon,
  .r2-capture-body .r2-capture-status[data-state="error"] .r2-capture-status-icon {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
  }

  .r2-capture-body .photo-upload-status--success,
  .r2-capture-body .r2-capture-status[data-state="success"] {
    background: rgba(24, 160, 88, 0.1) !important;
    border-color: rgba(24, 160, 88, 0.16) !important;
    color: #087a3d !important;
  }

  .r2-capture-body .photo-upload-status--success .r2-capture-status-icon,
  .r2-capture-body .r2-capture-status[data-state="success"] .r2-capture-status-icon {
    background: rgba(24, 160, 88, 0.14) !important;
    color: #087a3d !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  /* /summary iPad vertical: cards compactas para Otros Cierres. */
  body:has(.summary-closures-search-card) .otros-cierres-section,
  body:has(.summary-closures-search-card) .summary-closures-results-card,
  body:has(.summary-closures-search-card) #closures-modal {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) .summary-closures-search-card {
    padding: 16px !important;
  }

  body:has(.summary-closures-search-card) .summary-closures-search-card .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body:has(.summary-closures-search-card) .summary-closures-search-card .form-actions,
  body:has(.summary-closures-search-card) #closures-modal .form-actions {
    width: 100% !important;
    margin-top: 12px !important;
  }

  body:has(.summary-closures-search-card) .summary-closures-search-card .form-actions .btn,
  body:has(.summary-closures-search-card) #closures-modal .form-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  body:has(.summary-closures-search-card) .otros-cierres-section .table-wrapper.tablet-card-hide,
  body:has(.summary-closures-search-card) #closures-modal .table-wrapper.tablet-card-hide {
    display: none !important;
  }

  body:has(.summary-closures-search-card) .otros-cierres-section .closures-mobile-list.tablet-card-show-grid,
  body:has(.summary-closures-search-card) #closures-modal .closures-mobile-list.tablet-card-show-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    border-radius: 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-card-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-title i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background: rgba(111, 97, 225, 0.1) !important;
    color: var(--primary) !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-title span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-badge,
  body:has(.summary-closures-search-card) .summary-closure-card .closure-type-badge {
    justify-self: end !important;
    align-self: center !important;
    min-height: 28px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: rgba(24, 160, 88, 0.16) !important;
    border: 1px solid rgba(24, 160, 88, 0.12) !important;
    color: #087a3d !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-meta,
  body:has(.summary-closures-search-card) .summary-closure-card > .mobile-card-top,
  body:has(.summary-closures-search-card) .summary-closure-card > .mobile-card-meta {
    display: none !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-grid,
  body:has(.summary-closures-search-card) .summary-closure-money-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-item,
  body:has(.summary-closures-search-card) .summary-closure-money-item {
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(180, 207, 221, 0.58) !important;
    border-radius: 14px !important;
    background: rgba(248, 250, 255, 0.98) !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-item span,
  body:has(.summary-closures-search-card) .summary-closure-money-item span {
    color: #736278 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-item strong,
  body:has(.summary-closures-search-card) .summary-closure-money-item strong {
    min-width: 0 !important;
    color: var(--primary) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-money-result {
    grid-column: 1 / -1 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-detail-btn {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal {
    padding: 16px !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-dialog {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: start !important;
    gap: 10px !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-header h3 {
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-close-btn {
    width: 44px !important;
    height: 44px !important;
    position: static !important;
  }

body:has(.summary-closures-search-card) #closures-modal .modal-body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 767px) {
  /* Search payment menus: compact panel above all payment cards. */
  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-dropdown {
    position: fixed !important;
    left: auto;
    right: auto;
    width: 220px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    transform: none !important;
    padding: 6px !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-dropdown .order-actions-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu {
    z-index: 10001 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch {
    isolation: isolate !important;
    z-index: 1 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch:has(.payment-correction-menu.is-open) {
    z-index: 50 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu.is-open {
    z-index: 51 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 52 !important;
  }
}

/* Search payment cards: contextual actions stay in the upper-right corner. */
.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch {
  position: relative !important;
  padding-right: 64px !important;
  box-sizing: border-box !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-method-edit-inline {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu > [data-order-actions-toggle] {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 1199px) {
  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch {
    padding-right: 66px !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu > [data-order-actions-toggle] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}
/* Order detail payments: contextual actions stay in the card header. */
#order-detail-modal-orders .order-detail-payment-row {
  position: relative !important;
}

#order-detail-modal-orders .order-detail-payment-row .payment-correction-menu {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 2 !important;
}

#order-detail-modal-orders .order-detail-payment-main {
  min-width: 0 !important;
  padding-right: 52px !important;
}

#order-detail-modal-orders .order-detail-payment-side {
  padding-right: 52px !important;
}

#order-detail-modal-orders .payment-correction-menu > [data-order-actions-toggle] {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 767px) {
  #order-detail-modal-orders .order-detail-payment-main {
    padding-right: 52px !important;
  }

  #order-detail-modal-orders .order-detail-payment-side {
    padding-right: 0 !important;
  }

  #order-detail-modal-orders .payment-correction-menu > [data-order-actions-toggle] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Search order header: keep correction as a compact icon action. */
[data-search-order-card] .legacy-order-card-header .order-correction-menu {
  flex: 0 0 auto;
  margin-left: 0;
}

[data-search-order-card] .search-order-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

[data-search-order-card] .search-order-header-actions > .order-actions-menu {
  flex: 0 0 auto;
  margin: 0;
}

[data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy,
[data-search-order-card] .search-order-header--administrative-closure .search-order-header-actions {
  display: contents;
}

[data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-subtitle {
  flex: 0 0 100%;
  order: 1;
}

[data-search-order-card] .search-order-header--administrative-closure {
  row-gap: 0;
}

[data-search-order-card] .search-order-header--administrative-closure > .search-order-header-actions {
  gap: 12px;
}

[data-search-order-card] .search-order-options-trigger {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
}

[data-search-order-card] .legacy-order-card-header .order-detail-correction-trigger {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1;
}

[data-search-order-card] .legacy-order-card-header .order-detail-correction-trigger span {
  display: none;
}

[data-search-order-card] .legacy-order-card-header > .administrative-reopen-trigger {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 40px;
}

@media (max-width: 1199px) {
  [data-search-order-card] .legacy-order-card-header .order-detail-correction-trigger,
  [data-search-order-card] .legacy-order-card-header > .administrative-reopen-trigger,
  [data-search-order-card] .search-order-options-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}

/* Order services: secondary removal action beside the subtotal. */
.order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.order-service-remove-trigger {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(169, 68, 86, 0.52) !important;
  border-radius: 11px !important;
  background: rgba(255, 241, 244, 0.94) !important;
  color: var(--danger, #a94456) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
}

.order-service-edit-trigger {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(75, 91, 174, 0.34) !important;
  border-radius: 11px !important;
  background: rgba(239, 242, 255, 0.96) !important;
  color: #4256ad !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.order-service-edit-trigger:hover,
.order-service-edit-trigger:focus-visible {
  border-color: rgba(75, 91, 174, 0.58) !important;
  background: rgba(226, 231, 255, 0.98) !important;
}

.order-service-correction-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-service-remove-trigger i {
  color: #963b4d !important;
  opacity: 1 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.order-service-remove-trigger:hover,
.order-service-remove-trigger:focus-visible {
  border-color: rgba(169, 68, 86, 0.72) !important;
  background: rgba(255, 226, 231, 0.98) !important;
  color: var(--danger, #963b4d) !important;
}

.order-service-remove-trigger span {
  display: none !important;
}

[data-search-order-card] .order-service-remove-trigger {
  vertical-align: middle;
}

.order-services-detail-mobile-subtotal-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 1199px) {
  .order-service-remove-trigger,
  .order-service-edit-trigger {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 767px) {
  /* Mobile service cards: keep the removal action in the card header. */
  #order-services-detail-modal-search .order-services-detail-mobile-head {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-head-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-head-copy strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-head .order-service-remove-trigger {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-subtotal-actions {
    display: contents !important;
  }
}

/* Correcciones abiertas desde otro modal: conservar el modal padre debajo. */
.modal.modal-stacked-action {
  z-index: 1400 !important;
}

.modal.modal-stacked-action .modal-dialog,
.modal.modal-stacked-action .modal-content {
  z-index: 1401 !important;
}

/* PWA iOS/iPadOS: integra la status bar translucida con el fondo solido del tema. */
@media (display-mode: standalone) {
    html {
        background: var(--color-bg, #FBF1F7);
    }

    body {
        background: var(--color-bg, #FBF1F7);
    }
}

@media (max-width: 767px) {
  /* Override final del estado de captura de foto. */
  .r2-capture-body .r2-capture-status {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  .r2-capture-body .r2-capture-status-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 26px !important;
    font-size: 0.82rem !important;
  }

  .r2-capture-body .r2-capture-status-text {
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .r2-capture-body .r2-capture-status[data-state=""],
  .r2-capture-body .r2-capture-status[data-state="ready"] {
    background: rgba(74, 88, 153, 0.08) !important;
    border: 1px solid rgba(74, 88, 153, 0.18) !important;
    color: var(--primary) !important;
  }

  .r2-capture-body .r2-capture-status[data-state="error"] {
    background: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.16) !important;
    color: #b91c1c !important;
  }

  .r2-capture-body .r2-capture-status[data-state="success"] {
    background: rgba(24, 160, 88, 0.1) !important;
    border: 1px solid rgba(24, 160, 88, 0.16) !important;
    color: #087a3d !important;
  }

  .r2-capture-body .r2-capture-status[data-state=""] .r2-capture-status-icon,
  .r2-capture-body .r2-capture-status[data-state="ready"] .r2-capture-status-icon {
    background: rgba(74, 88, 153, 0.12) !important;
    color: var(--primary) !important;
  }

  .r2-capture-body .r2-capture-status[data-state="error"] .r2-capture-status-icon {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
  }

  .r2-capture-body .r2-capture-status[data-state="success"] .r2-capture-status-icon {
    background: rgba(24, 160, 88, 0.14) !important;
    color: #087a3d !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* /summary iPad horizontal: modal real de Todos los cierres encontrados. */
  body:has(.summary-closures-search-card) #closures-modal .modal-dialog {
    width: min(1040px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 88vh !important;
    margin: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 24px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-header h3 {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--primary) !important;
    font-size: 1.18rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-close-btn {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-body {
    min-width: 0 !important;
    max-height: calc(88vh - 80px) !important;
    padding: 22px 24px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .form-group {
    min-width: 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .form-actions {
    width: 100% !important;
    margin: 14px 0 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .form-actions .btn,
  body:has(.summary-closures-search-card) #closures-modal button[type="submit"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .table-wrapper.tablet-card-hide {
    display: none !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .closures-mobile-list.tablet-card-show-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 0 12px !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-card-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-title i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    background: rgba(111, 97, 225, 0.1) !important;
    color: var(--primary) !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-title span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-badge,
  body:has(.summary-closures-search-card) #closures-modal .closure-type-badge {
    justify-self: end !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(24, 160, 88, 0.16) !important;
    border: 1px solid rgba(24, 160, 88, 0.12) !important;
    color: #087a3d !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-card > .mobile-card-top,
  body:has(.summary-closures-search-card) #closures-modal .summary-closure-card > .mobile-card-meta {
    display: none !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-meta {
    margin: 0 !important;
    color: #6f6a80 !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-money-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-money-item {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(180, 207, 221, 0.58) !important;
    border-radius: 14px !important;
    background: rgba(248, 250, 255, 0.98) !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-money-item span {
    color: #736278 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-money-item strong {
    min-width: 0 !important;
    color: var(--primary) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-money-result {
    grid-column: 1 / -1 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .summary-closure-detail-btn {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .order-photo-evidence-grid {
    grid-template-columns: repeat(auto-fill, 160px);
  }
}

.order-photo-evidence-message {
  margin: 10px 0 0;
  color: #6d6276;
  font-size: 0.88rem;
  line-height: 1.35;
}

.order-photo-evidence-action {
  white-space: nowrap;
}

.order-photo-lightbox {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.order-photo-lightbox[hidden] {
  display: none;
}

.order-photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 28, 57, 0.82);
}

.order-photo-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: 92vh;
  display: grid;
  place-items: center;
}

.order-photo-lightbox-image {
  max-width: 100%;
  max-height: 82vh;
  display: block;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

.order-photo-lightbox-close,
.order-photo-lightbox-nav {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
}

.order-photo-lightbox-close {
  top: 12px;
  right: 12px;
}

.order-photo-lightbox-nav--previous {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.order-photo-lightbox-nav--next {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.order-photo-lightbox-counter {
  position: absolute;
  bottom: 12px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(25, 28, 57, 0.76);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

body.order-photo-lightbox-open {
  overflow: hidden;
}

.order-photo-evidence-grid {
  margin-top: 14px;
}

.order-photo-evidence-add {
  margin-top: 14px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(74, 88, 153, 0.34);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.order-photo-evidence-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 207, 221, 0.68);
  border-radius: 14px;
  background: rgba(247, 249, 255, 0.86);
}

.order-photo-evidence-empty[hidden],
.order-photo-evidence-grid[hidden],
.order-photo-evidence-count[hidden] {
  display: none;
}

.order-photo-evidence-empty-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(74, 88, 153, 0.1);
  color: var(--primary);
}

.order-photo-evidence-empty strong,
.order-photo-evidence-empty p {
  margin: 0;
}

.order-photo-evidence-empty strong {
  display: block;
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.order-photo-evidence-empty p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.order-photo-evidence-empty-copy {
  min-width: 0;
}

.order-photo-evidence-empty .order-photo-evidence-add {
  align-self: center;
  margin-top: 0;
  white-space: nowrap;
}

.order-photo-evidence-add:hover {
  border-color: rgba(74, 88, 153, 0.58);
  background: rgba(74, 88, 153, 0.06);
}

.order-photo-evidence-add:focus-visible {
  outline: 2px solid rgba(74, 88, 153, 0.42);
  outline-offset: 2px;
}

.order-detail-payments-empty {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 207, 221, 0.68);
  border-radius: 14px;
  background: rgba(247, 249, 255, 0.86);
}

.order-detail-payments-empty-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(74, 88, 153, 0.1);
  color: var(--primary);
}

.order-detail-payments-empty-copy {
  min-width: 0;
}

.order-detail-payments-empty-title,
.order-detail-payments-empty-text {
  margin: 0;
}

.order-detail-payments-empty-title {
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.order-detail-payments-empty-text {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.order-detail-section-card > .section-header:has(+ .order-detail-payments-empty) {
  margin-bottom: 14px !important;
}

/* Shared visual foundation for order-entry and order-detail QR capture modals. */
.order-photo-qr-modal {
  width: min(calc(100vw - 32px), 620px) !important;
  max-width: 620px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: visible !important;
  border-radius: 20px !important;
}

.order-photo-qr-modal-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 22px 24px 14px !important;
}

.order-photo-qr-modal-header > div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-right: 8px !important;
}

.order-photo-qr-modal-header h3 {
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.order-photo-qr-modal-header .modal-subtitle {
  margin: 8px 0 0 !important;
  line-height: 1.4 !important;
}

.order-photo-qr-modal .modal-close-btn {
  position: static !important;
  grid-column: 2 !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

.order-photo-qr-modal-body {
  display: grid !important;
  gap: 16px !important;
  padding: 0 24px 24px !important;
  overflow: visible !important;
}

.order-photo-qr-modal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.order-photo-qr-modal-actions .btn {
  width: 100% !important;
  min-height: 44px !important;
}

.order-photo-qr-modal-status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 20px !important;
  margin: 0 !important;
  color: rgba(74, 88, 153, 0.78) !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#order-photo-evidence-modal #order-photo-evidence-capture:not([hidden]) {
  display: grid !important;
  gap: 16px !important;
  margin-top: 0 !important;
}

#order-photo-evidence-modal #order-photo-evidence-capture .order-photo-evidence-actions {
  margin-top: 0 !important;
}

.order-photo-qr-modal-status::before {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid rgba(74, 88, 153, 0.22);
  border-top-color: var(--primary);
  border-radius: 50%;
  content: "";
  animation: order-photo-evidence-status-spin 0.85s linear infinite;
}

.order-photo-qr-modal-status[data-state="received"] {
  color: #2d7d5a !important;
}

.order-photo-qr-modal-status[data-state="received"]::before {
  border: 0;
  border-radius: 50%;
  background: #dff8e9;
  color: #168a50;
  content: "\2713";
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  animation: none;
}

.order-photo-qr-modal-status[data-state="error"] {
  color: #b54747 !important;
}

.order-photo-qr-modal-status[data-state="error"]::before {
  border: 0;
  background: #ffe4e4;
  color: #b54747;
  content: "!";
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  animation: none;
}

@keyframes order-photo-evidence-status-spin {
  to { transform: rotate(360deg); }
}

.order-photo-qr-modal-qr {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 18px;
  box-sizing: border-box;
  text-align: center;
}

.order-photo-qr-modal-qr img {
  width: min(100%, 240px) !important;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border: 1px solid rgba(74, 88, 153, 0.22);
  border-radius: 16px;
  background: #ffffff;
  box-sizing: border-box;
  object-fit: contain;
}

.order-photo-qr-modal-qr p {
  max-width: 32ch;
  margin: 0;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.order-photo-qr-modal-gallery {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  box-sizing: border-box;
}

.order-photo-qr-modal-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
}

@media (min-width: 1200px) {
  #order-photo-evidence-modal .order-photo-evidence-modal-card {
    width: min(620px, calc(100vw - 48px)) !important;
  }

  #order-photo-evidence-modal .order-photo-qr-modal-header > div {
    min-width: 0 !important;
  }

  #order-photo-evidence-modal .order-photo-evidence-body {
    padding: 0 24px 18px !important;
  }

  #order-photo-evidence-modal #order-photo-evidence-question:not([hidden]) {
    margin-top: 6px !important;
  }

  #order-photo-evidence-modal #order-photo-evidence-question .order-photo-evidence-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #order-photo-evidence-modal #order-photo-evidence-question .order-photo-evidence-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
  }
}

.order-photo-direct-capture-panel,
.order-photo-qr-device-alternative > p {
  display: none;
}

.order-photo-direct-capture-title {
  margin: 0;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.order-photo-qr-alternative {
  margin: 0;
}

.order-photo-qr-alternative summary {
  display: none;
}

.order-photo-qr-other-device-title,
.order-photo-qr-hide {
  display: none;
}

.order-photo-qr-device-alternative {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.order-photo-other-device-trigger,
.order-photo-device-back,
.order-photo-qr-other-device-copy {
  display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .order-photo-qr-modal[data-order-photo-capture-mode="device"] .order-photo-direct-capture-panel {
    display: grid;
    gap: 12px;
  }

  .order-photo-qr-modal .order-photo-qr-alternative summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(74, 88, 153, 0.28);
    border-radius: 14px;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    list-style: none;
  }

  .order-photo-qr-modal .order-photo-qr-alternative summary::-webkit-details-marker {
    display: none;
  }

  .order-photo-qr-modal .order-photo-qr-other-device-title {
    display: block;
    margin: 16px 0 0;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  .order-photo-qr-modal .order-photo-qr-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0 auto;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
  }
}

@media (max-width: 1199px) {
  .order-photo-qr-modal[data-order-photo-capture-mode="device"] .order-photo-direct-capture-panel {
    display: grid;
    gap: 12px;
  }

  .order-photo-qr-modal[data-order-photo-capture-mode="device"] .order-photo-other-device-trigger {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    padding: 0 14px;
    border: 1px solid rgba(74, 88, 153, 0.28);
    border-radius: 14px;
    background: #ffffff;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .order-photo-qr-modal[data-order-photo-capture-mode="device"] .order-photo-qr-device-alternative {
    display: none;
  }

  .order-photo-qr-modal[data-order-photo-capture-mode="other"] .order-photo-direct-capture-panel,
  .order-photo-qr-modal[data-order-photo-capture-mode="other"] .order-photo-other-device-trigger {
    display: none;
  }

  .order-photo-qr-modal[data-order-photo-capture-mode="other"] .order-photo-qr-device-alternative {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .order-photo-qr-modal .order-photo-device-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    justify-self: start;
  }

  .order-photo-qr-modal .order-photo-qr-other-device-title,
  .order-photo-qr-modal .order-photo-qr-other-device-copy {
    display: block;
    max-width: 32ch;
    margin: 0;
    text-align: center;
  }

  .order-photo-qr-modal .order-photo-qr-other-device-title {
    color: var(--primary);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .order-photo-qr-modal .order-photo-qr-other-device-copy {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.4;
  }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  .order-photo-evidence-empty {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .order-photo-evidence-empty-copy {
    max-width: 34ch;
  }

  .order-photo-evidence .order-photo-evidence-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
  }

  .order-photo-evidence .order-photo-evidence-count {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
}

@media (max-width: 767px) {
  :is(#order-photo-evidence-modal, #order-photo-capture-modal) {
    padding: 12px 16px !important;
  }

  .order-photo-qr-modal {
    width: calc(100vw - 32px) !important;
    max-width: 390px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .order-photo-qr-modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: start !important;
    gap: 8px !important;
    padding: 18px 18px 12px !important;
  }

  .order-photo-qr-modal-header > div {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  .order-photo-qr-modal-header h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
  }

  .order-photo-qr-modal .modal-close-btn {
    position: static !important;
    grid-column: 2 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .order-photo-qr-modal-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 18px 18px !important;
    box-sizing: border-box !important;
  }

  .order-photo-qr-modal-body > *,
  .order-photo-qr-modal-qr,
  .order-photo-qr-modal-gallery,
  .order-photo-qr-modal-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .order-photo-qr-modal-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .order-photo-qr-modal-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    white-space: normal !important;
  }

  .order-photo-qr-modal-qr {
    width: 100% !important;
    gap: 14px !important;
  }

  .order-photo-qr-modal-qr img {
    width: min(58vw, 220px) !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
  }

  .order-photo-qr-modal-qr p,
  .order-photo-qr-modal-status {
    width: 100% !important;
    max-width: 32ch !important;
    margin: 0 auto !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }

  .order-photo-qr-modal[data-order-photo-capture-mode="device"] .order-photo-direct-capture-panel {
    display: grid;
    gap: 12px;
  }

  .order-photo-qr-modal .order-photo-qr-alternative summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(74, 88, 153, 0.28);
    border-radius: 14px;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    list-style: none;
  }

  .order-photo-qr-modal .order-photo-qr-alternative summary::-webkit-details-marker {
    display: none;
  }

  .order-photo-qr-modal .order-photo-qr-other-device-title {
    display: block;
    margin: 14px 0 0;
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  .order-photo-qr-modal .order-photo-qr-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0 auto;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .order-photo-evidence-header {
    align-items: flex-start;
  }

  .order-photo-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .order-photo-evidence-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .order-photo-evidence-empty .order-photo-evidence-add {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0;
  }

  .order-photo-qr-modal-actions {
    grid-template-columns: 1fr;
  }

  .order-photo-lightbox {
    padding: 14px;
  }

  .order-photo-lightbox-image {
    max-height: 76vh;
  }

  .order-photo-lightbox-nav--previous {
    left: 4px;
  }

  .order-photo-lightbox-nav--next {
    right: 4px;
  }
}

/* Campos auxiliares de Otros Cierres: solo se muestran en el layout tablet. */
.summary-closure-info-grid {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  /* /summary iPad vertical: cierre premium, sin tabla ni datos duplicados. */
  body:has(.summary-closures-search-card) .otros-cierres-section .table-wrapper.tablet-card-hide,
  body:has(.summary-closures-search-card) #closures-modal .table-wrapper.tablet-card-hide {
    display: none !important;
  }

  body:has(.summary-closures-search-card) .otros-cierres-section .closures-mobile-list.tablet-card-show-grid,
  body:has(.summary-closures-search-card) #closures-modal .closures-mobile-list.tablet-card-show-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    border-radius: 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-card-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-title i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background: rgba(111, 97, 225, 0.1) !important;
    color: var(--primary) !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-title span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-badge,
  body:has(.summary-closures-search-card) .summary-closure-card .closure-type-badge {
    justify-self: end !important;
    align-self: center !important;
    min-height: 28px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: rgba(24, 160, 88, 0.16) !important;
    border: 1px solid rgba(24, 160, 88, 0.12) !important;
    color: #087a3d !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-meta,
  body:has(.summary-closures-search-card) .summary-closure-card > .mobile-card-top,
  body:has(.summary-closures-search-card) .summary-closure-card > .mobile-card-meta {
    display: none !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-grid,
  body:has(.summary-closures-search-card) .summary-closure-money-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-item,
  body:has(.summary-closures-search-card) .summary-closure-money-item {
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(180, 207, 221, 0.58) !important;
    border-radius: 14px !important;
    background: rgba(248, 250, 255, 0.98) !important;
    box-sizing: border-box !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-item span,
  body:has(.summary-closures-search-card) .summary-closure-money-item span {
    color: #736278 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-info-item strong,
  body:has(.summary-closures-search-card) .summary-closure-money-item strong {
    min-width: 0 !important;
    color: var(--primary) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-money-result {
    grid-column: 1 / -1 !important;
  }

  body:has(.summary-closures-search-card) .summary-closure-detail-btn {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
  }

  body:has(.summary-closures-search-card) #closures-modal {
    padding: 16px !important;
    overflow-x: hidden !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-dialog {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: start !important;
    gap: 10px !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-header h3 {
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-close-btn {
    width: 44px !important;
    height: 44px !important;
    position: static !important;
  }

  body:has(.summary-closures-search-card) #closures-modal .modal-body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 767px) {
  /* Detalle de orden: las acciones inferiores ocupan todo el ancho útil. */
  #order-detail-modal-orders .modal-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 16px !important;
  }

  #order-detail-modal-orders .order-detail-modal-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 100px !important;
    box-sizing: border-box !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    z-index: 5 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu {
    position: static !important;
    width: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-header-void-btn,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-whatsapp-link,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-search-link {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools .order-correction-menu > [data-order-actions-toggle] span {
    display: none !important;
  }

  /* Shared compact width for order and payment correction menus. */
  .order-correction-menu .order-actions-dropdown,
  .payment-correction-dropdown {
    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
  }

  .order-correction-menu .order-actions-dropdown .order-actions-item,
  .payment-correction-dropdown .order-actions-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Mobile order detail: place the ready action after payment status. */
  #order-detail-modal-orders [data-order-ready-action] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    justify-self: stretch !important;
  }

  #order-detail-modal-orders .search-info-grid--order [data-summary-detail-field="order-status"],
  #order-detail-modal-orders .search-info-grid--order [data-summary-detail-field="payment-status"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
  }

  #order-detail-modal-orders .search-info-grid--order [data-summary-detail-field="order-status"] > strong,
  #order-detail-modal-orders .search-info-grid--order [data-summary-detail-field="payment-status"] > strong {
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* iPad horizontal: the open payment menu must sit above the bottom nav. */
  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch:has(.payment-correction-menu.is-open) {
    z-index: 1100 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu.is-open {
    position: relative !important;
    z-index: 1101 !important;
  }

  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 1102 !important;
  }
}

@media (min-width: 900px) {
  /* Order detail: keep correction beside close on tablet landscape and desktop. */
  #order-detail-modal-orders .modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "heading tools"
      "actions actions" !important;
    align-items: start !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    gap: 12px 16px !important;
  }

  #order-detail-modal-orders .order-detail-modal-heading {
    grid-area: heading !important;
    min-width: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools {
    grid-area: tools !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu {
    position: static !important;
    width: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    position: static !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools .order-correction-menu > [data-order-actions-toggle] span {
    display: none !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-header-void-btn,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-whatsapp-link,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-search-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* Detail payment cards: only the open card rises above its siblings. */
  #order-detail-modal-orders .order-detail-payment-row {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row:has(.payment-correction-menu.is-open) {
    z-index: 20 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu {
    position: absolute !important;
    z-index: 2 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open {
    z-index: 30 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 31 !important;
  }
}

@media (min-width: 900px) {
  /* Keep Edit and Close in the first header row without creating a third row. */
  #order-detail-modal-orders .modal-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "heading"
      "actions" !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding-right: 20px !important;
  }

  #order-detail-modal-orders .order-detail-modal-heading {
    grid-area: heading !important;
    min-width: 0 !important;
    padding-right: 104px !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools {
    position: absolute !important;
    top: 12px !important;
    right: 20px !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    z-index: 5 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions {
    grid-area: actions !important;
  }
}

@media (min-width: 900px) {
  /* Service totals and removal action stay on one aligned desktop row. */
  #order-detail-modal-orders .order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: max-content !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) .order-detail-service-amount {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    align-self: center !important;
  }
}

@media (min-width: 900px) {
  /* Correction modals: use content height instead of the global modal height. */
  .order-correction-modal .modal-dialog,
  .order-correction-modal .modal-content,
  #payment-method-edit-modal-orders .modal-dialog,
  #payment-method-edit-modal-orders .modal-content,
  #payment-method-edit-modal-search .modal-dialog,
  #payment-method-edit-modal-search .modal-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
  }

  .order-correction-modal .modal-body,
  #payment-method-edit-modal-orders .modal-body,
  #payment-method-edit-modal-search .modal-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 22px !important;
  }
}

/* iPad vertical final overrides for order detail services and payments. */
@media (min-width: 576px) and (max-width: 899px) and (orientation: portrait) {
  #order-detail-modal-orders .modal-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "heading" "actions" !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding-right: 20px !important;
  }

  #order-detail-modal-orders .order-detail-modal-heading {
    grid-area: heading !important;
    min-width: 0 !important;
    padding-right: 104px !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools {
    position: absolute !important;
    top: 12px !important;
    right: 20px !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    z-index: 5 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu,
  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    position: static !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools .order-correction-menu > [data-order-actions-toggle] span {
    display: none !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-header-void-btn,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-whatsapp-link,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-search-link {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-audit-menu {
    width: 100% !important;
    min-width: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-audit-menu > [data-order-detail-audit-trigger] {
    width: 100% !important;
    min-width: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions:has(> [data-order-detail-header-void]:not([hidden])):has(> [data-order-detail-audit]:not([hidden])) > .order-detail-search-link {
    grid-column: 1 / -1 !important;
  }

  #order-detail-modal-orders .order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: max-content !important;
    height: auto !important;
  }

  #order-detail-modal-orders .order-detail-service-side:has(.order-service-remove-trigger, .order-service-edit-trigger) .order-detail-service-amount {
    margin: 0 !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  #order-detail-modal-orders .order-detail-payment-row {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row:has(.payment-correction-menu.is-open) {
    z-index: 20 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu {
    position: absolute !important;
    z-index: 2 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open {
    z-index: 30 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 31 !important;
  }
}

/* Search payment actions: raise only the open result above cards and bottom nav. */
.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu.is-open) {
  position: relative !important;
  z-index: 1200 !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch {
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch:has(.payment-correction-menu.is-open) {
  z-index: 1201 !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu {
  position: relative !important;
  z-index: 1202 !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu.is-open {
  z-index: 1203 !important;
}

.search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) .payment-correction-menu.is-open .payment-correction-dropdown {
  z-index: 1204 !important;
}

/* Service detail cards: keep the removal action in the header on tablet/desktop. */
@media (min-width: 768px) {
  #order-services-detail-modal-search .order-services-detail-mobile-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-width: 0 !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-head-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-head-copy strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #order-services-detail-modal-search .order-services-detail-mobile-head .order-service-remove-trigger {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* Desktop order detail: keep all header actions in one right-aligned row. */
@media (min-width: 1200px) {
  #order-detail-modal-orders .modal-header {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-heading {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-header-void-btn,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-whatsapp-link,
  #order-detail-modal-orders .order-detail-modal-header-actions > .order-detail-search-link {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    white-space: nowrap !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools {
    order: 3 !important;
    position: static !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    z-index: 5 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu,
  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  #order-detail-modal-orders .order-detail-modal-header-tools > .order-correction-menu > [data-order-actions-toggle],
  #order-detail-modal-orders .order-detail-modal-header-tools > .modal-close-btn {
    position: static !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* WhatsApp quick modal: natural height on iPad landscape and desktop. */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape),
       (min-width: 1200px) {
  [data-whatsapp-quick-modal] .whatsapp-quick-modal-shell,
  [data-whatsapp-quick-modal] .modal-dialog,
  [data-whatsapp-quick-modal] .modal-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
  }

  [data-whatsapp-quick-modal] .whatsapp-quick-modal-body,
  [data-whatsapp-quick-modal] .modal-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 18px !important;
  }
}

/* Search order card: split the ready/WhatsApp actions across the full width on desktop. */
@media (min-width: 1200px) {
  [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  [data-search-order-card] .order-detail-actions[data-search-order-ready-actions] > .btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Search order card: split both desktop primary-action variants evenly. */
@media (min-width: 1200px) {
  [data-search-order-card] .order-primary-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  [data-search-order-card] .order-primary-actions > .btn,
  [data-search-order-card] .order-primary-actions > form,
  [data-search-order-card] .order-primary-actions > form > .btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Desktop order detail: only the open payment card rises above its siblings. */
@media (min-width: 1200px) {
  #order-detail-modal-orders .order-detail-payment-row {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row:has(.payment-correction-menu.is-open) {
    z-index: 20 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row.is-payment-menu-open {
    z-index: 20 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu {
    position: absolute !important;
    z-index: 2 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open {
    z-index: 30 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 31 !important;
  }
}

/* Mobile: open modals must cover and disable the bottom navigation. */
@media (max-width: 767px) {
  body.modal-open .mobile-bottom-nav,
  body:has(.modal.is-open) .mobile-bottom-nav {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Search payments: allow the fixed actions menu to escape card clipping. */
@media (max-width: 767px) {
  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu),
  .search-page-section > section.card.content-card.full-width:has(.payment-correction-menu) > .responsive-grid.three-cols > article.card.content-card.stretch {
    overflow: visible !important;
  }
}

/* Order detail mobile: keep the open payment menu above sibling cards. */
@media (max-width: 767px) {
  #order-detail-modal-orders .order-detail-payment-row {
    position: relative !important;
    z-index: 1 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row.is-payment-menu-open {
    z-index: 20 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 2 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open {
    z-index: 30 !important;
  }

  #order-detail-modal-orders .order-detail-payment-row .payment-correction-menu.is-open .payment-correction-dropdown {
    z-index: 31 !important;
  }
}

@media (min-width: 1200px) {
  /* /summary desktop: igualar el shell y alinear su cabecera con /orders. */
  #summaryOrderDetailModal .modal-dialog,
  #summaryOrderDetailModal .modal-content {
    width: min(1400px, 96vw) !important;
    max-width: min(1400px, 96vw) !important;
  }

  #summaryOrderDetailModal .summary-order-detail-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 22px 24px !important;
    min-width: 0 !important;
  }

  #summaryOrderDetailModal .summary-order-detail-header-spacer {
    display: none !important;
  }

  #summaryOrderDetailModal .summary-order-detail-title-group {
    grid-column: 1 !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  #summaryOrderDetailModal .summary-order-detail-header .modal-close-btn {
    grid-column: 2 !important;
    position: static !important;
    align-self: start !important;
    margin: 0 !important;
  }
}

/* Summary desktop: keep code and status pills inside their table columns. */
@media (min-width: 1200px) {
  .summary-page .summary-orders-block .summary-orders-table th:nth-child(1),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) {
    width: 18% !important;
  }

  .summary-page .summary-orders-block .summary-orders-table th:nth-child(2),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(2) {
    width: 18% !important;
  }

  .summary-page .summary-orders-block .summary-orders-table th:nth-child(3),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(3) {
    width: 14% !important;
  }

  .summary-page .summary-orders-block .summary-orders-table th:nth-child(4),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(4),
  .summary-page .summary-orders-block .summary-orders-table th:nth-child(5),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(5),
  .summary-page .summary-orders-block .summary-orders-table th:nth-child(6),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(6) {
    width: 10% !important;
  }

  .summary-page .summary-orders-block .summary-orders-table th:nth-child(7),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) {
    width: 20% !important;
  }

  .summary-page .summary-orders-block .summary-orders-table td:nth-child(1),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(7),
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) > .summary-code-pill,
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) > .pill-chip {
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  .summary-page .summary-orders-block .summary-orders-table td:nth-child(1) > .summary-code-pill,
  .summary-page .summary-orders-block .summary-orders-table td:nth-child(7) > .pill-chip {
    width: max-content !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }
}

@media (min-width: 1200px) {
  /* Desktop: use the real detail trigger instead of the decorative glyph. */
  .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable td:nth-child(4)::after {
    content: none !important;
    display: none !important;
  }

  .summary-page .summary-orders-block .summary-orders-table .summary-desktop-detail-action {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(74, 88, 153, 0.16) !important;
    border-radius: 11px !important;
    background: rgba(242, 240, 255, 0.9) !important;
    color: var(--primary) !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 5 !important;
    transition: opacity 0.15s ease, visibility 0.15s ease, background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
  }

  .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable:hover .summary-desktop-detail-action,
  .summary-page .summary-orders-block .summary-orders-table tbody tr.summary-order-row-clickable:focus-within .summary-desktop-detail-action {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .summary-page .summary-orders-block .summary-orders-table .summary-desktop-detail-action:hover {
    background: rgba(226, 224, 252, 0.98) !important;
    border-color: rgba(74, 88, 153, 0.28) !important;
    transform: translate(-50%, -50%) translateY(-1px) !important;
  }

  .summary-page .summary-orders-block .summary-orders-table .summary-desktop-detail-action:active {
    transform: translate(-50%, -50%) scale(0.97) !important;
  }

  .summary-page .summary-orders-block .summary-orders-table .summary-desktop-detail-action:focus-visible {
    outline: 3px solid rgba(74, 88, 153, 0.24) !important;
    outline-offset: 2px !important;
  }

  .summary-page .summary-orders-block .summary-orders-table .summary-desktop-detail-action svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

.summary-orders-block--delivered .summary-delivered-shortfall {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.1;
  font-weight: 600;
  white-space: nowrap;
}

.summary-orders-block--delivered .mobile-summary-order-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Summary cards keep the previous two-row limit outside desktop. */
.summary-order-row-extra,
.mobile-summary-order-card-extra {
  display: none !important;
}

@media (min-width: 1200px) {
  .summary-page .summary-orders-table tbody tr.summary-order-row-extra {
    display: table-row !important;
  }
}

@media (min-width: 1200px) {
  .summary-page .summary-orders-block--delivered .summary-orders-table th:nth-child(1),
  .summary-page .summary-orders-block--delivered .summary-orders-table td:nth-child(1) {
    width: 16% !important;
  }

  .summary-page .summary-orders-block--delivered .summary-orders-table th:nth-child(2),
  .summary-page .summary-orders-block--delivered .summary-orders-table td:nth-child(2) {
    width: 21% !important;
  }

  .summary-page .summary-orders-block--delivered .summary-orders-table th:nth-child(3),
  .summary-page .summary-orders-block--delivered .summary-orders-table td:nth-child(3) {
    width: 16% !important;
  }

  .summary-page .summary-orders-block--delivered .summary-orders-table th:nth-child(4),
  .summary-page .summary-orders-block--delivered .summary-orders-table td:nth-child(4),
  .summary-page .summary-orders-block--delivered .summary-orders-table th:nth-child(5),
  .summary-page .summary-orders-block--delivered .summary-orders-table td:nth-child(5) {
    width: 15% !important;
  }

  .summary-page .summary-orders-block--delivered .summary-orders-table th:nth-child(6),
  .summary-page .summary-orders-block--delivered .summary-orders-table td:nth-child(6) {
    width: 18% !important;
  }
}

@media (max-width: 767px) {
  html body .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list.tablet-card-show-grid[hidden] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  html body .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-card.summary-expense-row {
    display: grid !important;
  }
}

@media (min-width: 1200px) {
  .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list.tablet-card-show-grid {
    display: none !important;
  }
}

/* Responsive expense rows keep description metadata separate from payment. */
@media (max-width: 1199px) {
  .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row {
    grid-template-columns: 36px minmax(0, 1fr) max-content !important;
  }

  .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-copy-wrap {
    grid-column: 1 / 3 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-payment {
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .summary-page.summary-page-redesigned .summary-expenses-day-card .summary-expense-row-payment .summary-expense-row-amount {
    grid-column: auto !important;
    justify-self: auto !important;
    align-self: center !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .summary-page.summary-page-redesigned .summary-expenses-day-card {
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expenses-list {
    flex: 0 1 auto !important;
    max-height: 310px !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .summary-page.summary-page-redesigned .summary-expenses-day-card .mobile-expense-total-card.summary-expense-total-card {
    margin-top: 8px !important;
  }
}

/* Order create page layout */
.order-entry-sections {
  display: grid;
  gap: 18px;
  width: 100%;
}

.order-entry-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: stretch;
}

.order-entry-subcard {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(74, 88, 153, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.order-entry-subcard-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.order-entry-subcard-header .section-title,
.order-entry-subcard-header .section-subtitle {
  margin: 0;
}

.order-entry-subcard-header .section-subtitle {
  margin-top: 3px;
}

.order-entry-subcard-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #eef0ff;
  color: #4a5899;
}

.order-entry-order-data .order-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.order-entry-order-data .order-form-grid .form-group {
  display: grid;
  grid-template-columns: minmax(124px, 0.62fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.order-entry-order-data .order-form-grid .form-group > label,
.order-entry-order-data .order-form-grid .form-group > .receipt-code-label-row {
  margin: 0;
}

.order-entry-order-data .order-form-grid .form-group > input,
.order-entry-order-data .order-form-grid .form-group > select,
.order-entry-order-data .order-form-grid .order-payment-inline-controls {
  min-width: 0;
  width: 100%;
}

@media (min-width: 900px) {
  .order-entry-order-data .order-form-grid .form-group:nth-child(1) { order: 2; }
  .order-entry-order-data .order-form-grid .form-group:nth-child(2) { order: 1; }

  .order-entry-financial .order-amounts-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
}

.order-entry-order-data .order-payment-method-group .order-payment-inline-controls {
  display: block;
}

.order-operational-load-preview-actions {
  flex-direction: column;
  align-items: flex-start;
  color: #716a7d;
  font-size: 0.74rem;
}

.order-operational-load-preview-actions p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.order-operational-load-preview-actions i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #7180bb;
}

.order-entry-financial .order-amounts-row {
  margin-top: 0;
}

.order-entry-financial .order-submit-actions {
  justify-content: flex-end;
  margin: 14px 0 0;
}

@media (max-width: 899px) {
  .order-entry-details-grid {
    grid-template-columns: 1fr;
  }

  .order-entry-order-data .order-form-grid .form-group {
    grid-template-columns: minmax(135px, 0.45fr) minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .order-entry-financial .order-amounts-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .order-entry-sections {
    gap: 12px;
  }

  .order-entry-subcard {
    padding: 14px;
    border-radius: 14px;
  }

  .order-entry-subcard-header {
    margin-bottom: 14px;
  }

  .order-entry-order-data .order-form-grid .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .order-entry-financial .order-submit-actions,
  .order-entry-financial .order-submit-actions .btn {
    width: 100%;
  }

  .order-entry-financial .order-amounts-row {
    grid-template-columns: 1fr;
  }

  .order-operational-load-preview-suggestion {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .order-operational-load-preview-suggestion .btn {
    grid-column: 1 / -1;
  }
}

/* /dashboard mobile - auditoria: icono y label a la izquierda, valor a la derecha. */
@media (max-width: 767px) {
  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item .dashboard-audit-metric-icon {
    order: 0;
    flex: 0 0 auto;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item .info-chip-label {
    order: 1;
    min-width: 0 !important;
    margin: 0 auto 0 8px !important;
    text-align: left !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .general-summary-item > strong {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 12px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-missing {
    background: rgba(255, 239, 205, 0.35) !important;
    border-color: rgba(189, 123, 30, 0.18) !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-debt {
    background: rgba(255, 231, 237, 0.35) !important;
    border-color: rgba(191, 82, 112, 0.18) !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-edited {
    background: rgba(234, 237, 255, 0.38) !important;
    border-color: rgba(89, 109, 184, 0.18) !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-cancelled {
    background: rgba(255, 232, 236, 0.35) !important;
    border-color: rgba(194, 78, 98, 0.18) !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-missing .dashboard-audit-metric-icon {
    background: rgba(255, 239, 205, 0.9) !important;
    color: #bd7b1e !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-debt .dashboard-audit-metric-icon {
    background: rgba(255, 231, 237, 0.9) !important;
    color: #bf5270 !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-edited .dashboard-audit-metric-icon {
    background: rgba(234, 237, 255, 0.92) !important;
    color: #596db8 !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-cancelled .dashboard-audit-metric-icon {
    background: rgba(255, 232, 236, 0.9) !important;
    color: #c24e62 !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-missing > strong {
    color: #bd7b1e !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-debt > strong {
    color: #bf5270 !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-edited > strong {
    color: #596db8 !important;
  }

  .dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-cancelled > strong {
    color: #c24e62 !important;
  }
}

/* /dashboard mobile - conservar una sola representacion de estados. */
@media (max-width: 767px) {
  .dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dashboard-page-shell .dashboard-orders-status-card .dashboard-status-mini-metrics {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
  }

  .dashboard-page-shell .dashboard-orders-status-card .dashboard-status-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dashboard-page-shell .dashboard-orders-status-card .dashboard-status-mini-copy {
    display: contents !important;
  }

  .dashboard-page-shell .dashboard-orders-status-card .dashboard-status-mini-copy small {
    order: 1;
    margin-right: auto;
    white-space: nowrap;
  }

  .dashboard-page-shell .dashboard-orders-status-card .dashboard-status-mini-copy strong {
    order: 2;
    margin-left: auto;
    text-align: right;
  }
}

/* /dashboard iPad horizontal - soporte en dos columnas. */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .dashboard-page-shell .dashboard-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .dashboard-page-shell .dashboard-support-grid > .dashboard-third-party-card,
  .dashboard-page-shell .dashboard-support-grid > .dashboard-audit-card {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }
}

/* Dashboard support cards: compact, consistent label/value rows. */
.dashboard-page-shell .dashboard-third-party-card > .third-party-dashboard-grid > .dashboard-support-metric,
.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .dashboard-support-metric {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  grid-template-columns: none !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: auto !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.dashboard-page-shell .dashboard-support-metric-leading {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
}

.dashboard-page-shell .dashboard-third-party-card > .third-party-dashboard-grid > .dashboard-support-metric .dashboard-support-metric-leading .info-chip-label,
.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .dashboard-support-metric .dashboard-support-metric-leading .info-chip-label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dashboard-page-shell .dashboard-third-party-card > .third-party-dashboard-grid > .dashboard-support-metric > .dashboard-support-metric-value,
.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .dashboard-support-metric > .dashboard-support-metric-value {
  flex: 0 0 auto !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.dashboard-page-shell .dashboard-support-metric-leading .dashboard-audit-metric-icon {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-missing {
  --audit-item-bg: rgba(255, 239, 205, 0.35);
  --audit-item-border: rgba(189, 123, 30, 0.18);
  --audit-item-accent: #bd7b1e;
  background: var(--audit-item-bg) !important;
  border-color: var(--audit-item-border) !important;
}

.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-debt {
  --audit-item-bg: rgba(255, 231, 237, 0.35);
  --audit-item-border: rgba(191, 82, 112, 0.18);
  --audit-item-accent: #bf5270;
  background: var(--audit-item-bg) !important;
  border-color: var(--audit-item-border) !important;
}

.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-edited {
  --audit-item-bg: rgba(234, 237, 255, 0.38);
  --audit-item-border: rgba(89, 109, 184, 0.18);
  --audit-item-accent: #596db8;
  background: var(--audit-item-bg) !important;
  border-color: var(--audit-item-border) !important;
}

.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .kpi-card--audit-cancelled {
  --audit-item-bg: rgba(255, 232, 236, 0.35);
  --audit-item-border: rgba(194, 78, 98, 0.18);
  --audit-item-accent: #c24e62;
  background: var(--audit-item-bg) !important;
  border-color: var(--audit-item-border) !important;
}

.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .dashboard-support-metric .dashboard-audit-metric-icon,
.dashboard-page-shell .dashboard-audit-card > .dashboard-audit-grid > .dashboard-support-metric > .dashboard-support-metric-value {
  color: var(--audit-item-accent, inherit) !important;
}

/* /dashboard iPad vertical - pill de carga dentro del encabezado. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  .dashboard-page-shell .dashboard-operational-load-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .dashboard-page-shell .dashboard-operational-heading {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .dashboard-page-shell .dashboard-plant-capacity {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    align-self: flex-start !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

/* /dashboard iPad vertical - periodo financiero en la cabecera. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  .dashboard-page-shell .dashboard-indicators-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "icon heading period" !important;
    align-items: flex-start !important;
    justify-content: normal !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .dashboard-page-shell .dashboard-indicators-header > .dashboard-insight-icon {
    grid-area: icon !important;
  }

  .dashboard-page-shell .dashboard-indicators-header > .dashboard-insight-heading {
    grid-area: heading !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .dashboard-page-shell .dashboard-indicators-header > .dashboard-insight-period {
    grid-area: period !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    justify-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* Dashboard: conservar solo el listado inferior de estados. */
.dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-legend-values {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-body {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

.dashboard-page-shell .dashboard-orders-status-card .dashboard-status-donut-wrap {
  grid-column: 1 !important;
  justify-self: center !important;
}

.dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header > .dashboard-insight-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.dashboard-page-shell .dashboard-orders-status-card .dashboard-orders-status-header > .dashboard-insight-heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* /dashboard iPad vertical - encabezado y listado legibles. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  body.tablet-app-mode .dashboard-page-shell .dashboard-recent-orders-card > .dashboard-recent-orders-header,
  .dashboard-page-shell .dashboard-recent-orders-card > .dashboard-recent-orders-header {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.tablet-app-mode .dashboard-page-shell .dashboard-recent-orders-card > .dashboard-recent-orders-header > div:first-child,
  .dashboard-page-shell .dashboard-recent-orders-card > .dashboard-recent-orders-header > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.tablet-app-mode .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-orders-actions,
  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-orders-actions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-orders-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto auto !important;
    grid-template-areas: none !important;
    align-items: center !important;
  }
}

/* /dashboard mobile - orden reciente con jerarquia vertical legible. */
@media (max-width: 767px) {
  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order {
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto) 22px !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "code status chevron"
      "client method chevron"
      "meta amount chevron" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    min-height: 0 !important;
    padding: 10px 10px !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-copy {
    display: contents !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-copy strong {
    grid-area: client !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-copy small {
    grid-area: meta !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-code {
    grid-area: code !important;
    justify-self: start !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-payment {
    display: contents !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-method {
    grid-area: method !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: end !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-amount {
    grid-area: amount !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order .status-chip {
    grid-area: status !important;
    justify-self: end !important;
  }

  .dashboard-page-shell .dashboard-recent-orders-card .dashboard-recent-order-chevron {
    grid-area: chevron !important;
    align-self: center !important;
    justify-self: end !important;
  }
}

/* Dashboard load process cards: keep labels and metrics readable on iPad landscape. */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .dashboard-page-shell .dashboard-load-details {
    padding: 16px;
  }

  .dashboard-page-shell .dashboard-load-process-grid {
    gap: 10px;
  }

  .dashboard-page-shell .dashboard-load-process {
    gap: 7px;
    padding: 12px;
    box-sizing: border-box;
    overflow: visible;
  }

  .dashboard-page-shell .dashboard-load-process-title {
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-page-shell .dashboard-load-process-title > div {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 6px;
  }

  .dashboard-page-shell .dashboard-load-process-title > div > span {
    min-width: 0;
    line-height: 1.2;
  }

  .dashboard-page-shell .dashboard-load-process-title > div > strong {
    min-width: 0;
    max-width: 100%;
    line-height: 1.2;
    text-align: right;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .dashboard-page-shell .dashboard-load-process--informative strong {
    font-size: 0.82rem;
  }

  .dashboard-page-shell .dashboard-load-process-status {
    max-width: 100%;
    justify-self: start;
  }
}

/* Keep tablet-portrait notifications anchored to the bell. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  .tablet-app-mode .notifications-shell {
    position: relative;
  }

  html.tablet-app-mode .mobile-page-header .notifications-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(420px, calc(100dvh - 150px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1400 !important;
  }
}

/* Let the open notification context sit above mobile action menus, below modals. */
@media (max-width: 767px) {
  .mobile-page-header:has(.notifications-shell.is-open) {
    z-index: 1250 !important;
  }
}

/* Compact header for the shared service picker in correction mode. */
.service-picker-modal .service-picker-modal-header {
  min-height: 64px !important;
  padding: 14px 16px 14px 24px !important;
  align-items: center !important;
}

.service-picker-modal-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.service-picker-modal-header-main h3 {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.service-picker-order-pill {
  flex: 0 0 auto;
  margin: 0;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F3F1FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #4A5BA8;
  line-height: 1.1;
  white-space: nowrap;
}

@media (min-width: 768px) {
  [data-service-picker-mode="correction"] .service-picker-modal .service-picker-modal-header-main {
    flex-wrap: nowrap;
  }

  [data-service-picker-mode="correction"] .service-picker-modal .service-picker-detail {
    padding-top: 18px !important;
    gap: 16px !important;
  }
}

[data-service-picker-mode="correction"] .service-picker-modal .service-summary-line {
  margin-top: 2px !important;
  padding-bottom: 4px !important;
}

[data-service-picker-mode="correction"] .service-picker-modal .service-picker-reason-group {
  margin-top: 6px !important;
}

@media (max-width: 767px) {
  .service-picker-modal .service-picker-modal-header {
    min-height: 75px !important;
    flex: 0 0 auto !important;
    padding: 12px 14px 12px 16px !important;
  }

  .service-picker-modal-header-main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
  }

  .service-picker-modal-header-main h3 {
    font-size: 17px !important;
    line-height: 1.18 !important;
    text-align: center;
  }

  .service-picker-order-pill {
    min-height: 26px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 1.1;
  }
}

/* Correction picker header: center title and order pill on tablet portrait only. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  [data-service-picker-mode="correction"] .service-picker-modal .service-picker-modal-header-main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  [data-service-picker-mode="correction"] .service-picker-modal .service-picker-modal-header-main h3 {
    text-align: center;
  }
}

/* Keep the complete picker inside one scroll container. */
.service-picker-modal .service-picker-modal-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.service-picker-modal .service-picker-layout,
.service-picker-modal .service-picker-sidebar,
.service-picker-modal .service-picker-list,
.service-picker-modal .service-picker-detail {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Mobile order-service cards: keep content readable and actions in one menu. */
.order-service-mobile-actions {
  display: none;
}

.order-service-desktop-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767px) {
  #order-detail-modal-orders .order-detail-service-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 14px !important;
  }

  #order-detail-modal-orders .order-detail-service-row > .order-detail-service-icon {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    align-self: start !important;
  }

  #order-detail-modal-orders .order-detail-service-row > .order-detail-service-copy,
  #order-detail-modal-orders .order-detail-service-row .order-detail-service-head {
    display: contents !important;
  }

  #order-detail-modal-orders .order-detail-service-row .order-detail-service-head strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.2 !important;
  }

  #order-detail-modal-orders .order-detail-service-row .order-detail-service-detail {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #order-detail-modal-orders .order-detail-service-row .order-detail-service-meta {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #order-detail-modal-orders .order-service-desktop-actions {
    display: none !important;
  }

  #order-detail-modal-orders .order-detail-service-side {
    display: contents !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #order-detail-modal-orders .order-detail-service-amount {
    grid-column: 3 !important;
    grid-row: 3 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
  }

  #order-detail-modal-orders .order-service-mobile-actions {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  #order-detail-modal-orders .order-service-mobile-actions-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #order-detail-modal-orders .order-service-mobile-actions-dropdown {
    width: 180px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  #order-detail-modal-orders .order-service-mobile-actions-dropdown .order-actions-item {
    min-height: 36px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* /admin/dashboard: filtro de servicios del modal de órdenes pendientes. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--service,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter {
    position: relative !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-toggle {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(80, 172, 198, 0.55) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #2f2440 !important;
    font: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-toggle span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-menu {
    position: absolute !important;
    z-index: 30 !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    padding: 6px !important;
    border: 1px solid rgba(80, 172, 198, 0.28) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(47, 36, 64, 0.14) !important;
    box-sizing: border-box !important;
}

/* El menu abierto sale del body scrolleable, pero sigue dentro del modal. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-menu[data-portal="true"] {
    position: absolute !important;
    z-index: 60 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--service,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter {
    overflow: visible !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
    position: relative !important;
    z-index: 20 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    color: #2f2440 !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-option:hover {
    background: rgba(80, 172, 198, 0.08) !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-option input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal .delayed-service-filter-option span {
    min-width: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
}

/* Tipografia unica de las opciones del catalogo de servicios del Dashboard. */
#reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-service-filter-menu .delayed-service-filter-option > span {
    font-family: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: inherit !important;
    color: #2f2440 !important;
}

@media (min-width: 1200px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(260px, 1.55fr) repeat(5, minmax(110px, 0.9fr)) minmax(150px, 0.9fr) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--service { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--date-from { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--date-to { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--order { order: 5 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--actions { order: 6 !important; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 14px 16px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-search { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--service { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--date-range { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--laundry { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--order { order: 5 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--actions { order: 6 !important; }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field {
        min-width: 0 !important;
    }
}

/* Collaborator composition: shared components are arranged by outer slots. */
.collaborator-dashboard-components {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--section-gap, 1.5rem) !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

.collaborator-dashboard-slot {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.collaborator-dashboard-slot > .content-card,
.collaborator-dashboard-slot > .delayed-orders-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.collaborator-dashboard-slot--status,
.collaborator-dashboard-slot--recent,
.dashboard-page-shell .collaborator-dashboard-slot--third {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
}

.collaborator-dashboard-slot--status,
.collaborator-dashboard-slot--recent {
    gap: 0 !important;
}

.collaborator-dashboard-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--section-gap, 1.5rem) !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    .collaborator-dashboard-components {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "status third"
            "recent recent"
            "pending pending" !important;
        margin-top: 0 !important;
        align-items: stretch !important;
        grid-auto-rows: auto !important;
    }

    .collaborator-dashboard-main-grid {
        display: contents !important;
    }

    .collaborator-dashboard-slot--status { grid-area: status !important; }
    .collaborator-dashboard-slot--third { grid-area: third !important; }
    .collaborator-dashboard-slot--recent { grid-area: recent !important; }
    .collaborator-dashboard-slot--pending { grid-area: pending !important; }

    body:has(.collaborator-dashboard-components) .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card > .third-party-dashboard-grid {
        grid-template-rows: repeat(4, max-content) !important;
        grid-auto-rows: max-content !important;
        align-items: start !important;
        align-content: start !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        gap: 8px !important;
    }

    body:has(.collaborator-dashboard-components) .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card > .third-party-dashboard-grid > .dashboard-support-metric {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    body:has(.collaborator-dashboard-components) .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card > .third-party-dashboard-grid > .third-party-action-area {
        margin-top: 0 !important;
    }
}

@media (min-width: 1200px) {
    .collaborator-dashboard-main-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card > .third-party-dashboard-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) auto !important;
    }

    .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card > .third-party-dashboard-grid > .dashboard-support-metric {
        height: 100% !important;
        min-height: 0 !important;
    }

    .collaborator-dashboard-components .collaborator-dashboard-slot--third > .dashboard-third-party-card > .third-party-dashboard-grid > .third-party-action-area {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-modal-tools {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal .dashboard-pending-orders-filter-field--service {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767px) {
    .collaborator-dashboard-components {
        gap: 14px !important;
    }

    body:has(.collaborator-dashboard-components) .collaborator-dashboard-components > .collaborator-dashboard-slot--pending > .delayed-orders-card {
        margin-bottom: 0 !important;
    }
}

/* /admin/dashboard: wrapper en flujo normal, sin alterar la grilla de filtros. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin: 6px 0 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-actions > .dashboard-pending-orders-clear-action {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 2px 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* /admin/dashboard: control unico para el rango de fechas. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-control {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal [data-delayed-date-range-display] {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 42px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-trigger {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #46589d !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-trigger:hover {
    background: rgba(70, 88, 157, 0.08) !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-menu {
    position: absolute !important;
    z-index: 60 !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 318px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 14px !important;
    border: 1px solid rgba(80, 172, 198, 0.28) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(47, 36, 64, 0.16) !important;
    box-sizing: border-box !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-menu[data-portal="true"] {
    position: absolute !important;
    z-index: 60 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-calendar-header {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    color: #2f2440 !important;
    text-align: center !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-calendar-header strong {
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-nav {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #46589d !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-nav:hover {
    background: rgba(70, 88, 157, 0.08) !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-weekdays,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-weekdays {
    margin-bottom: 5px !important;
    color: #8b929c !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-day {
    width: 100% !important;
    aspect-ratio: 1 !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #2f2440 !important;
    font-size: 0.76rem !important;
    cursor: pointer !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-day:hover,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-day.is-in-range {
    background: rgba(219, 60, 162, 0.12) !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-day.is-start,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-day.is-end {
    background: #db3ca2 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-day.is-outside {
    color: #b8bdc6 !important;
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-date-range-menu {
        max-width: calc(100vw - 32px) !important;
    }
}

/* /admin/dashboard: filtros y limpieza en una sola fila en desktop. */
@media (min-width: 1200px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(120px, 0.9fr)) minmax(130px, 0.9fr) minmax(145px, 0.9fr) !important;
        align-items: end !important;
        gap: 18px 16px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions {
        grid-column: auto !important;
        grid-row: auto !important;
        order: 6 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        align-self: end !important;
        flex-direction: column !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-action-label-spacer {
        display: block !important;
        visibility: hidden !important;
        flex: 0 0 16px !important;
        width: 100% !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 12px !important;
        border: 1px solid transparent !important;
        border-radius: 14px !important;
        background: #db3ca2 !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled:hover {
        border-color: #e1e5eb !important;
        background: #edf0f3 !important;
        color: #8b929c !important;
        cursor: default !important;
        opacity: 1 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled):hover {
        background: #c92f95 !important;
        color: #fff !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: end !important;
        gap: 14px 16px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field {
        min-width: 0 !important;
        width: 100% !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        order: 1 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--service {
        grid-column: 1 !important;
        grid-row: 2 !important;
        order: 2 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-range {
        grid-column: 2 !important;
        grid-row: 2 !important;
        order: 3 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry {
        grid-column: 1 !important;
        grid-row: 3 !important;
        order: 4 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order {
        grid-column: 2 !important;
        grid-row: 3 !important;
        order: 5 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        order: 6 !important;
        display: flex !important;
        align-self: stretch !important;
        flex-direction: column !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-action-label-spacer {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-service-filter-toggle,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-service-filter-toggle [data-delayed-service-label] {
        font-family: inherit !important;
        letter-spacing: inherit !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.15fr) !important;
        grid-template-areas:
            "search service range"
            "laundry order actions" !important;
        grid-auto-flow: row !important;
        align-items: end !important;
        gap: 12px 14px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field {
        min-width: 0 !important;
        width: 100% !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search {
        grid-area: search !important;
        order: 1 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--service {
        grid-area: service !important;
        order: 2 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-range {
        grid-area: range !important;
        order: 3 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry {
        grid-area: laundry !important;
        order: 4 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order {
        grid-area: order !important;
        order: 5 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions {
        grid-area: actions !important;
        order: 6 !important;
        display: flex !important;
        align-self: stretch !important;
        flex-direction: column !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-action-label-spacer {
        display: block !important;
        visibility: hidden !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
    }
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        width: 100% !important;
        order: initial !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools > .dashboard-pending-orders-filter-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search {
        grid-row: 1 !important;
        order: 1 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--service {
        grid-row: 2 !important;
        order: 2 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--date-range {
        grid-row: 3 !important;
        order: 3 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--laundry {
        grid-row: 4 !important;
        order: 4 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--order {
        grid-row: 5 !important;
        order: 5 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions {
        grid-column: 1 / -1 !important;
        grid-row: 6 !important;
        order: 6 !important;
        display: flex !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        align-self: stretch !important;
        flex-direction: column !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-action-label-spacer {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        background: #db3ca2 !important;
        color: #fff !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled:hover {
        background: #edf0f3 !important;
        color: #8b929c !important;
        cursor: default !important;
        opacity: 1 !important;
    }
}

/* Mantiene texto y dimensiones del boton estables en todos los estados. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled) {
    background: #db3ca2 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:not(:disabled):hover {
    background: #c92f95 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled,
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-field--actions > .dashboard-pending-orders-clear-action:disabled:hover {
    background: #edf0f3 !important;
    color: #8b929c !important;
    -webkit-text-fill-color: #8b929c !important;
    cursor: default !important;
    opacity: 1 !important;
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-service-filter-toggle,
    #reportDelayedOrdersModal.dashboard-pending-orders-modal .delayed-service-filter-toggle [data-delayed-service-label] {
        font-family: inherit !important;
        letter-spacing: inherit !important;
    }
}

/* KPI principales exclusivos del Dashboard de colaborador. */
.collaborator-dashboard-kpis {
    min-width: 0;
}

.collaborator-dashboard-kpi {
    --collaborator-kpi-tint: var(--color-surface);
    --collaborator-kpi-accent: var(--color-primary);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    min-width: 0;
    min-height: 136px;
    padding: 18px 22px;
    border: 1px solid color-mix(in srgb, var(--collaborator-kpi-tint) 58%, var(--color-border));
    border-radius: var(--radius-lg);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--collaborator-kpi-tint) 42%, var(--color-card)),
        color-mix(in srgb, var(--collaborator-kpi-tint) 16%, var(--color-card))
    );
    box-shadow: var(--shadow-soft);
    box-sizing: border-box;
}

.collaborator-dashboard-kpi--open {
    --collaborator-kpi-tint: var(--state-warning);
    --collaborator-kpi-accent: color-mix(in srgb, var(--state-warning) 42%, var(--color-text));
}

.collaborator-dashboard-kpi--today {
    --collaborator-kpi-tint: var(--state-info);
    --collaborator-kpi-accent: var(--color-accent);
}

.collaborator-dashboard-kpi--month {
    --collaborator-kpi-tint: color-mix(in srgb, var(--color-primary) 13%, var(--color-card));
    --collaborator-kpi-accent: var(--color-primary);
}

.collaborator-dashboard-kpi-icon {
    z-index: 1;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--collaborator-kpi-tint) 64%, var(--color-card));
    color: var(--collaborator-kpi-accent);
    font-size: 1.12rem;
}

.collaborator-dashboard-kpi-copy {
    z-index: 1;
    min-width: 0;
    padding-right: 40px;
}

.collaborator-dashboard-kpi-label,
.collaborator-dashboard-kpi-caption {
    margin: 0;
}

.collaborator-dashboard-kpi-label {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.collaborator-dashboard-kpi-value {
    margin: 3px 0 2px;
    color: var(--color-primary);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.collaborator-dashboard-kpi-caption {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.25;
}

.collaborator-dashboard-kpi-decoration {
    position: absolute;
    z-index: 0;
    inset-block: 0;
    right: 18px;
    display: grid;
    place-items: center;
    color: var(--collaborator-kpi-accent);
    font-size: 4.5rem;
    line-height: 1;
    opacity: 0.09;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .collaborator-dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

@media (max-width: 767px) {
    .collaborator-dashboard-kpi {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        min-height: 116px;
        padding: 16px 18px;
    }

    .collaborator-dashboard-kpi-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 1rem;
    }

    .collaborator-dashboard-kpi-copy {
        padding-right: 34px;
    }

    .collaborator-dashboard-kpi-decoration {
        right: 12px;
        font-size: 3.5rem;
        opacity: 0.07;
    }

    .collaborator-dashboard-kpi-caption {
        font-size: 0.76rem;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    body:has(.collaborator-dashboard-components) section.content-area.page-content {
        row-gap: var(--section-gap, 1.5rem) !important;
    }
}

@media (min-width: 1200px) {
    body:has(.collaborator-dashboard-components) section.content-area.page-content {
        row-gap: var(--card-gap, 16px) !important;
    }
}

/* Shared semantic pills in the responsive pending-orders cards. */
body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-delay-days-pill--neutral {
    background: rgba(80, 172, 198, 0.16) !important;
    color: #2D7F91 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-delay-days-pill--warning {
    background: rgba(255, 193, 7, 0.24) !important;
    color: #8A5A00 !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-delay-days-pill--danger {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #B91C1C !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .dashboard-delay-days-pill {
    min-width: 82px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .mobile-order-metric > strong > .pill-chip {
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .mobile-order-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .mobile-order-metric {
        min-width: 0 !important;
        padding-inline: 6px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .mobile-order-metric > strong {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-list .mobile-order-metric > strong > .pill-chip {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-inline: 6px !important;
        font-size: 0.62rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
}

/* Reuse the all-orders advanced-filters disclosure pattern for pending orders. */
@media (min-width: 1200px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: contents !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filter-search {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: 1 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: 2 !important;
        display: flex !important;
        align-self: stretch !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
        appearance: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle-copy {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle-chevron {
        transition: transform 0.18s ease !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle.is-open .dashboard-pending-orders-filters-toggle-chevron {
        transform: rotate(180deg) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: 3 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: end !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field {
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
        order: initial !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--service { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--date-range { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--laundry { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--order { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--actions {
        grid-column: 1 / -1 !important;
        order: 5 !important;
    }
}

.order-detail-section-actions > .administrative-reopen-trigger,
html.tablet-app-mode [data-search-order-card] .order-admin-tools > .administrative-reopen-trigger,
body.tablet-app-mode [data-search-order-card] .order-admin-tools > .administrative-reopen-trigger,
.page-section [data-search-order-card] .order-admin-tools > .administrative-reopen-trigger {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: 0 0 44px;
    justify-self: start;
}

/* Modal de cierre/reapertura administrativa: layout aislado del modal global. */
#administrative-closure-modal.modal {
    padding: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

#administrative-closure-modal .modal-dialog.modal-content {
    width: min(560px, calc(100vw - 32px));
    max-width: 560px;
    height: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    flex: 0 1 auto;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-sizing: border-box;
}

#administrative-closure-modal .modal-header {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    padding: 20px 64px 16px 24px;
}

#administrative-closure-modal .administrative-closure-modal-heading {
    min-width: 0;
}

#administrative-closure-modal .modal-header h3 {
    line-height: 1.2;
}

#administrative-closure-modal .modal-subtitle {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

#administrative-closure-modal .modal-body.administrative-closure-modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

#administrative-closure-modal .administrative-closure-modal-form {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin: 0;
}

#administrative-closure-modal .administrative-closure-modal-form .form-group {
    gap: 8px;
    min-width: 0;
    margin: 0;
}

#administrative-closure-modal .administrative-closure-modal-form .form-group > label {
    padding: 0;
    line-height: 1.25;
    font-weight: 700;
}

#administrative-closure-modal .administrative-closure-modal-form .form-group > input,
#administrative-closure-modal .administrative-closure-modal-form .form-group > textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#administrative-closure-modal .administrative-closure-modal-form .form-group > textarea {
    min-height: 104px;
    resize: vertical;
}

#administrative-closure-modal .administrative-closure-modal-disclaimer {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(85, 156, 173, 0.2);
    border-radius: 12px;
    background: #f5f9fb;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#administrative-closure-modal .administrative-closure-modal-confirmation {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: anywhere;
}

#administrative-closure-modal .administrative-closure-modal-confirmation input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px;
    height: 18px !important;
    min-height: 18px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    flex: 0 0 18px;
    box-sizing: border-box;
    accent-color: var(--primary);
}

#administrative-closure-modal .administrative-closure-modal-footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(85, 156, 173, 0.16);
    box-sizing: border-box;
}

#administrative-closure-modal .administrative-closure-modal-footer > .btn {
    width: auto;
    min-width: 140px;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    #administrative-closure-modal .modal-dialog.modal-content {
        width: 560px;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    #administrative-closure-modal.modal {
        padding: 20px;
    }

    #administrative-closure-modal .modal-dialog.modal-content {
        width: min(560px, calc(100vw - 40px));
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
    }
}

@media (min-width: 576px) and (max-width: 899px) {
    #administrative-closure-modal.modal {
        padding: 20px;
    }

    #administrative-closure-modal .modal-dialog.modal-content {
        width: min(560px, calc(100vw - 40px));
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
    }
}

@media (min-width: 576px) and (max-width: 899px) and (orientation: portrait) {
    body .page-section > div.responsive-grid.two-cols.search-result-order-payment-grid,
    .page-section > .responsive-grid.two-cols.search-result-order-payment-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        row-gap: 16px !important;
    }

    .page-section > .responsive-grid.two-cols.search-result-order-payment-grid > .client-card,
    .page-section > .responsive-grid.two-cols.search-result-order-payment-grid > [data-search-order-card] {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }

    [data-search-order-card] .search-order-header--administrative-closure {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, max-content) auto;
        grid-template-areas:
            "title marks actions"
            "subtitle subtitle subtitle";
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
        min-width: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy {
        display: contents;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-title {
        grid-area: title;
        min-width: 0;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-subtitle {
        grid-area: subtitle;
        min-width: 0;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-special-marks {
        display: flex;
        grid-area: marks;
        align-items: center;
        justify-self: end;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure > .search-order-header-actions {
        display: flex;
        grid-area: actions;
        align-items: center;
        justify-self: end;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
        width: auto;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .administrative-reopen-trigger,
    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-menu,
    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger {
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        flex: 0 0 44px;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .administrative-reopen-trigger,
    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger span {
        display: none;
    }

    [data-search-order-card] .administrative-closure-banner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        column-gap: 0;
        row-gap: 8px;
    }

    [data-search-order-card] .administrative-closure-banner > .pill-chip {
        justify-self: start;
        width: fit-content;
        margin-left: 0;
    }

    .page-section [data-search-order-card] .search-info-grid.search-info-grid--order {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .page-section [data-search-order-card] .search-info-grid.search-info-grid--order > .info-item {
        min-width: 0;
    }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    [data-search-order-card] .search-order-header--administrative-closure {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) auto;
        grid-template-areas:
            "title marks actions"
            "subtitle subtitle subtitle";
        align-items: center;
        column-gap: 12px;
        row-gap: 8px;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy {
        display: contents;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-title {
        grid-area: title;
        min-width: 0;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-subtitle {
        grid-area: subtitle;
        min-width: 0;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-special-marks {
        display: flex;
        grid-area: marks;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure > .search-order-header-actions {
        display: flex;
        grid-area: actions;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        min-width: 0;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .administrative-reopen-trigger,
    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-menu,
    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger {
        box-sizing: border-box;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        flex: 0 0 40px;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .administrative-reopen-trigger,
    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger span {
        display: none;
    }

    [data-search-order-card] .administrative-closure-banner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        column-gap: 0;
        row-gap: 8px;
    }

    [data-search-order-card] .administrative-closure-banner > .pill-chip {
        justify-self: start;
        width: fit-content;
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .page-section [data-search-order-card] > .search-order-section-header--administrative-closure {
        display: block;
        margin-bottom: 12px !important;
    }

    [data-search-order-card] .search-order-header--administrative-closure {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "copy actions"
            "marks marks";
        gap: 6px 8px;
        align-items: start;
        justify-content: normal;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy {
        display: flex;
        grid-area: copy;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-width: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-title {
        flex: none;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-heading-copy > .section-subtitle {
        flex: none;
        order: 0;
        max-width: 34ch;
        margin: 0 !important;
        line-height: 1.3;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-special-marks {
        display: flex;
        grid-area: marks;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        min-width: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-special-marks > .administrative-closure-chip {
        display: none;
    }

    [data-search-order-card] .search-order-header--administrative-closure .search-order-special-marks:has(> .administrative-closure-chip):not(:has(> :not(.administrative-closure-chip))) {
        display: none;
    }

    [data-search-order-card] .search-order-header--administrative-closure > .search-order-header-actions {
        display: flex;
        grid-area: actions;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 8px;
        min-width: 0;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .administrative-reopen-trigger {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-menu {
        width: 40px;
        min-width: 40px;
        margin: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }

    [data-search-order-card] .search-order-header--administrative-closure .order-detail-audit-trigger span {
        display: none;
    }

    [data-search-order-card] .administrative-closure-banner > .pill-chip {
        justify-self: start;
        width: fit-content;
        margin-left: 0;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        grid-template-rows: auto !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-copy {
        display: flex !important;
        grid-column: 1;
        grid-row: 1;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        min-width: 0;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-copy-row {
        display: block !important;
        width: 100%;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-copy > .section-subtitle {
        min-width: 0;
        margin: 0;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-actions {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 0;
        margin: 0 !important;
    }

    #order-detail-modal-orders .order-detail-section-card:has(> .administrative-closure-banner) .order-detail-section-actions > .administrative-reopen-trigger {
        margin: 0 !important;
    }

    #order-detail-modal-orders .administrative-closure-banner > .pill-chip {
        margin-left: 0;
    }

    #order-detail-modal-orders .modal-header {
        flex: 0 0 auto;
    }

    #order-detail-modal-orders .order-detail-modal-code > .administrative-closure-chip {
        margin-left: 0;
    }

    #administrative-closure-modal.modal {
        padding: 12px;
    }

    #administrative-closure-modal .modal-dialog.modal-content {
        width: calc(100vw - 24px);
        max-width: 560px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    #administrative-closure-modal .modal-header {
        padding: 16px 54px 14px 18px;
    }

    #administrative-closure-modal .modal-body.administrative-closure-modal-body {
        padding: 16px 18px;
    }

    #administrative-closure-modal .administrative-closure-modal-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px 18px 18px;
    }

    #administrative-closure-modal .administrative-closure-modal-footer > .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-modal-tools {
        grid-template-areas: none !important;
        padding-inline: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: 2 !important;
        display: flex !important;
        align-self: stretch !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(74, 88, 153, 0.28) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--primary) !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
        appearance: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle-copy {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle-chevron {
        transition: transform 0.18s ease !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-filters-toggle.is-open .dashboard-pending-orders-filters-toggle-chevron {
        transform: rotate(180deg) !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters,
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: 3 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters[hidden] {
        display: none !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        grid-area: auto !important;
        order: initial !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--service { order: 1 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--date-range { order: 2 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--laundry { order: 3 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--order { order: 4 !important; }
    body:has(.dashboard-page-shell) #reportDelayedOrdersModal.dashboard-pending-orders-modal .dashboard-pending-orders-advanced-filters > .dashboard-pending-orders-filter-field--actions {
        grid-column: 1 / -1 !important;
        order: 5 !important;
    }
}