/* === Tipografía de marca SERVIDA POR NOSOTROS ==============================
   Plus Jakarta Sans (OFL-1.1, ver fonts/OFL.txt) desde wwwroot, no desde Google Fonts. Tres motivos,
   todos medidos:
     · la CSP objetivo del proyecto es `font-src 'self'` (SecurityHardening.cs, hoy en Report-Only): al
       promocionarla a efectiva, la fuente del CDN dejaría de cargar y TODA la app caería a Segoe UI;
     · al guardar la ficha como PDF, la fuente del CDN no acababa en el documento: el PDF incrustaba
       Segoe UI (comprobado leyendo /BaseFont del PDF generado), y eso es lo que el cliente vio como
       mala calidad de las fuentes (2026-08-04);
     · se sirven los pesos ESTÁTICOS, no la fuente variable: Chrome no incrusta instancias de una fuente
       variable al exportar a PDF y la sustituye por una del sistema. Con estáticos, el PDF lleva la
       tipografía de la marca. Cada archivo son ~15 KB (subconjunto latino, que cubre los 5 idiomas). */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-400.woff') format('woff');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-500.woff') format('woff');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-600.woff') format('woff');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-700.woff') format('woff');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-800.woff') format('woff');
}

h1:focus {
    outline: none;
}

/* --- Capa de pulido visual moderna (GR-47914). Solo refinamientos sobre el MudTheme;
   los COLORES de marca siguen viviendo en ApigesWatchTheme.cs, aquí solo profundidad. --- */

/* Fondo con degradado sutil: aporta profundidad sin abandonar el azul/oscuro de marca. */
.mud-dark-theme {
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(45, 180, 234, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(35, 137, 206, 0.07), transparent 55%);
    background-attachment: fixed;
}

.mud-light-theme {
    background-image:
        radial-gradient(1100px 600px at 100% -10%, rgba(35, 137, 206, 0.06), transparent 60%);
    background-attachment: fixed;
}

/* AppBar tipo "glass": translúcida con desenfoque y borde inferior fino. */
.mud-appbar {
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Tarjetas y paneles: bordes suaves y transición de elevación al pasar el ratón. */
.mud-paper {
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.mud-card:hover {
    box-shadow: var(--mud-elevation-8);
}

/* Drawer con un borde sutil que lo separa del contenido. */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

/* === Topbar: buscador global y footer legal (GR-47914) ==================== */
.aw-topbar-search {
    max-width: 280px;
}

.aw-footer {
    text-align: center;
    padding: 16px;
    margin-top: 24px;
    border-top: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}

/* Nº de expedientes PULSABLE en Clientes (GR-49324): es un <a href> (enlace real); esta pastilla
   azul rellena con SOLO el número (sin punto) + tooltip es la señal visual de enlace a "Mis
   expedientes" filtrado. text-decoration:none para que el ancla no salga subrayada. */
/* La MISMA caja para el conteo pulsable y para el cero (GR-50336): mismo ancho mínimo, alto y
   relleno, así los dígitos de todas las filas caen en la misma vertical. El cero iba antes en un
   <span> a pelo y, como la columna se alinea a la derecha y la pastilla mete 8px de relleno, se
   pegaba al borde de la celda y la columna se leía descentrada (visto 2026-09-08). */
.aw-client-assets-link,
.aw-client-assets-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

/* Sin expedientes no hay nada que filtrar: el cero NO es pulsable, así que no lleva pastilla ni
   cursor de mano — solo el hueco, y en gris apagado para que no compita con los conteos que sí
   llevan a algún sitio. */
.aw-client-assets-none {
    color: var(--mud-palette-text-secondary);
}

.aw-client-assets-link {
    border-radius: 999px;
    text-decoration: none;
    /* Por defecto una BOLITA gris con cuerpo (visible, no soso); al pasar el ratón se tiñe de AZUL
       de marca para invitar a pulsar. color-mix sobre el texto → gris correcto en claro y oscuro. */
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
}
.aw-client-assets-link:hover,
.aw-client-assets-link:focus-visible {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Tabla de Clientes con anchos FIJOS (GR-49324): las columnas no saltan al paginar según el
   contenido; Cliente y correo recortan con "…" (aw-ellipsis) y muestran el texto completo en un
   tooltip con flecha. aw-ellipsis-col deja que el texto encoja dentro del flex de la celda. */
.aw-clients-table table {
    table-layout: fixed;
}
.aw-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aw-ellipsis-col {
    min-width: 0;
    overflow: hidden;
}
/* Envoltorio del MudTooltip en las celdas con elipsis: debe ser BLOQUE y poder encoger para que la
   elipsis del contenido funcione conservando el tooltip (flecha). La clase se aplica con RootClass
   (API pública de MudTooltip) + Inline="false", en vez de acoplarse a los nombres internos
   .mud-tooltip-root/.mud-tooltip-inline de MudBlazor (frágiles ante una subida de versión). */
.aw-ellipsis-tip {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
/* GR-49410: Denominación/Titular/Cliente de Mis expedientes recortan a 2 LÍNEAS con "…"; el texto
   completo se ve en un tooltip (igual que País). Se combina con aw-ellipsis-tip (RootClass del
   MudTooltip) para que el envoltorio sea bloque y el recorte funcione dentro del ancho de columna. */
.aw-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* GR-49410: la descripción (columna Tarea) de Tareas/Vencimientos recorta a 3 LÍNEAS con "…" y el
   texto completo va en tooltip. */
.aw-clamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* GR-49410: tooltip flotante único para las celdas recortadas (data-awtip), con el MISMO aspecto que
   el tooltip de MudBlazor (el de las modalidades). Lo posiciona/gestiona el helper de App.razor;
   position:fixed para no ser recortado por el overflow de las tablas. */
/* Solo POSICIONAMIENTO: el aspecto (fuente/color/fondo/padding/radio) lo aportan las clases
   mud-tooltip mud-tooltip-default que también lleva el elemento (idéntico al de las modalidades). */
.aw-tip {
    position: fixed;
    z-index: 3000;
    display: none;
    transform: translate(-50%, calc(-100% - 8px));
    max-width: 340px;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/* GR-49410: en el alta/edición de expediente, el mensaje de validación ("Campo obligatorio") NO debe
   desplazar el resto del formulario. Se reserva un hueco fijo bajo cada campo y el texto de ayuda/
   error se posiciona ABSOLUTO dentro de él, así aparecer/desaparecer no cambia la altura de la fila. */
.aw-dialog-expediente .mud-input-control { position: relative; margin-bottom: 20px; }
.aw-dialog-expediente .mud-input-control .mud-input-control-helper-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
}

/* EXCEPCIÓN a la regla de arriba: los campos con AYUDA PERMANENTE (hoy solo el Nº de referencia)
   vuelven al FLUJO normal (GR-49574, petición del cliente 2026-08-06: «está muy pegado el nº de
   referencia con Titular y se medio montan las letras»).
   El motivo del absoluto es que un mensaje de validación —que aparece y desaparece— no descoloque el
   formulario; una ayuda que está SIEMPRE no tiene ese problema, y en cambio sí sufría lo contrario: al
   no ocupar altura, solo contaba con los 20px reservados y en cuanto la frase pasaba a DOS líneas (las
   lenguas con la frase más larga, o el diálogo encogido en pantallas estrechas) se metía dentro del
   campo «Titular» de la fila siguiente. En el flujo ocupa lo que necesite y la fila de abajo se coloca
   debajo, siempre. Y la holgura de la CELDA (padding-bottom) es el aire extra que pidió el cliente:
   se pone aquí y no en el margen del control porque ese margen ya lo fija la regla de arriba. */
.aw-dialog-expediente .aw-field-hinted { padding-bottom: 12px; }
.aw-dialog-expediente .aw-field-hinted .mud-input-control .mud-input-control-helper-container {
    position: static;
    margin-top: 3px;
}

/* === Estado vacío reutilizable ============================================ */
.aw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.aw-empty__icon {
    font-size: 3rem;
    opacity: 0.4;
}

/* === Pantallas de autenticación (públicas, GR-47898) ====================== */
.aw-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.aw-auth__card {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    border-radius: 16px;
}

/* El <fieldset> con el que AuthLayout cierra la pantalla hasta que está hidratada (ver su comentario)
   NO debe verse: se le quitan el marco, el relleno y el ancho mínimo que le pone el navegador de serie
   —ese min-width le impide encogerse y desbordaría la tarjeta en móvil—. Es solo un interruptor. */
.aw-auth__gate {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Mientras carga, la barra ocupa su sitio sin empujar el contenido al aparecer y desaparecer. */
.aw-auth__loading { margin-bottom: 12px; }

.aw-auth__form {
    display: flex;
    flex-direction: column;
}

.aw-auth__label {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 10px 0 4px;
    color: var(--mud-palette-text-secondary);
}

.aw-auth__input {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0,0,0,0.23));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    outline: none;
}
.aw-auth__input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.aw-auth__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

.aw-auth__radio-group {
    display: flex;
    gap: 20px;
    margin: 4px 0 18px;
}

/* Envuelve label+input de "Empresa" para poder ocultarlo entero por JS (persona física) sin
   perder el apilado vertical label-encima-de-input del resto del formulario. */
#companyField {
    display: flex;
    flex-direction: column;
}
.aw-auth__radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.aw-auth__submit {
    margin-top: 8px;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.aw-auth__submit:hover {
    filter: brightness(1.05);
}

/* === Sidebar moderno (GR-47914) ============================================
   Navegación agrupada con "pills" de estado activo tintadas con el primario de
   marca. Todos los colores derivan de las variables del MudTheme. ========== */
.aw-nav__scroll {
    overflow-y: auto;
    padding: 12px 10px;
}

/* Etiqueta de sección: discreta, en mayúsculas, separa bloques de navegación. */
.aw-nav__section {
    padding: 16px 12px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}
.aw-nav__section:first-child {
    padding-top: 4px;
}

/* Enlaces: forma de pill, más aire, transición suave. */
.aw-nav .mud-nav-link {
    border-radius: 10px;
    margin: 2px 4px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 500;
    transition: background-color 140ms ease, color 140ms ease;
}

.aw-nav .mud-nav-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

/* Estado activo: pill tintada de marca + acento lateral + icono/texto en primario. */
.aw-nav .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}
.aw-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Pie fijo del sidebar: símbolo de marca + edición. */
.aw-nav__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}
.aw-nav__footer-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.aw-nav__footer-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.aw-nav__footer-meta {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

/* Foco visible y moderno en controles interactivos (accesibilidad). */
.mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Bis / Variante del alta de expediente (GR-49683 p.1): ancho FIJO y pequeño. Son tres caracteres;
   dándole una celda de la rejilla se quedaba con un cuarto del formulario para enseñar «AAA» y dejaba
   el nº de expediente recortado con puntos suspensivos. 60px es lo que ocupan tres caracteres con su
   holgura: ya no lo marca la etiqueta, que pasó a marca de agua justamente para poder bajar de aquí.
   No se encoge ni se estira: todo el ancho sobrante es para el número. */
.aw-bis-field {
    flex: 0 0 84px;
    width: 84px;
}

/* LA CLAVE para que un campo de texto quepa en una caja estrecha: un <input> trae de fábrica un ancho
   intrínseco de unos 180px (el famoso size=20) y, dentro de un contenedor flex, se NIEGA a bajar de
   ahí — min-width:auto es el valor por defecto. Así que el input desbordaba sus 84px, se salía del
   borde y arrastraba consigo la muesca de la etiqueta: el campo aparecía sin rótulo y con la línea
   del borde cruzando el valor. Con min-width:0 el input se encoge hasta donde le digan y el campo se
   comporta como cualquier otro, con su etiqueta en el borde.
   Los 84px salen de la etiqueta más larga de las cinco lenguas («Variante») dentro de la muesca. */
.aw-bis-field .mud-input-control,
.aw-bis-field .mud-input,
.aw-bis-field input {
    min-width: 0;
}

/* «Actos por mes» de Análisis (GR-49683 p.12): la tarjeta tiene que medir LO MISMO tenga el despacho
   tres tipos de acto o veinte. Antes crecía por los dos extremos —la leyenda de arriba sumaba una
   línea de pastillas por cada acto nuevo y la tabla de abajo una fila— y la gráfica acababa fuera de
   la pantalla. Se acota la altura de las dos y se deslizan por dentro: nada desaparece (el cliente
   pidió «poder seguir seleccionando todos»), simplemente deja de empujar. */
.aw-acts-legend {
    max-height: 5.5rem;      /* ~2 líneas de pastillas; a partir de ahí se desliza */
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
}

.aw-acts-table {
    max-height: 22rem;
    overflow: auto;
}

/* Cabecera fija al deslizar: sin esto se pierde de vista de qué mes es cada columna en cuanto
   bajas dos filas, y una tabla de números sin cabecera no se puede leer. */
.aw-acts-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* Cabecera de la ficha del expediente (GR-49683 p.14): los botones de acción NO se mueven de sitio
   por mucho que mida la denominación. La cabecera ya no envuelve, así que el reparto de ancho lo
   deciden estas tres reglas:
     · el bloque del TÍTULO puede encogerse hasta cero (min-width:0) — sin esto, un elemento flex se
       niega a bajar de su contenido y es lo que empujaba a los botones a la línea de abajo;
     · la barra de ACCIONES no se encoge ni se estira (flex:0 0 auto): ocupa lo suyo y ahí se queda;
     · la denominación reparte en varias líneas, partiendo incluso una palabra sin espacios (los
       nombres de marca suelen serlo), en vez de forzar el ancho de su bloque. */
.aw-detail-header { gap: 16px; }
.aw-detail-header-title { flex: 1 1 auto; min-width: 0; }
/* El bloque de dentro también puede encoger: sin este min-width:0, cuando la barra de acciones se
   queda con el ancho, el título y sus pastillas se salían de su caja y se pintaban ENCIMA de los
   botones —«Concedido» sobre «Editar»— en vez de repartirse en varias líneas (GR-50640). */
.aw-detail-header-title > div { min-width: 0; }
.aw-detail-header-title .mud-typography-h4 { overflow-wrap: anywhere; }
.aw-detail-header-actions { flex: 0 0 auto; justify-content: flex-end; }

/* En pantalla estrecha sí interesa que la cabecera se parta en dos filas: si no, los botones
   estrujarían el título hasta hacerlo ilegible. El título pasa arriba y las acciones debajo.
   Hasta 1.440 px y no 960: con los cuatro botones CON TEXTO, el interruptor y la papelera, la barra
   de acciones mide 670 px MEDIDOS, así que a 1.280 al título le quedaban 279 —dos líneas para una
   denominación corriente— y a menos, las pastillas se montaban sobre los botones (2026-09-14).
   Y «div.» porque la utilidad «flex-nowrap» de MudBlazor lleva su propio !important: entre dos
   !important desempata la especificidad, no el orden. */
@media (max-width: 1439.98px) {
    div.aw-detail-header { flex-wrap: wrap !important; }
    .aw-detail-header-title { min-width: 100%; }
    .aw-detail-header-actions { justify-content: flex-start; min-width: 100%; }
}

/* MÓVIL de verdad (GR-50640). A 960 px basta con partir la cabecera en dos filas, pero a 390 el
   bloque del título se quedaba sin ancho —es un flex con min-width:0— y su contenido se DERRAMABA
   fuera de su caja: la pastilla «Concedido» se pintaba encima del botón «Exportar» y «Marca Nacional»
   sobre las flechas de navegación. Aquí el título ocupa su propia línea entera y las flechas la suya. */
@media (max-width: 599.98px) {
    /* «div.» y no solo la clase: el componente trae Wrap.NoWrap, y esa utilidad de MudBlazor ya lleva
       su propio !important, así que entre dos !important desempata la ESPECIFICIDAD —y una clase a
       secas empataba y perdía por orden de carga—. Sin esto la cabecera seguía en una sola fila: el
       título se quedaba en 0 px, la denominación salía partida letra a letra y la página declaraba
       775 px de ancho sobre una pantalla de 390 (medido en el navegador, 2026-09-14). */
    div.aw-detail-header { flex-wrap: wrap !important; }
    /* min-width:100% y no flex-basis: obliga al bloque del título a ocupar la fila ENTERA, así que
       las acciones bajan a la suya. Con flex-basis el reparto seguía dejándolo en 0 px de ancho
       —medido en el navegador— y la denominación salía partida letra a letra. */
    .aw-detail-header-title { min-width: 100%; flex-wrap: wrap; }
    .aw-detail-header-title > div { flex: 1 1 auto; min-width: 0; }
    /* Las acciones, en su fila entera Y con techo: la regla de escritorio les da «flex: 0 0 auto», que
       las dimensiona por contenido —400 px con los seis controles— y así no envolvían nunca por mucho
       flex-wrap que tuvieran. Con max-width sí encogen, y lo que no cabe baja de línea. */
    .aw-detail-header-actions { min-width: 100%; max-width: 100%; flex: 0 1 auto; }

    /* Botones SOLO CON ICONO (petición del cliente 2026-09-14): con su texto, seis acciones no caben
       en 390 px ni partiéndolas. El texto NO se quita del DOM —se reduce a tamaño 0— para que siga
       ahí para quien navegue con lector de pantalla. */
    .aw-detail-header-actions .mud-button-root .mud-button-label {
        font-size: 0;
        gap: 0;
        justify-content: center;
    }
    .aw-detail-header-actions .mud-button-root .mud-button-label .mud-icon-root {
        font-size: 1.25rem;
        margin: 0;
    }
    /* El margen que descentraba el icono lo pone MudBlazor en el ENVOLTORIO (.mud-button-icon-start),
       no en el icono: medido, lo dejaba 6 px a la izquierda del centro del botón. */
    .aw-detail-header-actions .mud-button-root .mud-button-icon-start { margin: 0; }
    /* Botón CUADRADO y sin relleno: con el ancho de un botón con texto, el icono quedaba descentrado
       —le sobraba caja por los lados— (petición del cliente 2026-09-14). */
    .aw-detail-header-actions .mud-button-root {
        min-width: 0;
        width: 40px;
        height: 40px;
        padding: 0;
    }
}

/* Timeline de fechas de la ficha del expediente (petición 2026-07-03): compacto dentro de
   su tarjeta — sin el relleno por defecto de MudTimeline y con menos aire entre etapas. */
.aw-dates-timeline { padding: 0 !important; }
.aw-dates-timeline .mud-timeline-item { min-height: 56px; padding-bottom: 8px; }
.aw-dates-timeline .mud-timeline-item-content { padding: 0 0 0 16px; }

/* ACTOS de la ficha en MÓVIL (GR-50640). Es una MudSimpleTable —sin el modo apilado que sí trae
   MudTable—, así que sus cuatro columnas se salían por la derecha y no había barra con la que llegar
   a ellas: los actos, sencillamente, no se podían leer en un móvil. Cada fila pasa a ser un bloque de
   «etiqueta … valor»: más sencillo, pero que se vea, que es lo que se pidió.
   (Nombre propio y no «aw-acts-table»: esa ya es de la tabla de Análisis.) */
@media (max-width: 599.98px) {
    /* !important en el display: MudBlazor fija el suyo para las celdas de tabla con más peso que un
       selector de clase, y sin esto la tabla seguía pintándose en columnas (comprobado en el
       navegador: la regla llegaba, el media casaba y el selector acertaba, pero no ganaba). */
    .aw-asset-acts thead { display: none !important; }
    .aw-asset-acts tbody tr {
        display: block !important;
        padding: 10px 0;
        border-bottom: 1px solid var(--mud-palette-divider);
    }
    .aw-asset-acts tbody tr:last-child { border-bottom: none; }
    .aw-asset-acts tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border: none;
        padding: 3px 0;
    }
    /* La etiqueta sale del data-label: sin cabecera, una fecha suelta no dice de qué fecha habla. */
    .aw-asset-acts tbody td::before {
        content: attr(data-label);
        flex: none;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }
}

/* Imagen del expediente en su ficha (feedback 2026-07-03, 2ª pasada): visor de activo al estilo
   de los gestores de marca modernos — tablero de transparencia sutil, esquinas redondeadas,
   sombra suave y zoom al pasar el ratón. Colores del tema MudBlazor (§7) → vale en modo oscuro. */
.aw-asset-image-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 280px;
    max-width: 420px;
    height: 220px;
    padding: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background:
        conic-gradient(var(--mud-palette-background-gray) 25%, transparent 25% 50%,
                       var(--mud-palette-background-gray) 50% 75%, transparent 75%) 0 0 / 20px 20px,
        var(--mud-palette-surface);
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.aw-asset-image-frame:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.aw-asset-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
    transition: transform .25s ease;
}

