/* =====================================================================================================================
   Sistema de diseño de las pantallas Blazor de iMedical (iMedical.UI.Components). Diseño: docs/modulos/usuarios-sistema-diseno.md
   del HIS. Todo cuelga de .u-page: la página que lo usa pone class="u-page" en su contenedor y no toca el resto del portal.
   Los colores salen del tema de MudBlazor (--mud-palette-*): el modo claro/oscuro y la marca se respetan sin hex de marca aquí.
   Orden: 1 tokens · 2 base · 3 primitivas · 4 MudBlazor · 5 movimiento · 6 responsive · 7 accesibilidad.
   Los módulos no tienen CSS propio (ADR-059): lo que una pantalla necesite y no exista se agrega aquí como primitiva genérica.
   ===================================================================================================================== */

/* 1. Tokens ---------------------------------------------------------------------------------------------------------- */
.u-page {
    /* Color: alias semánticos del tema + tintes derivados (color-mix) para superficies suaves. */
    --u-primary: var(--mud-palette-primary);
    --u-surface: var(--mud-palette-surface);
    --u-bg: var(--mud-palette-background);
    --u-text: var(--mud-palette-text-primary);
    --u-muted: var(--mud-palette-text-secondary);
    --u-line: var(--mud-palette-lines-default);
    --u-success: var(--mud-palette-success);
    --u-warning: var(--mud-palette-warning);
    --u-error: var(--mud-palette-error);
    --u-info: var(--mud-palette-info);
    --u-primary-soft: color-mix(in srgb, var(--u-primary) 10%, var(--u-surface));
    --u-primary-softer: color-mix(in srgb, var(--u-primary) 4%, var(--u-surface));
    --u-line-strong: color-mix(in srgb, var(--u-line) 60%, var(--u-muted));
    --u-ink: #0f172a; /* solo para sombras: slate 900 */

    /* Forma */
    --u-radius-sm: 8px;
    --u-radius: 12px;
    --u-radius-lg: 16px;
    --u-radius-pill: 999px;

    /* Espaciado: escala de 4 px */
    --u-1: 4px;
    --u-2: 8px;
    --u-3: 12px;
    --u-4: 16px;
    --u-5: 24px;
    --u-6: 32px;
    --u-7: 48px;

    /* Elevación: sombras suaves en capas, iguales en claro y oscuro */
    --u-shadow-1: 0 1px 2px color-mix(in srgb, var(--u-ink) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--u-ink) 5%, transparent);
    --u-shadow-2: 0 4px 12px -2px color-mix(in srgb, var(--u-ink) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--u-ink) 6%, transparent);
    --u-shadow-3: 0 16px 32px -12px color-mix(in srgb, var(--u-ink) 22%, transparent);
    --u-shadow-primary: 0 8px 20px -8px color-mix(in srgb, var(--u-primary) 55%, transparent);
    --u-ring: 0 0 0 3px color-mix(in srgb, var(--u-primary) 22%, transparent);

    /* Movimiento: una sola familia de curvas y duraciones para todo el módulo */
    --u-dur-fast: 150ms;
    --u-dur: 220ms;
    --u-dur-slow: 320ms;
    --u-ease: cubic-bezier(.2, .8, .2, 1);      /* entrada: desacelera */
    --u-ease-in: cubic-bezier(.4, 0, 1, 1);     /* salida: más corta que la entrada */

    /* Capas */
    --u-z-sticky: 20;
    --u-z-savebar: 30;

    display: flex;
    flex-direction: column;
    gap: var(--u-5);
    padding-bottom: var(--u-6);
    color: var(--u-text);
}

/* 2. Base ------------------------------------------------------------------------------------------------------------ */
.u-page h1,
.u-page h2,
.u-page h3 {
    margin: 0;
    color: var(--u-text);
}

.u-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.u-subtitle {
    margin: var(--u-1) 0 0;
    color: var(--u-muted);
    font-size: .9375rem;
    line-height: 1.5;
    max-width: 62ch;
}

