:root {
    color-scheme: light;
    --cf-primary: #2563eb;
    --cf-primary-hover: #1d4ed8;
    --cf-secondary: #475569;
    --cf-focus: #2563eb;
    --cf-background: #f4f6fb;
    --cf-surface: #ffffff;
    --cf-field-background: #ffffff;
    --cf-border: #e6ebf2;
    --cf-border-hover: #c5cedb;
    --cf-text: #0f172a;
    --cf-text-secondary: #64748b;
    --cf-placeholder: #8b98aa;
    --cf-error: #dc3545;
    --cf-warning: #c47a08;
    --cf-success: #168653;
    --cf-info: #2563eb;
    --cf-icon-personal: #3157d5;
    --cf-icon-contact: #168653;
    --cf-icon-work: #b76408;
    --cf-icon-notes: #7c3fc5;
    --cf-disabled-background: #eef2f7;
    --cf-disabled-text: #8793a5;
    --cf-readonly-background: #f8fafc;
    --cf-radius-sm: 8px;
    --cf-radius-control: 10px;
    --cf-radius-card: 14px;
    --cf-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.16);
    --cf-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
    --cf-space-1: 4px;
    --cf-space-2: 8px;
    --cf-space-3: 12px;
    --cf-space-4: 16px;
    --cf-space-5: 24px;
    --cf-space-section: 16px;
    --cf-font-xs: 0.75rem;
    --cf-font-sm: 0.875rem;
    --cf-font-base: 1rem;
    /* Controles compactos corporativos (antes 46px). Móvil: ver media query abajo. */
    --cf-control-height: 42px;
    --cf-btn-height: 40px;
    --cf-btn-height-primary: 42px;
    --cf-icon-size: 18px;
    --cf-label-font-size: 0.8125rem; /* 13px */
    --cf-field-font-size: 0.875rem;  /* 14px */
    --cf-field-gap: 12px;
    --cf-transition: 160ms ease;
    --cf-transition-fast: 160ms ease;
    --cf-transition-normal: 220ms ease;
}

@media (max-width: 600px) {
    :root {
        --cf-control-height: 44px;
        --cf-btn-height: 44px;
        --cf-btn-height-primary: 44px;
    }
}

.mud-theme-dark,
html.mud-theme-dark,
html[data-sigepef-theme="dark"] {
    color-scheme: dark;
    --cf-primary: #8aa1ff;
    --cf-primary-hover: #a5b4fc;
    --cf-secondary: #a8b3c5;
    --cf-focus: #7aa2ff;
    --cf-background: #0b0f19;
    --cf-surface: #141a28;
    --cf-field-background: #171e2e;
    --cf-border: #344057;
    --cf-border-hover: #52617c;
    --cf-text: #eef2f8;
    --cf-text-secondary: #a6b0c0;
    --cf-placeholder: #7f8ba0;
    --cf-error: #ff7f89;
    --cf-warning: #f4bd62;
    --cf-success: #63d69b;
    --cf-icon-personal: #8aa1ff;
    --cf-icon-contact: #63d69b;
    --cf-icon-work: #f4bd62;
    --cf-icon-notes: #c4a1ff;
    --cf-disabled-background: #202838;
    --cf-disabled-text: #758197;
    --cf-readonly-background: #111725;
    --cf-shadow-focus: 0 0 0 3px rgba(122, 162, 255, 0.2);
    --cf-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.app-field-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* Select + bot?n (+) en la misma fila: el MudSelect FullWidth no debe empujar el bot?n fuera. */
.app-field-with-action {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.app-field-with-action > .mud-input-control,
.app-field-with-action > .mud-select,
.app-field-with-action > .app-field {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: 100%;
}

.app-field-with-action > .app-field-with-action__fixed {
    flex: 0 1 150px;
    width: auto !important;
    max-width: 150px;
}

/* Gotcha real de MudBlazor 9.9: su propio CSS pone .mud-overlay-dialog en
   z-index:var(--mud-zindex-dialog)+1, es decir, POR ENCIMA de .mud-dialog-container (que se
   queda en var(--mud-zindex-dialog)). El fondo oscuro del di?logo tapa el di?logo entero ?
   visualmente no se ve nada, pero el overlay sigue bloqueando cualquier clic de la p?gina
   entera, sinti?ndose como "la pantalla se congel?" o "el bot?n no responde" sin ning?n
   indicio visual de que hay un di?logo abierto. Reproducido real con Playwright: al abrir
   "Nuevo cliente" desde Financiamientos, el di?logo quedaba con z-index menor que su overlay.
   Se fuerza el contenedor del di?logo muy por encima de cualquier overlay/popover normal de
   MudBlazor (que ronda 1300-1500), pero por debajo del banner de "hay una versi?n nueva"
   (2147483000, intencionalmente el m?s alto de todos: ver .sigepef-update-banner). */
.mud-dialog-container {
    z-index: 20000 !important;
}

/* Por encima de di�logos (20000): si no, el aviso queda detr�s y parece que
   "Guardar no hace nada" cuando falta un obligatorio (ej. Almac�n en Nuevo registro). */
.mud-snackbar-container {
    z-index: 21000 !important;
}

.app-field-with-action__btn {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-bottom: 2px;
    /* Refuerzo contra que otro elemento del flex (p. ej. el overlay del MudSelect vecino) quede
       encima y se robe el toque/clic ? visto reportado como "el bot?n + no responde". */
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
}

.app-field-label {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1);
    margin: 0 0 4px;
    color: var(--cf-text);
    font-size: var(--cf-label-font-size);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    transition: color var(--cf-transition-fast);
}

.app-field-required {
    color: var(--cf-error);
    font-weight: 700;
}

.app-field-help,
.app-field-counter {
    color: var(--cf-text-secondary);
    font-size: var(--cf-font-xs);
    line-height: 1.35;
}

.app-field-counter {
    align-self: flex-end;
    margin-top: var(--cf-space-1);
}

.app-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    color: var(--cf-error);
    font-size: var(--cf-font-xs);
    font-weight: 500;
    line-height: 1.35;
}

.app-field-error::before {
    content: "error_outline";
    font-family: "Material Icons";
    font-size: 16px;
    line-height: 1;
}

.app-field .mud-input-outlined-border {
    border-color: var(--cf-border) !important;
    border-radius: var(--cf-radius-control) !important;
    transition: border-color var(--cf-transition), box-shadow var(--cf-transition), background-color var(--cf-transition);
}

.app-field .mud-input-root {
    min-height: var(--cf-control-height);
    color: var(--cf-text);
    background: var(--cf-field-background);
    border-radius: var(--cf-radius-control);
}

.app-field .mud-input-slot {
    min-height: var(--cf-control-height);
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: var(--cf-field-font-size);
    line-height: 1.35;
}

.app-field textarea.mud-input-slot {
    min-height: 72px;
    resize: vertical;
    max-width: 100%;
}

.app-field .mud-input-adornment {
    color: var(--cf-text-secondary);
    transition: color var(--cf-transition);
}

.app-field .mud-input-adornment .mud-icon-root {
    font-size: var(--cf-icon-size) !important;
    width: var(--cf-icon-size);
    height: var(--cf-icon-size);
    pointer-events: none;
}

.app-field:hover .mud-input-outlined-border {
    border-color: var(--cf-border-hover) !important;
}

.app-field:focus-within .mud-input-outlined-border {
    border-color: var(--cf-focus) !important;
    box-shadow: var(--cf-shadow-focus);
}

.app-field:focus-within .mud-input-adornment {
    color: var(--cf-focus);
}

.app-field .mud-input-error .mud-input-outlined-border,
.app-field.app-field-has-error .mud-input-outlined-border {
    border-color: var(--cf-error) !important;
}

.app-field .mud-input-error:focus-within .mud-input-outlined-border,
.app-field.app-field-has-error:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-error) 16%, transparent);
}

.app-field .mud-disabled {
    color: var(--cf-disabled-text) !important;
    background: var(--cf-disabled-background) !important;
    cursor: not-allowed;
}

.app-field.app-field-readonly .mud-input-root {
    background: var(--cf-readonly-background);
}

.app-form-section {
    padding: var(--cf-space-section);
    border: 1px solid var(--cf-border);
    border-left: 4px solid var(--cf-primary);
    border-radius: var(--cf-radius-control);
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--cf-field-gap);
}

.app-form-section > *:not(.app-form-section-header):not(.app-form-section__header) {
    margin: 0;
}

.app-form-dialog .mud-dialog-title {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cf-border);
    background: linear-gradient(135deg, var(--cf-background), var(--cf-surface));
}

.app-form-dialog .mud-dialog-content {
    padding: 12px 16px 16px;
    background: var(--cf-surface);
}

.app-form-dialog .mud-dialog-actions {
    padding: 10px 16px;
    border-top: 1px solid var(--cf-border);
    background: var(--cf-background);
}

.app-form-dialog__title {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3);
}

.app-form-dialog__title > .mud-icon-root {
    width: 36px;
    height: 36px;
    padding: 8px;
    color: var(--cf-primary);
    background: color-mix(in srgb, var(--cf-primary) 12%, transparent);
    border-radius: var(--cf-radius-control);
}

.app-form-section + .app-form-section {
    margin-top: var(--cf-space-3);
}

.app-form-section-header,
.app-form-section__header {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-2);
    margin-bottom: 2px;
}

.app-form-section-icon,
.app-form-section__header > .mud-icon-root {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 6px;
    border-radius: 8px;
    color: var(--cf-primary);
    background: color-mix(in srgb, var(--cf-primary) 10%, transparent);
}

.app-form-section-title,
.app-form-section__title {
    color: var(--cf-text);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
}

.app-form-section-description,
.app-form-section__help {
    margin-top: 2px;
    color: var(--cf-text-secondary);
    font-size: var(--cf-font-xs);
}

.app-form-section__content {
    min-width: 0;
}

.app-section-personal { --cf-section-icon: var(--cf-icon-personal); }
.app-section-contact { --cf-section-icon: var(--cf-icon-contact); }
.app-section-work { --cf-section-icon: var(--cf-icon-work); }
.app-section-notes { --cf-section-icon: var(--cf-icon-notes); }

.app-section-personal .app-form-section__header > .mud-icon-root,
.app-section-contact .app-form-section__header > .mud-icon-root,
.app-section-work .app-form-section__header > .mud-icon-root,
.app-section-notes .app-form-section__header > .mud-icon-root {
    color: var(--cf-section-icon);
    background: color-mix(in srgb, var(--cf-section-icon) 12%, transparent);
}

.app-section-personal .app-field .mud-input-adornment,
.app-section-contact .app-field .mud-input-adornment,
.app-section-work .app-field .mud-input-adornment,
.app-section-notes .app-field .mud-input-adornment {
    color: var(--cf-section-icon);
}

/* Base uniforme para formularios existentes mientras adoptan los componentes App*. */
.mud-input-control {
    min-width: 0;
}

.mud-input-control .mud-input-label {
    color: var(--cf-text-secondary);
    font-size: var(--cf-label-font-size);
    font-weight: 600;
}

.mud-input-control .mud-input-root {
    min-height: var(--cf-control-height);
    color: var(--cf-text);
    border-radius: var(--cf-radius-control);
    transition: border-color var(--cf-transition), box-shadow var(--cf-transition), background-color var(--cf-transition);
}