.aw-asset-image-frame:hover img {
    transform: scale(1.05);
}

/* Píldora de lupa que aparece al pasar el ratón: refuerza que la imagen se amplía al pulsar. */
.aw-asset-image-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}

.aw-asset-image-frame:hover .aw-asset-image-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* Bloques solo visibles al imprimir (cabecera del PDF del comparativo, GR-47991). */
.aw-print-only { display: none; }

/* Impresión / exportación a PDF: deja solo el contenido, sin el chrome de la app. */
@media print {
    /* Oculta navegación, barras, migas, pie y cualquier elemento marcado como no imprimible. */
    .mud-appbar,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-breadcrumbs,
    .aw-footer,
    .aw-no-print {
        display: none !important;
    }

    /* El contenido ocupa toda la página, sin el desplazamiento que deja el drawer. */
    .mud-layout,
    .mud-main-content {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Tarjetas planas y sin cortes a mitad de página. */
    .mud-card,
    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    .aw-print-only { display: block !important; }

    body { background: #fff !important; }

    /* --- Ficha de coincidencia: el PDF debe salir IGUAL que la pantalla (petición del cliente
       2026-08-04). Estas tres reglas son las que faltaban para eso. --- */

    /* 1) Hoja y márgenes explícitos: sin esto Chrome aplica los suyos y la ficha se parte en dos hojas. */
    @page { size: A4 portrait; margin: 10mm; }

    /* 2) Los COLORES son información en esta pantalla: el anillo de similitud, las clases coincidentes en
       rojo y el plazo de oposición en ámbar. Por defecto el navegador DESCARTA fondos y colores al
       imprimir, y eso es lo que hacía que la impresión pareciera pobre. */
    html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* 3) NADA de capas compuestas: sin esto Chrome rasterizaba cada tarjeta y la metía en el PDF como
       un JPEG (medido: tres imágenes DCTDecode de ~550x157), así que el texto salía comprimido y
       borroso —lo que el cliente vio como mala calidad de las fuentes—. Las transiciones sobre
       transform/box-shadow y los filtros son lo que promociona esas capas; al imprimir no aportan nada.
       Con esto el texto va como TEXTO vectorial y se mantiene nítido a cualquier zoom. */
    * {
        transition: none !important;
        animation: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: auto !important;
        transform: none !important;
    }

    /* 4) Las dos tarjetas siguen LADO A LADO. El md="6" de MudBlazor mira el ancho de la VENTANA y al
       imprimir en A4 (~794px) ese punto de ruptura no se cumple, así que se apilaban una debajo de otra
       y la ficha impresa no se parecía a la de pantalla. */
    .aw-compare-grid { display: flex !important; flex-wrap: nowrap !important; }
    .aw-compare-grid > .mud-grid-item { flex: 1 1 50%; max-width: 50%; }
}
/* === Capa "memorable" (2026-06-11): el degradado del símbolo como SISTEMA ================
   Tokens derivados de ApigesWatchTheme.cs (#2DB4EA → #2389CE → #1A4FA0). Aquí no se inventan
   colores: se aplica la identidad existente de forma sistemática. ======================== */
:root {
    --aw-grad: linear-gradient(135deg, #2db4ea 0%, #2389ce 55%, #1a4fa0 100%);
    --aw-grad-soft: linear-gradient(135deg, rgba(45,180,234,.16), rgba(26,79,160,.16));

    /* Situaciones del expediente (GR-49225): pasteles que la paleta de MudBlazor no cubre.
       Centralizados aquí (§7) en vez de incrustar el hex en los componentes (AssetStatusView). */
    --aw-status-annulled-bg: #80deea;      /* cian pastel: «Anulado» */
    --aw-status-annulled-fg: #06424b;
    --aw-status-surrendered-bg: #ffe082;   /* amarillo pastel: «Renunciado» */
    --aw-status-surrendered-fg: #5f4a00;
    /* Lavanda: «En renovación» (GR-49771, color elegido por el cliente). Tono PROPIO y no una
       variante del verde de «Concedido» ni del azul de «En trámite»: es un tránsito, y en el listado
       tiene que distinguirse de un golpe de vista de los dos estados entre los que vive.
       A diferencia del cian de «Anulado» y el amarillo de «Renunciado», este pastel es tan claro que
       sobre la fila blanca de la tabla se difumina, así que lleva BORDE: sin él el chip deja de
       leerse como pastilla y parece texto suelto en la columna. */
    --aw-status-inrenewal-bg: #f3e8ff;
    --aw-status-inrenewal-fg: #6b21a8;
    --aw-status-inrenewal-border: #e9d5ff;
    /* Y un tono SÓLIDO aparte para la barra de Analítica: el lavanda del chip funciona porque lleva
       texto oscuro encima y borde, pero como barra de color plano sobre fondo blanco no se vería.
       Misma familia, para que la gráfica y el listado sigan hablando del mismo estado. */
    --aw-status-inrenewal-bar: #a855f7;

    /* Paleta CATEGÓRICA de gráficas (GR-49496). Para series SIN orden —los tipos de acto— hacen
       falta TONOS DISTINTOS, no tonalidades del mismo azul: con la paleta del tema (Primary,
       Secondary, Tertiary e Info son todos azules de marca) las barras contiguas no se distinguían.
       Los cinco primeros son los que ya usaba el panel de negocio (AdminAnalytics); los tres
       últimos rellenan huecos de tono (teal, magenta y pizarra) porque el resto de su paleta
       repetía azul (#5bc0de) o era invisible sobre el fondo oscuro (#14223A).
       Centralizados aquí (§7): los componentes referencian var(--aw-chart-N), nunca el hex. */
    --aw-chart-1: #2389ce;   /* azul de marca */
    --aw-chart-2: #1b8a5a;   /* verde */
    --aw-chart-3: #e0a800;   /* ámbar */
    --aw-chart-4: #8e5bd0;   /* morado */
    --aw-chart-5: #d9534f;   /* rojo */
    --aw-chart-6: #0f9b9b;   /* teal */
    --aw-chart-7: #d9539b;   /* magenta */
    --aw-chart-8: #64748b;   /* pizarra */
}

/* En OSCURO los mismos tonos, aclarados: sobre el fondo de marca (#12161f) los medios se apagan.
   Mismo orden y mismo tono, solo sube la luminosidad — la serie no cambia de identidad al
   cambiar de tema. */
.mud-dark-theme {
    --aw-chart-1: #4aa8e8;
    --aw-chart-2: #2fae74;
    --aw-chart-3: #f0b429;
    --aw-chart-4: #a97ce0;
    --aw-chart-5: #e8736f;
    --aw-chart-6: #22b8b8;
    --aw-chart-7: #e878b0;
    --aw-chart-8: #94a3b8;
}

/* Chip de SITUACIÓN (GR-49225): tamaño UNIFORME (mismo ancho mínimo y texto centrado sea cual sea la
   etiqueta o el idioma). Antes iba en el Style inline de AssetStatusView; centralizado aquí para que
   el C# solo decida el COLOR (revisión PR #6532). */
.aw-status-chip {
    /* 100px de ancho MÍNIMO. Se probó subirlo a 132px para que cupiera la etiqueta más larga de los 5
       idiomas (GR-49771, «En renouvellement») y quedó fatal: engorda TODAS las pastillas de todas las
       pantallas para acomodar a una. La uniformidad no vale ese precio — si una etiqueta se pasa, que
       crezca ese chip y no los otros seis. */
    min-width: 100px;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

/* Fecha de VENCIMIENTO del formulario de expediente (GR-49771 p.3): baja al final del bloque de
   fechas, centrada y destacada, porque es LA fecha del expediente y ya no comparte fila con nada.
   Solo aparece cuando se puede editar (países sin ley de renovación propia), así que no hay estado
   de solo lectura que contemplar aquí. Ancho acotado: centrado no significa un campo de 900px. */
.aw-expiry-field {
    width: 100%;
    max-width: 260px;
}

.aw-expiry-field .mud-input-slot,
.aw-expiry-field .mud-input-label {
    font-weight: 600;
}

/* Campo dentro de un diálogo (GR-49771): a lo ancho del diálogo queda enorme para lo que es —una
   fecha, diez caracteres— y desequilibra la caja.
   380px y no menos: el mínimo lo marca la ETIQUETA, y hay que medirla CON EL CAMPO VACÍO. Con valor,
   el rótulo se encoge arriba (0.75em) y cabe en mucho menos; al borrar la fecha vuelve a tamaño
   completo dentro del campo y a 300px se cortaba en seco («…renovació»), justo en el momento en que
   el usuario más necesita leerlo — cuando le estamos diciendo que es obligatorio. El tope lo pone
   «Fecha de presentación de decl. de uso», más larga aún en francés e italiano. */
.aw-dialog-date {
    max-width: 380px;
}


/* Texto con degradado: para las cifras protagonistas (KPIs, hero). */
.aw-gradient-text {
    background: var(--aw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Foco de inputs outlined: anillo de marca (sustituye el azul genérico). */
.mud-input-control .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #2389ce;
    box-shadow: 0 0 0 3px rgba(35, 137, 206, 0.16);
}

/* Acento del enlace ACTIVO del sidebar: barra con el degradado del símbolo. */
.aw-nav .mud-nav-link.active { position: relative; }
.aw-nav .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 4px; top: 22%; bottom: 22%;
    width: 3px; border-radius: 3px;
    background: var(--aw-grad);
}

/* === Ritmo y percepción de calidad ======================================== */
/* Las cifras no bailan: dígitos tabulares en toda la app. */
body { font-variant-numeric: tabular-nums; }
/* GR-49410: reserva SIEMPRE el hueco de la barra de scroll vertical. Sin esto, una página con pocas
   filas (p. ej. la última del paginado) oculta la barra y el contenido se ensancha/desplaza un poco
   al cambiar de página. Afecta a Mis Expedientes, Clientes y todo Vigilancia (mismo scroll de página). */
html { scrollbar-gutter: stable; }

/* GR-49410: combo de filtro con sugerencias (FilterSearchCombo). El desplegable va ABSOLUTO bajo el
   campo (no empuja el resto). La BARRA de filtros sube su contexto de apilado (position+z-index) por
   ENCIMA de la tabla: si no, el desplegable quedaba DETRÁS y se veían los chips/toggles de la tabla a
   través de él (parecía "transparente"). */
.aw-assets-filter { position: relative; z-index: 30; }
.aw-combo { position: relative; }
.aw-combo-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}
.aw-combo-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aw-combo-item:hover { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06)); }