.u-overline {
    display: inline-block;
    margin-bottom: var(--u-1);
    color: var(--u-primary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.u-muted {
    color: var(--u-muted);
}

.u-num {
    font-variant-numeric: tabular-nums;
}

.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 3. Primitivas ------------------------------------------------------------------------------------------------------ */

/* Encabezado de página: tinte sutil de marca, sin competir con el contenido. */
.u-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--u-4);
    padding: var(--u-5);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--u-primary) 14%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--u-primary-softer), var(--u-surface) 65%);
    box-shadow: var(--u-shadow-1);
    overflow: hidden;
}

/* Tarjeta: la unidad de agrupación de todo el módulo. */
.u-card {
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    background: var(--u-surface);
    box-shadow: var(--u-shadow-1);
}

.u-card--pad {
    padding: var(--u-4);
}

.u-card--dashed {
    border-style: dashed;
    border-color: var(--u-line-strong);
    background: var(--u-primary-softer);
    box-shadow: none;
}

.u-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--u-3);
    padding: var(--u-4) var(--u-4) 0;
}

.u-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.u-card__desc {
    margin: 2px 0 0;
    color: var(--u-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.u-card__body {
    padding: var(--u-4);
}

/* Icono de sección en un cuadro tintado. */
.u-icon-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--u-primary-soft);
    color: var(--u-primary);
}

/* Avatar con iniciales. */
.u-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--u-primary-soft);
    color: var(--u-primary);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
}

.u-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 1.125rem;
    box-shadow: 0 0 0 4px var(--u-surface), 0 0 0 5px var(--u-line);
}

/* Insignias de estado: fondo tintado + texto de alto contraste + icono (el color nunca va solo). */
.u-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px 0 8px;
    border: 1px solid color-mix(in srgb, var(--u-badge) 28%, transparent);
    border-radius: var(--u-radius-pill);
    background: color-mix(in srgb, var(--u-badge) 12%, var(--u-surface));
    color: color-mix(in srgb, var(--u-badge) 50%, var(--u-text));   /* 50 %: éxito y advertencia ≥ 4.9:1 (58 % daba 4.2–4.3:1) */
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.u-badge .mud-icon-root {
    font-size: 14px;
}

.u-badge--success { --u-badge: var(--u-success); }
.u-badge--warning { --u-badge: var(--u-warning); }
.u-badge--error { --u-badge: var(--u-error); }
.u-badge--info { --u-badge: var(--u-info); }
.u-badge--primary { --u-badge: var(--u-primary); }
.u-badge--neutral { --u-badge: var(--u-muted); }

/* Aviso con barra lateral de acento. */
.u-callout {
    --u-callout: var(--u-info);
    display: flex;
    align-items: flex-start;
    gap: var(--u-3);
    padding: var(--u-3) var(--u-4);
    border: 1px solid color-mix(in srgb, var(--u-callout) 25%, transparent);
    border-left: 4px solid var(--u-callout);
    border-radius: var(--u-radius-sm);
    background: color-mix(in srgb, var(--u-callout) 8%, var(--u-surface));
    color: var(--u-text);
    font-size: .875rem;
    line-height: 1.5;
}

.u-callout > .mud-icon-root {
    flex: none;
    margin-top: 1px;
    color: var(--u-callout);
}

.u-callout__body {
    flex: 1;
    min-width: 0;
}

.u-callout__title {
    display: block;
    font-weight: 600;
}

.u-callout ul {
    margin: var(--u-1) 0 0;
    padding-left: var(--u-4);
}

.u-callout--warning { --u-callout: var(--u-warning); }
.u-callout--error { --u-callout: var(--u-error); }
.u-callout--success { --u-callout: var(--u-success); }

/* Estado vacío. */
.u-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-2);
    padding: var(--u-7) var(--u-4);
    text-align: center;
}

.u-empty__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--u-2);
    border-radius: 50%;
    background: var(--u-primary-soft);
    color: var(--u-primary);
}

