:root {
    color-scheme: light;
    --cf-primary: #3157d5;
    --cf-primary-hover: #2748b8;
    --cf-secondary: #475569;
    --cf-focus: #3b82f6;
    --cf-background: #f6f8fc;
    --cf-surface: #ffffff;
    --cf-field-background: #ffffff;
    --cf-border: #cbd5e1;
    --cf-border-hover: #94a3b8;
    --cf-text: #172033;
    --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: 6px;
    --cf-radius-control: 8px;
    --cf-radius-card: 12px;
    --cf-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.14);
    --cf-shadow-card: 0 4px 14px rgba(15, 23, 42, 0.06);
    --cf-space-1: 4px;
    --cf-space-2: 8px;
    --cf-space-3: 12px;
    --cf-space-4: 16px;
    --cf-space-5: 24px;
    --cf-space-section: 14px;
    --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 {
    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);
}

.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(--cf-surface);
        border-top: 1px solid var(--cf-border);
        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);
    background: var(--cf-surface);
}

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

.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(--cf-surface);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cf-text) 8%, transparent);
}

.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;
}

@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 (.mud-xs-table): filas con m?s color para que se noten
   en pantalla chica (fondo azul suave + franja naranja + sombra). PC no usa .mud-xs-table. */
.mud-xs-table.mud-table,
.mud-table.mud-xs-table {
    background: transparent !important;
    box-shadow: none !important;
}

.mud-xs-table .mud-table-container,
.mud-xs-table .mud-table-root,
.mud-xs-table .mud-table-body {
    background: transparent !important;
}

.mud-xs-table .mud-table-body .mud-table-row {
    display: block !important;
    background: #eff6ff !important;
    border: 1px solid #93c5fd !important;
    border-left: 6px solid #ea580c !important;
    border-radius: 12px !important;
    margin: 0 0 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.12) !important;
    padding: 4px 12px !important;
}

.mud-xs-table .mud-table-body .mud-table-row:nth-child(odd) {
    background: #eff6ff !important;
}

.mud-xs-table .mud-table-body .mud-table-row:nth-child(even) {
    background: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    border-left-color: #059669 !important;
}

.mud-xs-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell,
.mud-xs-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell {
    background-color: transparent !important;
}

.mud-xs-table .mud-table-body .mud-table-row:last-child {
    margin-bottom: 0 !important;
}

.mud-xs-table .mud-table-body .mud-table-row .mud-table-cell {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px 4px !important;
    text-align: start !important;
    border: none !important;
    border-bottom: 1px solid rgba(29, 78, 216, 0.12) !important;
}

.mud-xs-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell {
    border-bottom-color: rgba(5, 150, 105, 0.14) !important;
}

.mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
    border-bottom: none !important;
}

.mud-xs-table .mud-table-cell:before {
    font-weight: 600 !important;
    color: #1d4ed8 !important;
    flex: 0 1 auto;
    max-width: 48%;
}

.mud-xs-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell:before {
    color: #047857 !important;
}

.mud-xs-table .mud-table-cell {
    font-weight: 700;
    color: #0f172a;
}

/* Formato est?ndar de datos (etiqueta izq / valor der) ? mismo lenguaje que las tablas m?vil. */
.cf-detail-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-left: 6px solid #ea580c;
    border-radius: 12px;
    padding: 4px 14px;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.12);
}

.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 rgba(29, 78, 216, 0.12) !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: #64748b !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: #0f172a !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 que en m?vil siguen en modo fila (sin Breakpoint / a?n no pasan a mud-xs-table). */
@media (max-width: 960px) {
    .mud-table:not(.mud-xs-table) .mud-table-body .mud-table-row:nth-child(odd) > .mud-table-cell {
        background-color: #eff6ff !important;
    }

    .mud-table:not(.mud-xs-table) .mud-table-body .mud-table-row:nth-child(even) > .mud-table-cell {
        background-color: #ecfdf5 !important;
    }

    .mud-table:not(.mud-xs-table) .mud-table-body .mud-table-row .mud-table-cell {
        border-bottom-color: #93c5fd !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 se ve como fila/tarjeta en m?vil. */
    .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: #eff6ff;
        border: 1px solid #93c5fd;
        border-left: 5px solid #ea580c;
        border-radius: 10px;
        padding: 8px 10px !important;
        margin-bottom: 10px;
        box-shadow: 0 1px 4px rgba(29, 78, 216, 0.08);
    }

    .app-form-section__content .mud-grid > .mud-grid-item:nth-child(even),
    .solicitud-pantalla-completa .mud-grid > .mud-grid-item:nth-child(even) {
        background: #ecfdf5;
        border-color: #6ee7b7;
        border-left-color: #059669;
    }

    .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 #93c5fd;
    border-left: 6px solid #ea580c;
    border-radius: 12px;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.1);
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.solicitudes-lista__item:nth-child(even) {
    background: #ecfdf5;
    border-color: #6ee7b7;
    border-left-color: #059669;
}

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

.solicitudes-lista__icono {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    color: #1d4ed8 !important;
}

.solicitudes-lista__item:nth-child(even) .solicitudes-lista__icono {
    color: #047857 !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: #0f172a;
    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: #64748b;
    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: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    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;
    }
}

/* 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. */
.facturacion-ventana {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--cf-bg, #f5f7fb);
    display: flex;
    flex-direction: column;
}

.facturacion-ventana__barra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 12px 10px 16px;
    background: var(--cf-primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}

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

.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;
}

.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__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;
    padding: 12px 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Evita que un transform/filter cree containing block y recorte popovers portaleados. */
    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 organizado de Facturaci?n: contexto ? buscar/carrito ? cobro. */
.facturacion-pos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1280px;
    margin: 0 auto;
}

.facturacion-pos__contexto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    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: 36px;
    padding: 0 12px;
    text-transform: none;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* 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__contexto-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
}

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

.facturacion-pos__carrito .carrito-lista {
    max-height: min(340px, 42vh);
}

.facturacion-pos__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    padding: 16px;
    text-align: center;
    border: 1px dashed var(--cf-border);
    border-radius: var(--cf-radius-control);
    background: color-mix(in srgb, var(--cf-background) 70%, var(--cf-surface));
}

.facturacion-pos__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cf-border);
}

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

.facturacion-pos__confirmar {
    min-height: var(--cf-btn-height-primary) !important;
    margin-top: 4px;
    text-transform: none;
    font-weight: 700;
}

@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 de Facturaci?n (Vender.razor) ? filas modernas resaltadas, con scroll propio que solo
   se activa si hay m?s l?neas de las que entran en max-height (no hace falta scrollear todo el
   panel para ver el resto del formulario debajo). */
.carrito-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.carrito-lista__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--cf-radius-control);
    border-left: 3px solid var(--cf-primary);
    background: var(--cf-surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: background var(--cf-transition);
}

.carrito-lista__fila:hover {
    background: color-mix(in srgb, var(--cf-primary) 8%, var(--cf-surface));
}

.carrito-lista__info {
    min-width: 0;
}


/* 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 */ }