/* GR-49410: fuente UNIFORME en TODOS los campos de filtro de Mis Expedientes (texto libre, combos de
   búsqueda y MudSelect de Modalidad/Responsable/Estado). Los MudTextField pintan el valor en <input>;
   los MudSelect lo pintan en un <div class="mud-input-slot mud-select-input"> (NO es un input), así que
   hay que apuntar también a .mud-input-slot. !important porque app.css se carga ANTES que MudBlazor y
   perdería por orden a igual especificidad. */
.aw-assets-filter .mud-input-control input,
.aw-assets-filter .mud-input-control .mud-input-slot { font-size: 15px !important; }

/* Selección de texto en color de marca. */
::selection { background: rgba(35, 137, 206, 0.28); }

/* Scrollbars finos y discretos. */
* { scrollbar-width: thin; scrollbar-color: rgba(35, 137, 206, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(35, 137, 206, 0.35); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Entrada suave del contenido principal (sutil; respeta reduced-motion). */
@keyframes awIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.mud-main-content .mud-card,
.mud-main-content .mud-paper:not(.mud-table-container) { animation: awIn .28s ease both; }
.mud-table-row { transition: background-color .12s ease; }
@media (prefers-reduced-motion: reduce) {
    .mud-main-content .mud-card, .mud-main-content .mud-paper { animation: none; }
}

/* === Anillo de similitud (SimilarityRing.razor) =========================== */
.aw-simring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.aw-simring svg { display: block; }
.aw-simring__track { fill: none; stroke: var(--mud-palette-divider); stroke-width: 3.6; }
.aw-simring__bar { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.aw-simring__value {
    position: absolute;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap; /* "100%" no debe partirse ni desbordar el anillo */
    color: var(--mud-palette-text-primary);
}
.aw-simring__value small { font-size: 0.62em; font-weight: 600; opacity: .65; }

/* === Hero del dashboard ==================================================== */
.aw-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 26px 30px;
    color: #ffffff;
    background:
        radial-gradient(700px 280px at 90% -30%, rgba(45, 180, 234, 0.35), transparent 60%),
        linear-gradient(135deg, #14223a 0%, #1a3a6b 55%, #1a4fa0 100%);
}
.aw-hero__title { color: #ffffff; }
.aw-hero__sub { color: rgba(255, 255, 255, 0.72); }
.aw-hero__chips { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.aw-hero__chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    font-size: 13px; font-weight: 600; color: #ffffff;
    text-decoration: none;
    transition: background .15s ease;
}
.aw-hero__chip:hover { background: rgba(255, 255, 255, 0.18); }
.aw-hero__symbol {
    position: absolute; right: -28px; top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    height: 180px; opacity: 0.10; pointer-events: none;
}

/* === Estados modernos (2026-06-11): píldoras TINTADAS, no bloques saturados ==============
   Patrón actual de SaaS (fondo del color al ~14% + texto en el color pleno + punto). Se
   aplica como SISTEMA a todos los chips de la app — los colores siguen saliendo de la
   paleta del MudTheme (variables --mud-palette-*), aquí solo cambia el tratamiento. */
.mud-chip.mud-chip-filled {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.mud-chip.mud-chip-filled.mud-chip-color-success {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent) !important;
    color: var(--mud-palette-success) !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-info {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent) !important;
    color: var(--mud-palette-info) !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent) !important;
    color: var(--mud-palette-warning) !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-error {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent) !important;
    color: var(--mud-palette-error) !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
    color: var(--mud-palette-primary) !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-secondary {
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent) !important;
    color: var(--mud-palette-secondary) !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-default {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent) !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* En la vista APILADA de móvil, la celda es un flex y la píldora encogía por debajo de su propio
   contenido: medido, 28 px de caja para 50 px de contenido, así que el punto y parte del número se
   salían de la píldora (GR-50640). Las píldoras no encogen: o caben enteras, o bajan de línea. */
@media (max-width: 599.98px) {
    .mud-xs-table td .mud-chip {
        flex: none;
        max-width: none;
        min-width: max-content;
    }
}

/* Punto indicador de estado (solo chips pequeños SIN icono propio: los de estado). */
.mud-chip.mud-chip-size-small.mud-chip-filled:not(:has(.mud-chip-icon)) .mud-chip-content::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
    margin-right: 7px;
    flex: none;
}

/* === Campana de notificaciones (fix 2026-06-11): contador estable, sin desmaquetar ======== */
.aw-bell-badge {
    height: 17px !important;
    min-width: 17px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    border: 2px solid var(--mud-palette-appbar-background);
    inset: 4px 4px auto auto !important;
}

/* ── Pastillas KPI uniformes (feedback 2026-06-11) ──────────────────────────
   Todas las pastillas miden LO MISMO: rejilla CSS de columnas iguales y altura
   de fila compartida; la tarjeta llena su celda aunque tenga una línea menos. */
/* Distintivo de MODALIDAD (multi-derecho): círculo con el código del derecho, delante del
   número de expediente, unificado en todas las listas. El nombre completo va en el tooltip. */
.aw-modbadge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
    background: linear-gradient(135deg, #3d86b0, #2c5f7f);
    color: #fff; font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .02em;
    box-shadow: 0 2px 6px -3px rgba(0,0,0,.5); cursor: default; flex: 0 0 auto;
}

.aw-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

/* Cualquier tarjeta dentro de la rejilla llena su celda; si tiene botones de acción
   (Mis expedientes), quedan ANCLADOS abajo y la tarjeta sin acción mide igual. */
.aw-kpi-grid > .mud-card { height: 100%; min-height: 96px; display: flex; flex-direction: column; }
.aw-kpi-grid > .mud-card > .mud-card-content { flex: 1; }
.aw-kpi-grid > .mud-card > .mud-card-actions { margin-top: auto; }

/* Tarjeta KPI en dos niveles: rótulo arriba (puede partir en dos líneas sin descolocar
   nada) y fila cifra+icono ANCLADA ABAJO, alineados entre sí en todas las tarjetas. */
.aw-kpi-grid .aw-kpi-card__content { width: 100%; height: 100%; display: flex; flex-direction: column; }
.aw-kpi-card__label { display: block; line-height: 1.4; }
.aw-kpi-card__row { width: 100%; margin-top: auto; }

/* Icono de la tarjeta KPI: contenedor tintado (el color lo da `currentColor` desde el tema),
   tamaño fijo y centrado — mismo lenguaje visual que las píldoras de estado. */
.aw-kpi-card__icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Analítica: mismas garantías para las pastillas de la fila de KPIs. */
.aw-kpi { height: 100%; min-height: 92px; display: flex; align-items: center; }

/* Letra pequeña de la suscripción: notas informativas SIN caja (no son avisos) — dos
   MudAlert con borde apiladas agobiaban (feedback 2026-06-12). */
.aw-finenotes { display: flex; flex-direction: column; gap: 8px; }
.aw-finenote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.83rem;
    line-height: 1.45;
}
.aw-finenote .mud-icon-root { flex: none; margin-top: 1px; opacity: 0.75; }

/* Aire entre la barra de pestañas y el contenido en Configuración y Perfil (2026-06-18):
   PanelClass no llega al panel en esta versión de MudBlazor, así que se hace por CSS.
   MISMO margen que el hueco entre tarjetas (grid Spacing=3 → 12px), petición del cliente. */
.aw-tabs-pad .mud-tab-panel { padding-top: 12px; }

/* GR-49061: Titular y Cliente en el alta/edición de expediente. MudBlazor deja el .mud-select con
   flex-grow:1 pero sin min-width:0 y con un .mud-select-filler (white-space:nowrap) que fuerza el
   ancho al texto; por eso un titular/cliente largo desborda la celda y se monta sobre el campo de
   la derecha. Aquí se encoge toda la cadena flex y se trunca el valor con puntos suspensivos. */
.aw-select-fixed { min-width: 0; }
.aw-select-fixed .mud-select { min-width: 0; flex: 1 1 0; }
.aw-select-fixed .mud-select .mud-input-control,
.aw-select-fixed .mud-select .mud-input { min-width: 0; width: 100%; }
.aw-select-fixed .mud-select-filler { display: none; }
.aw-select-fixed .mud-select .mud-input-slot {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Acciones de imagen SOLO ICONO (feedback 2026-07-23): Subir / Pegar / Quitar en una fila. El
   MudFileUpload que envuelve a "Subir" es una caja flex de 34px y dejaba su icono (30px) PEGADO
   ARRIBA → 2px más alto que los otros dos. Se centra el icono dentro de esa caja. El !important y
   la doble clase ganan a la regla de MudBlazor (su CSS se carga después, a igual especificidad). */
.aw-img-actions .mud-file-upload.mud-input-control {
    margin: 0;
}
/* La causa del desalineado: MudFileUpload (flex en COLUMNA) añade un div VACÍO de lista de
   archivos (.mud-file-upload-files) que sumaba ~4px abajo → su caja medía 34px y el icono (30px)
   quedaba pegado ARRIBA, 2px más alto que "Pegar" y "Quitar". No mostramos esa lista (gestionamos
   el archivo nosotros), así que se oculta y la caja pasa a 30px: los tres iconos alinean. */
.aw-img-actions .mud-file-upload-files {
    display: none !important;
}

/* GR-49127: listado "Mis expedientes". Objetivo: cada CABECERA en UNA sola línea, el Nº de expediente
   en UNA sola línea, y Denominación ancha; a cambio las columnas de texto largo (Titular/Cliente)
   ENVUELVEN su contenido en varias líneas. Se usa table-layout FIXED con anchos por columna: las
   estrechas (selección, Imagen, País, Estado, Vigilancia) llevan px fijos y las de texto reparten el
   resto en %. */
.aw-assets-table table {
    width: 100%;
    table-layout: fixed;
}
.aw-assets-table th,
.aw-assets-table td {
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
    /* El ancho fijado por columna INCLUYE el padding, así la suma cuadra al 100% y no desborda. */
    box-sizing: border-box;
}
/* Cabeceras SIEMPRE en una línea (nunca se parten). Los anchos de columna las dejan caber. */
.aw-assets-table th,
.aw-assets-table th .mud-table-sort-label,
.aw-assets-table th .mud-button-label {
    white-space: nowrap;
}
/* Celdas de texto largo: envuelven en varias líneas y parten tokens sin espacios (no ensanchan). */
.aw-assets-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Anchos POR CLASE de columna (table-layout:fixed), no por posición (GR-49127, revisión PR #6525,
   Nuevo 2): así añadir/quitar una columna no descoloca los anchos — cada regla sigue a SU columna.
   EXCEPCIÓN: la columna de SELECCIÓN (checkbox de MultiSelection) es SIEMPRE la primera y su celda
   "select all" de CABECERA solo lleva .mud-table-cell (NO .mud-table-cell-checkbox, que es solo del
   cuerpo). Como table-layout:fixed toma los anchos de la cabecera, esa columna salía a width=0 y se
   solapaba con "Imagen" (GR-49325 P1). Se dimensiona por :first-child, que sí casa la cabecera. */
.aw-assets-table th:first-child,
.aw-assets-table td:first-child { width: 52px; }
.aw-assets-table .aw-col-image { width: 72px; }
/* GR-49410 P4: Denominación más ancha. P3: Titular y Cliente con el MISMO ancho (Cliente se agranda);
   se aprovecha el espacio liberado al retirar la columna Responsable (P2). Al ensanchar las columnas
   de texto de la izquierda, "Estado" (px fijos anclados a la derecha) queda un poco más a la derecha. */
.aw-assets-table .aw-col-denom { width: 26%; }
.aw-assets-table .aw-col-file { width: 140px; white-space: nowrap; }
.aw-assets-table .aw-col-holder { width: 20%; }
.aw-assets-table .aw-col-client { width: 20%; }
.aw-assets-table .aw-col-country { width: 72px; }
.aw-assets-table .aw-col-status { width: 128px; white-space: nowrap; }
.aw-assets-table .aw-col-watch { width: 110px; }

/* MÓVIL (GR-50640). Dentro de la MEDIA QUERY y no colgando de «mud-xs-table» a secas: esa clase NO
   significa «estoy en móvil», la lleva la tabla SIEMPRE —dice a qué tamaño apilará— y es MudBlazor
   quien la activa con su propio media query. Colgar de ella dejaba las celdas en flex también en
   ESCRITORIO, y ahí la tabla se rompía entera (visto en local el 2026-09-14). Los 600 px son el
   corte «sm» de MudBlazor, el mismo con el que él decide apilar.
   Qué se arregla aquí: al apilar, las celdas dejan de ser columnas, pero los anchos de escritorio
   (52 px, 72 px…) seguían aplicándose y estrujaban el texto hasta partirlo LETRA A LETRA. */
@media (max-width: 599.98px) {
    .aw-assets-table.mud-xs-table table { table-layout: auto; }
    .aw-assets-table.mud-xs-table th,
    .aw-assets-table.mud-xs-table td { width: auto !important; }
    /* Y la celda apilada se lee como «etiqueta … valor», no como dos bloques pegados. */
    .aw-assets-table.mud-xs-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
}

/* Vigilancia: cabecera y switch alineados a la DERECHA (gana espacio visual y queda más limpio),
   con un pequeño margen a la derecha para que el switch no quede pegado al borde. */
.aw-assets-table .aw-col-watch { text-align: right; }
.aw-assets-table td.aw-col-watch > div { display: flex; justify-content: flex-end; padding-right: 12px; }

/* Estado: el chip nunca se recorta; cubre todo su texto en una sola línea. */
.aw-assets-table td.aw-col-status .mud-chip { max-width: none; }

/* Localizador (GR-50502): el recorte a dos líneas del titular y de la denominación parte por
   PALABRAS, no por letras. El .aw-clamp2 general usa «overflow-wrap: anywhere», que en una columna
   estrecha corta a mitad de palabra y deja cosas como «COMERCIA L BRANDS» — en un informe de marcas
   parecidas, un nombre partido se lee como otro nombre. Con break-word solo se rompe la palabra
   cuando de verdad no cabe entera. */
:is(.aw-locator-table) .aw-clamp2 {
    overflow-wrap: break-word;
    word-break: normal;
}
/* GR-50544: las CLASES DE NIZA no se parten NUNCA por dentro, ni al saltar de línea ni al
   recortar. Son dos cosas distintas y hacían falta las dos:
   1) El SALTO de línea: sin «overflow-wrap: normal» heredaban el «break-word» de arriba, que en una
      columna estrecha parte «32» entre las dos líneas y deja un «3» que se lee como la clase 3.
   2) El RECORTE: los puntos suspensivos de «-webkit-line-clamp» se insertan letra a letra al final
      de la segunda línea, sin saber nada de comas, así que con la lista como UN texto salía
      «38, 4…» — la clase 41 leída como la 4. En un estudio de parecidos eso es información falsa.
   Lo segundo lo arregla el MARCADO: cada clase va en su propio span en línea (ver Locator.razor).
   Un span «inline-block» es una caja ATÓMICA que el navegador no puede partir, así que el recorte
   solo puede caer entre clases: o sale la clase entera, o no sale. Medido en Chromium a 60, 72, 84
   y 96 px de columna —el rango real de esa celda—: donde el texto plano daba «9, 16, 35, 36, 38, 4…»
   los tokens dan «9, 16, 35, 36, 38, …». El tooltip sigue llevando la lista COMPLETA. */
:is(.aw-locator-table) .aw-clamp2.aw-nice-classes {
    overflow-wrap: normal;
    word-break: normal;
}
:is(.aw-locator-table) .aw-clamp2.aw-nice-classes .aw-nice-class {
    display: inline-block;
    /* «pre» y no «nowrap»: la coma Y SU ESPACIO van dentro del token —«16, »— y solo pre conserva
       ese espacio final. Con nowrap se colapsaba y las clases salían pegadas («16,35,36»). El
       espacio no puede ir entre los spans (como texto suelto del marcado) porque Razor lo colapsa
       al renderizar; comprobado en la página real. */
    white-space: pre;
}

/* Checkbox de selección: por defecto en gris tenue (visible pero sin llamar la atención, no negro);
   recupera el color normal al pasar el ratón por la fila (o por el propio checkbox).
   TODOS los listados con selección: Mis expedientes, Vigilancias, Incidencias, Vencimientos, Tareas
   y el Localizador (petición del cliente, 2026-09-09). La regla vivía solo en Mis expedientes y en
   el resto salían con el color fuerte de MudBlazor: una columna de manchas oscuras que es lo primero
   que ve el ojo al abrir la pantalla, cuando lo que importa es el contenido de las filas.
   Un solo selector con :is() en vez de la regla repetida seis veces — así no puede quedarse un
   listado fuera cuando se añada el siguiente. Vencimientos entra por «aw-reminders-table», que es
   la clase base que comparte con Tareas. */
:is(.aw-assets-table, .aw-alerts-table, .aw-incidents-table, .aw-reminders-table, .aw-locator-table)
    .mud-checkbox .mud-checkbox-false {
    color: var(--mud-palette-action-disabled);
}
:is(.aw-assets-table, .aw-alerts-table, .aw-incidents-table, .aw-reminders-table, .aw-locator-table)
    tbody tr:hover .mud-checkbox .mud-checkbox-false,
:is(.aw-assets-table, .aw-alerts-table, .aw-incidents-table, .aw-reminders-table, .aw-locator-table)
    .mud-checkbox .mud-checkbox-false:hover {
    color: var(--mud-palette-text-primary);
}

/* Localizador (GR-50660): las DOS tablas —el ranking y la del desplegable— tienen que cuadrar columna a columna. Son dos
   <table> independientes, así que con el reparto automático del navegador cada una se mide por SU
   contenido: 25 filas arriba y 2 abajo daban anchos distintos y el bloque se veía descolocado.
   Con «fixed» mandan los anchos declarados en la cabecera, que es LA MISMA plantilla para las dos
   (ver Locator.razor), así que las dos caen igual.
   La casilla de selección la pinta MudBlazor, no nuestra cabecera: se le da ancho aquí, porque en
   «fixed» una columna sin ancho se queda con todo el sobrante.
   Solo de 1.200 px para arriba: por debajo manda el reparto automático de siempre —la suma de los
   anchos fijos no cabría— y en móvil MudBlazor ya apila las filas, donde esto no aplica. */
@media (min-width: 1100px) {
    /* Los dos selectores a propósito: según la versión, MudBlazor pone la clase del componente en el
       <div> raíz o en el propio <table>. Con uno solo, el día que cambie esto deja de aplicarse en
       silencio y las tablas vuelven a descuadrarse sin que nada falle. */
    .aw-locator-table table,
    table.aw-locator-table {
        table-layout: fixed;
    }

    /* La casilla de selección la pinta MudBlazor, no nuestra cabecera: se le da ancho aquí, porque
       en «fixed» una columna sin ancho se reparte el sobrante y descuadra a todas las demás. */
    .aw-locator-table thead th:first-child {
        width: 44px;
    }
}

/* Capturador de pegado (GR-49160): fuera de pantalla pero enfocable, para que Ctrl+V dispare el
   evento 'paste' cuando la lectura directa del portapapeles no está permitida. */
.aw-paste-catcher {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* GR-49145: ancho del diálogo de alta/edición de expediente. Un poco más ancho que el estándar
   para que las etiquetas largas de fecha ("Fecha de publ. de presentación/registro") quepan
   enteras en su campo, sin llegar al tamaño desproporcionado de MaxWidth.Large. */
.mud-dialog.aw-dialog-expediente {
    max-width: 760px !important;
}

/* GR-49115: en los selectores de fecha EDITABLES, MudBlazor deja un hueco entre el botón de borrar
   (la "x") y el icono de calendario. Se pega la "x" al icono para que el bloque de acciones quede
   junto a la derecha del campo. */
.aw-date-editable .mud-input-clear-button {
    margin-right: -6px;
}

/* GR-49115: al intentar Guardar con una fecha errónea, su campo se resalta en ROJO (borde y
   etiqueta) para identificarlo. El resalte desaparece en cuanto la fecha pasa a ser válida. */
.aw-date-invalid .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
    border-width: 2px !important;
}
.aw-date-invalid .mud-input-label {
    color: var(--mud-palette-error) !important;
}

/* GR-49325 P10/P11: el botón "Buscar" de las barras de filtro va A LA MISMA ALTURA que las cajas
   de filtro dense (40px). Por defecto el botón mide ~26px y, aun centrado, "flota" respecto a las
   cajas; forzándolo a 40px casan los bordes superior e inferior con los campos de su izquierda. */
.aw-filter-btn { height: 40px; }

/* GR-49325 P11: en la barra de filtros de Vigilancias (MudStack en fila) SOLO "Denominación" debe
   crecer para llenar el ancho; el resto de campos y el botón se quedan a su tamaño fijo. Sin esto,
   los selects también reparten el espacio libre y aparecen huecos irregulares entre ellos. */
.aw-filter-fixed { flex: 0 0 auto !important; }
/* GR-49410: en la barra de filtros de Vigilancias, los MudSelect (Estado, País) crecían y dejaban
   huecos entre cajas porque su elemento externo (.mud-select) NO recibe la Class/Style del componente.
   Se les fija el ancho aquí, sobre .mud-select, para que SOLO el buscador (flex-grow-1) crezca y no
   queden espacios en blanco entre los campos. */
.aw-filter-row > .mud-select { flex: 0 0 200px; }

/* GR-49325 P13/P14: los chips de estado/plazo de Tareas y Vencimientos van TODOS con el mismo ancho
   (el del texto más largo), no ajustándose a cada texto, para que la columna quede alineada y no
   "salte" de fila en fila. Ancho fijo + contenido centrado + una sola línea. */
.aw-state-chip { width: 132px; }
.aw-state-chip .mud-chip-content { width: 100%; justify-content: center; white-space: nowrap; }

/* GR-49670 — Incidencias: fila NO LEÍDA. Una incidencia es una notificación (un acto de la oficina
   sobre un expediente propio), así que la bandeja se lee como un gestor de correo: lo pendiente se
   reconoce por el peso del texto y una barra de acento a la izquierda, sin tener que llegar con la
   vista hasta la columna Estado. El chip de estado NO se sustituye —sigue ahí, con el vocabulario
   compartido con Vigilancias (petición del cliente 2026-08-06)—: esto lo refuerza.
   El acento va sobre la primera celda (inset box-shadow) y no como border-left de la fila: en una
   <tr> el borde no se pinta de forma fiable con border-collapse. Se apoya en las variables del
   MudTheme, así que respeta el tema claro/oscuro sin repetir el color de marca. */
   El acento va en ÁMBAR y no en rojo (2026-08-12): es el MISMO color que el chip «Pendiente» de esa
   fila, que hasta ahora iba en warning mientras la barra iba en error — dos colores distintos para el
   mismo estado, y el rojo además leía como «algo va mal» cuando lo único que dice es «esto no lo has
   mirado todavía». El rojo se reserva para lo que de verdad es un riesgo. */
.aw-unread { font-weight: 600; }
.aw-unread > td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-warning); }

/* GR-49684 — BOLETINES con columnas FIJAS, misma receta que Vigilancias e Incidencias (razonada al
   detalle en el bloque de .aw-alerts-table). Sin table-layout:fixed, MudTable reparte según el
   CONTENIDO de lo que esté pintando: al activar «Solo pendientes» desaparecían filas, cambiaban los
   textos y las columnas se movían de sitio (visto por el cliente el 2026-08-11).
   Las CINCO columnas miden LO MISMO (petición del cliente 2026-08-11): antes la fecha absorbía todo el
   sobrante y se quedaba con casi la mitad de la tabla para pintar diez caracteres. Aquí ninguna columna
   necesita más que las otras —una fecha, dos números, un chip y una casilla—, así que el reparto a partes
   iguales es el que menos huecos deja. */
.aw-bulletins-table table {
    width: 100%;
    table-layout: fixed;
}
.aw-bulletins-table th,
.aw-bulletins-table td { box-sizing: border-box; }

/* La columna del desplegable del grupo la pinta MudTable sin clase propia, así que se fija por
   posición. Sin ancho se llevaba la mitad de la tabla (311px medidos) y dejaba un vacío enorme
   delante de la fecha. */
.aw-bulletins-table th:first-child,
.aw-bulletins-table td:first-child { width: 48px; }

/* SIN GACETAS no se pinta la cabecera, misma razón (y misma solución) que en Vigilancias: MudTable pinta
   la fila vacía como <th colspan="1000">, que con table-layout:fixed deja las columnas en fracciones de
   píxel y apila los títulos. La clase la pone la página cuando no queda ninguna fila visible. */
.aw-bulletins-table.aw-bulletins-table--empty thead { display: none; }

/* Las cinco a un quinto de lo que queda tras la columna del desplegable. Si se añade o se quita una
   columna hay que cambiar el 5 —no hay forma de que table-layout:fixed lo cuente solo—. */
.aw-bulletins-table .aw-bcol-date,
.aw-bulletins-table .aw-bcol-num,
.aw-bulletins-table .aw-bcol-state,
.aw-bulletins-table .aw-bcol-check { width: calc((100% - 48px) / 5); }

/* Suelo en píxeles para «Estado»: ahí cabe el chip más largo de los tres, «Sin coincidencias», que con
   menos se corta por la mitad. Con el reparto en porcentajes, una ventana estrecha lo dejaría por debajo;
   con el mínimo, la tabla desborda y saca scroll horizontal —incómodo, pero legible— en vez de recortar el
   texto. Mismo criterio que las columnas de texto de Vigilancias. */
.aw-bulletins-table .aw-bcol-state { min-width: 180px; }

/* …y las cinco CENTRADAS, cabecera y celda (petición del cliente 2026-08-11). Con las columnas ya iguales
   seguía sin verse homogénea, y el motivo no era el reparto sino la ALINEACIÓN: los números pegados a la
   derecha de su hueco, «Estado» arrancando por la izquierda del suyo y el check en medio del último. Así,
   dos contenidos quedaban casi tocándose y entre «Estado» y «Revisado» se abría un vacío enorme —columnas
   regulares, contenido irregular—. Centrando todo, la distancia entre dos contenidos consecutivos es
   siempre la misma: el ancho de una columna.
   Se enumeran las columnas en vez de usar `th, td` para NO tocar la cabecera del grupo (España, CTM…),
   que es un título de sección y va donde va todo título: a la izquierda.
   Los números pierden su alineación a la derecha a cambio de esto; son contadores de dos o tres cifras y
   la columna es ancha, así que la comparación vertical no depende de esa décima. */
.aw-bulletins-table th.aw-bcol-date,
.aw-bulletins-table td.aw-bcol-date,
.aw-bulletins-table th.aw-bcol-num,
.aw-bulletins-table td.aw-bcol-num,
.aw-bulletins-table th.aw-bcol-state,
.aw-bulletins-table td.aw-bcol-state { text-align: center; }

/* Los checks de acción por fila (oposición en Vigilancias, revisado en Boletines) NO llevan CSS propio
   (2026-08-11): son el check de serie de MudBlazor, el mismo que la casilla de selección que abre la
   fila. Estuvieron en rojo denso, en azul de marca y en un gris suave con !important, y el cliente se
   quedó con el de serie: son marcas que se ponen y se quitan a docenas recorriendo una gaceta, y lo
   que tiene que verse es el resultado —la fila teñida, el chip verde—, no la casilla. */

/* Lo único que llevan es la ALINEACIÓN: check y cabecera CENTRADOS en su columna (petición del cliente
   2026-08-11). Antes la celda heredaba `text-align:start` de MudBlazor y el check arrancaba pegado al
   borde izquierdo, unos píxeles a la izquierda de «Oposición» / «Revisado»: en una tabla que se lee en
   vertical, el título y la casilla que va debajo tienen que caer en el mismo eje.
   Cabecera y celda comparten el mismo relleno horizontal, así que centrar las dos hace coincidir sus
   centros de forma exacta, sin números a mano. Basta la especificidad (0,2,1 frente a los 0,1,0 de
   `.mud-table-cell`), sin `!important`, aunque MudBlazor cargue su CSS después del nuestro.
   El caso ESTRECHO se deja intacto a propósito: ahí MudBlazor pinta la celda como flex con la etiqueta
   del dato delante (`text-align:start !important`) y el check debe quedarse junto a su rótulo.
   En Boletines el centrado ya no es solo del check: van centradas sus CINCO columnas (ver su bloque). */
.aw-alerts-table th.aw-col-status,
.aw-alerts-table td.aw-col-status,
.aw-bulletins-table th.aw-bcol-check,
.aw-bulletins-table td.aw-bcol-check { text-align: center; }

/* GR-49684 — BARRA DE LA GACETA de Vigilancias (el aviso «Estás revisando el boletín …»): además de
   decir con qué gaceta se trabaja, lleva sus acciones —cambiar de gaceta y darla por revisada— y la de
   cerrar va pegada al borde DERECHO (petición del cliente 2026-08-11).
   MudBlazor no le da crecimiento al cuerpo del aviso (`.mud-alert-message` no tiene flex-grow), así que
   sin esto la caja mide lo que mide el texto y el separador no tenía ancho que repartir: el botón se
   quedaba junto al enlace, a media línea. */
.aw-issue-bar .mud-alert-message { flex-grow: 1; }
.aw-issue-bar .mud-alert-message > div { width: 100%; }

/* GR-49684 — Vigilancias: fila marcada como POSIBLE OPOSICIÓN. Fondo teñido y barra de acento a la
   izquierda: no señala «esto está pendiente» (eso es .aw-unread) sino «esto lo he señalado yo», y
   triando una gaceta de 157 filas tiene que reconocerse sin llegar con la vista hasta el check de la
   última columna (petición del cliente 2026-08-11).
   SIN negrita, a diferencia de .aw-unread (2026-08-11): con el tinte y la barra ya se reconoce, y
   engordar además la letra hacía que una gaceta con muchas marcadas pareciera una pantalla de avisos.
   El tinte se hace con color-mix sobre el color de error del tema, así que funciona igual en claro y
   en oscuro sin fijar un color de marca aquí (§7: los tokens viven en el MudTheme). El !important es
   necesario para ganarle al rayado de MudTable (Striped), que pinta el fondo de las filas impares.
   Los estados de MudTable (hover, seleccionada) se dejan intactos: mandan sobre este fondo cuando
   aplican, que es lo correcto — son respuesta a lo que el usuario está haciendo AHORA. */
.aw-opposition > td { background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent) !important; }
.aw-opposition > td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-error); }