.u-empty__title {
    font-size: 1rem;
    font-weight: 600;
}

.u-empty__text {
    max-width: 44ch;
    margin: 0 0 var(--u-2);
    color: var(--u-muted);
    font-size: .875rem;
    line-height: 1.5;
}

/* Filas de lista: cada una es un bloque interactivo con elevación al pasar el cursor. */
.u-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-row {
    display: flex;
    align-items: center;
    gap: var(--u-3);
    padding: var(--u-3) var(--u-4);
    border-top: 1px solid var(--u-line);
    transition: background-color var(--u-dur-fast) var(--u-ease);
}

.u-rows > li:first-child > .u-row,
.u-rows > .u-row:first-child {
    border-top: 0;
}

.u-row:hover {
    background: var(--u-primary-softer);
}

.u-row__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.u-row__title {
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--u-3);
    color: var(--u-muted);
    font-size: .8125rem;
}

.u-row__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--u-1);
}

/* Tarjeta de opción seleccionable (perfil clínico). */
.u-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u-3);
}

.u-tile {
    display: flex;
    flex-direction: column;
    gap: var(--u-2);
    padding: var(--u-3) var(--u-4);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    background: var(--u-surface);
    transition: border-color var(--u-dur) var(--u-ease), background-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}

.u-tile:hover {
    border-color: var(--u-line-strong);
}

.u-tile--on {
    border-color: color-mix(in srgb, var(--u-primary) 55%, transparent);
    background: var(--u-primary-softer);
    box-shadow: var(--u-ring);
}

.u-tile__desc {
    margin: -6px 0 0 42px;
    color: var(--u-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

/* Fila de ajuste: texto a la izquierda, control a la derecha. */
.u-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-4);
    padding: var(--u-3) 0;
    border-top: 1px solid var(--u-line);
}

.u-setting:first-child {
    border-top: 0;
}

.u-setting__text {
    min-width: 0;
}

.u-setting__title {
    font-size: .9375rem;
    font-weight: 500;
}

.u-setting__desc {
    margin: 2px 0 0;
    color: var(--u-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

/* Rejilla de campos: 1 columna en móvil, crece con el ancho. */
.u-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u-3) var(--u-4);
}

/* Barra fija (acciones de una ficha): vidrio sutil que deja ver el contenido al desplazarse. */
.u-glass {
    background: color-mix(in srgb, var(--u-surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

/* Cabecera fija de una ficha (componente RecordHeader): identidad arriba, acciones debajo en móvil; una fila desde 960 px. */
.u-record-head {
    position: sticky;
    top: var(--u-2);
    z-index: var(--u-z-sticky);
    display: flex;
    flex-direction: column;
    gap: var(--u-3);
    padding: var(--u-3) var(--u-4);
    box-shadow: var(--u-shadow-2);
}

.u-record-head__identity {
    display: flex;
    align-items: center;
    gap: var(--u-3);
    min-width: 0;
}

.u-record-head__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.u-record-head__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u-1) var(--u-3);
    min-width: 0;
}

.u-page .u-record-head__title {
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-record-head__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.u-record-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--u-2) var(--u-3);
}

.u-record-head__progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 0 var(--u-radius) var(--u-radius);
}

/* Lista que es tabla: en móvil cada fila (.u-row enlace) es una tarjeta con etiquetas (data-label) y flecha; desde 960 px,
   columnas alineadas bajo una cabecera tintada. El módulo fija las columnas con --u-table-cols en .u-table. */
.u-table {
    overflow: hidden;
}

.u-table__head {
    display: none;
}

