/*
 * Puente entre MudBlazor 9 y el Mordorsoft Design System v1.0 (ADR-015).
 *
 * Se carga DESPUÉS de MudBlazor.min.css y traduce cada familia de componentes a los tokens del sistema
 * (wwwroot/css/mds/tokens/*.css), de modo que un solo juego de reglas sirve a los temas claro y oscuro: aquí
 * solo hay var(--…), nunca colores en bruto (el test DesignSystemGuardTests lo vigila). Las reglas repiten el
 * selector de MudBlazor o le añaden una clase, para ganar por orden sin !important salvo donde MudBlazor ya
 * lo usa (elementos seleccionados, errores de campo). Nunca se pisan los --mud-* desde :root, porque el
 * <style> del proveedor de tema se inyecta en el body y ganaría: cuando hace falta, se usa html[data-theme].
 *
 * Lo que MudBlazor no puede expresar en el tema (MordorsoftTheme.cs) vive aquí: bordes de 1 px en vez de
 * sombras, radios 3/5/8, rótulos en condensada mayúscula, etiquetas de campo estáticas, badges, toasts y
 * la versión imprimible en claro.
 */

/* ───── 0. Base (base.css del sistema, reproducido aquí para ir detrás de MudBlazor) ───── */
html {
    background: var(--surface-app);
    color: var(--text-primary);
    font: var(--type-ui);
    -webkit-font-smoothing: antialiased;
    font-synthesis-style: none;
}

body {
    background-color: var(--surface-app);
}

::selection {
    background: var(--accent-quiet);
    color: var(--text-primary);
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
}

a {
    color: var(--text-link);
}

.mud-link.mud-primary-text {
    color: var(--text-link) !important;
}

::-webkit-scrollbar {
    width: var(--scrollbar);
    height: var(--scrollbar);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-disabled);
}

html, body * {
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
}

/* Anillo de foco del sistema en todo lo que se enfoca con teclado; MudBlazor solo quita el outline. */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mud-dialog:focus-visible {
    box-shadow: var(--shadow-dialog);
}

.mud-popover:focus-visible, .mud-drawer:focus-visible, .mud-main-content:focus-visible, h1:focus-visible {
    box-shadow: none;
}

/* En los campos el anillo va en el marco (sección 6), no en el elemento de entrada. */
.mud-input input:focus-visible, .mud-input textarea:focus-visible {
    box-shadow: none;
}