/* GR-49670 — Bandeja de Incidencias con columnas FIJAS, MISMA receta que Vigilancias y Tareas (ver el
   bloque de .aw-alerts-table, donde está razonada al detalle). Sin table-layout:fixed MudTable reparte
   el ancho según el CONTENIDO de la página que está pintando: al filtrar, al cambiar de página o al
   activar «Solo sin revisar» cambian los textos y las columnas se movían de sitio, que es justo lo que
   no puede pasar en un listado que se lee en vertical.
   Los anchos incluyen el padding de la celda para que la suma cuadre al 100% y la tabla no desborde. */
.aw-incidents-table table {
    width: 100%;
    table-layout: fixed;
}
.aw-incidents-table th,
.aw-incidents-table td { box-sizing: border-box; }

/* La casilla de selección la pinta MudBlazor sin clase propia: se fija por posición, como en
   Vigilancias. Sin ancho sería otra columna «sin especificar» y se llevaría parte del sobrante. */
.aw-incidents-table th:first-child,
.aw-incidents-table td:first-child { width: 52px; }

/* Fijas: país (código ISO), fecha del boletín y chip de estado. Suman 52+72+120+110 = 354px. */
.aw-incidents-table .aw-icol-country { width: 72px; }
.aw-incidents-table .aw-icol-bdate { width: 120px; }
.aw-incidents-table .aw-icol-status { width: 110px; }