.u-table__row {
    position: relative;
    flex-wrap: wrap;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.u-table__lead {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: var(--u-3);
    min-width: 0;
    padding-right: 32px;
}

.u-table__cell {
    display: flex;
    flex-direction: column;
    padding-left: 52px;
    font-size: .875rem;
}

.u-table__cell[data-label]::before {
    content: attr(data-label);
    color: var(--u-muted);
    font-size: .75rem;
}

.u-table__arrow {
    position: absolute;
    top: 50%;
    right: var(--u-3);
    color: var(--u-muted);
    transform: translateY(-50%);
    transition: transform var(--u-dur) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}

.u-table__row:hover .u-table__arrow {
    color: var(--u-primary);
    transform: translate(3px, -50%);
}

.u-table__foot {
    display: flex;
    justify-content: center;
    padding: var(--u-3) var(--u-4);
    border-top: 1px solid var(--u-line);
}

/* Maestro-detalle (1.4.0): lista y detalle apilados en móvil; desde 960 px la lista a la izquierda (--u-split-list) y pegada
   al desplazarse. Consumidores: Sedes de Contratos (Facturación) y Configuración del menú (Seguridad). */
.u-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u-5);
    align-items: start;
}

.u-split__list {
    min-width: 0;
}

.u-split__detail {
    display: flex;
    flex-direction: column;
    gap: var(--u-5);
    min-width: 0;
}

/* Utilidades de maquetación (1.5.0). */
.u-grow {
    flex: 1;
    min-width: 0;
}

.u-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u-2) var(--u-3);
}

.u-text-sm {
    font-size: .8125rem;
}

/* Herramientas y nota al pie dentro de una tarjeta (1.5.0): buscador y combos apilados bajo .u-card__header. */
.u-card__tools {
    display: flex;
    flex-direction: column;
    gap: var(--u-3);
    padding: var(--u-3) var(--u-4) var(--u-2);
}

.u-card__note {
    margin: 0;
    padding: var(--u-3) var(--u-4) var(--u-4);
    color: var(--u-muted);
    font-size: .8125rem;
}

/* Barra de filtros (1.5.0): el campo de texto crece; chips = MudButton con aria-pressed; leyenda de iconos. También sirve
   para "combo + botón Agregar". */
.u-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u-3) var(--u-4);
    padding: var(--u-4);
}

.u-filters > .mud-input-control {
    flex: 1 1 240px;
}

.u-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u-2);
}

.u-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u-2) var(--u-4);
    padding: 0 var(--u-4) var(--u-3);
    color: var(--u-muted);
    font-size: .8125rem;
}

.u-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Lista de selección del maestro (1.5.0): filas-botón; la elegida, tintada (aria-current). */
.u-picks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-pick {
    display: flex;
    align-items: center;
    gap: var(--u-3);
    width: 100%;
    min-height: 56px;
    padding: var(--u-2) var(--u-4);
    border: 0;
    border-top: 1px solid var(--u-line);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--u-dur-fast) var(--u-ease);
}

.u-pick:hover {
    background: var(--u-primary-softer);
}

.u-pick:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: -2px;
}

.u-pick--on {
    background: var(--u-primary-soft);
    box-shadow: inset 3px 0 0 var(--u-primary);
}

.u-pick--on .u-row__title {
    color: color-mix(in srgb, var(--u-primary) 75%, var(--u-text));
}

/* Título de grupo dentro de una tarjeta (1.5.0): banda tintada sobre las filas del grupo. */
.u-group-title {
    margin: 0;
    padding: var(--u-3) var(--u-4);
    border-top: 1px solid var(--u-line);
    background: color-mix(in srgb, var(--u-primary) 6%, var(--u-surface));
    font-size: 1rem;
    font-weight: 600;
}

/* Matriz (1.5.0): <table> ancha que se desplaza en su caja, con la primera columna fija y filas de grupo. Ancho mínimo en
   --u-matrix-min. */
.u-matrix {
    overflow-x: auto;
}

.u-matrix table {
    width: 100%;
    min-width: var(--u-matrix-min, 960px);
    border-collapse: collapse;
}