.mud-input-control .mud-input-outlined-border {
    border-color: var(--cf-border);
    border-radius: var(--cf-radius-control);
}

.mud-input-control .mud-input-filled,
.mud-input-control .mud-input-underline {
    padding-inline: var(--cf-space-3);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-control);
    background: var(--cf-field-background);
}

.mud-input-control .mud-input-filled::before,
.mud-input-control .mud-input-filled::after,
.mud-input-control .mud-input-underline::before,
.mud-input-control .mud-input-underline::after {
    display: none;
}

.mud-input-control:hover .mud-input-outlined-border,
.mud-input-control:hover .mud-input-filled,
.mud-input-control:hover .mud-input-underline {
    border-color: var(--cf-border-hover);
}

.mud-input-control:focus-within .mud-input-outlined-border,
.mud-input-control:focus-within .mud-input-filled,
.mud-input-control:focus-within .mud-input-underline {
    border-color: var(--cf-focus);
    box-shadow: var(--cf-shadow-focus);
}

.mud-input-control .mud-input-adornment {
    color: var(--cf-primary);
    transition: color var(--cf-transition);
}

.mud-input-control:focus-within .mud-input-adornment {
    color: var(--cf-focus);
}

.mud-input-control .mud-input-error .mud-input-outlined-border,
.mud-input-control .mud-input-error.mud-input-filled,
.mud-input-control .mud-input-error.mud-input-underline {
    border-color: var(--cf-error);
}

.mud-input-control .mud-input-helper-text.mud-input-error {
    color: var(--cf-error);
    font-weight: 500;
}

.mud-dialog:not(.app-form-dialog) .mud-dialog-title {
    border-bottom: 1px solid var(--cf-border);
    background: linear-gradient(135deg, var(--cf-background), var(--cf-surface));
}

.mud-dialog:not(.app-form-dialog) .mud-dialog-actions {
    border-top: 1px solid var(--cf-border);
    background: var(--cf-background);
}

.form-control,
.form-select,
textarea.form-control {
    min-height: var(--cf-control-height);
    width: 100%;
    padding: 10px 13px;
    color: var(--cf-text);
    background-color: var(--cf-field-background);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-control);
    transition: border-color var(--cf-transition), box-shadow var(--cf-transition), background-color var(--cf-transition);
}

textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cf-focus);
    box-shadow: var(--cf-shadow-focus);
    outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    color: var(--cf-disabled-text);
    background: var(--cf-disabled-background);
}

.form-label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--cf-text);
    font-size: var(--cf-font-sm);
    font-weight: 600;
}

.validation-message,
.invalid-feedback {
    margin-top: 5px;
    color: var(--cf-error);
    font-size: var(--cf-font-xs);
    font-weight: 500;
}

.module-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-4);
}

.page-toolbar {
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow-card);
}

.page-toolbar__lead {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.page-toolbar__titles {
    min-width: 0;
}

.page-toolbar__titles .mud-typography-body2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 68ch;
}

.page-toolbar .module-page-actions {
    flex-wrap: nowrap;
    margin-left: auto;
}

.page-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background: color-mix(in srgb, var(--cf-primary) 5%, var(--cf-surface));
}

.page-toolbar__menu .mud-button-label,
.page-action-bar .mud-button-label {
    text-transform: none;
}

.module-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--cf-space-2);
}

.module-page-actions .mud-button-root {
    min-height: 44px;
}

.stat-card {
    border-radius: var(--cf-radius-card) !important;
    box-shadow: var(--cf-shadow-card) !important;
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}

.stat-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--cf-radius-control);
}

.stat-card-body {
    min-width: 0;
}

.stat-card-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-compact {
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 24px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.pa-1 { padding: 8px; }
.pa-2 { padding: 12px; }
.pa-3 { padding: 16px; }
.pa-4 { padding: 20px; }

.mud-table-cell {
    padding: 14px 16px;
}

.mud-table-head .mud-table-cell {
    padding: 12px 16px;
}

@media (min-width: 601px) {
    .mb-sm-1 { margin-bottom: 8px; }
    .mb-sm-2 { margin-bottom: 16px; }
    .mb-sm-3 { margin-bottom: 20px; }
    .mb-sm-4 { margin-bottom: 24px; }
    .mt-sm-1 { margin-top: 8px; }
    .mt-sm-2 { margin-top: 16px; }
    .pa-sm-1 { padding: 8px; }
    .pa-sm-2 { padding: 12px; }
    .pa-sm-3 { padding: 16px; }
    .pa-sm-4 { padding: 20px; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .module-page-actions {
        justify-content: flex-start;
    }
}

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 960px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1300;
        justify-content: space-around;
        align-items: stretch;
        background: var(--mud-palette-surface, var(--cf-surface)) !important;
        border-top: 1px solid var(--mud-palette-lines-default, var(--cf-border));
        color: var(--mud-palette-text-secondary, var(--cf-text-secondary));
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 10px color-mix(in srgb, var(--cf-text) 8%, transparent);
    }

    .mobile-bottom-nav__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        min-width: 44px;
        padding: 8px 4px;
        color: var(--cf-text-secondary);
        text-decoration: none;
        font-size: 11px;
        font-family: inherit;
        background: none;
        border: none;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        z-index: 1;
        pointer-events: auto;
        user-select: none;
    }

    .mobile-bottom-nav__item:active {
        color: var(--cf-primary);
        background: color-mix(in srgb, var(--cf-primary) 10%, transparent);
    }

    .mobile-bottom-nav__item .mud-icon-root {
        pointer-events: none;
    }

    .mobile-bottom-nav__item.active {
        color: var(--cf-primary);
    }

    .has-mobile-bottom-nav {
        /* M?s aire abajo: el men? ? de la ?ltima fila y el pad de firma no quedan bajo la barra. */
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    /* El men? de acciones (y cualquier desplegable, ej. un MudSelect) debe quedar por encima de
       la barra inferior (z-index 1300) Y por encima de un di?logo modal abierto si el popover se
       abri? desde un campo DENTRO de ese di?logo ? .mud-dialog-container se fuerza a 20000 m?s
       arriba en este archivo, y MudBlazor renderiza los popovers en un overlay-provider ra?z
       compartido, fuera del DOM del di?logo, as? que si el popover queda por debajo del di?logo
       se ve "invisible" pero sigue bloqueando los clics (mismo s?ntoma que el gotcha de
       .mud-overlay-dialog de m?s arriba). Reproducido real con Playwright: el desplegable de
       "Art?culo" en Nueva venta a cr?dito no abr?a en m?vil. */
    .mud-popover {
        z-index: 20001 !important;
    }
}

/* Para tablas que no pueden apilarse en m?vil (matrices con una columna por rol/categor?a, o
   reportes con muchas columnas): en vez de romper el layout de la p?gina, se scrollea solo la
   tabla hacia los lados. MudTable ya trae overflow-x:auto en su contenedor interno, pero sin un
   ancho acotado el contenedor puede terminar empujando la p?gina entera; esta clase lo fuerza. */
.app-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.app-table-scroll .mud-table-container {
    min-width: fit-content;
}

.notification-bell-panel {
    width: min(360px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
}

.notification-bell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-2);
    padding: var(--cf-space-2) var(--cf-space-4) var(--cf-space-1);
}

.notification-bell-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cf-space-2);
    width: 100%;
}

.notification-bell-delete {
    flex: none;
    margin: -6px -8px 0 0;
}

.notification-bell-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
}

.notification-bell-item--nueva .mud-typography-body2 {
    font-weight: 700;
}

.circular-metric-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cf-space-3);
    height: 100%;
    padding: var(--cf-space-4);
    border: 1px solid color-mix(in srgb, var(--cf-border) 76%, transparent);
    border-radius: var(--cf-radius-card);
    /* Preferir paleta Mud: si --cf-surface aún no sincronizó, la tarjeta no queda blanca con texto claro. */
    background: var(--mud-palette-surface, var(--cf-surface)) !important;
    color: var(--mud-palette-text-primary, var(--cf-text));
}

.circular-metric-card__header {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
}

.circular-metric-card__header .mud-typography {
    color: var(--mud-palette-text-primary, var(--cf-text)) !important;
}

.circular-metric-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: var(--circular-accent);
    background: color-mix(in srgb, var(--circular-accent) 12%, transparent);
    border-radius: var(--cf-radius-sm);
}

.circular-metric-card__chart {
    position: relative;
    display: grid;
    place-items: center;
    width: min(150px, 72%);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--circular-accent) var(--circular-value), color-mix(in srgb, var(--cf-border) 55%, transparent) 0);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-border) 40%, transparent);
}

.circular-metric-card__center {
    display: grid;
    place-items: center;
    width: 72%;
    aspect-ratio: 1;
    padding: var(--cf-space-2);
    text-align: center;
    border-radius: 50%;
    background: var(--mud-palette-surface, var(--cf-surface)) !important;
    color: var(--mud-palette-text-primary, var(--cf-text));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cf-text) 8%, transparent);
}

.circular-metric-card__center .mud-typography {
    color: var(--mud-palette-text-primary, var(--cf-text)) !important;
}

.circular-metric-card__center .mud-typography-caption {
    color: var(--mud-palette-text-secondary, var(--cf-text-secondary)) !important;
}

.circular-metric-card__center .mud-typography-h6 {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.9rem, 2vw, 1.15rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-visual-panel {
    padding: var(--cf-space-5);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background: linear-gradient(145deg, var(--cf-surface), var(--cf-background));
    box-shadow: var(--cf-shadow-card);
}

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--cf-space-2);
    padding-top: var(--cf-space-3);
    width: 100%;
}

.app-form-actions .mud-button-root {
    min-height: var(--cf-btn-height);
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--cf-radius-control);
    text-transform: none;
    letter-spacing: 0.01em;
    transition:
        background-color var(--cf-transition-fast),
        color var(--cf-transition-fast),
        border-color var(--cf-transition-fast),
        box-shadow var(--cf-transition-fast),
        transform 120ms ease;
}

.app-form-actions .mud-button-filled.mud-button-filled-primary {
    min-height: var(--cf-btn-height-primary);
}

.app-form-actions .mud-button-root:active:not(:disabled) {
    transform: scale(0.98);
}

.mud-input-control .mud-input-label {
    color: var(--cf-text-secondary);
    font-size: var(--cf-label-font-size);
    font-weight: 600;
    transition: color var(--cf-transition-fast);
}

.mud-input-control:focus-within .mud-input-label {
    color: var(--cf-focus);
}

.mud-input-control .mud-input-adornment .mud-icon-root {
    font-size: var(--cf-icon-size) !important;
    width: var(--cf-icon-size);
    height: var(--cf-icon-size);
    pointer-events: none;
}

/* Tablas un poco m?s densas (filas corporativas, sin tocar l?gica). */
.mud-table .mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mud-table .mud-table-head .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.8125rem;
    font-weight: 650;
}

/* Texto de botones en oración. El alto lo marcan las acciones de página y de
   formulario, para no aplastar menús, filas de tabla ni el punto de venta. */
.mud-button-root:not(.mud-icon-button) {
    letter-spacing: 0.01em;
    text-transform: none;
}

.firma-pad {
    padding: 12px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background: var(--cf-surface);
}

