/* stein-componentes.css — ajustes de los controles «con ajuste» (docs/tecnica/controles-interfaz.md §2).
   Única capa propia que sobrescribe MudBlazor: se carga última (tema-producto.md §5, paso 4).
   Cada color sale de un token (--mud-palette-* o --stein-*). Cada medida sale de un token o de la lista
   cerrada de medidas que fijan las fichas (Controles §2 › «Qué ajusta la hoja y qué queda pendiente»).
   El selector de período (§3.2) y la barra de filtros (§5.7) no tienen ajuste visual: su comportamiento
   está pendiente y no vive en esta hoja. */

/* Barra lateral de navegación · Controles §6.4. Solo la barra de la izquierda: es la única con
   fondo Primary. El activo nativo se pinta con Primary y ahí desaparece; se marca con texto
   blanco a 600, fondo blanco al 12 % y filete blanco de 3px al inicio. El fondo solo da 1,17:1
   contra la barra: el filete (6,11:1) y el peso son los que comunican el estado.
   Los selectores repiten :not(.mud-nav-link-disabled) para igualar la especificidad de los
   estados nativos (:hover, :focus-visible, :active) y ganarles por orden de carga. */
.mud-drawer-pos-left .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer-pos-left .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.mud-drawer-pos-left .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled),
.mud-drawer-pos-left .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-drawer-text);
    /* !important obligado: MudBlazor fija el activo con `font-weight: 500 !important`, y sin esto el
       peso —una de las dos señales que no son color— no llega. */
    font-weight: 600 !important;
    background-color: color-mix(in srgb, var(--mud-palette-drawer-text) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-drawer-text);
}

.mud-drawer-pos-left .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon);
}

/* Hover de los ítems no activos: el nativo es un gris al 6 % (--mud-palette-action-default-hover) que
   sobre la marca se lee como un segundo activo. Blanco al 8 %, por debajo del 12 % del activo. Misma
   condición de puntero que el nativo, para que en pantallas táctiles no quede un hover pegado. */
@media (hover: hover) and (pointer: fine) {
    .mud-drawer-pos-left .mud-navmenu .mud-nav-link:not(.active):not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
        background-color: color-mix(in srgb, var(--mud-palette-drawer-text) 8%, transparent);
    }
}

/* Foco con teclado en todo ítem de la barra (§6.4): contorno blanco de 2px hacia adentro. Sin él, el
   ítem activo con foco se ve igual que sin foco (§8.3); sobre la barra da 6,11:1. */
.mud-drawer-pos-left .mud-navmenu .mud-nav-link:focus-visible:not(.mud-nav-link-disabled) {
    outline: 2px solid var(--mud-palette-drawer-text);
    outline-offset: -2px;
}

/* Cajón de detalle · Controles §6.3. MudBlazor pinta todo MudDrawer con DrawerBackground y
   DrawerText, que en este tema son la marca y el blanco de la barra lateral. El cajón vuelve a la
   superficie de contenido: fondo Surface, texto TextPrimary. */
.mud-drawer-pos-right {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

/* Etiqueta de estado · Controles §5.2. La dibuja EtiquetaEstado: un MudChip outlined con la clase
   stein-estado. La hoja reconoce esa clase y nunca el color del chip, así que un chip de filtro o
   seleccionable queda nativo aunque comparta color. Tríada de la familia: texto en la ranura nativa del
   estado, tinte y borde de stein-extensiones.css (Tema §4); la neutra sale de --superficie-sutil y
   --borde-fuerte. El ícono es una máscara Material Filled sobre el color del texto: sin color propio,
   fuera del árbol de accesibilidad, y nunca duplicado porque EtiquetaEstado no expone Icon. */
.mud-chip.mud-chip-outlined.stein-estado.stein-estado-neutra {
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-lines-inputs);
}

/* RadioButtonUnchecked */
.mud-chip.stein-estado.stein-estado-neutra > .mud-chip-content::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}

.mud-chip.mud-chip-outlined.stein-estado.stein-estado-exito {
    color: var(--mud-palette-success);
    background-color: var(--stein-exito-tinte);
    border-color: var(--stein-exito-borde);
}