.u-matrix thead th {
    padding: var(--u-3) var(--u-2);
    background: var(--u-primary-softer);
    color: var(--u-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.u-matrix thead th:first-child {
    padding-left: var(--u-4);
    text-align: left;
}

.u-matrix td {
    padding: var(--u-1);
    border-top: 1px solid var(--u-line);
    text-align: center;
}

.u-matrix__row:hover {
    background: var(--u-primary-softer);
}

.u-matrix__lead {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 240px;
    padding: var(--u-2) var(--u-2) var(--u-2) var(--u-4);
    border-top: 1px solid var(--u-line);
    background: var(--u-surface);
    font-weight: 400;
    text-align: left;
}

.u-matrix__name {
    display: block;
    font-weight: 600;
}

.u-matrix__row--off .u-matrix__name {
    color: var(--u-muted);
}

.u-matrix__group th {
    padding: var(--u-3) var(--u-4);
    border-top: 1px solid var(--u-line);
    background: color-mix(in srgb, var(--u-primary) 6%, var(--u-surface));
    font-weight: 400;
    text-align: left;
}

/* Bloqueado (1.5.0): candado en el lugar de un control que el usuario no puede usar; el motivo va en aria-label. */
.u-lock {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--u-muted);
}

/* Cambio sin guardar (1.5.0): borde de aviso en la fila (li o la celda .u-matrix__lead de un tr) o contorno en un control. */
li.u-changed,
.u-changed > .u-matrix__lead {
    border-left: 3px solid color-mix(in srgb, var(--u-warning) 80%, transparent);
}

.u-changed-cell {
    border-radius: var(--u-radius-sm);
    outline: 2px solid color-mix(in srgb, var(--u-warning) 70%, transparent);
    outline-offset: -2px;
}


/* ---- 1.6.0: lo que tenían en CSS propio Usuarios del sistema, Configuración del menú y Contratos (ADR-059). ---- */

/* Pilas y filas. .u-stack apila con gap (sin márgenes en sus hijos de texto); .u-inline (1.5.0) pone en fila y envuelve. */
.u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--u-4);
    min-width: 0;
}

.u-stack--sm {
    gap: var(--u-3);
}

.u-stack--lg {
    gap: var(--u-5);
}

.u-stack > :is(p, h2, h3, h4, dl, ul) {
    margin: 0;
}

.u-inline--between {
    justify-content: space-between;
}

.u-inline--end {
    justify-content: flex-end;
}

.u-inline > p {
    margin: 0;
}

.u-push {
    margin-left: auto;
}

.u-self-start {
    align-self: flex-start;
}

.u-full {
    width: 100%;
}

.u-narrow {
    max-width: 880px;
}

/* Columnas principal + lateral: se apilan cuando no caben (sin media queries). */
.u-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--u-5);
}

.u-columns__main {
    display: flex;
    flex: 999 1 560px;
    flex-direction: column;
    gap: var(--u-5);
    min-width: 0;
}

.u-columns__side {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: var(--u-5);
    min-width: 0;
}

/* Campos: .u-span ocupa la fila; .u-fields--1/2/3 fijan el máximo de columnas (diálogos, tarjetas angostas). */
.u-span {
    grid-column: 1 / -1;
}

.u-fields.u-fields--1 {
    grid-template-columns: minmax(0, 1fr);
}

.u-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--u-2);
    margin: 0;
    padding: 0;
    border: 0;
}

/* Tarjetas en rejilla, tarjeta sin sombra, tarjeta en columna (cuerpo que crece) y pie de tarjeta. */
.u-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: var(--u-4);
}

.u-card--flat {
    box-shadow: none;
}

.u-card--column {
    display: flex;
    flex-direction: column;
}

.u-card__header--center {
    align-items: center;
}

.u-card__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--u-2);
    padding: var(--u-2) var(--u-3);
    border-top: 1px solid var(--u-line);
}

/* Panel tintado dentro de una tarjeta o diálogo (sub-sección, transición de estado). */
.u-panel {
    padding: var(--u-3) var(--u-4);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    background: var(--u-primary-softer);
}