/* Las dos columnas de TEXTO se reparten TODO lo que queda. El expediente se lleva más porque lleva dos
   líneas (denominación + insignia y nº). Si se cambia algún ancho de arriba hay que cambiar el 354. */
.aw-incidents-table .aw-icol-asset { width: calc((100% - 354px) * 0.55); }
.aw-incidents-table .aw-icol-act { width: calc((100% - 354px) * 0.45); }

/* SIN RESULTADOS no se pinta la cabecera: MudTable pinta la fila vacía como <th colspan="1000">, que
   deja las columnas de ancho relativo en fracciones de píxel y apila los títulos. Mismo caso, y misma
   solución, que en Vigilancias y Tareas. La clase la pone la página cuando el total confirmado es 0. */
.aw-incidents-table.aw-incidents-table--empty thead { display: none; }

/* Las CABECERAS no parten dentro de la palabra («Estad/o»); las celdas sí pueden cortar una
   denominación larga sin espacios, que si no ensancharía su columna. */
.aw-incidents-table th { overflow-wrap: normal; }
.aw-incidents-table td { overflow-wrap: break-word; }

/* Datos cortos que partidos no se leen: nº de expediente, código de país y fecha del boletín. */
.aw-incidents-table .aw-nowrap { white-space: nowrap; }
.aw-incidents-table td.aw-icol-bdate { white-space: nowrap; }