/* Movimiento: 120 ms con la curva del sistema; MudBlazor trae 300 ms y ninguna regla de movimiento reducido. */
.mud-button-root, .mud-nav-link, .mud-list-item-clickable, .mud-menu-item, .mud-treeview-item-content,
.mud-chip, .mud-input, .mud-switch-base, .mud-switch-track, .mud-tab, .mud-paper {
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ───── 1. Barra superior (48 px desde LayoutProperties; elevación 0 en el layout) ───── */
.mud-appbar {
    background-color: var(--surface-chrome);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.mud-appbar .mud-toolbar-gutters {
    padding-left: 12px;
    padding-right: 12px;
}

/* Nombre del producto como marca: condensada seminegrita, como el wordmark del sistema. */
.mds-wordmark {
    font: var(--weight-semibold) 15px/1 var(--font-condensed);
    letter-spacing: .02em;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ───── 2. Cajón y navegación (220 px desde LayoutProperties) ───── */
.mud-drawer {
    background-color: var(--surface-chrome);
    color: var(--text-secondary);
    border-right: 1px solid var(--border-subtle);
}

.mud-drawer .mud-navmenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.mud-navmenu .mud-nav-link {
    height: var(--control-base);
    padding: 0 10px;
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font: var(--weight-medium) var(--font-ui)/1 var(--font-sans);
}

.mud-navmenu .mud-nav-link .mud-nav-link-text {
    margin-inline-start: 10px;
    font-weight: var(--weight-medium);
}

.mud-navmenu .mud-nav-link .mud-nav-link-icon {
    font-size: var(--icon);
    color: var(--text-tertiary);
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

/* Mismo selector que MudBlazor (0,5,0): gana por orden. Activo = superficie seleccionada e icono en acento. */
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--surface-selected);
    color: var(--text-primary);
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled) {
    background-color: var(--surface-selected);
}

.mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
    color: var(--text-accent);
}

/* ───── 3. Paper, tarjeta y tabla (el anillo de 1 px viene de Shadows[1] del tema) ───── */
.mud-paper {
    background-color: var(--surface-panel);
    border-radius: var(--radius-lg);
}

.mud-paper-outlined {
    border-color: var(--border-default);
}

.mud-popover, .mud-table {
    border-radius: var(--radius-md);
}

/* Tarjeta interactiva: el borde sube un paso al pasar, sin sombra. */
.mud-card.mud-elevation-1:has(a, button):hover {
    box-shadow: 0 0 0 1px var(--border-strong);
}

.mud-card-content.mud-card-content-padding {
    padding: var(--pad-x-comfy);
}

.mud-card-actions.mud-card-actions-padding {
    padding: 10px var(--pad-x-comfy);
    border-top: 1px solid var(--border-subtle);
}

.mud-divider {
    border-color: var(--border-default);
}

.mud-divider-light {
    border-color: var(--border-subtle);
}

.mud-table {
    background-color: var(--surface-panel);
}

/* Cabecera: rótulo de sección (condensada, 11 px, mayúsculas, terciario) sobre la superficie de cromo. */
.mud-table-root .mud-table-head .mud-table-cell {
    height: var(--control-base);
    padding: 0 var(--pad-x-dense);
    background-color: var(--surface-chrome);
    border-bottom: 1px solid var(--border-default);
    font: var(--type-section);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.mud-table-root .mud-table-body .mud-table-cell {
    height: var(--control-base);
    padding: 0 var(--pad-x-dense);
    border-bottom: 1px solid var(--border-subtle);
    font: var(--type-ui);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.mud-table-dense .mud-table-root .mud-table-head .mud-table-cell,
.mud-table-dense .mud-table-root .mud-table-body .mud-table-cell {
    height: var(--control-dense);
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--surface-hover);
}

.mud-table-striped .mud-table-container .mud-table-root .mud-table-body:not(.mud-table-body-virtualized) .mud-table-row:nth-of-type(odd) {
    background-color: var(--surface-chrome);
}

.mud-table-sort-label .mud-table-sort-label-icon {
    font-size: 14px;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--surface-chrome);
}

.mud-table .mud-table-cell .mud-typography {
    font: inherit;
}

/* ───── 4. Botones: variante × color de MudBlazor → variante del sistema ─────
   Filled+Primary = primario (acento); Outlined = secundario (superficie elevada con borde); Text = fantasma;
   cualquier variante con Color.Error = peligro, que en el sistema va contorneado porque comparte el rojo. */
.mud-button-root.mud-button {
    height: var(--control-base);
    min-width: var(--control-base);
    padding: 0 var(--pad-x-base);
    gap: var(--inner-spacing);
    border-radius: var(--radius-md);
    font: var(--weight-medium) var(--font-ui)/1 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}

.mud-button-root.mud-button.mud-button-filled-size-small,
.mud-button-root.mud-button.mud-button-outlined-size-small,
.mud-button-root.mud-button.mud-button-text-size-small {
    height: var(--control-dense);
    padding: 0 var(--pad-x-dense);
}

.mud-button-root.mud-button.mud-button-filled-size-large,
.mud-button-root.mud-button.mud-button-outlined-size-large,
.mud-button-root.mud-button.mud-button-text-size-large {
    height: var(--control-comfy);
    padding: 0 var(--pad-x-comfy);
}

.mud-button-root:disabled {
    opacity: .45;
}

/* Primario */
.mud-button-filled, .mud-button-filled:hover, .mud-button-filled:focus-visible, .mud-button-filled:active {
    box-shadow: none;
}

.mud-button-filled:focus-visible {
    box-shadow: var(--focus-ring);
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--accent-base);
    color: var(--text-on-accent);
}