/* Separador de sección dentro de un cuerpo de tarjeta. */
.u-section {
    margin-top: var(--u-4);
    padding-top: var(--u-2);
    border-top: 1px solid var(--u-line);
}

/* Texto. */
.u-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--u-muted);
    font-size: .8125rem;
}

.u-note .mud-icon-root {
    font-size: 16px;
}

.u-strong {
    font-weight: 600;
}

.u-text-error {
    color: var(--u-error);
}

.u-text-warning {
    color: color-mix(in srgb, var(--u-warning) 50%, var(--u-text));   /* 50 %: 4.9:1 */
}

.u-subhead {
    display: flex;
    align-items: center;
    gap: var(--u-2);
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.u-subhead--primary {
    color: var(--u-primary);
}

.u-label {
    margin: 0;
    color: var(--u-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.u-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--u-4);
    color: var(--u-muted);
    font-size: .75rem;
}

.u-meta strong {
    color: var(--u-text);
    font-weight: 600;
}

.u-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-link-plain {
    color: inherit;
    text-decoration: none;
}

.u-link-plain:hover {
    text-decoration: underline;
}

/* Datos (dl): etiqueta pequeña y valor. */
.u-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--u-3);
    margin: 0;
}

.u-facts--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-facts dt {
    color: var(--u-muted);
    font-size: .75rem;
}

.u-facts dd {
    margin: 0;
    font-weight: 500;
}

.u-facts--strong dd {
    font-size: .9375rem;
    font-weight: 600;
}

/* Filas: en caja, destacada, apagada, que envuelve sus herramientas, como botón y con edición en línea. */
.u-rows--boxed {
    overflow: hidden;
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-sm);
    background: var(--u-surface);
}

.u-icon-badge--sm {
    width: 36px;
    height: 36px;
}

.u-row--highlight {
    background: color-mix(in srgb, var(--u-warning) 6%, var(--u-surface));
}

.u-row--off .u-row__title {
    color: var(--u-muted);
}

.u-row--wrap {
    flex-wrap: wrap;
}

.u-row__tools {
    display: flex;
    align-items: center;
    gap: var(--u-2);
}

.u-row--button {
    width: 100%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.u-row--button:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: -2px;
}

/* Posición en una lista ordenable y flechas para mover. */
.u-order {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--u-radius-sm);
    background: var(--u-primary-softer);
    color: var(--u-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.u-move {
    display: flex;
    flex-direction: column;
}

/* Edición en línea bajo una fila (fechas de un rol o una sede): alineada con el texto de la fila. */
.u-row-edit {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u-3);
    padding: 0 var(--u-4) var(--u-4);
}

/* Árbol (role="tree"): filas de 40 px, nivel por sangría, selección tintada; --off apaga el nombre. */
.u-tree {
    margin: 0;
    padding: var(--u-1) var(--u-2) var(--u-3);
    list-style: none;
}

.u-tree ul {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.u-tree__row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    padding: 0 var(--u-2) 0 var(--u-1);
    border: 0;
    border-radius: var(--u-radius-sm);
    background: transparent;
    color: var(--u-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--u-dur-fast) var(--u-ease);
}

.u-tree__row:hover {
    background: var(--u-primary-softer);
}

.u-tree__row:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: -2px;
}

.u-tree__row--on {
    background: var(--u-primary-soft);
    color: color-mix(in srgb, var(--u-primary) 75%, var(--u-text));
    font-weight: 600;
}

.u-tree__row--off .u-tree__name {
    color: var(--u-muted);
}

.u-tree__toggle {
    flex: none;
    color: var(--u-muted);
    transition: transform var(--u-dur) var(--u-ease);
}

.u-tree__toggle--open {
    transform: rotate(90deg);
}

.u-tree__spacer {
    flex: none;
    width: 24px;
}

.u-tree__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-tree__count {
    color: var(--u-muted);
    font-size: .75rem;
}

