/*.mud-card.custom-card {
    background-color: color-mix(in srgb, var(--custom-white), #89aeff 8%) !important;
}*/
/*.mud-paper {
    background-color: color-mix(in srgb, var(--custom-white), #494949 8%) !important;
}*/

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    padding: 12px 10px 6px 8px !important;
}

.mud-input-label-outlined.mud-input-label-inputcontrol {
    top: -10px !important;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    top: 0px !important;
}

.mud-input-root-outlined {
    border-radius: 0.35rem !important;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 13px;
    border-color: color-mix(in srgb, var(--default-border), #000 15%) !important;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
   
}


.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: rgba(var(--primary-rgb), 0.8) !important;
    background-color: transparent !important;
    padding-left: 0px !important;
    font-size: 15px;
    top: 0px !important;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--default-border), #000 15%) !important;
}

/* Rango de fechas compacto para los maestros de inventario. */
.inventario-date-range-picker.mud-picker-inline {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    max-width: 190px;
}

.inventario-date-range-picker .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end,
.inventario-date-range-picker div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
    padding-inline-start: 0;
}

.inventario-date-range-picker .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
}

.inventario-date-range-picker.mud-picker .mud-input-slot.mud-input-root,
.inventario-date-range-picker .mud-picker .mud-input-slot.mud-input-root {
    padding: 9px !important;
}

.inventario-movimientos-select {
    max-width: 120px;
}

.inventario-movimientos-select .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
    padding-inline-start: unset;
}

/*sasasas*/

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    padding: 12px 10px 6px 8px !important;
}

[data-theme-mode="light"] .mud-drop-container .mud-table-striped
.mud-table-body .mud-table-row:nth-of-type(2n+1) .mud-table-cell {
    background-color: rgb(230, 232, 237) !important;
}
.imputvoice {
    fill: rgb(0 127 255) !important;
}

@media (max-width: 600px) {
    .mud-xs-table .mud-table-root .mud-table-head .mud-table-row,
    .mud-xs-table .mud-table-root .mud-table-foot {
        display: table-row !important;
    }
}

.mud-table .mud-table-container .mud-table-cell {
    padding: 6px 8px !important;
    font-size: 0.8125rem !important;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--custom-white) !important;
}
.mud-drop-container .mud-table-row .mud-table-cell {
    background-color: transparent !important;
}
.mud-button-text {
    padding: 6px 8px;
    color: var(--custom-black);
}

    @media (max-width: 599px) {
        .adaptive-mobile-editor.is-open {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100dvh;
            z-index: 1400;
            background: var(--mud-palette-surface);
            padding: 12px;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

            .adaptive-mobile-editor.is-open::before {
                content: "";
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.35);
                z-index: -1;
            }

            .adaptive-mobile-editor.is-open .mud-input-control {
                margin-top: 36px;
                width: 100%;
                flex-shrink: 0;
            }

        .adaptive-mobile-close {
            display: none;
        }

        .adaptive-mobile-editor.is-open .adaptive-mobile-close {
            display: inline-flex;
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 1501;
        }

        .adaptive-mobile-popover {
            z-index: 1500 !important;
            max-height: calc(100dvh - 115px) !important;
            width: calc(100vw - 24px) !important;
            max-width: calc(100vw - 24px) !important;
        }

            .adaptive-mobile-popover .mud-list,
            .adaptive-mobile-popover .mud-list-padding {
                max-height: calc(100dvh - 115px);
                overflow-y: auto;
            }
}

.mud-checkbox .mud-icon-button {
    border: solid 1px !important;
    border-color: var(--custom-white) !important;
   
}
    /* ============================================================
   Selector de iconos (IconSelect y selectores derivados:
   TipoSelect, PrioridadSelect, CanalSelect, TipoReferenciaSelect,
   ResultadoSelect). Estilos globales para que el popover funcione
   en cualquier formulario sin duplicar <style>.
   ============================================================ */
    /* ----- Opcion base (campo cerrado: icono pequeno + texto en fila) ----- */
    .selector-iconos-option {
        min-width: 0;
    }

    .selector-iconos-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* ----- Popover del MudSelect: opciones en rejilla de 4 columnas con icono arriba ----- */
    /* En MudBlazor 9 el contenedor de items es .mud-list (a veces con .mud-list-padding). */
    .selector-iconos-popover .mud-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2px;
        padding: 4px;
    }
    /* Cada opcion (sea o no hijo directo de .mud-list) ocupa una celda del grid */
    .selector-iconos-popover .mud-list-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: initial !important;
        border-radius: 6px;
        padding: 6px 2px !important;
    }
        /* Ocultar el espacio reservado del check para que el icono sea el protagonista */
        .selector-iconos-popover .mud-list-item .mud-list-item-icon {
            display: none !important;
        }

        .selector-iconos-popover .mud-list-item .mud-list-item-text {
            margin: 0 !important;
            width: 100%;
        }
    /* Dentro del popover el contenido va en columna y centrado, con icono grande */
    .selector-iconos-popover .selector-iconos-option {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 2px;
        width: 100%;
    }

        .selector-iconos-popover .selector-iconos-option .selector-iconos-icon {
            margin: 0 !important;
            font-size: 1.6rem;
            height: 1.6rem;
            width: 1.6rem;
        }
            /* MudIcon usa svg: forzamos su tamano para que coincida con el icono grande */
            .selector-iconos-popover .selector-iconos-option .selector-iconos-icon svg {
                width: 1.6rem;
                height: 1.6rem;
            }

        .selector-iconos-popover .selector-iconos-option .selector-iconos-label {
            font-size: 0.7rem;
            line-height: 1.1;
            white-space: normal;
            word-break: break-word;
        }