/* CheckCircle */
.mud-chip.stein-estado.stein-estado-exito > .mud-chip-content::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.mud-chip.mud-chip-outlined.stein-estado.stein-estado-advertencia {
    color: var(--mud-palette-warning);
    background-color: var(--stein-alerta-tinte);
    border-color: var(--stein-alerta-borde);
}

/* Warning */
.mud-chip.stein-estado.stein-estado-advertencia > .mud-chip-content::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.mud-chip.mud-chip-outlined.stein-estado.stein-estado-error {
    color: var(--mud-palette-error);
    background-color: var(--stein-error-tinte);
    border-color: var(--stein-error-borde);
}

/* Error */
.mud-chip.stein-estado.stein-estado-error > .mud-chip-content::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.mud-chip.mud-chip-outlined.stein-estado.stein-estado-informacion {
    color: var(--mud-palette-info);
    background-color: var(--stein-info-tinte);
    border-color: var(--stein-info-borde);
}

/* Info */
.mud-chip.stein-estado.stein-estado-informacion > .mud-chip-content::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* Eje secundario (§5.2 › Reglas): fondo transparente, borde y texto de la familia. */
.mud-chip.mud-chip-outlined.stein-estado.stein-estado-secundaria {
    background-color: transparent;
}

/* Lado 1em y separación 0.25em: lista cerrada, ficha §5.2. */
.mud-chip.stein-estado > .mud-chip-content::before {
    content: "";
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: 0.25em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Colores forzados (alto contraste de Windows): sin esto el fondo del ícono se fuerza a transparente y el
   ícono desaparece. currentColor ya es el color de texto que fija el sistema. */
@media (forced-colors: active) {
    .mud-chip.stein-estado > .mud-chip-content::before {
        forced-color-adjust: none;
    }
}

/* Tabla de datos · Controles §5.6. Encabezado en el tercer paso de texto. Sin líneas verticales, aunque
   alguien active Bordered: el :is() da la especificidad justa para ganarle a las tres reglas nativas.
   Aceptado: bajo el punto de quiebre xs, MudBlazor apila las celdas con una regla !important que vuelve a
   dibujar el borde derecho de una grilla Bordered; ahí la celda ya no es columna y la regla no aplica. */
.mud-data-grid .mud-table-root .mud-table-head .mud-table-cell {
    color: var(--stein-texto-3);
}

.mud-data-grid.mud-table-bordered .mud-table-container .mud-table-root :is(.mud-table-head, .mud-table-body, .mud-table-foot) .mud-table-row .mud-table-cell:not(:last-child) {
    border-right-style: none;
}

/* Columna de cifra: se declara con ClasesGrilla.Cifra en CellClass y HeaderClass; no se deduce de la
   alineación. La celda sin dato la pinta FormatoCelda, no esta hoja: :empty no ve una celda con espacios. */
.mud-data-grid .mud-table-cell.stein-cifra {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.mud-data-grid .mud-table-cell.stein-cifra .column-header {
    flex-direction: row-reverse;
}

/* Gráfico · Controles §5.8. La paleta y las tramas de barras las pone GraficoStein; acá va la señal por
   serie en líneas —continuo, guiones, puntos, guion y punto, guiones largos (lista cerrada, ficha
   §5.8)—, enganchada al color de la serie, y el marcador hueco. Vale igual para la muestra de la
   leyenda, que usa el mismo color. */
.stein-grafico :is(.mud-chart-line, .stein-grafico-muestra-trazo)[stroke="var(--stein-serie-2)"] {
    stroke-dasharray: 8 4;
}

.stein-grafico :is(.mud-chart-line, .stein-grafico-muestra-trazo)[stroke="var(--stein-serie-3)"] {
    stroke-dasharray: 2 3;
}

.stein-grafico :is(.mud-chart-line, .stein-grafico-muestra-trazo)[stroke="var(--stein-serie-4)"] {
    stroke-dasharray: 8 3 2 3;
}

.stein-grafico :is(.mud-chart-line, .stein-grafico-muestra-trazo)[stroke="var(--stein-serie-5)"] {
    stroke-dasharray: 14 4;
}

.stein-grafico .mud-chart-point {
    fill: var(--mud-palette-surface);
}

/* Cifras tabulares en ejes y etiquetas (§5.8 › Reglas, §8.2). */
.stein-grafico svg text {
    font-variant-numeric: tabular-nums;
}

.stein-grafico-leyenda {
    list-style: none;
}