/* Filtros: chips en píldora con su conteo; barra de chips bajo el buscador (desplazable en móvil); filtros apilados. */
.u-page .u-chips > .mud-button-root {
    flex: none;
    border-radius: var(--u-radius-pill);
}

.u-chip-count {
    margin-left: var(--u-1);
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.u-chips--bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--u-3) var(--u-4);
    border-top: 1px solid var(--u-line);
}

.u-filters--stack {
    flex-direction: column;
    align-items: stretch;
}

.u-field {
    flex: 1 1 280px;
}

.u-field-sm {
    flex: 0 1 220px;
    max-width: 260px;
}

/* Tabla de datos ancha (MudSimpleTable) en su caja: se desplaza, encabezado tintado, sin cortes de línea. */
.u-table-box {
    overflow-x: auto;
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-sm);
}

.u-page .u-table-box thead th {
    background: var(--u-primary-softer);
    color: var(--u-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.u-page .u-table-box td {
    white-space: nowrap;
}

.u-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* .u-table: la insignia de estado va arriba a la derecha de la tarjeta en móvil; --clip corta el texto largo desde 960 px. */
.u-table__status {
    position: absolute;
    top: var(--u-3);
    right: 40px;
    padding-left: 0;
}

/* Barra fija inferior con Guardar/Cancelar en móvil (pulgar primero); desde 960 px desaparece y las acciones .u-desktop-only
   van en la cabecera. La página lleva .u-page--savebar para que la barra no tape el final. */
.u-page--savebar {
    padding-bottom: 88px;
}

.u-savebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--u-z-savebar);
    display: flex;
    gap: var(--u-2);
    padding: var(--u-3) var(--u-4) calc(var(--u-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--u-line);
    box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--u-ink) 25%, transparent);
    animation: u-fade-up var(--u-dur-slow) var(--u-ease) both;
}

.u-desktop-only {
    display: none !important;
}

/* Contenido de un diálogo (MudDialog se monta fuera de la página): .u-page .u-dialog para tener los tokens. */
.u-page.u-dialog {
    gap: var(--u-4);
    padding-bottom: 0;
}

/* Pasos de un asistente (barras de progreso) y opciones como tarjetas (.u-tile) en un MudRadioGroup. */
.u-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.u-radio-tiles,
.u-radio-tiles .mud-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--u-2);
}

.u-radio-tiles .u-tile {
    margin: 0;
}

@media (max-width: 599.98px) {
    .u-hide-xs {
        display: none !important;
    }

    .u-row--wrap .u-row__main {
        flex-basis: calc(100% - 80px);
    }

    .u-row--wrap .u-row__tools {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (min-width: 600px) {
    .u-fields.u-fields--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .u-fields.u-fields--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .u-row-edit {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        align-items: start;
        padding-left: calc(var(--u-4) + 48px);
    }
}

@media (min-width: 960px) {
    .u-page--savebar {
        padding-bottom: var(--u-6);
    }

    .u-savebar {
        display: none;
    }

    .u-desktop-only {
        display: inline-flex !important;
    }

    .u-chips--bar {
        flex-wrap: wrap;
    }

    .u-table__status {
        position: static;
    }

    .u-table__cell--clip {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* 4. MudBlazor dentro de .u-page ------------------------------------------------------------------------------------- */
.u-page .mud-button-root {
    border-radius: 10px;
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 600;
    transition: transform var(--u-dur-fast) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), background-color var(--u-dur-fast) var(--u-ease);
}

.u-page .mud-button-filled:not(:disabled) {
    box-shadow: var(--u-shadow-1);
}

.u-page .mud-button-filled:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--u-shadow-primary);
}

.u-page .mud-button-root:not(:disabled):active {
    transform: translateY(0) scale(.98);
}

.u-page .mud-icon-button {
    transition: background-color var(--u-dur-fast) var(--u-ease), transform var(--u-dur-fast) var(--u-ease);
}

.u-page .mud-icon-button:not(:disabled):active {
    transform: scale(.92);
}

.u-page .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--u-radius-sm);
    transition: border-color var(--u-dur-fast) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}