.firma-pad__lienzo {
    border: 1px dashed var(--cf-border-hover);
    border-radius: var(--cf-radius-control);
    background: #fff;
    touch-action: none;
    overflow: hidden;
}

.firma-pad__lienzo canvas {
    width: 100%;
    height: 140px;
    display: block;
}

.firma-pad__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.firma-pad__imagen {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-control);
    background: #fff;
}

.contrato-firmas {
    margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .app-field .mud-input-outlined-border,
    .app-form-actions .mud-button-root,
    .mud-input-control .mud-input-root {
        transition: none !important;
    }

    .app-form-actions .mud-button-root:active:not(:disabled) {
        transform: none;
    }
}

@media (max-width: 600px) {
    .app-form-actions {
        flex-direction: column-reverse;
    }

    .app-form-actions .mud-button-root {
        width: 100%;
        min-height: 44px;
    }

    .app-form-section {
        padding: 12px;
    }
}

.ruta-cobro-filtros {
    border-radius: var(--cf-radius-card);
    background: linear-gradient(145deg, var(--cf-surface), var(--cf-background));
}

.ruta-cobro-grupo {
    overflow: hidden;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
}

.ruta-cobro-grupo__encabezado,
.ruta-cobro-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-4);
}

.ruta-cobro-grupo__encabezado {
    padding: var(--cf-space-4);
    border-bottom: 1px solid var(--cf-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--cf-focus) 8%, var(--cf-surface)), var(--cf-surface));
}

.ruta-cobro-cuadre {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--cf-space-5);
}

.ruta-cobro-cuadre span {
    display: grid;
    gap: 2px;
    min-width: 92px;
}

.ruta-cobro-cuadre small {
    color: var(--cf-text-secondary);
    font-size: var(--cf-font-xs);
}

.ruta-cobro-cuadre strong {
    color: var(--cf-text);
    font-size: var(--cf-font-base);
}

.ruta-cobro-cuadre__cobrado {
    color: var(--cf-success) !important;
}

.ruta-cobro-tabla .ruta-cobro-fila {
    border-left: 4px solid transparent;
}

.ruta-cobro-tabla .ruta-cobro-fila--pagada {
    border-left-color: var(--cf-success);
}

.ruta-cobro-tabla .ruta-cobro-fila--hoy,
.ruta-cobro-tabla .ruta-cobro-fila--parcial {
    border-left-color: var(--cf-warning);
}

.ruta-cobro-tabla .ruta-cobro-fila--vencida {
    border-left-color: var(--cf-error);
}

.ruta-cobro-total {
    position: sticky;
    bottom: var(--cf-space-3);
    z-index: 2;
    border-radius: var(--cf-radius-card);
    background: color-mix(in srgb, var(--cf-surface) 94%, transparent);
    box-shadow: var(--cf-shadow-card);
    backdrop-filter: blur(10px);
}

/* Banner de versi?n nueva: NO bloquea la pantalla (el dialog modal qued? descartado). */
.sigepef-update-dialog {
    display: none !important;
}

.sigepef-update-dialog::backdrop {
    display: none !important;
}

.sigepef-update-dialog__caja {
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: var(--mud-palette-primary, #1d4ed8);
    color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.sigepef-update-dialog__texto {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.sigepef-update-dialog__acciones {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.sigepef-update-dialog__actualizar {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    min-width: 8rem;
}

.sigepef-update-dialog__actualizar:active {
    transform: scale(0.98);
}

/* Banner de actualizaci?n: visible y tocable en m?vil (no debajo del notch/AppBar). */
.sigepef-update-banner {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
    padding: 0.65rem 0.85rem;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0));
    background: #1d4ed8;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.3;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
    pointer-events: auto;
}

/* Escritorio / tablet: arriba, debajo del notch. */
.sigepef-update-banner {
    top: env(safe-area-inset-top, 0);
}

/* M?vil: pegado encima del men? inferior para que se vea y se toque seguro. */
@media (max-width: 960px) {
    .sigepef-update-banner {
        top: auto;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        border-radius: 12px 12px 0 0;
        min-height: 52px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    body.sigepef-tiene-update-banner {
        padding-top: 0;
        padding-bottom: calc(56px + 56px + env(safe-area-inset-bottom, 0px));
    }

    body.sigepef-tiene-update-banner .sigepef-update-banner {
        z-index: 1400;
    }

    /* No subir el z-index del nav: tapa AppActionsMenu / snackbars / selects. */
    body.sigepef-tiene-update-banner .mobile-bottom-nav {
        z-index: 1300;
    }

    .mud-snackbar-container {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

.sigepef-update-banner button {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #1d4ed8;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
}

.sigepef-update-banner button:hover,
.sigepef-update-banner button:active {
    background: #eff6ff;
}

.sigepef-update-banner__cerrar {
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    color: #fff;
}

.sigepef-update-banner__texto {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
}

.sigepef-update-banner__actualizar {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #1d4ed8;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    min-height: 40px;
}

/* Toast breve al recuperar conexi?n (no bloquea toques). */
.sigepef-resume-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 2147482900;
    max-width: min(92vw, 22rem);
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 8px 24px color-mix(in srgb, #000 25%, transparent);
    pointer-events: none;
}

.sigepef-resume-toast--ok {
    background: #15803d;
}

.sigepef-resume-toast--warn {
    background: #b45309;
}

@media (min-width: 961px) {
    .sigepef-resume-toast {
        bottom: 1.5rem;
    }
}

/* Tablas MudBlazor en móvil: tarjetas por fila.
   IMPORTANTE — bug real encontrado el 2026-09-30, probando en un teléfono real: estas reglas
   apuntaban SOLO a ".mud-xs-table", la clase que MudTable genera cuando Breakpoint="Breakpoint.Xs".
   Ninguna página del proyecto usa Breakpoint.Xs — las 55 tablas responsivas de todo el sistema
   usan Breakpoint="Breakpoint.Sm" (clase ".mud-sm-table"), así que este diseño de tarjetas NUNCA
   se había aplicado en ningún lado desde que se escribió (sesión del 15 de septiembre): todo el
   sistema venía mostrando el diseño crudo por defecto de MudBlazor en móvil. Con :is(...) alcanza
   cualquiera de las dos clases, sin depender de qué Breakpoint tenga cada página.
   Usa tokens (--cf-* / --mud-palette-*) para que modo noche no deje azul/blanco fijo. */
/* Tarjetas solo en teléfono. En pantallas más anchas la clase .mud-sm-table sigue
   presente, pero la lista debe verse como tabla: si estas reglas no van en un
   media query, el encabezado queda arriba y cada fila se parte en una tarjeta. */
@media (max-width: 600px) {
    :is(.mud-xs-table, .mud-sm-table).mud-table,
    :is(.mud-xs-table, .mud-sm-table) .mud-table-container,
    :is(.mud-xs-table, .mud-sm-table) .mud-table-root,
    :is(.mud-xs-table, .mud-sm-table) .mud-table-body {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    :is(.mud-xs-table, .mud-sm-table) .mud-table-head {
        display: none !important;
    }

    :is(.mud-xs-table, .mud-sm-table) .mud-table-body .mud-table-row {
        display: block !important;
        position: relative;
        background: var(--cf-surface) !important;
        border: 1px solid var(--cf-border) !important;
        border-radius: 14px !important;
        margin: 0 0 10px !important;
        overflow: hidden;
        box-shadow: var(--cf-shadow-card) !important;
        padding: 10px 12px 6px !important;
        color: var(--cf-text);
    }

    :is(.mud-xs-table, .mud-sm-table) .mud-table-body .mud-table-row:last-child {
        margin-bottom: 0 !important;
    }

    :is(.mud-xs-table, .mud-sm-table) .mud-table-body .mud-table-row .mud-table-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1px;
        padding: 6px 36px 6px 0 !important;
        text-align: start !important;
        border: none !important;
        background: transparent !important;
        color: var(--cf-text) !important;
        font-weight: 600;
    }

    :is(.mud-xs-table, .mud-sm-table) .mud-table-body .mud-table-row .mud-table-cell[data-label=""] {
        position: absolute;
        top: 8px;
        right: 4px;
        width: auto;
        padding: 0 !important;
    }

    :is(.mud-xs-table, .mud-sm-table) .mud-table-cell:before {
        font-weight: 600 !important;
        font-size: 0.68rem !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--cf-text-secondary) !important;
    }
}

/* Formato est?ndar de datos (etiqueta izq / valor der) ? mismo lenguaje que las tablas m?vil. */
.ver-saldo-dialog__saldo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin-bottom: 12px;
    padding: 14px 12px;
    background: var(--cf-background);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-control);
}

.ver-saldo-dialog__monto {
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
}

@media (max-width: 600px) {
    .ver-saldo-dialog.mud-dialog {
        margin: 8px;
        max-height: calc(100dvh - 16px);
    }

    .ver-saldo-dialog .mud-dialog-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ver-saldo-dialog__saldo {
        padding: 12px 10px;
        margin-bottom: 10px;
    }

    .ver-saldo-dialog .cf-detail-list {
        padding: 2px 10px;
        border-radius: 10px;
        box-shadow: none;
    }

    .ver-saldo-dialog .cf-detail-list > div {
        padding: 10px 2px;
    }

    .ver-saldo-dialog .app-form-actions {
        flex-wrap: nowrap;
    }

    .ver-saldo-dialog .app-form-actions .mud-button-root {
        flex: 1 1 0;
        min-width: 0;
    }
}

.cf-detail-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 14px;
    padding: 4px 14px;
    box-shadow: var(--cf-shadow-card);
}

.cf-detail-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 12px;
    padding: 12px 2px;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--cf-primary) 16%, transparent) !important;
    border-radius: 0 !important;
    min-width: 0;
}

.cf-detail-list > div:last-child {
    border-bottom: none !important;
}

/* Etiqueta izquierda (secundaria) / valor derecha (énfasis) — igual en todos los módulos. */
.cf-detail-list > div > *:first-child,
.cf-detail-list > div > .mud-typography:first-child {
    color: var(--mud-palette-text-secondary, var(--cf-text-secondary)) !important;
    font-weight: 500 !important;
}

.cf-detail-list > div > *:last-child:not(:first-child),
.cf-detail-list > div > .mud-typography:last-child:not(:first-child) {
    color: var(--mud-palette-text-primary, var(--cf-text)) !important;
    font-weight: 700 !important;
    text-align: right;
}