/* GR-49325 P13/P14: listados de Tareas Y Vencimientos con columnas FIJAS (table-layout:fixed) e
   IDÉNTICAS entre sí, como Mis expedientes. Compartir el MISMO layout (misma clase) es lo que hace
   que "Estado/Plazo" quede a la misma altura y a la misma distancia de los iconos en las dos
   pantallas, en cualquier ancho — antes Tareas era fixed y Vencimientos auto, y divergían. Además
   los anchos NO varían al completar/descartar/borrar (que cambian el nº de iconos y el texto del
   chip). "Tarea" no lleva ancho: absorbe el resto y queda la más ancha, empujando "Estado" a la
   derecha. */
/* RESPONSIVE (GR-49574 p.8) — MISMA receta que la tabla de Vigilancias, que es la que el cliente quiere
   (2026-08-05): rejilla fija a CUALQUIER ancho y CERO scroll horizontal. La clave está en que una sola
   columna —la de TEXTO— se lleva "lo que quede" con un calc(), y las demás van en px:
     · Si todas las columnas van en px y su suma pasa del ancho de la tabla, el navegador NO estrecha
       nada: mantiene los px y las últimas columnas se salen del recuadro. Como .mud-table-container no
       lleva overflow-x, quedaban CORTADAS — así desaparecían Completar / Descartar / Reabrir (medido:
       a 900px el botón caía en el píxel 1007 y la tabla acababa en el 865).
     · Con el calc(), la suma cuadra SIEMPRE con el ancho disponible: al estrechar, lo que cede es la
       columna de texto (su contenido se reparte en más líneas) y las acciones no se mueven ni un píxel.
   Nada de overflow-x: se probó y el cliente no lo quiere (arrastrar en horizontal para llegar a los
   botones es peor que verlos apretados). Por debajo de 600px sigue mandando MudBlazor, que apila cada
   fila en una ficha con sus etiquetas (.mud-xs-table) — ahí no se toca ningún ancho. */
.aw-reminders-table table { width: 100%; table-layout: fixed; }
/* El ancho por columna INCLUYE el padding: así la suma cuadra y la tabla no desborda (igual que en
   Vigilancias, donde este box-sizing es lo que hace que los números salgan). */
.aw-reminders-table th,
.aw-reminders-table td { box-sizing: border-box; }
/* GR-49410 P9: con MultiSelection, la 1ª columna es el checkbox de selección; bajo table-layout:fixed
   hay que darle ancho por :first-child (su celda "select all" de cabecera no lleva clase de checkbox),
   si no saldría a 0 y descolocaría el resto. */
.aw-reminders-table th:first-child,
.aw-reminders-table td:first-child { width: 48px; }
.aw-reminders-table .aw-tcol-date { width: 130px; }
/* Estado/Plazo: el chip va alineado a la IZQUIERDA de su columna, así queda despegado de los iconos. */
.aw-reminders-table .aw-tcol-state { width: 150px; }
.aw-reminders-table .aw-tcol-actions { width: 120px; white-space: nowrap; }

/* TAREAS: la columna que absorbe es la DESCRIPCIÓN (2ª, tras el checkbox); «Expediente» se queda fija.
   748px = la suma de las demás (48 + 300 + 130 + 150 + 120); si se cambia alguna, hay que cambiarlo. */
.aw-reminders-table th:nth-child(2),
.aw-reminders-table td:nth-child(2) { width: calc(100% - 748px); min-width: 0; }
/* GR-49410: Expediente MÁS ANCHO (la denominación recorta a 2 líneas con "…" + tooltip, ver
   aw-clamp2); a cambio Fecha y Plazo/Estado se reducen (les sobra sitio). */
.aw-reminders-table .aw-tcol-asset { width: 300px; }

/* VENCIMIENTOS (GR-49574 p.9): aquí no hay descripción, así que «Tipo» va fija —solo tiene que dar
   cabida a su etiqueta, y «Declaración de uso» es la más larga de los 5 idiomas— y la que absorbe es
   «Expediente», que además queda pegada a la izquierda: justo lo que pidió el cliente.
   Los 230px de «Tipo» dan MÁS AIRE del que necesita su etiqueta (petición del cliente 2026-08-06: la
   denominación se le quedaba pegada al chip). Ese aire es ancho de la columna «Tipo», no un margen del
   contenido: así se mueven juntos el título «Expediente» y el dato de cada fila, y la rejilla sigue
   cuadrando. 650px = la suma de las demás (48 + 230 + 130 + 150 + 92). */
.aw-renewals-table th.aw-tcol-kind,
.aw-renewals-table td.aw-tcol-kind { width: 230px; }
.aw-renewals-table th.aw-tcol-asset,
.aw-renewals-table td.aw-tcol-asset { width: calc(100% - 650px); }