.mud-button-filled.mud-button-filled-primary:hover, .mud-button-filled.mud-button-filled-primary:focus-visible {
    background-color: var(--accent-hover);
}

.mud-button-filled.mud-button-filled-primary:active {
    background-color: var(--accent-press);
}

/* Otros rellenos (Default, Success, Warning): aspecto secundario con el texto en el color de estado. */
.mud-button-filled:not(.mud-button-filled-primary):not(.mud-button-filled-error) {
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.mud-button-filled.mud-button-filled-success {
    color: var(--status-success);
}

.mud-button-filled.mud-button-filled-warning {
    color: var(--status-warning);
}

/* Secundario */
.mud-button-outlined {
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    padding: 0 var(--pad-x-base);
}

.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-outlined.mud-button-outlined-primary:focus-visible,
.mud-button-outlined.mud-button-outlined-primary:active {
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.mud-button-outlined.mud-button-outlined-warning {
    color: var(--status-warning);
    border-color: var(--border-default);
}

.mud-button-outlined:hover, .mud-button-outlined:focus-visible, .mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: var(--surface-hover);
}

.mud-button-outlined:active, .mud-button-outlined.mud-button-outlined-primary:active {
    background-color: var(--surface-active);
}

/* Fantasma */
.mud-button-text {
    padding: 0 var(--pad-x-dense);
    color: var(--text-secondary);
}

.mud-button-text:hover, .mud-button-text:focus-visible {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.mud-button-text:active {
    background-color: var(--surface-active);
}

.mud-button-text.mud-button-text-primary {
    color: var(--text-link);
}

.mud-button-text.mud-button-text-primary:hover,
.mud-button-text.mud-button-text-primary:focus-visible,
.mud-button-text.mud-button-text-primary:active {
    background-color: var(--surface-hover);
}

.mud-button-text.mud-button-text-inherit {
    color: inherit;
}

/* Peligro: contorneado; al pasar, superficie de peligro; al pulsar, relleno oscuro con texto en blanco. */
.mud-button-filled.mud-button-filled-error, .mud-button-outlined.mud-button-outlined-error {
    background-color: transparent;
    color: var(--status-danger);
    border: 1px solid var(--status-danger);
}

.mud-button-filled.mud-button-filled-error:hover, .mud-button-outlined.mud-button-outlined-error:hover,
.mud-button-filled.mud-button-filled-error:focus-visible, .mud-button-outlined.mud-button-outlined-error:focus-visible {
    background-color: var(--status-danger-surface);
}

.mud-button-filled.mud-button-filled-error:active, .mud-button-outlined.mud-button-outlined-error:active {
    background-color: var(--danger-press);
    border-color: var(--danger-press);
    color: var(--text-on-accent);
}

.mud-button-text.mud-button-text-error {
    color: var(--status-danger);
}

.mud-button-text.mud-button-text-error:hover {
    background-color: var(--status-danger-surface);
}

/* Botones de icono: caja densa de 26 px, radio de control. */
.mud-icon-button {
    width: var(--control-dense);
    height: var(--control-dense);
    padding: 0;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.mud-icon-button:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.mud-icon-button:active {
    background-color: var(--surface-active);
}

.mud-icon-button.mud-icon-button-size-small {
    width: var(--control-micro);
    height: var(--control-micro);
}

.mud-icon-button.mud-icon-button-size-large {
    width: var(--control-base);
    height: var(--control-base);
}

.mud-icon-button-color-inherit {
    color: inherit;
}

.mud-icon-button-edge-start {
    margin-inline-start: -6px;
}

/* ───── 5. Iconos: rejilla de 24 rendida a --icon (16 px escritorio, 22 táctil) ───── */
.mud-icon-root {
    width: var(--icon);
    height: var(--icon);
    font-size: var(--icon);
}

.mud-icon-size-small {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.mud-icon-size-large {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.mud-button-icon-size-small > :first-child,
.mud-button-icon-size-medium > :first-child,
.mud-button-icon-size-large > :first-child {
    font-size: var(--icon);
}

.mud-button-icon-start {
    margin-inline: 0 var(--inner-spacing);
}

.mud-button-icon-end {
    margin-inline: var(--inner-spacing) 0;
}

.mud-chip .mud-icon-root, .mud-menu-item .mud-icon-root, .mud-list-item-icon .mud-icon-root {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ───── 6. Campos: un solo aspecto para Outlined y subrayado: caja de 32 px, etiqueta estática encima ───── */
.mud-input-control.mud-input-outlined-with-label,
.mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-input-control-input-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 0;
}

.mud-input {
    background-color: var(--surface-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    min-height: var(--control-base);
    padding: 0 var(--pad-x-dense);
    align-items: center;
    color: var(--text-primary);
    line-height: 1.35;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* Fuera el subrayado Material y el fieldset con muesca: el borde vive ahora en .mud-input. */
.mud-input.mud-input-underline:before, .mud-input.mud-input-underline:after {
    display: none;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    display: none;
}

/* MudBlazor pone border-width:0 al contorneado porque dibuja el borde en el fieldset; aquí lo recupera la caja. */
.mud-input.mud-input-outlined {
    border-width: 1px;
}

.mud-input.mud-input-outlined.mud-input-adorned-start, .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-left: var(--pad-x-dense);
    padding-right: var(--pad-x-dense);
}

.mud-input > input.mud-input-root, .mud-input > textarea.mud-input-root, div.mud-input-slot.mud-input-root {
    padding: 0;
    height: auto;
    min-height: calc(var(--control-base) - 2px);
    display: flex;
    align-items: center;
    font: var(--type-ui);
    box-sizing: border-box;
}

.mud-input > textarea.mud-input-root {
    padding: 6px 0;
    margin: 0;
    min-height: auto;
    display: block;
    mask-image: none;
}

.mud-input.mud-input-adorned-start, .mud-input.mud-input-adorned-end {
    padding-left: var(--pad-x-dense);
    padding-right: var(--pad-x-dense);
}

.mud-input-control-margin-dense .mud-input, .mud-input:has(.mud-input-root-margin-dense) {
    min-height: var(--control-dense);
}

.mud-input > input.mud-input-root.mud-input-root-margin-dense,
.mud-input > div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding: 0;
    min-height: calc(var(--control-dense) - 2px);
}

.mud-input:not(.mud-disabled):hover {
    border-color: var(--border-strong);
}

.mud-input:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 1px var(--border-focus);
}

.mud-input-control.mud-input-error .mud-input, .mud-input.mud-input-error {
    border-color: var(--status-danger);
}

.mud-input.mud-disabled {
    opacity: .5;
}

.mud-input-adornment .mud-icon-root {
    font-size: var(--icon);
    color: var(--text-tertiary);
}

.mud-select .mud-input-adornment-end .mud-icon-button {
    width: var(--control-micro);
    height: var(--control-micro);
}

.mud-input-control.mud-input-showspin .mud-input {
    padding-right: 28px;
}

/* Etiqueta: estática, encima del campo, --type-label. Es hermana posterior de .mud-input: order:-1 la sube. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    position: static;
    order: -1;
    transform: none !important;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    background: transparent;
    font: var(--type-label);
    line-height: 1.35;
    color: var(--text-secondary);
    pointer-events: auto;
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input-label-shrink {
    transform: none;
    color: var(--text-secondary);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error {
    color: var(--status-danger) !important;
}

.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    content: " *";
    color: var(--status-danger);
}

/* Texto de ayuda y de error */
.mud-input-control-helper-container {
    margin-top: 4px;
}

.mud-input-helper-text {
    font: var(--weight-regular) var(--font-label)/1.35 var(--font-sans);
    letter-spacing: 0;
    color: var(--text-tertiary);
    margin: 0;
}

.mud-input-helper-text-contained {
    margin-left: 0;
    margin-right: 0;
}

.mud-input-helper-text.mud-input-error {
    color: var(--status-danger) !important;
}

/* Casillas, radios e interruptores */
.mud-checkbox, .mud-radio, .mud-switch {
    font: var(--type-ui);
    color: var(--text-primary);
}

.mud-checkbox .mud-icon-root, .mud-radio .mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mud-checkbox .mud-icon-button, .mud-radio .mud-icon-button {
    color: var(--text-tertiary);
}

.mud-checkbox {
    --checkbox-color: var(--text-on-accent);
}

.mud-checkbox .mud-icon-button.mud-primary-text, .mud-radio.mud-checked .mud-icon-button.mud-primary-text {
    color: var(--accent-base) !important;
}

.mud-checkbox .mud-icon-button:hover, .mud-radio .mud-icon-button:hover {
    background-color: transparent;
}

.mud-checkbox.mud-disabled, .mud-radio.mud-disabled, .mud-switch.mud-disabled {
    opacity: .45;
}

/* Interruptor como píldora de 28 × 16: pista apagada, acento encendida, pulgar de 12 px que se desplaza 12 px. */
.mud-switch-span.mud-switch-span-medium, .mud-switch-span.mud-switch-span-small {
    width: 28px;
    height: 16px;
    padding: 0;
    margin: 0 8px 0 0;
    border-radius: var(--radius-full);
}

.mud-switch-span .mud-switch-track {
    opacity: 1;
    border-radius: var(--radius-full);
    background-color: var(--control-switch-off);
}

.mud-switch-span .mud-switch-base, .mud-switch-base-medium.mud-switch-base, .mud-switch-base-small.mud-switch-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--control-slider-thumb);
}

.mud-switch-span .mud-switch-base.mud-checked {
    transform: translateX(12px);
}

.mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1;
    background-color: var(--accent-base);
}

.mud-switch-base .mud-switch-button {
    width: 12px;
    height: 12px;
}

.mud-switch-button .mud-switch-thumb-medium, .mud-switch-button .mud-switch-thumb-small {
    width: 12px;
    height: 12px;
    box-shadow: none;
    background-color: var(--control-slider-thumb);
}

.mud-switch-base:hover, .mud-switch-base:focus-visible {
    background-color: transparent;
}

/* ───── 7. Popovers, menús y listas (la sombra es la elevación 8 del tema) ───── */
.mud-popover {
    background-color: var(--surface-overlay);
    border-radius: var(--radius-md);
}

.mud-popover .mud-list, .mud-popover .mud-list.mud-list-padding, .mud-menu-list {
    padding: 4px;
}

.mud-list-item, .mud-menu-item {
    min-height: var(--control-dense);
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font: var(--type-ui);
    color: var(--text-primary);
}

.mud-list-item-gutters {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-list-item-text, .mud-menu-item .mud-menu-item-text {
    margin: 0;
}

.mud-list-item-clickable:hover, .mud-list-item-clickable:focus:not(.mud-selected-item),
.mud-menu-item:hover, .mud-menu-item:focus-visible {
    background-color: var(--surface-hover);
}

/* MudBlazor añade mud-primary-text y mud-primary-hover (!important) al elemento seleccionado. */
.mud-list-item.mud-selected-item {
    background-color: var(--surface-selected) !important;
    color: var(--text-primary) !important;
}

.mud-list-item.mud-selected-item .mud-list-item-icon, .mud-menu-item.mud-selected-item .mud-icon-root {
    color: var(--text-accent);
}

.mud-list-item-icon, .mud-menu-item .mud-menu-item-icon {
    min-width: 0;
    margin-inline-end: 8px;
    color: var(--text-secondary);
}

.mud-menu-list > .mud-divider {
    margin: 4px 0;
    border-color: var(--border-default);
}

.mud-menu-item.mud-disabled {
    color: var(--text-disabled) !important;
}

.mud-picker-popover-paper {
    border-radius: var(--radius-md);
}

/* ───── 8. Diálogos ───── */
.mud-dialog {
    background-color: var(--surface-overlay);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dialog);
    animation-duration: var(--duration-base);
}

.mud-dialog .mud-dialog-title {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px 0 var(--pad-x-comfy);
    border-bottom: 1px solid var(--border-subtle);
}

.mud-dialog .mud-dialog-title .mud-typography {
    font: var(--weight-semibold) var(--font-body)/1 var(--font-sans);
    color: var(--text-primary);
}

.mud-dialog .mud-dialog-title .mud-button-close {
    top: 9px;
    right: 8px;
}

.mud-dialog .mud-dialog-content {
    padding: var(--pad-x-comfy);
    font: var(--type-body);
    color: var(--text-primary);
}

.mud-dialog .mud-dialog-actions {
    padding: 12px var(--pad-x-comfy);
    gap: 8px;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--surface-chrome);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.mud-dialog-fullscreen {
    border-radius: 0;
}

.mud-overlay .mud-overlay-scrim.mud-overlay-dark, .mud-overlay .mud-overlay-scrim.mud-overlay-light {
    background-color: var(--surface-scrim);
    border-color: transparent;
}

.mud-overlay {
    backdrop-filter: none;
}

/* ───── 9. Chips como badges (18 px, radio pequeño, tono sobre su superficie) ───── */
.mud-chip {
    height: 22px;
    padding: 0 6px;
    margin: 2px;
    border-radius: var(--radius-sm);
    font: var(--weight-medium) var(--font-label)/1 var(--font-sans);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.mud-chip.mud-chip-size-small {
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-micro);
}

.mud-chip .mud-chip-icon {
    margin-inline-start: -1px;
    margin-inline-end: 4px;
}

.mud-chip.mud-chip-color-primary {
    background-color: var(--accent-quiet);
    color: var(--text-accent);
    border-color: transparent;
}

.mud-chip.mud-chip-color-success {
    background-color: var(--status-success-surface);
    color: var(--status-success);
    border-color: transparent;
}

.mud-chip.mud-chip-color-warning {
    background-color: var(--status-warning-surface);
    color: var(--status-warning);
    border-color: transparent;
}

.mud-chip.mud-chip-color-error {
    background-color: var(--status-danger-surface);
    color: var(--status-danger);
    border-color: transparent;
}

.mud-chip.mud-chip-color-info {
    background-color: var(--status-info-surface);
    color: var(--status-info);
    border-color: transparent;
}

/* Chip de organización en la barra (Color.Inherit): transparente con borde sutil. */
.mud-chip.mud-chip-color-inherit {
    background-color: transparent;
    color: inherit;
    border-color: var(--border-default);
}

.mud-chip.mud-clickable:hover:not(.mud-disabled) {
    filter: none;
    background-color: var(--surface-hover);
}

/* ───── 10. Alertas: color de estado sobre su superficie tintada, borde de 1 px ───── */
.mud-alert {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font: var(--type-ui);
    align-items: flex-start;
}

.mud-alert .mud-alert-icon .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.mud-alert .mud-alert-message {
    color: var(--text-primary);
}

.mud-alert-outlined-success, .mud-alert-text-success, .mud-alert-filled-success {
    background-color: var(--status-success-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.mud-alert-outlined-success .mud-alert-icon, .mud-alert-text-success .mud-alert-icon, .mud-alert-filled-success .mud-alert-icon {
    color: var(--status-success);
}

.mud-alert-outlined-warning, .mud-alert-text-warning, .mud-alert-filled-warning {
    background-color: var(--status-warning-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.mud-alert-outlined-warning .mud-alert-icon, .mud-alert-text-warning .mud-alert-icon, .mud-alert-filled-warning .mud-alert-icon {
    color: var(--status-warning);
}

.mud-alert-outlined-error, .mud-alert-text-error, .mud-alert-filled-error {
    background-color: var(--status-danger-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.mud-alert-outlined-error .mud-alert-icon, .mud-alert-text-error .mud-alert-icon, .mud-alert-filled-error .mud-alert-icon {
    color: var(--status-danger);
}

.mud-alert-outlined-info, .mud-alert-text-info, .mud-alert-filled-info {
    background-color: var(--status-info-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.mud-alert-outlined-info .mud-alert-icon, .mud-alert-text-info .mud-alert-icon, .mud-alert-filled-info .mud-alert-icon {
    color: var(--status-info);
}

.mud-alert-outlined-normal, .mud-alert-text-normal {
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

/* ───── 11. Snackbar como toast: superficie flotante, icono en color de estado ───── */
.mud-snackbar {
    background-color: var(--surface-overlay);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    padding: 10px 6px 10px 12px;
    min-width: 288px;
    max-width: 340px;
    font: var(--type-ui);
    font-weight: 400;
}

.mud-snackbar.mud-alert-filled-success, .mud-snackbar.mud-alert-filled-warning, .mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-filled-info, .mud-snackbar.mud-alert-filled-normal {
    background-color: var(--surface-overlay);
    color: var(--text-primary);
    border: 0;
}

.mud-snackbar .mud-snackbar-icon {
    padding: 0;
    margin-inline-end: 10px;
    font-size: var(--icon);
    opacity: 1;
}

.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon {
    color: var(--status-success);
}

.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon {
    color: var(--status-warning);
}

.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon {
    color: var(--status-danger);
}

.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon {
    color: var(--status-info);
}

.mud-snackbar .mud-snackbar-content-action .mud-button {
    color: var(--text-link);
}

.mud-snackbar.mud-snackbar-blurred {
    backdrop-filter: none;
}

/* ───── 12. Pestañas (sin uso hoy; quedan en sistema para cuando aparezcan) ───── */
.mud-tabs-tabbar {
    background-color: transparent;
    border-bottom: 1px solid var(--border-default);
}

.mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: var(--control-base);
}

.mud-tab {
    min-height: var(--control-base);
    padding: 0 2px;
    margin-inline-end: var(--pad-x-base);
    text-transform: none;
    letter-spacing: 0;
    font: var(--weight-medium) var(--font-ui)/1 var(--font-sans);
    color: var(--text-tertiary);
}

.mud-tab:hover, .mud-tab.mud-tab-active:hover {
    background-color: transparent;
    color: var(--text-primary);
}

.mud-tab.mud-tab-active {
    color: var(--text-primary);
}

.mud-tab-slider {
    background: var(--accent-base);
}

.mud-tab-slider.mud-tab-slider-horizontal {
    height: 2px;
}

/* ───── 13. Progreso, esqueleto, tooltip y árbol ───── */
.mud-progress-linear {
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer)::before,
.mud-progress-linear.mud-progress-linear-color-default:not(.mud-progress-linear-buffer)::before {
    opacity: 1;
    background-color: var(--control-slider-track);
}

.mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar,
.mud-progress-linear.mud-progress-linear-color-default:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--accent-base);
    border-radius: inherit;
}

.mud-skeleton {
    background-color: var(--border-default);
}

.mud-skeleton-text {
    border-radius: var(--radius-sm);
}

.mud-skeleton-wave::after {
    display: none;
}

.mud-tooltip, .mud-tooltip.mud-tooltip-default {
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-popover);
    padding: 4px 8px;
    font: var(--weight-regular) var(--font-label)/1.3 var(--font-sans);
    text-align: start;
}

.mud-tooltip.mud-tooltip-arrow::after {
    display: none;
}

.mud-treeview-item {
    min-height: auto;
}

.mud-treeview-item-content {
    min-height: var(--control-micro);
    padding: 0 8px 0 4px;
    gap: 4px;
    border-radius: var(--radius-sm);
    font: var(--type-ui);
    color: var(--text-secondary);
}

.mud-treeview-hover .mud-treeview-item-content:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.mud-treeview.mud-treeview-selected-primary .mud-treeview-item-content.mud-treeview-item-selected {
    background-color: var(--surface-selected);
    color: var(--text-primary);
}

.mud-treeview-item-content.mud-treeview-item-selected .mud-treeview-item-icon {
    color: var(--text-accent);
}

.mud-treeview-item-arrow {
    width: 16px;
    min-height: auto;
    margin: 0;
}

.mud-treeview-item-arrow .mud-icon-button {
    width: 16px;
    height: 16px;
    padding: 0;
}

.mud-treeview-item-icon {
    width: 16px;
    color: var(--text-tertiary);
}

.mud-treeview-item-icon .mud-icon-root {
    font-size: 14px;
}

.mud-treeview-group {
    margin-inline-start: var(--indent);
}

/* ───── 14. Tipografía auxiliar y clases de utilidad del sistema (mds-*) ───── */
.mud-typography-overline {
    display: block;
    color: var(--text-tertiary);
}

.mud-typography-caption {
    color: var(--text-tertiary);
}

.mud-text-secondary, .mds-text-secondary {
    color: var(--text-secondary);
}

.mds-text-tertiary, .mds-muted {
    color: var(--text-tertiary);
}

/* Valores: códigos, cantidades, fechas e identificadores, en mono con cifras tabulares. */
.mds-value, .mds-code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.mds-value-lg {
    font: var(--weight-semibold) var(--font-h3)/1.2 var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.mds-caption {
    font: var(--type-section);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-tertiary);
}

/* Tabla de listado (CursorTable): desplazamiento horizontal dentro del marco en pantallas estrechas. */
.mds-table .mud-table-container {
    overflow-x: auto;
}

/* Fila de filtros de los listados. */
.mds-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: var(--space-7);
}

.mds-toolbar > * {
    flex: 1 1 200px;
    min-width: 0;
}

.mds-toolbar > .mds-toolbar-fixed {
    flex: 0 0 auto;
}

/* Ficha de saldo o de resumen. */
.mds-stat {
    padding: var(--pad-x-base) var(--pad-x-comfy);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mds-stat-foot {
    font: var(--weight-regular) var(--font-label)/1.35 var(--font-sans);
    color: var(--text-tertiary);
}

/* Tarjeta seleccionable marcada. */
.mds-selected {
    box-shadow: 0 0 0 1px var(--accent-base) !important;
}

/* Pasos de un asistente (WizardSteps): índice en círculo, rótulo condensado, el actual en acento. */
.mds-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-8);
    margin: 0 0 var(--space-7);
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--border-default);
}

.mds-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--control-base);
    margin-bottom: -1px;
    font: var(--type-section);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
}

.mds-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    font: var(--weight-medium) var(--font-micro)/1 var(--font-mono);
    letter-spacing: 0;
}

