h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Cabecera de tablas uniforme en toda la aplicación: fondo gris suave y
   texto atenuado para diferenciarla del contenido (mismos tokens de tema
   que ya usa el resto de la app para "gris suave", no colores sueltos).
   Selector repetido con la misma especificidad que la regla de color de
   MudBlazor (.mud-table-root .mud-table-head .mud-table-cell) — si no,
   pierde aunque se cargue después, porque CSS decide primero por
   especificidad y solo usa el orden como desempate. */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* Tablas compactas en toda la aplicación (cabecera de unos 40 px y filas de unos 45 px, como las listas de otras
   aplicaciones de gestión): menos relleno vertical y los títulos de columna en una sola línea. MudBlazor pone 16 px
   de relleno, que hace las filas y la cabecera demasiado altas. Mismo selector que MudBlazor para ganarle por especificidad. */
.mud-table-root .mud-table-head .mud-table-cell {
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.25;
}
/* Las cabeceras con casilla de selección o con el selector de columnas llevan un control de 30 px: sin quitarles el
   relleno vertical la cabecera subiría a unos 47 px. */
.mud-table-root .mud-table-head .mud-table-cell:has(.mud-checkbox),
.mud-table-root .mud-table-head .mud-table-cell:has(.mud-menu) {
    padding-top: 0;
    padding-bottom: 0;
}
.mud-table-root .mud-table-body .mud-table-cell {
    padding: 6px 12px;
}
/* Altura mínima uniforme de las filas (la fila sube solo si el contenido lo necesita). */
.mud-table-root .mud-table-body .mud-table-row {
    height: 44px;
}
/* El chip de estado lleva 4 px de margen propio: dentro de una celda haría la fila más alta de lo necesario. */
.mud-table-root .mud-table-cell .mud-chip {
    margin: 0;
}
.mud-table-root .mud-table-cell.mud-table-cell-checkbox,
.mud-table-root .mud-table-head .mud-table-cell.mud-table-cell-checkbox {
    padding: 0 0 0 8px;
    width: 40px;
}

/* Mensajes del asistente de IA: el texto llega en Markdown y se pinta como HTML dentro de la burbuja. */
.md-asistente {
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.md-asistente > :first-child { margin-top: 0; }
.md-asistente > :last-child { margin-bottom: 0; }
.md-asistente p { margin: 0 0 0.5em; }
.md-asistente ul, .md-asistente ol { margin: 0 0 0.5em; padding-left: 1.3em; }
.md-asistente li { margin-bottom: 0.15em; }
.md-asistente strong { font-weight: 600; }
.md-asistente h1, .md-asistente h2, .md-asistente h3, .md-asistente h4 { font-size: 0.95rem; font-weight: 600; margin: 0.6em 0 0.3em; }
.md-asistente code { font-family: monospace; background: rgba(0, 0, 0, 0.06); padding: 0 4px; border-radius: 4px; }
.md-asistente a { color: var(--mud-palette-primary); }
.md-asistente table { border-collapse: collapse; margin: 0 0 0.5em; font-size: 0.8rem; }
.md-asistente th, .md-asistente td { border: 1px solid var(--mud-palette-lines-default); padding: 2px 6px; text-align: left; }
.md-asistente th { background: rgba(0, 0, 0, 0.04); }

/* Ficha rápida del cliente (panel lateral de Clientes). */
.ficha-factura {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    cursor: pointer;
}
.ficha-factura:hover { background: var(--mud-palette-background-gray); }
.ficha-dato {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 12px;
    padding: 2px 0;
}

/* Nombre del producto con el formato del logotipo (componente Marca). */
.marca-nombre { font-weight: 700; letter-spacing: 0; text-transform: none; }
.marca-my { color: #00275F; }
.marca-oficina { color: var(--mud-palette-primary); }
.marca-ia { color: var(--mud-palette-tertiary); }

/* Barra de acciones masivas: flota abajo, centrada, cuando hay filas marcadas en un listado. */
.barra-seleccion {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1250;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: calc(100vw - 32px);
    padding: 8px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: var(--mud-elevation-8);
}
.barra-seleccion-resumen { min-width: 130px; }
.barra-seleccion-acciones { display: flex; align-items: center; gap: 4px; overflow-x: auto; }
.accion-masiva {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
}
.accion-masiva:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.accion-masiva:disabled { opacity: 0.4; cursor: not-allowed; }
.accion-masiva.peligro { color: var(--mud-palette-error); }