.u-page .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    box-shadow: var(--u-ring);
}

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

/* Solo lectura se distingue de deshabilitado: fondo tintado, texto normal. */
.u-page .mud-input-control.u-readonly .mud-input-outlined {
    background: var(--u-primary-softer);
}

/* Pestañas: barra limpia sobre el fondo, indicador animado de MudBlazor. */
.u-page .u-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--u-line);
    background: transparent;
}

.u-page .u-tabs .mud-tab {
    min-height: 48px;
    text-transform: none;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--u-muted);
    transition: color var(--u-dur-fast) var(--u-ease), background-color var(--u-dur-fast) var(--u-ease);
}

.u-page .u-tabs .mud-tab:hover {
    color: var(--u-text);
    background: var(--u-primary-softer);
}

.u-page .u-tabs .mud-tab.mud-tab-active {
    color: var(--u-primary);
}

.u-page .u-tabs .mud-tabs-panels {
    padding-top: var(--u-4);
}

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

/* 5. Movimiento ------------------------------------------------------------------------------------------------------ */
@keyframes u-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes u-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Entrada de un bloque (página, sección o campo que aparece). Solo opacity + transform: sin saltos de layout. */
.u-appear {
    animation: u-fade-up var(--u-dur-slow) var(--u-ease) both;
}

/* Entrada escalonada: cada hijo recibe --i (0..9) desde Razor; 35 ms por paso, tope en el décimo. */
.u-stagger > * {
    animation: u-fade-up var(--u-dur) var(--u-ease) both;
    animation-delay: calc(min(var(--i, 0), 9) * 35ms);
}

/* Lista que se recarga: conserva lo anterior atenuado en lugar de parpadear. */
.u-loading {
    opacity: .55;
    transition: opacity var(--u-dur-fast) var(--u-ease-in);
    pointer-events: none;
}

/* 6. Responsive (mobile first) ---------------------------------------------------------------------------------------- */
@media (min-width: 600px) {
    .u-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .u-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .u-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: var(--u-6);
    }

    .u-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 960px) {
    .u-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .u-record-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--u-3) var(--u-5);
    }

    .u-record-head__actions {
        flex-wrap: nowrap;
    }

    .u-table__head,
    .u-table__row {
        display: grid;
        grid-template-columns: var(--u-table-cols, minmax(240px, 2fr) repeat(4, minmax(0, 1fr)) 24px);
        align-items: center;
        gap: var(--u-4);
    }

    .u-table__head {
        padding: var(--u-3) var(--u-4);
        border-bottom: 1px solid var(--u-line);
        background: var(--u-primary-softer);
        color: var(--u-muted);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .u-table__lead {
        padding-right: 0;
    }

    .u-table__cell {
        min-width: 0;
        padding-left: 0;
    }

    .u-table__cell[data-label]::before {
        content: none;
    }

    .u-table__arrow {
        position: static;
        transform: none;
    }

    .u-table__row:hover .u-table__arrow {
        transform: translateX(3px);
    }

    .u-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .u-split {
        grid-template-columns: var(--u-split-list, 340px) minmax(0, 1fr);
    }

    .u-split__list {
        position: sticky;
        top: var(--u-2);
    }
}

@media (min-width: 1280px) {
    .u-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Pantallas táctiles: objetivos de al menos 44 px. */
@media (pointer: coarse) {
    .u-page .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .u-page .mud-button-root,
    .u-page .mud-chip,
    .u-page .mud-switch {
        min-height: 44px;
    }

    .u-page .mud-pagination-item > * {
        min-width: 44px;
        height: 44px;
    }

    .u-lock {
        width: 44px;
        height: 44px;
    }
}

/* 7. Accesibilidad --------------------------------------------------------------------------------------------------- */
.u-page a.u-row:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: -2px;
    border-radius: var(--u-radius-sm);
}

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