html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error."
}

/* Las barras de herramientas (buscador + filtros) no envuelven por defecto en
   MudBlazor y en pantallas estrechas desbordan el ancho, forzando scroll
   horizontal de toda la página. En móvil las dejamos envolver en varias líneas.
   La barra superior fija (.mud-appbar) queda excluida a propósito: si ella también
   envuelve, crece de alto sin que el contenido de la página baje con ella, y la
   segunda línea (icono de cuenta) queda flotando encima del contenido — por eso la
   barra superior se compacta en vez de envolver (regla aparte, más abajo). */
@media (max-width: 600px) {
    .mud-toolbar:not(.mud-appbar .mud-toolbar) {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
        row-gap: 8px;
    }

    .mud-toolbar:not(.mud-appbar .mud-toolbar) > * {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* Barra superior: nunca envuelve — se compacta para que quepa en una sola línea */
    .mud-appbar .mud-toolbar {
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 0;
    }

    .dioni-logo-appbar {
        padding: 3px 8px !important;
        margin-left: 4px !important;
    }

    .mud-appbar img {
        height: 32px !important;
    }

    .mud-appbar .mud-toolbar .mud-icon-button {
        padding: 6px;
    }
}

/* Contenido de los artículos de ayuda (renderizado desde Markdown) */
.ayuda-contenido h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
.ayuda-contenido h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.ayuda-contenido h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.ayuda-contenido p { margin: 0 0 .75rem; line-height: 1.55; }
.ayuda-contenido ul, .ayuda-contenido ol { margin: 0 0 .75rem 1.25rem; }
.ayuda-contenido li { margin-bottom: .25rem; line-height: 1.5; }
.ayuda-contenido strong { font-weight: 600; }
.ayuda-contenido code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.ayuda-contenido a { color: var(--mud-palette-primary); text-decoration: none; }
.ayuda-contenido a:hover { text-decoration: underline; }

/* Impresión de listados: oculta menú/barra/filtros y deja solo el título y la tabla.
   El propio diálogo de impresión del navegador ya ofrece "Guardar como PDF" como destino,
   así que un único botón "Imprimir / PDF" (window.print()) cubre los dos casos. */
@media print {
    .mud-appbar, .mud-drawer, .mud-drawer-container, .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mud-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    body, .mud-table, .mud-paper {
        background: white !important;
        box-shadow: none !important;
    }

    .mud-table-row:hover {
        background: transparent !important;
    }

    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; page-break-after: auto; }
}

/* Contador del icono de notificaciones. pointer-events:none para que nunca robe el
   clic al botón que tiene debajo (esa fue la causa de que el menú no se abriera). */
.dioni-notif-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    background: var(--mud-palette-error, #f44336);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    font-weight: 600;
    pointer-events: none;
}