/* «Plazo» pegado a sus iconos igual que en Tareas (petición del cliente 2026-08-06). Aquí la columna
   de acciones tiene DOS iconos (revisar/descartar) y en Tareas TRES (allí además se borra), así que
   con los mismos 120px de las dos pantallas el chip de Vencimientos quedaba un botón entero más lejos
   de ellos. Medido en el navegador a 1440px: hueco chip→icono de 69,5px aquí frente a 41px en Tareas,
   y el paso de un icono es 28,5px — justo la diferencia.
   Se corrige ESTRECHANDO la columna de acciones esos 28px (120 → 92), no moviendo el chip: los iconos
   van alineados a la derecha, así que se quedan EXACTAMENTE donde estaban (el cliente los quiere ahí),
   mientras que el ancho liberado se lo lleva la columna del calc() y empuja «Plazo» a la derecha. */
.aw-renewals-table th.aw-tcol-actions,
.aw-renewals-table td.aw-tcol-actions { width: 92px; }

/* SIN RESULTADOS no se pinta la cabecera, exactamente por lo mismo que en Vigilancias: MudTable pinta la
   fila vacía como <th colspan="1000">, que crea mil columnas y se lleva todo el ancho que la tabla no
   tenga asignado en píxeles, dejando la cabecera descolocada sobre la columna del calc(). Sin filas no
   hay nada que encabezar, y el mensaje de vacío queda centrado. La clase la pone el listado cuando el
   total confirmado es 0. */
.aw-reminders-table.aw-reminders-table--empty thead { display: none; }

/* GR-49325/49410: selector de Clases de Niza (1..45) en REJILLA de 3 filas × 15 columnas, todas las
   bolitas del MISMO tamaño (GR-49410 P8). La rejilla fija el tamaño de cada celda, así que negrita o
   borde de la selección no descolocan nada. */
.aw-nice-picker { max-width: 560px; }
.aw-nice-picker .mud-chipset {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 6px;
    margin: 0;
}
.aw-nice-picker .mud-chip {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
    justify-content: center;
}
/* Sin tick: las clases SELECCIONADAS se distinguen solo por NEGRITA (+ borde grueso y fondo tenue),
   suficiente para saber que están elegidas (GR-49410 P8). */
.aw-nice-picker .mud-chip.mud-chip-selected {
    font-weight: 700;
    border-width: 2px;
    background-color: var(--mud-palette-primary-hover);
}

/* Las bolitas de clase de la FICHA, todas del mismo tamaño tenga el número una cifra o dos
   (GR-50638), como en el selector del formulario —ahí lo consigue la rejilla de .aw-nice-picker—.
   Con el ancho por contenido, una fila de clases queda con bolitas de tres tamaños distintos. */
.aw-nice-chip { min-width: 34px; justify-content: center; }

/* Productos y servicios por clase (GR-50638): una fila por clase, con su etiqueta a la izquierda y
   el texto a continuación. Filas propias y no un acordeón de MudBlazor porque solo se pliegan las
   largas, y el componente obliga a plegarlas todas. */
.aw-goods-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Los 16px laterales son los de una CELDA de tabla: sin ellos «Clase 1» empezaba pegado al borde
       de la tarjeta y no en la misma vertical que «Clases de Niza» o «Titular», que van dentro de
       una tabla y arrastran su padding. */
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}
.aw-goods-row:first-child { border-top: none; padding-top: 0; }
.aw-goods-row--toggle { cursor: pointer; }
/* «Clase N» se pinta como CUALQUIER otra etiqueta de la ficha —«Clases de Niza», «Titular»—: en
   negrita y con el color del texto principal. Es la misma clase de dato y tiene que leerse igual.
   Mismo ancho para todas aunque el número tenga una o dos cifras, o los textos de al lado empezarían
   cada uno en un sitio y la columna se vería temblorosa. */
.aw-goods-class {
    min-width: 96px;
    flex: none;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
/* min-width:0 es lo que permite al texto encoger dentro del flex; sin él el navegador no recorta y
   una especificación larga desborda la tarjeta y saca barra horizontal a la página entera. */
.aw-goods-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-wrap;
    color: var(--mud-palette-text-primary);
}
.aw-goods-text--preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aw-goods-chevron { flex: none; color: var(--mud-palette-text-secondary); }

/* Documentación online (GR-49417): listas y figuras de los artículos de /app/support/{slug}. MudBlazor
   resetea los marcadores de lista; aquí se restauran para el contenido de ayuda. */
.aw-help-list { margin: 0 0 1rem 1.25rem; padding: 0; line-height: 1.6; }
.aw-help-list li { margin: .25rem 0; }
.aw-help-figure { margin: 1rem 0 1.5rem; }

/* Índice lateral de la documentación (GR-49417): más aire entre grupos y enlaces para que no
   quede apelmazado. */
.aw-help-index .mud-typography-overline:first-child { margin-top: 0 !important; }
.aw-help-index .mud-nav-link { padding-top: 8px; padding-bottom: 8px; border-radius: 8px; }
.aw-help-index .mud-nav-menu { margin-bottom: 6px; }

/* Barras por MES de Análisis (GR-49496). Sustituyen a MudChart en «Coincidencias por mes» y
   «Actos por mes»: en MudBlazor 9.5 las etiquetas del eje X se pintan VACÍAS (los <text> del SVG
   salen colocados pero sin contenido), así que el usuario no veía de qué mes era cada barra. Aquí
   el rótulo del mes vive en el MISMO contenedor que su barra y no puede desalinearse.
   Los COLORES los pone el componente con variables del MudTheme (§7), no se fijan aquí. */
.aw-mbars { display: flex; align-items: stretch; gap: 10px; height: 260px; }
.aw-mbars__group { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.aw-mbars__stack {
    flex: 1; width: 100%; display: flex; align-items: flex-end;
    justify-content: center; gap: 3px;
}
.aw-mbars__bar {
    flex: 1 1 0; max-width: 30px; min-width: 4px;
    border-radius: 4px 4px 0 0; transition: height .2s ease;
}
.aw-mbars__label {
    padding-top: 8px; font-size: .75rem; white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}
/* Valor del mes (solo con UNA serie: con varias no cabría sin solaparse). */
.aw-mbars__value { font-size: .75rem; font-weight: 600; padding-bottom: 4px; }
/* Muestra de color de la leyenda. */
.aw-mbars__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* En móvil las barras se estrechan: menos hueco y rótulo más pequeño para que quepan 6 meses. */
@media (max-width: 600px) {
    .aw-mbars { height: 200px; gap: 4px; }
    .aw-mbars__label { font-size: .65rem; }
}

/* Barras de «Resoluciones» en Análisis (GR-49496): los dos estados cuyo pastel no cubre la paleta
   de MudBlazor se colorean con las MISMAS variables de marca que su chip en Mis expedientes
   (AssetStatusView.Style). El !important gana al fondo que MudBlazor fija en la barra. */
.aw-bar--annulled .mud-progress-linear-bar { background-color: var(--aw-status-annulled-bg) !important; }
.aw-bar--surrendered .mud-progress-linear-bar { background-color: var(--aw-status-surrendered-bg) !important; }
.aw-bar--inrenewal .mud-progress-linear-bar { background-color: var(--aw-status-inrenewal-bar) !important; }

/* Fila del acto SELECCIONADO en «Actos por mes» (GR-49496): la tabla filtra igual que la leyenda,
   así que la fila activa se resalta para que se vea qué acto está aislado. */
.aw-actrow--sel > td { background-color: var(--mud-palette-action-default-hover); font-weight: 500; }

/* Gráfica de LÍNEA por meses de Análisis (GR-49496). SVG propio en vez de MudChart: la 9.5 deja los
   rótulos del eje X vacíos, y en una serie temporal el mes es justo el dato que hay que ver. El
   COLOR del trazo lo pone el componente (token del tema); aquí solo grosores, rejilla y textos. */
.aw-mline { width: 100%; height: 300px; display: block; overflow: visible; }
.aw-mline__grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.aw-mline__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.aw-mline__area { opacity: .12; stroke: none; }
.aw-mline__dot { stroke: var(--mud-palette-surface); stroke-width: 2; }
.aw-mline__axis, .aw-mline__label {
    font-size: 12px; fill: var(--mud-palette-text-secondary);
}
.aw-mline__value { font-size: 12px; font-weight: 600; fill: var(--mud-palette-text-primary); }

@media (max-width: 600px) {
    .aw-mline { height: 240px; }
    .aw-mline__axis, .aw-mline__label, .aw-mline__value { font-size: 11px; }
}

/* GALLETA (donut) de Análisis (GR-49496): dibujada a mano porque la de MudBlazor 9.5 sale vacía.
   Cada porción es el mismo círculo con trazo discontinuo; el COLOR lo pone el componente. */
.aw-donut { width: 168px; height: 168px; flex: 0 0 auto; }
.aw-donut__track { fill: none; stroke: var(--mud-palette-lines-default); }
.aw-donut__slice { fill: none; stroke-linecap: butt; transition: stroke-dasharray .3s ease; }
.aw-donut__value { font-size: 30px; font-weight: 700; fill: var(--mud-palette-text-primary); }
.aw-donut__caption { font-size: 11px; fill: var(--mud-palette-text-secondary); }

/* GR-49535: listado de VIGILANCIAS. Rejilla FIJA: las columnas caen en el mismo sitio pase lo que
   pase. Con ancho automático no ocurría —cada página se medía según SU contenido, así que al pasar de
   la página 1 a la 2 se movían (lo notó el cliente el 2026-08-04 en «Similitud»)—.
   TODAS las columnas llevan ancho, sin dejar ni un píxel «libre», y eso NO es cosmético: cuando la
   búsqueda no devuelve nada, MudTable pinta la fila vacía como `<th colspan="1000">`, lo que crea mil
   columnas. En table-layout:fixed el espacio no asignado se reparte entre TODAS, así que si las dos
   columnas de texto no llevaban ancho se quedaban en 1px y la cabecera se descolocaba entera (también
   lo vio el cliente). Con el calc() de abajo la suma es exactamente el 100%: no queda nada que
   repartir y la cabecera aguanta con y sin resultados.
   Las medidas llevan DENTRO el padding de la celda y salen del contenido real de cada columna, medido
   en el navegador —no estimado—: el anillo más «Riesgo alto», el ISO del país, la fecha entera, el
   chip del plazo y el chip de estado más largo («Descartada»). El espaciado general de MudBlazor NO se
   toca: apretarlo dejaba la tabla apelotonada frente a staging. */
.aw-alerts-table table {
    width: 100%;
    table-layout: fixed;
}
/* El ancho por columna INCLUYE el padding: así la suma cuadra y la tabla no desborda. */
.aw-alerts-table th,
.aw-alerts-table td { box-sizing: border-box; }

/* La casilla de selección (MultiSelection) la pinta MudBlazor sin clase propia, así que se fija por
   posición. Sin ancho sería otra columna «sin especificar» y se llevaría parte del sobrante. */
.aw-alerts-table th:first-child,
.aw-alerts-table td:first-child { width: 52px; }

.aw-alerts-table .aw-col-sim { width: 138px; }
.aw-alerts-table .aw-col-country { width: 72px; }
.aw-alerts-table .aw-col-bdate { width: 120px; }
.aw-alerts-table .aw-col-deadline { width: 104px; }
.aw-alerts-table .aw-col-status { width: 110px; }
/* .aw-col-actions RETIRADA (GR-49684): la bandeja ya no tiene columna de acciones —el triaje por
   coincidencia desapareció y solo queda el check de posible oposición, que vive en .aw-col-status—.
   Sus 96px salen también de la resta de abajo. */

/* «Estado» recupera los 24px de padding derecho que MudBlazor reserva para la flecha de ordenar: esta
   tabla no ordena, así que ahí es espacio muerto. Eso es lo que permite bajarla de 126 a 110px —y con
   ello empujarla a la derecha, como pidió el cliente— sin recortar el chip «Descartada» (66,7 de texto
   + 18,7 de relleno del chip + 16 + 8 = 110,1). En la columna de acciones NO se toca: ahí mover el
   ancho movería los iconos. El selector es largo por necesidad: MudBlazor gasta
   `.mud-table-dense * .mud-table-row .mud-table-cell` (0,3,0) y gana a cualquiera más corto. */
.aw-alerts-table .mud-table-row th.aw-col-status,
.aw-alerts-table .mud-table-row td.aw-col-status { padding-right: 8px; }

/* Las dos columnas de TEXTO se reparten TODO lo que queda: es donde el cliente quería el sitio
   («Tu expediente» se le hacía pequeño). 596px = la suma de las columnas fijas de arriba
   (52 + 138 + 72 + 120 + 104 + 110); si se cambia alguna, hay que cambiar este número (y el test de
   UI avisa si la cabecera se parte). Estuvo en 692 mientras existía la columna de acciones: al
   retirarla (GR-49684) restaba 96px de más, y con la ventana estrecha —el resultado de la resta se
   acercaba a cero— las dos columnas de texto se quedaban en unos pocos píxeles y el contenido se
   pintaba letra por letra en vertical.
   MÍNIMO en píxeles además del reparto: con una ventana lo bastante estrecha, cualquier resta con
   porcentajes acaba dando casi nada. Con min-width la tabla desborda y aparece scroll horizontal
   —incómodo, pero legible— en vez de colapsar. */
.aw-alerts-table .aw-col-watched,
.aw-alerts-table .aw-col-found {
    width: calc((100% - 596px) / 2);
    min-width: 132px;
}

/* SIN RESULTADOS no se pinta la cabecera (lo vio el cliente el 2026-08-04: «se descoloca
   completamente»). El motivo: MudTable pinta la fila vacía como `<th colspan="1000">`, que crea mil
   columnas, y Chromium reparte entre TODAS ellas el ancho que la tabla no tiene asignado en píxeles;
   las dos columnas de texto —las únicas con ancho relativo— se quedaban en 0,5px y los títulos se
   apilaban (medido: tabla de 1232px y la columna calculando 0,55px, con el calc() puesto). No es algo
   que se pueda ganar por CSS contra el reparto del navegador, así que se quita lo que se descoloca:
   sin filas no hay nada que encabezar y el mensaje vacío queda centrado. La clase la pone el listado
   cuando el total confirmado es 0. */
.aw-alerts-table.aw-alerts-table--empty thead { display: none; }

/* Las CABECERAS nunca parten dentro de la palabra: con break-word salían «Estad/o» y «oposició/n»
   cuando la columna se quedaba unos píxeles corta. Las celdas sí pueden cortar una denominación larga
   sin espacios, que si no ensancha su columna. */
.aw-alerts-table th { overflow-wrap: normal; }
.aw-alerts-table td { overflow-wrap: break-word; }

/* Datos cortos que partidos no se leen: el nº de expediente propio («M-/1003»), el código de país y la
   fecha del boletín. Si no caben, pasan enteros a la línea siguiente. */
.aw-alerts-table .aw-nowrap { white-space: nowrap; }
.aw-alerts-table td.aw-col-bdate { white-space: nowrap; }

/* Clases de Niza: van en UNA línea (Wrap.NoWrap) y la tabla es table-layout:fixed, así que la celda
   NO crece con su contenido — lo que sobra se salía y se pintaba ENCIMA de «Similitud» (visto
   2026-08-06: con el menú abierto en 1265px la columna baja a ~130px y cinco chips piden ~200px).
   Este recorte es la RED DE SEGURIDAD, no el criterio: cuántos chips caben lo decide NiceClassChips
   con el ancho medido en el navegador, y aquí solo se garantiza que, pase lo que pase (fallo del JS,
   prerender, un zoom raro), nada invada la columna vecina. */
.aw-alerts-table .aw-nice-chips { overflow: hidden; }

/* === Recuadros de la cabecera de Vigilancia (WatchKpiCards) ==================================
   Eran tres cajas blancas idénticas con un número: había que leer la etiqueta para saber cuál era
   cuál y ocupaban una franja de pantalla sin decir nada (2026-08-12). Se les da identidad con lo que
   YA tiene el sistema —los colores semánticos del MudTheme y la tipografía de marca—, sin librerías
   ni adornos: un filete de color, el icono en un círculo tintado y el número como protagonista.
   Los colores salen de las variables del tema, así que el modo oscuro y cualquier retoque de marca
   los siguen sin tocar nada aquí. */
.aw-kpi {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* El filete: identifica el recuadro sin robar sitio al contenido. */
.aw-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--aw-kpi-color, var(--mud-palette-primary));
}