.cf-detail-list > div > * {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Observaciones u otros bloques de texto largo bajo la lista */
.cf-detail-notes {
    padding: 10px 2px;
    border-top: 1px solid rgba(29, 78, 216, 0.12);
    border-bottom: 1px solid rgba(29, 78, 216, 0.12);
    width: 100%;
    display: block !important;
}

/* Tablas en móvil sin Breakpoint (ni .mud-xs-table ni .mud-sm-table): cebra con tokens
   (Rutas de cobro, listados…). Excluye ambas clases para no pisar el diseño de tarjetas de arriba. */
@media (max-width: 960px) {
    .mud-table:not(.mud-xs-table):not(.mud-sm-table) .mud-table-body .mud-table-row:nth-child(even) > .mud-table-cell {
        background-color: color-mix(in srgb, var(--cf-text) 3%, var(--cf-surface)) !important;
    }
}

@media (max-width: 600px) {
    .app-main-container {
        padding: 12px 16px 16px !important;
    }

    .module-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .module-page-header h1,
    .module-page-header .mud-typography-h3 {
        font-size: 1.25rem !important;
    }

    .module-page-actions {
        gap: 8px !important;
    }

    .module-page-actions .mud-button-root {
        flex: 1 1 auto;
        font-size: 0.85rem;
        min-height: 40px;
        padding: 8px 12px !important;
    }

    .app-form-section {
        padding: 12px 14px;
        margin-top: 12px;
    }

    .app-form-section + .app-form-section {
        margin-top: 12px;
    }

    .app-field {
        margin-bottom: 12px;
    }

    /* Cada campo del formulario como tarjeta en móvil — tokens para modo noche. */
    .app-form-section__content .mud-grid > .mud-grid-item,
    .app-form-section__content > .app-field,
    .app-form-dialog .mud-dialog-content > .app-field,
    .app-form-dialog .mud-dialog-content > .mud-select,
    .solicitud-pantalla-completa .mud-grid > .mud-grid-item {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0 !important;
        margin-bottom: 8px;
        box-shadow: none;
    }

    .app-form-section__content .mud-grid {
        margin: 0 !important;
    }

    .app-form-section__content .mud-grid > .mud-grid-item > .app-field,
    .app-form-section__content .mud-grid > .mud-grid-item > .mud-input-control,
    .app-form-section__content .mud-grid > .mud-grid-item > .mud-select {
        margin-bottom: 0 !important;
    }

    .app-field .mud-input-root {
        min-height: 40px;
    }

    .app-field .mud-input-slot {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 0.875rem;
    }

    .app-form-dialog .mud-dialog-title {
        padding: 16px;
    }

    .app-form-dialog .mud-dialog-content {
        padding: 16px;
    }

    .app-form-dialog .mud-dialog-actions {
        padding: 12px 16px;
        gap: 8px;
    }

    .app-form-dialog__title {
        gap: 12px;
    }

    .app-form-dialog__title > .mud-icon-root {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .app-form-actions {
        position: sticky;
        bottom: 0;
        padding: 10px 0;
        background: var(--cf-surface);
        gap: 8px;
    }

    .app-form-actions .mud-button-root {
        min-height: 44px;
        font-size: 0.875rem;
        padding: 8px 12px !important;
    }

    .mud-table-cell {
        padding: 10px 8px !important;
        font-size: 0.875rem;
    }

    .mud-table-head .mud-table-cell {
        font-size: 0.7rem;
        padding: 8px 6px !important;
        font-weight: 600;
    }

    .mud-table-row:hover {
        background-color: transparent;
    }

    .mud-dialog {
        max-width: 95vw !important;
    }

    /* Padding de tarjetas en móvil — NO en papeles de desplegable (Select/Menú):
       el padding global hacía que en Facturación las opciones del select no se vieran bien. */
    .mud-paper {
        padding: 12px !important;
    }

    .mud-popover .mud-paper,
    .mud-menu .mud-paper {
        padding: 4px 0 !important;
    }

    .mud-popover .mud-list {
        max-height: min(50vh, 320px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .mud-popover .mud-list-item {
        min-height: 44px;
        color: var(--cf-text) !important;
    }

    .mud-text-h1 { font-size: 1.5rem !important; }
    .mud-text-h2 { font-size: 1.3rem !important; }
    .mud-text-h3 { font-size: 1.15rem !important; }
    .mud-text-h4 { font-size: 1rem !important; }
    .mud-text-h5 { font-size: 0.95rem !important; }
    .mud-text-h6 { font-size: 0.9rem !important; }
    .mud-text-body1 { font-size: 0.875rem !important; }
    .mud-text-body2 { font-size: 0.8rem !important; }

    .ruta-cobro-grupo__encabezado,
    .ruta-cobro-total {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .ruta-cobro-cuadre {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 10px;
    }

    .ruta-cobro-cuadre span {
        min-width: auto;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-card-icon {
        width: 36px;
        height: 36px;
    }

    .icon-circle {
        width: 44px;
        height: 44px;
    }

    .mud-icon-root {
        font-size: 20px !important;
    }

    /* Volver siempre visible (no tapado ni demasiado peque?o). */
    .sigepef-btn-volver .mud-icon-root,
    .app-main-container > .mud-icon-button .mud-icon-root {
        font-size: 26px !important;
    }

    .sigepef-btn-volver,
    .app-main-container > .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .mud-nav-link {
        min-height: 40px;
        padding-inline-start: 0.75rem !important;
    }

    .notification-bell-panel {
        width: min(320px, 85vw);
    }
}

@media (max-width: 480px) {
    .app-main-container {
        padding: 10px 12px 12px !important;
    }

    .module-page-header h1 {
        font-size: 1.1rem !important;
    }

    .app-form-section {
        padding: 10px 12px;
        margin-top: 10px;
    }

    .app-field {
        margin-bottom: 10px;
    }

    .mud-button-root {
        font-size: 0.8rem !important;
    }

    .mud-input-control .mud-input-root,
    .app-field .mud-input-root {
        min-height: 36px;
    }

    .mud-table-cell {
        padding: 8px 4px !important;
        font-size: 0.8rem;
    }

    .mud-table-head .mud-table-cell {
        font-size: 0.65rem;
        padding: 6px 4px !important;
    }
}

/* Formulario de solicitud a pantalla completa (sobre layout + men? inferior). */
.solicitud-pantalla-completa {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background, #fff);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.solicitud-pantalla-completa__barra {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-height: 52px;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: #1d4ed8;
    color: #fff;
}

.solicitud-pantalla-completa__barra .mud-icon-button,
.solicitud-pantalla-completa__barra .mud-button-root,
.solicitud-pantalla-completa__barra .mud-icon-root {
    color: #ffffff !important;
}

.solicitud-pantalla-completa__titulo {
    margin: 0 !important;
    font-weight: 600;
    color: #ffffff !important;
}

.solicitud-pantalla-completa__cuerpo {
    flex: 1 1 auto;
    min-height: 0; /* sin esto, en iPhone el cuerpo no scrollea y parece vac?o */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 24px;
    background: var(--mud-palette-background, #fff);
}

.solicitud-pantalla-completa__cuerpo .app-form-dialog {
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.solicitudes-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.solicitudes-lista__item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 12px 14px !important;
    text-align: left !important;
    text-transform: none;
    border: 1px solid var(--cf-border);
    border-radius: 14px;
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow-card);
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.solicitudes-lista__item:nth-child(even) {
    background: color-mix(in srgb, var(--cf-success) 12%, var(--mud-palette-surface, var(--cf-surface)));
    border-color: color-mix(in srgb, var(--cf-success) 40%, var(--cf-border));
    border-left-color: var(--cf-success);
}

.solicitudes-lista__item:active {
    filter: brightness(0.97);
}

.solicitudes-lista__icono {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    color: var(--cf-primary) !important;
}

.solicitudes-lista__item:nth-child(even) .solicitudes-lista__icono {
    color: var(--cf-success) !important;
}

.solicitudes-lista__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.solicitudes-lista__titulo {
    display: block;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mud-palette-text-primary, var(--cf-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.solicitudes-lista__desc {
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--mud-palette-text-secondary, var(--cf-text-secondary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.solicitudes-dialog .mud-dialog-content {
    padding-top: 0.5rem;
}

/* M?vil: aprovechar todo el ancho/alto (PWA standalone o navegador). */
@media (max-width: 600px) {
    html, body {
        height: 100%;
        height: 100dvh;
        overscroll-behavior-y: none;
    }

    .mud-layout {
        min-height: 100dvh;
    }

    .app-main-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    .mud-appbar {
        padding-top: env(safe-area-inset-top, 0);
    }

    /* La AppBar crece con el notch; sin esto el contenido (y el bot?n Volver) queda debajo. */
    .mud-main-content {
        padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }

    .app-main-container > .mud-icon-button,
    .app-main-container > .module-page-header,
    .app-main-container > a.mud-button-root,
    .app-main-container > button.mud-button-root {
        position: relative;
        z-index: 1;
    }
}

/* Instalada en inicio (sin barra del navegador): usar todo el alto. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    html, body, .mud-layout {
        min-height: 100dvh;
        height: 100dvh;
    }

    .mud-appbar {
        padding-top: env(safe-area-inset-top, 0);
    }

    .mud-main-content {
        padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }

    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

body.sigepef-tiene-update-banner {
    padding-top: calc(48px + env(safe-area-inset-top, 0px));
}

.sigepef-instalar-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cf-primary) 12%, var(--mud-palette-surface, var(--cf-surface)));
    border: 1px solid color-mix(in srgb, var(--cf-primary) 40%, var(--cf-border));
    color: var(--mud-palette-text-primary, var(--cf-text));
    font-size: 0.85rem;
    line-height: 1.35;
}

.sigepef-instalar-banner__texto {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sigepef-instalar-banner__texto em {
    font-style: normal;
    font-weight: 700;
}

.sigepef-instalar-banner__cerrar {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

@media (min-width: 961px) {
    .sigepef-instalar-banner {
        display: none;
    }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .sigepef-instalar-banner {
        display: none !important;
    }
}


/* === Adaptacion global laptop / pantallas bajas (zoom 100%, ~13-15", 1366x768) ===
   Botones Guardar/Confirmar cortados, listas minusculas, dialogos mas altos que el viewport.
   Compacta chrome y fija pies de formulario / acciones de dialogo. */
@media (min-width: 601px) and (max-height: 900px) {
    :root {
        --cf-control-height: 38px;
        --cf-btn-height: 36px;
        --cf-btn-height-primary: 38px;
        --cf-field-gap: 8px;
        --cf-space-section: 10px;
    }

    .app-main-container {
        padding: 12px 16px 16px !important;
    }

    .module-page-header {
        gap: 8px;
        margin-bottom: 8px !important;
    }

    .module-page-header h1,
    .module-page-header .mud-typography-h3,
    .module-page-header .mud-typography-h4,
    .module-page-header .mud-typography-h5 {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }

    .module-page-actions .mud-button-root {
        min-height: 36px !important;
        padding: 0 12px !important;
        font-size: 0.8125rem !important;
    }

    .app-form-section {
        padding: 10px 12px;
        gap: 8px;
    }

    .app-form-section + .app-form-section {
        margin-top: 8px;
    }

    .app-form-section__header > .mud-icon-root,
    .app-form-section-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        padding: 4px;
    }

    .app-field {
        margin-bottom: 8px !important;
    }

    .mud-table-cell {
        padding: 8px 10px !important;
    }

    .mud-table-head .mud-table-cell {
        padding: 6px 10px !important;
    }

    .stat-card-icon,
    .icon-circle {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px;
    }

    .mb-2 { margin-bottom: 10px; }
    .mb-3 { margin-bottom: 12px; }
    .mb-4 { margin-bottom: 14px; }
    .pa-3 { padding: 10px; }
    .pa-4 { padding: 12px; }

    .app-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 6;
        padding: 8px 4px;
        margin-top: 4px;
        background: var(--mud-palette-background, var(--cf-background));
        box-shadow: 0 -6px 14px color-mix(in srgb, var(--cf-background) 75%, transparent);
    }

    .mud-dialog {
        max-height: calc(100dvh - 20px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .mud-dialog .mud-dialog-title {
        flex: 0 0 auto;
    }

    .mud-dialog .mud-dialog-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mud-dialog .mud-dialog-actions,
    .app-form-dialog .mud-dialog-actions {
        flex: 0 0 auto !important;
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--mud-palette-surface, var(--cf-surface));
        box-shadow: 0 -4px 10px color-mix(in srgb, var(--cf-background) 70%, transparent);
    }

    .app-form-dialog .mud-dialog-title {
        padding: 8px 12px;
    }

    .app-form-dialog .mud-dialog-content {
        padding: 8px 12px 12px;
    }

    .app-form-dialog .mud-dialog-actions {
        padding: 8px 12px;
    }

    .app-drawer-credito {
        padding: 0.5rem 0.5rem 0.65rem;
        gap: 1px;
    }

    .mud-drawer .mud-nav-link {
        min-height: 36px;
    }

    .notification-bell-panel {
        max-height: min(60vh, 420px);
    }
}

@media (min-width: 961px) and (max-width: 1400px) {
    .app-main-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.mud-dialog {
    max-height: calc(100dvh - 32px);
}


/* PanelFlotante.razor ? ventana flotante arrastrable/redimensionable (Facturaci?n).
   z-index 1180: por encima del contenido de la p?gina, pero POR DEBAJO del drawer MudBlazor
   (~1200) y de la barra inferior m?vil (1300). Con 1350 (Etapa 19) el panel tapaba NavMenu y el
   men? inferior: al abrir Facturaci?n no se pod?a ir a Devoluciones/Cotizaciones/etc. sin
   "cerrar" la ventana. Sigue MUY por debajo de .mud-dialog-container (20000) y del popover
   default (~1451) ? NUNCA tocar `.mud-popover` con z-index fijo global (romp?a todos los
   desplegables dentro de di?logos; ver Etapa 17/19). */

/* Encabezado de Facturaci?n (Volver + t?tulo + men? "?" + alertas) ? FUERA del panel a prop?sito.
   z-index bajo (no 1460): un valor alto tapaba el popover del men? "?" (~1451) y hac?a que
   opciones como Devoluciones "no hicieran nada" (clic absorbido / men? detr?s). El panel se
   posiciona debajo v?a --vf-top-seguro (sigepefUbicarDebajoDe). */
/* Ventana independiente de Facturaci?n (FacturacionLayout): ocupa todo el viewport. */
/* Facturación a pantalla completa: nada scrollea la ventana ni el body. */
html:has(.facturacion-ventana),
body:has(.facturacion-ventana) {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

.facturacion-ventana {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    background: var(--cf-background);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.facturacion-ventana__barra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    /* safe-area: en iPhone/PWA el notch tapa el botón Cerrar si no hay padding superior. */
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    background: var(--cf-primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: calc(48px + env(safe-area-inset-top, 0px));
}

.facturacion-ventana__barra .mud-typography,
.facturacion-ventana__barra .mud-icon-root {
    color: #fff;
}

.facturacion-ventana__cerrar {
    color: #fff !important;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    text-transform: none;
}

.facturacion-ventana__cerrar .mud-button-label,
.facturacion-ventana__cerrar .mud-icon-root {
    color: #fff !important;
}

.facturacion-ventana__titulo {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.2;
}

.facturacion-ventana__titulo-bloque {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.facturacion-ventana__titulo-bloque .facturacion-ventana__titulo {
    flex: none;
}

.facturacion-ventana__meta {
    opacity: 0.9;
    color: #fff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Usuario en negrita, fecha nunca le come espacio: antes "Nombre · fecha hora" era una sola
   cadena con ellipsis — en pantallas angostas (con "Ver recibo" ocupando su propio ancho fijo)
   el nombre quedaba cortado casi entero y el usuario "no se veía", reportado probando en un
   teléfono real. */
.facturacion-ventana__meta-usuario {
    font-weight: 600;
}

@media (max-width: 600px) {
    .facturacion-ventana__meta-fecha {
        display: none;
    }
}

.facturacion-ventana__ver-recibo {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    text-transform: none;
    flex: 0 0 auto;
}

.facturacion-ventana__tema {
    color: #fff !important;
    flex: 0 0 auto;
}

.facturacion-ventana__tema .mud-icon-root {
    color: #fff !important;
}

.facturacion-ventana__ver-recibo .mud-button-label,
.facturacion-ventana__ver-recibo .mud-icon-root {
    color: #fff !important;
}

.facturacion-ventana__barra .mud-icon-button,
.facturacion-ventana__barra .mud-icon-button .mud-icon-root {
    color: #fff !important;
}

.facturacion-ventana__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px 16px;
    overflow: hidden !important; /* el scroll NO va aquí (fuera del carrito) */
    isolation: auto;
}

/* Ventana de Facturación: popovers abiertos por encima del diálogo (contenedor en 20000).
   NUNCA tocar z-index de .mud-overlay-dialog ni bajar .mud-dialog: MudBlazor ya pone
   diálogo = base+2 y overlay = base+1. Invertir eso (visto en 20260919.1649) tapa el
   formulario de cola/devoluciones y deja Facturación “congelada”. */
body:has(.facturacion-ventana) .mud-popover.mud-popover-open {
    z-index: 20060 !important;
}

body:has(.facturacion-ventana) .mud-popover:not(.mud-popover-open) {
    pointer-events: none !important;
}

/* Tras cerrar un diálogo: si queda un scrim huérfano, que no coma clics.
   Solo pointer-events — sin visibility:hidden (rompe el teardown/LockScroll de Mud). */
body:has(.facturacion-ventana):not(:has(.mud-dialog-container .mud-dialog)) .mud-overlay.mud-overlay-dialog {
    pointer-events: none !important;
}

/* Layout Facturación: buscar izq. | carrito+cobro derecha (como formulario grande).
   El ÚNICO scroll vertical es la tabla de productos del carrito. */
.facturacion-pos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 1600px;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
}

.facturacion-pos__principal {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    align-content: stretch;
    align-items: stretch;
}

.facturacion-pos__principal > .mud-grid-item,
.facturacion-pos__col-buscar,
.facturacion-pos__col-carrito {
    min-height: 0;
    height: 100%;
    display: flex;
}

.facturacion-pos__contexto {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    background: var(--cf-surface);
    border: 1.5px solid #93c5fd;
    border-left: 5px solid var(--cf-primary);
    border-radius: var(--cf-radius-control);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--cf-primary) 8%, transparent),
        0 0 0 1px color-mix(in srgb, #ea580c 18%, transparent);
}

.facturacion-pos__tipo .mud-button-root {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    text-transform: none;
    font-size: 0.75rem !important;
    font-weight: 600;
}

.facturacion-pos__contexto-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    width: 100%;
}

.facturacion-pos__contexto-acciones .mud-button-root {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
    text-transform: none;
}

/* Caja | Cliente | Almacén siempre en una sola fila en escritorio/tablet. */
.facturacion-pos__contexto-campos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.facturacion-pos__contexto-campos:has(> :only-child),
.facturacion-pos__contexto-campos:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.facturacion-pos__campo {
    min-width: 0;
    margin-bottom: 0 !important;
}

.facturacion-pos__campo--caja .mud-input-outlined-border {
    border-color: #60a5fa !important;
}

.facturacion-pos__campo--cliente.app-field-with-action {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

.facturacion-pos__campo--cliente.app-field-with-action > .mud-input-control,
.facturacion-pos__campo--cliente.app-field-with-action > .app-field {
    flex: 1 1 auto;
    min-width: 0;
}

.facturacion-pos__campo--cliente .mud-input-outlined-border {
    border-color: #34d399 !important;
}

.facturacion-pos__campo--almacen .mud-input-outlined-border {
    border-color: #fb923c !important;
}

.facturacion-pos__campo--rnc {
    min-width: 180px;
    max-width: 240px;
    flex: 1 1 180px;
}

.facturacion-pos__campo--rnc .mud-input-outlined-border {
    border-color: #c4b5fd !important;
}

.facturacion-pos__seccion {
    height: 100%;
    width: 100%;
    margin-top: 0 !important;
    min-height: 0;
}

.facturacion-pos__seccion--buscar {
    height: 100% !important;
    align-self: stretch;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.facturacion-pos__seccion--buscar > .app-form-section__header {
    flex: 0 0 auto;
}

.facturacion-pos__seccion--buscar > .app-form-section__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.facturacion-pos__col-buscar {
    align-items: stretch;
}

/* Catálogo izquierdo (tipos + categorías + lista) */
.pos-catalogo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.pos-catalogo__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.pos-catalogo__tipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    min-width: 64px;
    flex: 1 1 64px;
    max-width: 88px;
    padding: 6px 2px;
    border: 1.5px solid color-mix(in srgb, var(--cf-primary) 40%, var(--cf-border));
    border-radius: 10px;
    background: var(--mud-palette-surface, var(--cf-surface));
    color: var(--cf-primary);
    cursor: pointer;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

/* Color por función del tipo de registro */
.pos-catalogo__tipo--todos {
    border-color: #cbd5e1;
    color: #475569;
}
.pos-catalogo__tipo--todos .mud-icon-root { color: #64748b !important; }

.pos-catalogo__tipo--producto {
    border-color: #93c5fd;
    color: #1e40af;
}
.pos-catalogo__tipo--producto .mud-icon-root { color: #2563eb !important; }

.pos-catalogo__tipo--articulo {
    border-color: #86efac;
    color: #166534;
}
.pos-catalogo__tipo--articulo .mud-icon-root { color: #16a34a !important; }

.pos-catalogo__tipo--repuesto {
    border-color: #fcd34d;
    color: #92400e;
}
.pos-catalogo__tipo--repuesto .mud-icon-root { color: #d97706 !important; }

.pos-catalogo__tipo--servicio {
    border-color: #c4b5fd;
    color: #5b21b6;
}
.pos-catalogo__tipo--servicio .mud-icon-root,
.pos-catalogo__ico-servicio.mud-icon-root { color: #7c3aed !important; }

.pos-catalogo__tipo:hover {
    filter: brightness(0.98);
}

.pos-catalogo__tipo--activo {
    background: var(--cf-primary);
    border-color: var(--cf-primary);
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--cf-primary) 35%, transparent);
}

.pos-catalogo__tipo--activo.pos-catalogo__tipo--articulo {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 2px 6px color-mix(in srgb, #16a34a 35%, transparent);
}

.pos-catalogo__tipo--activo.pos-catalogo__tipo--repuesto {
    background: #d97706;
    border-color: #d97706;
    box-shadow: 0 2px 6px color-mix(in srgb, #d97706 35%, transparent);
}

.pos-catalogo__tipo--activo.pos-catalogo__tipo--servicio {
    background: #7c3aed;
    border-color: #7c3aed;
    box-shadow: 0 2px 6px color-mix(in srgb, #7c3aed 35%, transparent);
}

.pos-catalogo__tipo--activo.pos-catalogo__tipo--todos {
    background: #64748b;
    border-color: #64748b;
    box-shadow: 0 2px 6px color-mix(in srgb, #64748b 35%, transparent);
}

.pos-catalogo__tipo--activo .mud-icon-root {
    color: #fff !important;
}

.pos-catalogo__buscar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.pos-catalogo__buscar-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--cf-primary) !important;
    pointer-events: none;
    font-size: 1.15rem !important;
}

.pos-catalogo__buscar {
    width: 100%;
}

.pos-catalogo__buscar .mud-input-slot,
.pos-catalogo__buscar input {
    padding-left: 2rem !important;
}

.pos-catalogo__cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 auto;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cf-border-hover) var(--cf-background);
}

.pos-catalogo__cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 54px;
    padding: 6px 2px;
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    background: var(--mud-palette-surface, var(--cf-surface));
    color: var(--cf-text-secondary);
    cursor: pointer;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
}

.pos-catalogo__cat span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.pos-catalogo__cat:hover {
    border-color: #93c5fd;
    color: var(--cf-primary);
}

.pos-catalogo__cat--activo {
    background: var(--cf-primary);
    border-color: var(--cf-primary);
    color: #fff;
}

.pos-catalogo__cat--activo .mud-icon-root {
    color: #fff !important;
}

.pos-catalogo__lista {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    background: var(--mud-palette-surface, var(--cf-surface));
    scrollbar-width: thin;
    scrollbar-color: var(--cf-border-hover) var(--cf-background);
}

.pos-catalogo__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cf-border);
    cursor: pointer;
    color: var(--mud-palette-text-primary, var(--cf-text));
}

.pos-catalogo__acciones {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.pos-catalogo__info.mud-icon-button {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
}

.pos-catalogo__add.mud-icon-button {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

.pos-catalogo__item:hover {
    background: color-mix(in srgb, var(--cf-primary) 10%, var(--mud-palette-surface, var(--cf-surface)));
}

.pos-catalogo__item--agotado {
    opacity: 0.55;
    cursor: not-allowed;
}

.pos-catalogo__item--agotado:hover {
    background: transparent;
}

.pos-catalogo__stock--cero {
    color: #b91c1c;
    background: #fee2e2;
}

html.mud-theme-dark .pos-catalogo__stock--cero,
html[data-sigepef-theme="dark"] .pos-catalogo__stock--cero {
    color: #fecaca;
    background: color-mix(in srgb, #ef4444 28%, var(--cf-surface));
}

.pos-catalogo__thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--cf-border);
}

.pos-catalogo__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pos-catalogo__meta {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "nombre precio"
        "codigo stock";
    gap: 2px 8px;
    align-items: center;
    min-width: 0;
}

.pos-catalogo__nombre {
    grid-area: nombre;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary, var(--cf-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-catalogo__codigo {
    grid-area: codigo;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, var(--cf-text-secondary));
}

.pos-catalogo__precio {
    grid-area: precio;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--cf-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pos-catalogo__stock {
    grid-area: stock;
    justify-self: end;
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0369a1;
    background: #e0f2fe;
    white-space: nowrap;
}

html.mud-theme-dark .pos-catalogo__stock,
html[data-sigepef-theme="dark"] .pos-catalogo__stock {
    color: #7dd3fc;
    background: color-mix(in srgb, #0ea5e9 22%, var(--cf-surface));
}

.pos-catalogo__stock--na {
    color: var(--cf-text-secondary);
    background: var(--cf-background);
}

.pos-catalogo__add.mud-icon-button {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

/* Carrito derecha (~66%): formulario alto; SOLO la tabla scrollea (barra siempre visible). */
.facturacion-pos__carrito.app-form-section,
.facturacion-pos__carrito {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

.facturacion-pos__carrito > .app-form-section__header {
    flex: 0 0 auto !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-height: 32px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.facturacion-pos__carrito > .app-form-section__header > .app-form-section__title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facturacion-pos__carrito-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    margin-left: auto;
}

.facturacion-pos__carrito-acciones .mud-button-root {
    min-height: 36px;
    white-space: nowrap;
}

.facturacion-pos__carrito-acciones .mud-icon-button {
    min-width: 36px;
}

.facturacion-pos__carrito > .app-form-section__content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
}

.facturacion-pos__carrito .facturacion-pos__carrito-scroll,
div.facturacion-pos__carrito-scroll {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    height: 0 !important; /* fuerza a tomar el resto del flex y scrollear */
    min-height: 72px !important; /* en laptops 180px robaba el cobro/confirmar */
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 4px 4px 2px !important;
    margin: 0 !important;
    border: 1px solid var(--cf-border) !important;
    border-radius: 6px;
    background: var(--mud-palette-surface, var(--cf-surface)) !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--cf-border-hover) var(--cf-background);
}

div.facturacion-pos__carrito-scroll::-webkit-scrollbar {
    width: 10px;
}

div.facturacion-pos__carrito-scroll::-webkit-scrollbar-track {
    background: var(--cf-background);
    border-radius: 8px;
}

div.facturacion-pos__carrito-scroll::-webkit-scrollbar-thumb {
    background: var(--cf-border-hover);
    border-radius: 8px;
    border: 2px solid var(--cf-background);
}

div.facturacion-pos__carrito-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--cf-text-secondary);
}

.facturacion-pos__pie {
    flex: 0 0 auto !important;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 220px);
    gap: 8px 12px;
    align-items: end;
    padding: 8px 4px 2px;
    margin-top: 2px;
    border-top: 1px solid var(--cf-border);
    /* En pantallas bajas el cobro/confirmar no debe quedar bajo la barra de Windows. */
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--mud-palette-surface, var(--cf-surface));
    box-shadow: 0 -6px 12px color-mix(in srgb, var(--cf-background) 70%, transparent);
}

.facturacion-pos__pie-cobro {
    min-width: 0;
}

.facturacion-pos__pago-extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px auto;
    gap: 6px;
    align-items: end;
    margin-top: 2px;
}

.facturacion-pos__cambio-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    padding: 2px 8px;
    border: 1.5px solid color-mix(in srgb, var(--cf-success) 55%, var(--cf-border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-success) 12%, var(--cf-surface));
}

.facturacion-pos__cambio-label {
    font-size: 0.6875rem;
    color: var(--cf-text-secondary);
    line-height: 1;
}

.facturacion-pos__cambio-val {
    font-size: 0.875rem;
    font-weight: 700;
    color: #15803d;
    font-variant-numeric: tabular-nums;
}

.facturacion-pos__cambio-val--falta {
    color: #dc2626;
}

.facturacion-pos__fin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.facturacion-pos__pie .facturacion-pos__totales-montos {
    margin-left: 0;
    max-width: none;
    width: 100%;
}

.facturacion-pos__pie .facturacion-pos__cobro-acciones {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.facturacion-pos__carrito .facturacion-pos__vacio {
    flex: 1 1 auto !important;
    min-height: 140px;
}

.facturacion-pos__carrito-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
    max-width: 100%;
}

.facturacion-pos__carrito-acciones .mud-button-root {
    text-transform: none !important;
    font-weight: 600 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 0 10px !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
}

.facturacion-pos__carrito-acciones .mud-icon-button {
    width: 36px !important;
    height: 36px !important;
    padding: 2px !important;
}

.facturacion-pos__carrito-acciones .facturacion-pos__btn-txt-largo {
    display: inline;
}

.facturacion-pos__carrito-acciones .facturacion-pos__btn-txt-corto {
    display: none;
}

.facturacion-pos__cobro-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.facturacion-pos__cobro-acciones > .mud-button-root:first-child {
    flex: 0 0 auto;
    text-transform: none;
    font-weight: 600;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
}

.facturacion-pos__cobro-acciones .facturacion-pos__confirmar {
    flex: 1 1 160px;
    margin-top: 0;
}

.facturacion-pos__confirmar {
    min-height: 32px !important;
    height: 32px !important;
    margin-top: 0;
    padding: 0 12px !important;
    text-transform: none;
    font-weight: 700;
    font-size: 0.8125rem !important;
}

@media (max-width: 960px) {
    /* En tablet/móvil el layout de escritorio (height:100% + overflow:hidden) oculta
       la lista de productos y deja el carrito fuera de alcance. Permitir scroll y
       dar altura explícita al catálogo. */
    html:has(.facturacion-ventana),
    body:has(.facturacion-ventana) {
        overflow: hidden !important;
        height: 100% !important;
        max-height: 100dvh !important;
    }

    .facturacion-ventana {
        overflow: hidden !important;
    }

    .facturacion-ventana__cuerpo {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .facturacion-pos {
        height: auto;
        max-height: none;
        overflow: visible;
        min-height: 0;
        padding-bottom: 12px;
    }

    .facturacion-pos__principal {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        min-height: 0 !important;
    }

    .facturacion-pos__principal > .mud-grid-item,
    .facturacion-pos__col-buscar,
    .facturacion-pos__col-carrito {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
        display: flex;
        flex-direction: column;
    }

    .facturacion-pos__seccion--buscar,
    .facturacion-pos__seccion--buscar > .app-form-section__content,
    .pos-catalogo {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
    }

    .pos-catalogo__cats {
        max-height: 160px;
    }

    .pos-catalogo__lista {
        flex: none !important;
        min-height: 200px !important;
        max-height: min(42vh, 340px) !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .facturacion-pos__carrito,
    .facturacion-pos__carrito > .app-form-section__content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
    }

    .facturacion-pos__carrito > .app-form-section__header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    .facturacion-pos__carrito > .app-form-section__header > .mud-icon-root {
        align-self: flex-start;
    }

    .facturacion-pos__carrito > .app-form-section__header > .app-form-section__title {
        flex: 1 1 auto;
        width: 100%;
        white-space: normal;
        line-height: 1.25;
    }

    .facturacion-pos__carrito-acciones {
        margin-left: 0 !important;
        width: 100%;
        justify-content: stretch;
        gap: 6px;
    }

    .facturacion-pos__carrito-acciones .mud-button-root {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        justify-content: center;
    }

    .facturacion-pos__carrito-acciones .facturacion-pos__btn-txt-largo {
        display: none;
    }

    .facturacion-pos__carrito-acciones .facturacion-pos__btn-txt-corto {
        display: inline;
    }

    .facturacion-pos__vacio-msg-desk {
        display: none;
    }

    .facturacion-pos__vacio-msg-movil {
        display: inline;
    }

    .facturacion-pos__carrito-scroll,
    div.facturacion-pos__carrito-scroll {
        height: auto !important;
        min-height: 120px !important;
        max-height: min(38vh, 260px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .facturacion-pos__pie {
        grid-template-columns: 1fr;
    }

    .facturacion-pos__fin-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Selects/desplegables por encima de la barra y del contenido scrolleable */
    body:has(.facturacion-ventana) .mud-popover.mud-popover-open {
        z-index: 20060 !important;
    }
}

/* Escritorio / laptop con poca altura (zoom 100% en pantallas ~13–15"):
   compactar filtros y garantizar lista + cobro visibles. */
@media (min-width: 961px) and (max-height: 920px) {
    .facturacion-ventana__barra {
        padding-top: calc(6px + env(safe-area-inset-top, 0px));
        padding-bottom: 6px;
        min-height: calc(40px + env(safe-area-inset-top, 0px));
        gap: 6px;
    }

    .facturacion-ventana__meta {
        display: none;
    }

    .facturacion-ventana__ver-recibo {
        min-width: 0;
        padding-inline: 8px !important;
    }

    .facturacion-ventana__cerrar .mud-button-label {
        display: none; /* solo ícono: deja sitio a Ver recibo */
    }

    .facturacion-ventana__cuerpo {
        padding: 6px 10px 8px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .facturacion-pos {
        gap: 4px;
        overflow: visible !important;
        height: auto;
        min-height: 100%;
        max-height: none;
    }

    .facturacion-pos__principal {
        height: auto !important;
        min-height: min(520px, calc(100dvh - 120px));
        max-height: none !important;
        overflow: visible !important;
    }

    .facturacion-pos__principal > .mud-grid-item,
    .facturacion-pos__col-buscar,
    .facturacion-pos__col-carrito {
        height: auto !important;
        min-height: min(480px, calc(100dvh - 140px));
        max-height: none !important;
    }

    .facturacion-pos__contexto {
        gap: 2px;
        padding: 4px 8px;
    }

    .facturacion-pos__tipo .mud-button-root {
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 6px !important;
        font-size: 0.7rem !important;
    }

    .facturacion-pos__seccion--buscar,
    .facturacion-pos__seccion--buscar > .app-form-section__content,
    .pos-catalogo {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .pos-catalogo {
        gap: 4px;
        display: flex;
        flex-direction: column;
    }

    /* Una fila de tipos: no roba altura a la lista. */
    .pos-catalogo__tipos {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px;
        gap: 4px;
    }

    .pos-catalogo__tipo {
        flex: 0 0 auto;
        min-width: 56px;
        max-width: 68px;
        min-height: 36px;
        padding: 3px 2px;
        font-size: 0.55rem;
    }

    .pos-catalogo__cats {
        max-height: 56px;
        gap: 4px;
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }

    .pos-catalogo__cat {
        min-height: 36px;
        padding: 2px;
        font-size: 0.55rem;
    }

    .pos-catalogo__lista {
        flex: 1 1 auto !important;
        min-height: 140px !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    .pos-catalogo__item {
        padding: 6px 8px;
        gap: 8px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .facturacion-pos__carrito,
    .facturacion-pos__carrito > .app-form-section__content {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .facturacion-pos__carrito > .app-form-section__content {
        gap: 4px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .facturacion-pos__carrito .facturacion-pos__carrito-scroll,
    div.facturacion-pos__carrito-scroll {
        min-height: 48px !important;
        flex: 1 1 auto !important;
    }

    .facturacion-pos__vacio {
        min-height: 48px;
        padding: 6px;
        gap: 4px;
    }

    .facturacion-pos__pie {
        flex: 0 0 auto !important;
        gap: 6px 8px;
        padding: 6px 4px 4px;
        position: sticky;
        bottom: 0;
        z-index: 4;
    }

    .facturacion-pos__cambio-box {
        min-height: 32px;
        padding: 2px 6px;
    }

    .facturacion-pos__confirmar {
        min-height: 40px !important;
        font-size: 0.75rem !important;
    }
}

@media (min-width: 961px) and (max-height: 760px) {
    .facturacion-pos__principal,
    .facturacion-pos__principal > .mud-grid-item,
    .facturacion-pos__col-buscar,
    .facturacion-pos__col-carrito {
        min-height: min(400px, calc(100dvh - 110px));
    }

    .pos-catalogo__cats {
        max-height: 40px;
    }

    .pos-catalogo__lista {
        min-height: 100px !important;
    }

    .pos-catalogo__tipo {
        min-height: 32px;
        max-width: 60px;
    }
}

/* Escritorio con poca altura (legacy). */
@media (min-width: 961px) and (max-height: 720px) {
    .pos-catalogo__cats {
        max-height: 40px;
    }

    .pos-catalogo__lista {
        min-height: 90px !important;
    }

    .facturacion-pos__contexto {
        gap: 2px;
    }
}

.facturacion-pos__vacio-msg-movil {
    display: none;
}

.facturacion-pos__vacio-msg-desk {
    display: inline;
}

.facturacion-pos__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 100px;
    padding: 12px;
    text-align: center;
    border: 1.5px dashed color-mix(in srgb, var(--cf-primary) 35%, var(--cf-border));
    border-radius: var(--cf-radius-control);
    background: color-mix(in srgb, var(--cf-primary) 6%, var(--mud-palette-surface, var(--cf-surface)));
}

.facturacion-pos__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-primary) 12%, var(--mud-palette-surface, var(--cf-surface)));
    border: 1px solid color-mix(in srgb, var(--cf-primary) 28%, transparent);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cf-primary);
}

.facturacion-pos__pago-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 6px;
    align-items: end;
    margin-bottom: 4px;
}

.facturacion-pos__confirmar {
    min-height: 32px !important;
    height: 32px !important;
    margin-top: 0;
    padding: 0 12px !important;
    text-transform: none;
    font-weight: 700;
    font-size: 0.8125rem !important;
}

@media (max-width: 700px) {
    .facturacion-pos__pago-fila {
        grid-template-columns: 1fr;
    }

    .facturacion-pos__contexto-campos,
    .facturacion-pos__contexto-campos:has(> :only-child),
    .facturacion-pos__contexto-campos:not(:has(> :nth-child(3))) {
        grid-template-columns: 1fr;
    }

    .facturacion-pos__tipo {
        width: 100%;
    }

    .facturacion-pos__tipo .mud-button-group {
        width: 100%;
    }

    .facturacion-pos__contexto-acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .facturacion-pos__contexto-acciones .mud-spacer {
        display: none;
    }
}

.facturacion-encabezado {
    position: relative;
    z-index: 2;
}

.panel-flotante {
    position: fixed;
    /* Arranca a pantalla completa (?rea de trabajo debajo del AppBar). Restaurar deja
       un tama?o flotante m?s chico v?a .panel-flotante:not(.panel-flotante--maximizado). */
    top: var(--vf-top-seguro, 64px);
    left: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - var(--vf-top-seguro, 64px) - 8px);
    min-width: 320px;
    min-height: 160px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    box-shadow: var(--cf-shadow-card);
    z-index: 1180;
    resize: both;
    overflow: hidden;
}

/* Tama?o flotante solo cuando el usuario restaura (sale de maximizado). */
.panel-flotante:not(.panel-flotante--maximizado):not(.panel-flotante--minimizado) {
    top: var(--vf-top-seguro, 96px);
    left: max(16px, calc(50vw - 550px));
    width: min(1100px, calc(100vw - 32px));
    height: min(680px, calc(100vh - var(--vf-top-seguro, 96px) - 32px));
}

.panel-flotante__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    padding: 10px 6px 10px 16px;
    background: var(--cf-primary);
    color: #fff;
    border-radius: calc(var(--cf-radius-card) - 1px) calc(var(--cf-radius-card) - 1px) 0 0;
    cursor: move;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.panel-flotante__icono {
    color: #fff;
}

.panel-flotante__titulo-texto {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-weight: 600;
}

.panel-flotante__botones {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    /* El t?tulo tiene touch-action:none para el arrastre; sin este override, algunos
       trackpad/touch pueden no sintetizar el clic sobre estos botones. */
    touch-action: manipulation;
}

.panel-flotante__acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    max-width: min(520px, 55vw);
    touch-action: manipulation;
}

.panel-flotante__acciones .mud-button-root,
.panel-flotante__acciones .mud-icon-button {
    color: #fff !important;
    text-transform: none;
}

.panel-flotante__botones .mud-icon-button,
.panel-flotante__botones .mud-icon-root {
    color: #fff;
}

/* Men? "?" dentro de la barra azul del panel: mismo color blanco que minimizar/maximizar. */
.panel-flotante__menu-mas .mud-icon-button,
.panel-flotante__menu-mas .mud-icon-root {
    color: #fff !important;
}

.panel-flotante__contenido {
    flex: 1 1 auto;
    /* Sin min-height:0 el hijo flex no encoge y el overflow recorta mal el tope del
       formulario (las tarjetas Productos/Carrito parecen tapadas por la barra azul). */
    min-height: 0;
    overflow: auto;
    padding: 16px;
}

/* MudBlazor Spacing pone margin negativo en el MudGrid. Ese pull hacia arriba mete el
   borde de las AppFormSection bajo el recorte del overflow del panel ? en pantalla se
   ve como si la barra ?Facturaci?n? tapara ?Productos?/?Carrito?. Solo anulamos el
   margen superior; izquierda/derecha siguen para el gutters del grid. */
.panel-flotante__contenido > .mud-grid {
    margin-top: 0 !important;
    align-items: flex-start;
}

.panel-flotante__contenido .app-form-section {
    margin-top: 0;
    width: 100%;
}

.panel-flotante--minimizado {
    height: auto !important;
    min-height: 0;
    resize: none;
}

/* --vf-top-actual la fija sigepefFijarTopActual (app.js) justo antes de maximizar tras un
   arrastre; si no est? (arranque ya maximizado), se usa --vf-top-seguro de UbicarDebajoDe.
   Nunca top:0 ? el encabezado (Volver + "?") queda fuera del panel. */
.panel-flotante--maximizado {
    top: var(--vf-top-actual, var(--vf-top-seguro, 96px)) !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100vh - var(--vf-top-actual, var(--vf-top-seguro, 96px)) - 8px) !important;
    resize: none;
}

.panel-flotante--oculto {
    display: none;
}

.panel-flotante__reabrir {
    position: fixed !important;
    right: 20px;
    bottom: 24px;
    /* Por encima del panel (1180) y de la barra inferior (1300) para que siempre se pueda
       reabrir Facturaci?n tras minimizar/ocultar. */
    z-index: 1310;
}

@media (max-width: 960px) {
    .panel-flotante {
        top: var(--vf-top-seguro, 64px);
        left: 8px;
        width: calc(100vw - 16px);
        height: calc(100vh - var(--vf-top-seguro, 64px) - 84px);
        resize: none;
    }

    /* En m?vil las acciones viven en NavMenu / men? ?; la barra del panel es angosta. */
    .panel-flotante__acciones {
        display: none;
    }

    /* La barra inferior m?vil ya est? en z-index 1300; el FAB de reabrir debe quedar encima. */
    .panel-flotante__reabrir {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .panel-flotante--maximizado {
        height: calc(100vh - var(--vf-top-actual, var(--vf-top-seguro, 64px)) - 84px) !important;
    }
}

/* Carrito = tabla HTML real (filas × columnas), estilo Excel. Tokens = modo noche. */
table.carrito-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
    font-size: 0.8125rem;
    border: 1px solid var(--cf-border);
    background: var(--mud-palette-surface, var(--cf-surface));
    color: var(--mud-palette-text-primary, var(--cf-text));
}

table.carrito-tabla thead th {
    padding: 5px 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary, var(--cf-text));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cf-primary) 22%, var(--cf-surface)),
        color-mix(in srgb, var(--cf-primary) 14%, var(--cf-background))
    );
    border: 1px solid color-mix(in srgb, var(--cf-primary) 40%, var(--cf-border));
    text-align: left;
    white-space: nowrap;
}

table.carrito-tabla thead th:nth-child(4),
table.carrito-tabla thead th:nth-child(5),
table.carrito-tabla thead th:nth-child(6),
table.carrito-tabla thead th:nth-child(8) {
    text-align: right;
}

table.carrito-tabla thead th:nth-child(1) { width: 4%; }   /* # */
table.carrito-tabla thead th:nth-child(2) { width: 10%; }  /* Código */
table.carrito-tabla thead th:nth-child(3) { width: 28%; }  /* Producto */
table.carrito-tabla thead th:nth-child(4) { width: 10%; }  /* Precio */
table.carrito-tabla thead th:nth-child(5) { width: 14%; }  /* Cant */
table.carrito-tabla thead th:nth-child(6) { width: 9%; }   /* Desc% */
table.carrito-tabla thead th:nth-child(7) { width: 7%; }   /* ITBIS */
table.carrito-tabla thead th:nth-child(8) { width: 12%; }  /* Monto */
table.carrito-tabla thead th:nth-child(9) { width: 6%; }   /* borrar */

table.carrito-tabla tbody td {
    padding: 3px 4px;
    border: 1px solid var(--cf-border);
    vertical-align: middle;
    background: var(--mud-palette-surface, var(--cf-surface));
    color: var(--mud-palette-text-primary, var(--cf-text));
}

table.carrito-tabla tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--cf-background) 70%, var(--cf-surface));
}

table.carrito-tabla tbody tr:hover td {
    background: color-mix(in srgb, var(--cf-primary) 10%, var(--cf-surface));
}

.carrito-tabla__num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--cf-text-secondary);
    font-weight: 600;
}

.carrito-tabla__codigo {
    font-size: 0.75rem;
    color: var(--cf-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carrito-tabla__producto {
    font-weight: 600;
    max-width: 0;
    overflow: hidden;
}

.carrito-tabla__producto .carrito-tabla__prod-nombre,
.carrito-tabla__prod-nombre {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carrito-tabla__prod-thumb {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.carrito-tabla__precio {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #475569;
    white-space: nowrap;
}

.carrito-tabla__cant {
    text-align: right;
    white-space: nowrap;
}

.carrito-tabla__cant-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.carrito-tabla__cant-num {
    min-width: 22px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.carrito-tabla__desc {
    text-align: right;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.carrito-tabla__desc-field {
    margin: 0 !important;
}

.carrito-tabla__desc-field .mud-input-control,
.carrito-tabla__desc-field .mud-input {
    margin: 0 !important;
}

.carrito-tabla__desc-field .mud-input-slot,
.carrito-tabla__desc-field input {
    padding: 2px 4px !important;
    min-height: 26px !important;
    font-size: 0.75rem !important;
    text-align: right;
}

.carrito-tabla__itbis-col {
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.carrito-tabla__itbis-ok {
    color: #16a34a !important;
    font-size: 1.25rem !important;
}

.carrito-tabla__itbis-no {
    color: #cbd5e1 !important;
    font-size: 1.25rem !important;
}

.carrito-tabla__btn.mud-icon-button {
    width: 26px !important;
    height: 26px !important;
    padding: 1px !important;
}

.carrito-tabla__monto {
    text-align: right;
    line-height: 1.15;
    white-space: nowrap;
}

.carrito-tabla__monto-val {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cf-primary);
}

.carrito-tabla__imp {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.1;
    color: #ea580c;
}

.carrito-tabla__imp--cero {
    color: #94a3b8;
    font-weight: 500;
}

.carrito-tabla__borrar-celda {
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.facturacion-pos__totales {
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
}

.facturacion-pos__totales-montos {
    width: 100%;
    max-width: 220px;
    margin-left: auto;
}

.facturacion-pos__totales-linea {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #475569;
}

.facturacion-pos__totales-linea--imp {
    color: #ea580c;
    font-weight: 600;
}

/* Secciones con color propio (usan tokens para modo noche). */
.facturacion-pos__seccion--buscar.app-form-section {
    border-color: color-mix(in srgb, #60a5fa 55%, var(--cf-border)) !important;
    border-left: 4px solid var(--cf-primary) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #3b82f6 12%, var(--mud-palette-surface, var(--cf-surface))),
        var(--mud-palette-surface, var(--cf-surface))
    ) !important;
}

.facturacion-pos__seccion--buscar .app-form-section__header .mud-icon-root {
    color: var(--cf-primary) !important;
}

.facturacion-pos__carrito.app-form-section {
    border-color: color-mix(in srgb, var(--cf-primary) 45%, var(--cf-border)) !important;
    border-left: 4px solid var(--cf-primary) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cf-primary) 10%, var(--mud-palette-surface, var(--cf-surface))),
        var(--mud-palette-surface, var(--cf-surface))
    ) !important;
}

.facturacion-pos__carrito .app-form-section__header .mud-icon-root {
    color: var(--cf-primary) !important;
}

.facturacion-pos__seccion--cobro.app-form-section {
    border-color: color-mix(in srgb, #6ee7b7 45%, var(--cf-border)) !important;
    border-left: 4px solid var(--cf-success) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #10b981 12%, var(--mud-palette-surface, var(--cf-surface))),
        var(--mud-palette-surface, var(--cf-surface))
    ) !important;
}

.facturacion-pos__seccion--cobro .app-form-section__header .mud-icon-root {
    color: var(--cf-success) !important;
}

.facturacion-pos__campo--metodo .mud-input-outlined-border {
    border-color: #818cf8 !important;
}

.facturacion-pos__campo--monto .mud-input-outlined-border {
    border-color: #34d399 !important;
}

.facturacion-pos__campo--recibido .mud-input-outlined-border {
    border-color: #fbbf24 !important;
}

.facturacion-pos__cambio {
    font-weight: 700 !important;
}


/* Formularios compactos: valores ya promovidos a :root (altura 42/44px).
   .app-form-compact se conserva como alias sin efecto propio para no romper
   ClienteFormDialog / demostracion/formularios que ya lo usan. */
.app-form-compact { /* alias global — tokens heredados de :root */ }

/* ─── Modo noche: refuerzos globales ───
   Listados/tablas/formularios ya usan tokens --cf-* / --mud-palette-*.
   Aquí: gráficos SVG + Rutas de cobro / papeles que aún necesitan refuerzo. */
html.mud-theme-dark .mud-chart svg text,
html[data-sigepef-theme="dark"] .mud-chart svg text,
.mud-theme-dark .mud-chart svg text {
    fill: var(--cf-text-secondary) !important;
}

html.mud-theme-dark .mud-chart svg line,
html[data-sigepef-theme="dark"] .mud-chart svg line,
.mud-theme-dark .mud-chart svg line,
html.mud-theme-dark .mud-chart svg .mud-chart-grid line,
html[data-sigepef-theme="dark"] .mud-chart svg .mud-chart-grid line,
.mud-theme-dark .mud-chart svg .mud-chart-grid line {
    stroke: var(--cf-border) !important;
}

html.mud-theme-dark .mud-chart-legend,
html[data-sigepef-theme="dark"] .mud-chart-legend,
.mud-theme-dark .mud-chart-legend,
html.mud-theme-dark .mud-chart-legend *,
html[data-sigepef-theme="dark"] .mud-chart-legend *,
.mud-theme-dark .mud-chart-legend * {
    color: var(--cf-text-secondary) !important;
}

html.mud-theme-dark .mud-chart,
html[data-sigepef-theme="dark"] .mud-chart,
.mud-theme-dark .mud-chart {
    color: var(--cf-text);
}

html.mud-theme-dark .ruta-cobro-filtros,
html[data-sigepef-theme="dark"] .ruta-cobro-filtros,
.mud-theme-dark .ruta-cobro-filtros,
html.mud-theme-dark .ruta-cobro-grupo,
html[data-sigepef-theme="dark"] .ruta-cobro-grupo,
.mud-theme-dark .ruta-cobro-grupo,
html.mud-theme-dark .ruta-cobro-total,
html[data-sigepef-theme="dark"] .ruta-cobro-total,
.mud-theme-dark .ruta-cobro-total {
    background: var(--mud-palette-surface, var(--cf-surface));
    color: var(--mud-palette-text-primary, var(--cf-text));
    border-color: var(--cf-border);
}

html.mud-theme-dark .ruta-cobro-grupo__encabezado,
html[data-sigepef-theme="dark"] .ruta-cobro-grupo__encabezado,
.mud-theme-dark .ruta-cobro-grupo__encabezado {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--cf-focus) 12%, var(--cf-surface)),
        var(--cf-surface)
    );
    border-bottom-color: var(--cf-border);
}

html.mud-theme-dark .ruta-cobro-cuadre small,
html[data-sigepef-theme="dark"] .ruta-cobro-cuadre small,
.mud-theme-dark .ruta-cobro-cuadre small {
    color: var(--cf-text-secondary);
}

html.mud-theme-dark .ruta-cobro-cuadre strong,
html[data-sigepef-theme="dark"] .ruta-cobro-cuadre strong,
.mud-theme-dark .ruta-cobro-cuadre strong {
    color: var(--cf-text);
}

html.mud-theme-dark .mud-table .mud-table-cell,
html[data-sigepef-theme="dark"] .mud-table .mud-table-cell,
.mud-theme-dark .mud-table .mud-table-cell {
    color: var(--mud-palette-text-primary, var(--cf-text));
}

html.mud-theme-dark .app-form-section,
html[data-sigepef-theme="dark"] .app-form-section,
.mud-theme-dark .app-form-section {
    background: var(--mud-palette-surface, var(--cf-surface));
    border-color: var(--cf-border);
    color: var(--mud-palette-text-primary, var(--cf-text));
}

/* Home: gráficos y botones de periodo en móvil */
.home-grafico-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.home-grafico-wrap .mud-chart {
    min-width: 280px;
}

@media (max-width: 600px) {
    .home-grafico-wrap .mud-chart {
        height: 220px !important;
    }

    .home-periodo-btns {
        width: 100%;
    }

    .home-periodo-btns .mud-button-root {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
        font-size: 0.75rem;
    }

    /* Facturación móvil: la tabla del carrito scrollea en X (no se aplasta). */
    .facturacion-pos__carrito-scroll,
    div.facturacion-pos__carrito-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table.carrito-tabla {
        table-layout: auto;
        min-width: 640px;
    }

    .facturacion-pos__fin-grid {
        grid-template-columns: 1fr !important;
    }

    .facturacion-pos__pago-extra {
        grid-template-columns: 1fr !important;
    }

    .facturacion-pos__cobro-acciones {
        flex-wrap: wrap;
    }

    .facturacion-pos__cobro-acciones .facturacion-pos__confirmar,
    .facturacion-pos__cobro-acciones > .mud-button-root {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Tablero: fondo, barra y tarjetas con la misma jerarquía. */
.mud-layout,
.mud-main-content {
    background: var(--cf-background);
    font-family: Inter, Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
}

.mud-appbar {
    border-bottom: 1px solid var(--cf-border);
    box-shadow: none !important;
}

.app-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 12px 4px;
    padding: 10px 12px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background: var(--cf-surface);
}

.app-main-container .mud-paper,
.mud-dialog .mud-paper {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    box-shadow: var(--cf-shadow-card);
}

.app-main-container .mud-input-outlined-border,
.mud-dialog .mud-input-outlined-border {
    border-color: var(--cf-border) !important;
    border-radius: var(--cf-radius-control) !important;
}

.app-main-container .mud-input-control:focus-within .mud-input-outlined-border,
.mud-dialog .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--cf-primary) !important;
    box-shadow: var(--cf-shadow-focus);
}

.mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--cf-primary) 5%, var(--cf-surface));
}

.page-toolbar .mud-typography-h4,
.page-toolbar__titles .mud-typography-h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
}