.mds-step-index .mud-icon-root {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.mds-step-current {
    color: var(--text-primary);
    border-bottom-color: var(--accent-base);
}

.mds-step-current .mds-step-index {
    background-color: var(--accent-base);
    border-color: var(--accent-base);
    color: var(--text-on-accent);
}

.mds-step-done {
    color: var(--text-secondary);
}

.mds-step-done .mds-step-index {
    background-color: var(--accent-quiet);
    border-color: transparent;
    color: var(--text-accent);
}

/* ───── 15. Impresión: el tema oscuro pondría texto blanco sobre papel; se fuerza el claro con primitivas.
   html[data-theme] (0,1,1) supera al :root del proveedor de tema sea cual sea el orden. ───── */
@media print {
    html[data-theme] {
        color-scheme: light;
        --surface-app: var(--ash-0);
        --surface-panel: var(--ash-0);
        --surface-chrome: var(--ash-0);
        --surface-raised: var(--ash-0);
        --text-primary: var(--ash-1000);
        --text-secondary: var(--ash-600);
        --text-tertiary: var(--ash-500);
        --border-default: var(--ash-300);
        --border-subtle: var(--ash-200);
        --mud-palette-background: var(--ash-0);
        --mud-palette-surface: var(--ash-0);
        --mud-palette-text-primary: var(--ash-1000);
        --mud-palette-text-secondary: var(--ash-600);
        --mud-palette-table-lines: var(--ash-200);
        --mud-palette-lines-default: var(--ash-300);
        --mud-palette-divider: var(--ash-300);
    }

    .mud-paper, .mud-table, .mud-card {
        box-shadow: none !important;
        border: 1px solid var(--border-default);
    }
}