: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-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: 7px;
    --cf-radius-control: 9px;
    --cf-radius-card: 14px;
    --cf-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.14);
    --cf-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.07);
    --cf-space-1: 4px;
    --cf-space-2: 8px;
    --cf-space-3: 12px;
    --cf-space-4: 16px;
    --cf-space-5: 24px;
    --cf-font-xs: 0.75rem;
    --cf-font-sm: 0.875rem;
    --cf-font-base: 1rem;
    --cf-control-height: 46px;
    --cf-icon-size: 20px;
    --cf-transition: 150ms ease;
}

.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 8px 24px rgba(0, 0, 0, 0.2);
}

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

.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 6px;
    color: var(--cf-text);
    font-size: var(--cf-font-sm);
    font-weight: 600;
    line-height: 1.25;
}

.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: 11px;
    padding-bottom: 11px;
    font-size: var(--cf-font-sm);
}

.app-field textarea.mud-input-slot {
    min-height: 88px;
    resize: vertical;
}

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

.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-5);
    border: 1px solid #93c5fd;
    border-left: 6px solid #ea580c;
    border-radius: 12px;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.10);
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4);
}

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

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

.app-form-dialog .mud-dialog-content {
    padding: var(--cf-space-5);
    background: var(--cf-surface);
}

.app-form-dialog .mud-dialog-actions {
    padding: var(--cf-space-4) var(--cf-space-5);
    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: 44px;
    height: 44px;
    padding: 10px;
    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-4);
}

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

.app-form-section-icon,
.app-form-section__header > .mud-icon-root {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--cf-radius-sm);
    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: var(--cf-font-base);
    font-weight: 700;
    line-height: 1.35;
}

.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-font-sm);
    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;
    justify-content: flex-end;
    gap: var(--cf-space-2);
    padding-top: var(--cf-space-4);
}

.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: 40px;
        font-size: 0.9rem;
        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;
    }

    .mud-paper {
        padding: 12px !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 1450:
   por encima del drawer/appbar/barra inferior móvil (1300-1400) pero MUY por debajo de
   .mud-dialog-container (20000 más arriba) para que un diálogo abierto desde dentro (ej.
   "+crear cliente", vista previa de recibo) siga apareciendo encima, no detrás. El popover de
   MudBlazor en desktop usa el z-index default (~1300, más bajo que 1450) — sin el ajuste de abajo,
   un MudSelect/MudAutocomplete DENTRO del panel abriría su desplegable detrás del propio panel:
   mismo síntoma ya documentado antes (invisible pero sigue bloqueando el clic). En móvil el
   desplegable ya se fuerza a 20001 más arriba en este archivo, así que ese caso no se toca acá. */
@media (min-width: 961px) {
    .mud-popover {
        z-index: 1500 !important;
    }
}

.panel-flotante {
    position: fixed;
    top: 96px;
    left: max(16px, calc(50vw - 550px));
    width: min(1100px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 128px));
    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: 1450;
    resize: both;
    overflow: hidden;
}

.panel-flotante__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    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;
}

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

.panel-flotante__contenido {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
}

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

.panel-flotante--maximizado {
    top: 8px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    resize: none;
}

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

.panel-flotante__reabrir {
    position: fixed !important;
    right: 20px;
    bottom: 24px;
    z-index: 1450;
}

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

    /* La barra inferior móvil ya está en z-index 1300 (arriba en este archivo); el botón de
       reabrir no puede quedar tapado por ella. */
    .panel-flotante__reabrir {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

/* Carrito de Facturación (Vender.razor) — línea horizontal con scroll en vez de lista vertical,
   para caber junto a Cliente/Almacén en la misma tarjeta sin alargarla verticalmente. */
.carrito-horizontal {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.carrito-horizontal__item {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 190px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-control);
    padding: 10px 12px;
    background: var(--cf-surface);
}