.aw-kpi--warning { --aw-kpi-color: var(--mud-palette-warning); }
.aw-kpi--success { --aw-kpi-color: var(--mud-palette-success); }
.aw-kpi--info    { --aw-kpi-color: var(--mud-palette-primary); }
.aw-kpi--error   { --aw-kpi-color: var(--mud-palette-error); }

/* Lo lleva SOLO el primer recuadro, «Boletines pendientes»: los otros dos son cifras y no se pulsan.
   Desde 2026-08-12 lo lleva en las dos pantallas por decisión del cliente, aunque en el panel de
   Boletines no navegue (ya estás allí) — ver el comentario de WatchKpiCards.razor. */
.aw-kpi--link { cursor: pointer; }
.aw-kpi--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(44, 95, 127, .16);
    border-color: var(--aw-kpi-color);
}

/* MudCard llega como contenedor FLEX EN COLUMNA con align-items:center, así que su contenido encogía
   al ancho del texto y se quedaba centrado: medido, una caja de 237px en una tarjeta de 400 con 82px
   de aire muerto a cada lado, que era lo que dejaba el icono a media tarjeta. Se estira el contenido
   a todo el ancho y se le pone un relleno que cuente desde el filete.
   El selector lleva el ELEMENTO (div.mud-card-content) a propósito: la hoja de MudBlazor trae su
   propio `.mud-card > .mud-card-content` con la misma especificidad y se carga después, así que sin
   ese punto extra ganaba ella y el relleno se quedaba en los 16px de serie. Se sube la especificidad
   en lugar de recurrir a !important, que dejaría el problema escondido para el siguiente. */
.aw-kpi { align-items: stretch; }
.aw-kpi > div.mud-card-content { width: 100%; padding: 18px 20px 18px 22px; }
.aw-kpi > div.mud-card-content:last-child { padding-bottom: 18px; }

.aw-kpi__body {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Círculo tintado con el MISMO color del filete: color-mix deja mezclarlo con el fondo sin escribir
   a mano una paleta de tintes por cada estado (y sin romperse en modo oscuro). */
.aw-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--aw-kpi-color);
    background: color-mix(in srgb, var(--aw-kpi-color) 12%, transparent);
}

.aw-kpi__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aw-kpi__label {
    color: var(--mud-palette-text-secondary);
    letter-spacing: .08em;
    line-height: 1.4;
}

/* El número manda: es lo único que se mira de reojo desde la otra punta de la mesa. */
.aw-kpi__value {
    color: var(--aw-kpi-color);
    font-weight: 700;
    line-height: 1.1;
}

/* === La FILA DE CARGA de MudTable no puede tocar la rejilla ==================================
   Al filtrar o paginar, MudTable mete en el <thead> su barra de progreso como
   `<tr class="mud-table-loading-row"><th colspan="1000">`. Es EL MISMO problema que ya está
   razonado arriba para la fila vacía (.aw-alerts-table--empty): ese colspan crea mil columnas y
   Chromium reparte entre todas ellas el ancho que la tabla no tiene asignado en píxeles, así que
   las únicas columnas con ancho relativo —las de texto, calc((100% - 596px)/2)— se quedan en 1px
   y el sobrante se lo lleva la columna fantasma.

   Medido en el navegador el 2026-08-12, filtrando Vigilancias por «Solo marcadas» (1920px):
       +17ms  9 columnas, anchos [52,1,1,138,72,120,104,110,1232], alto de página 3493px
       +74ms  8 columnas, anchos [52,318,318,138,72,120,104,110],  alto de página 1000px
   Durante ~74ms la tabla se desmaqueta y la página triplica su altura: es el «efecto raro» que
   describió el cliente (2026-08-12), el mismo que ya se corrigió para el check de oposición.

   Se saca la fila del flujo de la tabla en vez de ocultarla: así el usuario sigue viendo que algo
   se está cargando —que en una conexión lenta importa— pero la rejilla no llega a enterarse de que
   existe. Va en las SEIS tablas de rejilla fija, porque el problema es de MudTable y no de una
   pantalla: cualquiera de ellas lo haría igual al filtrar. */
.aw-clients-table,
.aw-assets-table,
.aw-bulletins-table,
.aw-incidents-table,
.aw-reminders-table,
.aw-alerts-table { position: relative; }

.aw-clients-table tr.mud-table-loading-row,
.aw-assets-table tr.mud-table-loading-row,
.aw-bulletins-table tr.mud-table-loading-row,
.aw-incidents-table tr.mud-table-loading-row,
.aw-reminders-table tr.mud-table-loading-row,
.aw-alerts-table tr.mud-table-loading-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Sin alto propio: la barra se pinta ENCIMA del borde superior y no empuja la cabecera hacia
       abajo, que es la otra mitad del salto (la página crecía y volvía a encogerse). */
    height: 0;
    overflow: visible;
}

.aw-clients-table tr.mud-table-loading-row > th.mud-table-loading,
.aw-assets-table tr.mud-table-loading-row > th.mud-table-loading,
.aw-bulletins-table tr.mud-table-loading-row > th.mud-table-loading,
.aw-incidents-table tr.mud-table-loading-row > th.mud-table-loading,
.aw-reminders-table tr.mud-table-loading-row > th.mud-table-loading,
.aw-alerts-table tr.mud-table-loading-row > th.mud-table-loading {
    display: block;
    padding: 0;
    border: 0;
}

/* Y lo mismo con la fila de «sin resultados», que es el OTRO colspan=1000 de MudTable. La clase
   .aw-*-table--empty ya la tapa, pero llega tarde: la pone el listado cuando el servidor confirma
   que el total es 0, y entre que MudTable pinta esa fila y llega la confirmación pasa un momento en
   el que la cabecera sigue puesta y aplastada (medido: ~85ms con las columnas de texto a 1px).
   Aquí se resuelve en el navegador y sin esperar a nadie: si el cuerpo tiene una fila a todo lo
   ancho, no hay nada que encabezar. Se mira el colspan y no el nombre de la clase porque es lo que
   de verdad rompe la rejilla, y así sigue valiendo si MudBlazor renombra la suya.
   La fila de CARGA se exceptúa: ya está fuera del flujo por la regla de arriba y su barra de
   progreso tiene que seguir viéndose.
   :has() no lo entienden los navegadores viejos; ahí simplemente no se aplica y queda el
   comportamiento de antes (la clase --empty del servidor), que es el que ya había. */
.aw-clients-table:has(tbody [colspan="1000"]) thead tr:not(.mud-table-loading-row),
.aw-assets-table:has(tbody [colspan="1000"]) thead tr:not(.mud-table-loading-row),
.aw-bulletins-table:has(tbody [colspan="1000"]) thead tr:not(.mud-table-loading-row),
.aw-incidents-table:has(tbody [colspan="1000"]) thead tr:not(.mud-table-loading-row),
.aw-reminders-table:has(tbody [colspan="1000"]) thead tr:not(.mud-table-loading-row),
.aw-alerts-table:has(tbody [colspan="1000"]) thead tr:not(.mud-table-loading-row) { display: none; }