/* /Components/Layout/AppearanceSettings.razor.rz.scp.css */
.appearance[b-apktk3d00u] {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    min-width: 0;
}

.appearance-section[b-apktk3d00u] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.appearance-label[b-apktk3d00u] {
    color: var(--mud-palette-text-primary);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appearance-hint-text[b-apktk3d00u] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
    margin-top: -0.2rem;
}

/* ------------------------------------------------------------
   Mode: three cards with a mock-up inside each.

   The mock-up does the work the word does not: "Sistema" says
   nothing about what colour the screen will end up, and whoever
   picks it wants to know that before pressing.
   ------------------------------------------------------------ */

.appearance-modes[b-apktk3d00u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (max-width: 520px) {
    .appearance-modes[b-apktk3d00u] {
        grid-template-columns: 1fr;
    }
}

.appearance-mode[b-apktk3d00u] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.65rem 0.7rem 0.7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.appearance-mode:hover[b-apktk3d00u],
.appearance-mode:focus-visible[b-apktk3d00u] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    outline: none;
}

.appearance-mode.active[b-apktk3d00u] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary), 0 8px 20px rgba(0, 0, 0, 0.10);
}

.appearance-mode-name[b-apktk3d00u] {
    font-size: 0.86rem;
    font-weight: 700;
}

.appearance-mode-hint[b-apktk3d00u] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

[b-apktk3d00u] .appearance-check {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    color: var(--mud-palette-primary);
}

/* The mock-up: the menu strip on the left and two lines of content.
   That is enough to recognise your own screen -- more detail across
   96px of width would only be noise. */
.appearance-preview[b-apktk3d00u] {
    display: flex;
    width: 100%;
    height: 48px;
    margin-bottom: 0.45rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    overflow: hidden;
}

.appearance-preview-rail[b-apktk3d00u] {
    flex: 0 0 26%;
    background: linear-gradient(180deg, var(--monitor-menu-top, #1A2332), var(--monitor-menu-bottom, #0F172A));
}

.appearance-preview-body[b-apktk3d00u] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex: 1 1 auto;
    padding: 0 7px;
}

.appearance-preview-body i[b-apktk3d00u] {
    display: block;
    height: 4px;
    border-radius: 2px;
}

.appearance-preview-body i:first-child[b-apktk3d00u] {
    width: 78%;
}

.appearance-preview-body i:last-child[b-apktk3d00u] {
    width: 52%;
}

.appearance-preview-light .appearance-preview-body[b-apktk3d00u] {
    background: #F8FAFC;
}

.appearance-preview-light .appearance-preview-body i[b-apktk3d00u] {
    background: #E2E8F0;
}

.appearance-preview-dark .appearance-preview-body[b-apktk3d00u] {
    background: #0F172A;
}

.appearance-preview-dark .appearance-preview-body i[b-apktk3d00u] {
    background: #1A2332;
}

/* "Sistema" is drawn split in two: that is literally what it does. */
.appearance-preview-system .appearance-preview-body[b-apktk3d00u] {
    background: linear-gradient(105deg, #F8FAFC 0%, #F8FAFC 50%, #0F172A 50%, #0F172A 100%);
}

.appearance-preview-system .appearance-preview-body i[b-apktk3d00u] {
    background: linear-gradient(105deg, #E2E8F0 0%, #E2E8F0 50%, #1A2332 50%, #1A2332 100%);
}

/* ------------------------------------------------------------
   Accent
   ------------------------------------------------------------ */

.appearance-accents[b-apktk3d00u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

.appearance-accent[b-apktk3d00u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.appearance-accent:hover[b-apktk3d00u],
.appearance-accent:focus-visible[b-apktk3d00u] {
    border-color: var(--swatch);
    outline: none;
}

.appearance-accent.active[b-apktk3d00u] {
    border-color: var(--swatch);
    box-shadow: 0 0 0 1px var(--swatch);
}

.appearance-accent-dot[b-apktk3d00u] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--swatch), var(--swatch-deep));
    color: #ffffff;
}

.appearance-accent-name[b-apktk3d00u] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ------------------------------------------------------------
   Footnote
   ------------------------------------------------------------ */

.appearance-note[b-apktk3d00u] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

[b-apktk3d00u] .appearance-note .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-9igzw0nf5f] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* The menu's own failure: small and inside the rail, with the way to retry. */
.monitor-nav-error[b-9igzw0nf5f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.5rem;
    color: #ffffff;
    font-size: 0.8rem;
    text-align: center;
}

[b-9igzw0nf5f] .monitor-nav-error .mud-button-root {
    color: #ffffff;
}

#blazor-error-ui .dismiss[b-9igzw0nf5f] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================
   TOP BAR

   White, not red, and only over the content.

   The red one used to run across the menu as well and cut it in
   two: the module header ended up above the cut and its screens
   below, as if they were unrelated things. And being the same
   red as the menu, it competed with it for attention while
   adding nothing -- it only repeated the brand.

   What it carries now is the one thing that does not fit in the
   menu: exactly where I am (the breadcrumb) and who I am (the
   session).
   ============================================================ */

.monitor-topbar[b-9igzw0nf5f] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(0.5rem, 1vw, 1rem);
    width: 100%;
    min-width: 0;
    min-height: var(--monitor-topbar-height);
    padding: 0.4rem clamp(0.75rem, 1.4vw, 2rem);
    box-sizing: border-box;
    background: var(--ci-surface);
    border-bottom: 1px solid var(--ci-outline);
}

/* The menu button only shows up once the drawer has left entirely
   (mobile): on desktop the one in charge is the rail's, and two buttons
   for the same job a hand's width apart only raise the question of
   whether they do different things. */
[b-9igzw0nf5f] .monitor-topbar-burger {
    display: none;
    flex: 0 0 auto;
    color: var(--ci-text-muted);
}

@media (max-width: 959px) {
    [b-9igzw0nf5f] .monitor-topbar-burger {
        display: inline-flex;
    }
}

/* ------------------------------------------------------------
   Breadcrumb: module / group / screen.
   ------------------------------------------------------------ */

.monitor-breadcrumb[b-9igzw0nf5f] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
    min-width: 0;
    font-size: clamp(0.78rem, 0.9vw, 0.9rem);
    line-height: 1.3;
}

.monitor-breadcrumb-home[b-9igzw0nf5f] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.2rem;
    border-radius: 6px;
    color: var(--ci-text-muted);
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease;
}

.monitor-breadcrumb-home:hover[b-9igzw0nf5f] {
    color: var(--ci-primary);
    background: color-mix(in srgb, var(--ci-primary) 8%, transparent);
}

/* --ci-outline es el token de las LINEAS, pensado para bordes de 1px sobre
   el fondo. Usado como color de TEXTO deja la barra a 1.3:1 en oscuro: los
   separadores del rastro de migas no se veian y las tres partes salian
   pegadas. El gris de texto secundario es el token que corresponde, y se
   atenua con opacidad para que siga leyendose como separador y no como una
   parte mas de la ruta. */
.monitor-breadcrumb-sep[b-9igzw0nf5f] {
    color: var(--ci-text-muted);
    /* 0.8 y no menos: medido, por debajo baja de 3:1 en tema claro y la barra
       vuelve a leerse como tres palabras pegadas. Y no 1.0 porque la barra no
       es una parte del rastro, solo separa las que lo son. */
    opacity: 0.8;
    user-select: none;
}

.monitor-breadcrumb-item[b-9igzw0nf5f] {
    color: var(--ci-text-muted);
    /* Wraps rather than truncates: a screen name in an ellipsis stops
       telling you where you are, which is the only thing a breadcrumb
       is for. */
    overflow-wrap: anywhere;
}

.monitor-breadcrumb-item.current[b-9igzw0nf5f] {
    color: var(--ci-primary);
    font-weight: 700;
}

/* ------------------------------------------------------------
   Right-hand side: find, theme, session.
   ------------------------------------------------------------ */

.monitor-topbar-actions[b-9igzw0nf5f] {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 0.35rem;
    min-width: 0;
}

.monitor-topbar-search[b-9igzw0nf5f] {
    flex: 0 1 clamp(11rem, 20vw, 20rem);
    min-width: 0;
}

/* Below tablet width the box eats half the bar and leaves the
   breadcrumb with no room. There it goes away: the menu is still one
   tap out. */
@media (max-width: 959px) {
    .monitor-topbar-search[b-9igzw0nf5f] {
        display: none;
    }
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input-control {
    margin: 0;
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input-outlined-border {
    border-color: var(--ci-outline);
}

.monitor-search-item[b-9igzw0nf5f] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    padding: 0.1rem 0;
}

.monitor-search-item-label[b-9igzw0nf5f] {
    font-weight: 600;
}

.monitor-search-item-path[b-9igzw0nf5f] {
    color: var(--ci-text-muted);
    font-size: 0.75rem;
}

.monitor-search-empty[b-9igzw0nf5f] {
    padding: 0.5rem 0.75rem;
    color: var(--ci-text-muted);
    font-size: 0.82rem;
}

[b-9igzw0nf5f] .monitor-topbar-icon {
    flex: 0 0 auto;
    color: var(--ci-text-muted);
}

/* ------------------------------------------------------------
   Session: initials, name and role.

   The name is on the button and not only inside the panel that
   opens. On a shared workstation "whose session is this" gets
   asked before anything is clicked, and an anonymous circle
   does not answer it.

   When room runs out the role goes first, then the name; the
   initials stay to the very end, because that circle is also
   the target you press.
   ------------------------------------------------------------ */

.monitor-user[b-9igzw0nf5f] {
    position: relative;
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
}

.monitor-user-chip[b-9igzw0nf5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 15rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ci-text);
    font: inherit;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.monitor-user-chip.is-open[b-9igzw0nf5f] {
    border-color: var(--ci-outline);
    background: color-mix(in srgb, var(--ci-primary) 10%, transparent);
}

[b-9igzw0nf5f] .monitor-user-caret {
    flex: 0 0 auto;
    color: var(--ci-text-muted);
    transition: transform 160ms ease;
}

.monitor-user-chip.is-open[b-9igzw0nf5f]  .monitor-user-caret {
    transform: rotate(180deg);
}

.monitor-user-id[b-9igzw0nf5f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1.15;
}

.monitor-user-chip:hover[b-9igzw0nf5f] {
    border-color: var(--ci-outline);
    background: color-mix(in srgb, var(--ci-primary) 8%, transparent);
}

.monitor-user-avatar[b-9igzw0nf5f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--monitor-menu-top, #F97316) 0%,
        var(--monitor-rail-bottom, #C2570C) 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.monitor-user-avatar-lg[b-9igzw0nf5f] {
    width: 54px;
    height: 54px;
    font-size: 1.15rem;
}

.monitor-user-name[b-9igzw0nf5f] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 700;
}

.monitor-user-sub[b-9igzw0nf5f] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ci-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The role is the first thing to go: the name identifies the session on
   its own, the role does not. */
@media (max-width: 1099px) {
    .monitor-user-sub[b-9igzw0nf5f] {
        display: none;
    }
}

@media (max-width: 899px) {
    .monitor-user-id[b-9igzw0nf5f] {
        display: none;
    }
}

.monitor-user-card[b-9igzw0nf5f] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 15rem;
    max-width: 22rem;
    padding: 1rem 0.85rem 0.9rem;
}

.monitor-user-card-text[b-9igzw0nf5f] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.monitor-user-card-text strong[b-9igzw0nf5f] {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.monitor-user-card-text span[b-9igzw0nf5f] {
    color: var(--ci-text-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.monitor-user-roles[b-9igzw0nf5f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

/* The role reads as a badge and not as one more line of grey text: it is the
   only thing on the card that says what this session is allowed to do. */
.monitor-user-role[b-9igzw0nf5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--ci-primary) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ci-primary) 12%, transparent);
    /* Rojo de marca sobre un fondo del mismo rojo al 12%: en modo oscuro eso
       daba 2.69:1 y el nombre del rol -- que es la unica etiqueta del panel
       que dice a que tiene derecho esta sesion -- se leia a medias. Mezclado
       hacia el texto sube a 4.91:1 en oscuro y 9.16:1 en claro, y sigue
       siendo rojo. */
    color: color-mix(in srgb, var(--ci-primary) 60%, var(--ci-text)) !important;
    font-size: 0.72rem;
    font-weight: 700;
}

[b-9igzw0nf5f] .monitor-user-role .mud-icon-root {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.9rem;
    /* currentColor y no la variable: asi el escudo sigue exactamente al texto
       de su pastilla y no hay dos formulas que mantener alineadas. */
    color: currentColor;
}

/* ------------------------------------------------------------
   The session panel.

   Fixed to the viewport, not absolute to the chip: the top bar
   lives inside a container with overflow:hidden, and an anchored
   panel would be clipped the moment it opened. Fixed also means
   it never gets caught by the page scroll.
   ------------------------------------------------------------ */

.monitor-user-backdrop[b-9igzw0nf5f] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    /* Transparent on purpose. Closing a menu should not dim the screen
       you were in the middle of reading. */
    background: transparent;
}

.monitor-user-panel[b-9igzw0nf5f] {
    position: fixed;
    top: calc(var(--monitor-topbar-height) + 0.35rem);
    right: clamp(0.6rem, 1.4vw, 1.5rem);
    z-index: 1401;
    display: flex;
    flex-direction: column;
    width: min(21.5rem, calc(100vw - 1.2rem));
    max-height: calc(100dvh - var(--monitor-topbar-height) - 1.5rem);
    padding: 0.5rem;
    overflow-y: auto;
    border: 1px solid var(--ci-outline);
    border-radius: 14px;
    background: var(--ci-surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.monitor-user-sep[b-9igzw0nf5f] {
    height: 1px;
    margin: 0.45rem 0.2rem;
    background: var(--ci-outline);
}

/* Three columns and not a flex row: the tile and the chevron are fixed, the
   text takes the rest. That way a long name pushes nothing out of line and
   the four chevrons stay in the same column. */
.monitor-user-action[b-9igzw0nf5f] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ci-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

/* The tinted tile. Its colour is the row's identity -- see the note in
   MainLayout.razor -- so it stays put on hover instead of collapsing into
   the accent along with everything else. */
.monitor-user-action-icon[b-9igzw0nf5f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tono) 16%, transparent);
    color: var(--tono);
}

.monitor-user-action-icon.tone-perfil[b-9igzw0nf5f] { --tono: var(--mud-palette-info); }
.monitor-user-action-icon.tone-apariencia[b-9igzw0nf5f] { --tono: var(--mud-palette-tertiary); }
.monitor-user-action-icon.tone-config[b-9igzw0nf5f] { --tono: var(--mud-palette-success); }
.monitor-user-action-icon.tone-salir[b-9igzw0nf5f] { --tono: var(--mud-palette-error); }

[b-9igzw0nf5f] .monitor-user-action-icon .mud-icon-root {
    color: var(--tono);
}

.monitor-user-action-text[b-9igzw0nf5f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.monitor-user-action small[b-9igzw0nf5f] {
    color: var(--ci-text-muted);
    font-size: 0.74rem;
    font-weight: 500;
}

/* The chevron is what says the row leads somewhere rather than toggling
   something in place. It nudges right on hover, which is where the click
   goes. */
[b-9igzw0nf5f] .monitor-user-action-go {
    flex: 0 0 auto;
    color: var(--ci-text-muted);
    opacity: 0.55;
    transition: transform 140ms ease, opacity 140ms ease;
}

.monitor-user-action:hover[b-9igzw0nf5f]  .monitor-user-action-go,
.monitor-user-action:focus-visible[b-9igzw0nf5f]  .monitor-user-action-go {
    transform: translateX(2px);
    opacity: 1;
}

/* A neutral lift, not the accent. The tiles already carry all the colour
   this panel needs; tinting the hover red as well left four rows fighting
   each other for attention. */
.monitor-user-action:hover[b-9igzw0nf5f],
.monitor-user-action:focus-visible[b-9igzw0nf5f] {
    background: color-mix(in srgb, var(--ci-text) 7%, transparent);
    outline: none;
}

/* Signing out is the one entry here that ends the session. It is set
   apart in colour so it is not clicked on the way past to the three
   above it. */
.monitor-user-action.is-danger[b-9igzw0nf5f] {
    color: var(--mud-palette-error);
}

.monitor-user-action.is-danger:hover[b-9igzw0nf5f] {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}

/* ------------------------------------------------------------
   Navigation bar.

   Pinned to the bottom edge of the top bar and absolutely
   positioned: appearing and disappearing must not move a single
   pixel of the page, or every screen change would jump.
   ------------------------------------------------------------ */

[b-9igzw0nf5f] .monitor-topbar-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
}

/* ============================================================
   SYPPLYPOS: BARRA SUPERIOR AZUL NOCHE

   La guia de diseno de SypplyPOS pide AppBar y menu lateral en
   azul noche (#1A2332, token Secondary / AppbarBackground) con
   texto blanco, y el naranja Sypply (#F97316) reservado para lo
   que es accion o "donde estoy". Barra y menu forman asi un solo
   marco oscuro alrededor del contenido, que queda en superficies
   claras: lo que se lee en un mostrador bajo luz intensa.

   Va al final a proposito: mismas especificidades que las reglas
   de arriba, asi que ganan por orden sin !important.
   ============================================================ */

.monitor-topbar[b-9igzw0nf5f] {
    --topbar-text: var(--mud-palette-appbar-text, #FFFFFF);
    --topbar-muted: color-mix(in srgb, var(--topbar-text) 72%, transparent);
    --topbar-line: color-mix(in srgb, var(--topbar-text) 16%, transparent);
    min-height: var(--monitor-topbar-height);
    background: var(--mud-palette-appbar-background, #1A2332);
    color: var(--topbar-text);
    border-bottom: 1px solid var(--topbar-line);
}

[b-9igzw0nf5f] .monitor-topbar-burger,
.monitor-breadcrumb-home[b-9igzw0nf5f],
.monitor-breadcrumb-sep[b-9igzw0nf5f],
.monitor-breadcrumb-item[b-9igzw0nf5f],
[b-9igzw0nf5f] .monitor-topbar-icon,
[b-9igzw0nf5f] .monitor-user-caret,
.monitor-topbar .monitor-user-sub[b-9igzw0nf5f] {
    color: var(--topbar-muted);
}

.monitor-breadcrumb-home:hover[b-9igzw0nf5f] {
    color: var(--ci-primary);
    background: color-mix(in srgb, var(--ci-primary) 16%, transparent);
}

/* Naranja sobre azul noche: 6.4:1, se lee sin mezclarlo con nada. */
.monitor-breadcrumb-item.current[b-9igzw0nf5f] {
    color: var(--ci-primary);
}

[b-9igzw0nf5f] .monitor-topbar-icon:hover {
    color: var(--topbar-text);
    background-color: color-mix(in srgb, var(--topbar-text) 10%, transparent);
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input-outlined-border {
    border-color: var(--topbar-line);
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input.mud-input-outlined {
    background: color-mix(in srgb, var(--topbar-text) 6%, transparent);
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input,
[b-9igzw0nf5f] .monitor-topbar-search .mud-input-slot,
[b-9igzw0nf5f] .monitor-topbar-search .mud-input-adornment .mud-icon-root,
[b-9igzw0nf5f] .monitor-topbar-search .mud-input-clear-button {
    color: var(--topbar-text);
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input-slot::placeholder {
    color: var(--topbar-muted);
    opacity: 1;
}

[b-9igzw0nf5f] .monitor-topbar-search .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--ci-primary);
}

.monitor-topbar .monitor-user-chip[b-9igzw0nf5f] {
    color: var(--topbar-text);
}

.monitor-topbar .monitor-user-chip:hover[b-9igzw0nf5f],
.monitor-topbar .monitor-user-chip.is-open[b-9igzw0nf5f] {
    border-color: var(--topbar-line);
    background: color-mix(in srgb, var(--topbar-text) 8%, transparent);
}

/* El circulo de iniciales en naranja: sobre la barra azul es lo primero que
   se encuentra la mano, y en el panel de sesion sigue igual de reconocible. */
.monitor-user-avatar[b-9igzw0nf5f] {
    background: linear-gradient(135deg,
        var(--mud-palette-primary, #F97316) 0%,
        var(--mud-palette-primary-darken, #EA6D0D) 100%);
    color: #FFFFFF;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   THE MENU

   Two columns because they answer two different questions:

     rail   which application I am in
     panel  which screen of that application

   Both used to live in the same list, which is why you had to
   read the whole thing to get your bearings: fourteen entries
   of identical weight, with nothing saying which level was
   which.

   Everything in the panel goes through one single set of rules.
   There is no separate styling for administration: it renders
   with the same markup as any module, so there is exactly one
   place to change how a group or a screen looks.

   No width is a fixed pixel value. Both come from the same
   custom properties the layout uses to reserve the space
   (--monitor-rail-width / --monitor-nav-width), so the rail
   measures exactly what the collapsed drawer measures and no
   strip of background shows between them at any zoom level.
   ============================================================ */

/* The fallback in every var() below is not decoration. The two custom
   properties live in app.css, the drawer clips whatever sticks out, and the
   drawer itself measures itself with these same properties -- so a stylesheet
   that does not reach the browser used to leave the menu measuring nothing and
   clipped to nothing: no rail, no panel, no way to navigate. Ugly beats gone. */
.monitor-nav-root[b-ny0s7i7pj0] {
    display: flex;
    height: 100%;
    width: var(--monitor-nav-width, clamp(288px, 22vw, 352px));
    min-width: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Application rail
   ------------------------------------------------------------ */

.monitor-nav-rail[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 var(--monitor-rail-width, clamp(72px, 5.4vw, 92px));
    width: var(--monitor-rail-width, clamp(72px, 5.4vw, 92px));
    min-height: 0;
    padding: 0.5rem 0.4rem 0.75rem;
    /* With the brand reds as fallback: the custom properties are set by
       the layout from the saved accent, and if they ever failed to be
       painted the menu comes out crimson instead of transparent. */
    background: linear-gradient(180deg,
        var(--monitor-rail-top, #131C2B) 0%,
        var(--monitor-rail-bottom, #0B1220) 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.22);
}

.monitor-rail-toggle[b-ny0s7i7pj0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 44px;
    margin-bottom: 0.6rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.monitor-rail-toggle:hover[b-ny0s7i7pj0],
.monitor-rail-toggle:focus-visible[b-ny0s7i7pj0] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.monitor-rail-items[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.35rem;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Scrollbar out of the way: in an 80px column it eats a third of the
       usable width of the icon. */
    scrollbar-width: none;
}

.monitor-rail-items[b-ny0s7i7pj0]::-webkit-scrollbar {
    display: none;
}

/* Icon with its name underneath, not a tooltip. A tooltip makes you park
   the mouse and wait to find out what each thing is; with seven
   applications that is seven waits for every person who is new here. */
.monitor-rail-item[b-ny0s7i7pj0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    width: 100%;
    padding: 0.6rem 0.15rem 0.55rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.monitor-rail-item > span[b-ny0s7i7pj0] {
    max-width: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    overflow-wrap: anywhere;
}

.monitor-rail-item:hover[b-ny0s7i7pj0],
.monitor-rail-item:focus-visible[b-ny0s7i7pj0] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    outline: none;
}

.monitor-rail-item.active[b-ny0s7i7pj0] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* The active marker is amber, not white and not red: on a rail made
   entirely of reds and whites, that is the only colour left that reads
   at a glance without comparing two similar tones. */
.monitor-rail-item.active[b-ny0s7i7pj0]::before {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 62%;
    border-radius: 0 3px 3px 0;
    background: var(--monitor-accent);
}

.monitor-rail-item-foot[b-ny0s7i7pj0] {
    flex: 0 0 auto;
    margin-top: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 10px 10px;
}

/* ------------------------------------------------------------
   Application panel
   ------------------------------------------------------------ */

.monitor-nav-panel[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg,
        var(--monitor-menu-top, #1A2332) 0%,
        var(--monitor-menu-bottom, #0F172A) 100%);
    transition: opacity 160ms ease;
}

/* Collapsed, it is not enough for it to be invisible: visibility:hidden
   also takes it out of the tab order. With display:none the panel would
   unmount and remount on every collapse, and the accordion would lose
   whichever group was open. */
.monitor-nav-root.is-collapsed .monitor-nav-panel[b-ny0s7i7pj0] {
    visibility: hidden;
    opacity: 0;
}

.monitor-nav-brand[b-ny0s7i7pj0] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.7rem;
    min-height: var(--monitor-topbar-height);
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.monitor-nav-brand-mark[b-ny0s7i7pj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.monitor-nav-brand-text[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.monitor-nav-brand-text strong[b-ny0s7i7pj0] {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.monitor-nav-brand-text span[b-ny0s7i7pj0] {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}

/* The gaps in this list are not decoration, they are the hierarchy.

   Packed tight, a heading and its four screens read as five rows of one
   flat list and the grouping stops doing its job. What separates the
   levels is, in this order: the air under a heading, the air between one
   group and the next, and only then the indent. Take the air away and
   the indent on its own is not enough -- it is a few pixels of
   difference between rows that otherwise look identical. */
.monitor-side-nav[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0.35rem;
    min-height: 0;
    min-width: 0;
    padding: 0.8rem 0.65rem 1rem;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.monitor-nav-foot[b-ny0s7i7pj0] {
    flex: 0 0 auto;
    padding: 0.6rem 0.65rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------
   Groups and screens
   ------------------------------------------------------------ */

.monitor-nav-group[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
}

/* Space and a line between one group and the next. With the headers
   touching and nothing between them, four closed groups read as a list
   of four screens -- which is exactly what grouping came to prevent. */
.monitor-nav-group + .monitor-nav-group[b-ny0s7i7pj0] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.monitor-nav-group-header[b-ny0s7i7pj0] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    /* Vertical padding instead of a fixed height: if the title goes to
       two lines the row grows with it instead of clipping it. */
    padding: 0.6rem 0.6rem 0.6rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.monitor-nav-group-header:hover[b-ny0s7i7pj0],
.monitor-nav-group-header:focus-visible[b-ny0s7i7pj0] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

/* The open group stays marked even after the mouse leaves: it is the only
   clue to where you are once the active screen has scrolled out of
   sight. */
.monitor-nav-group.abierto > .monitor-nav-group-header[b-ny0s7i7pj0] {
    color: #ffffff;
}

.monitor-nav-group-title[b-ny0s7i7pj0] {
    flex: 1 1 auto;
    min-width: 0;
    /* Wraps to two lines rather than truncating: "CLIENTES DE LA APP"
       cut down to "CLIENTE..." is indistinguishable from a plain
       "CLIENTES", and those are two different groups. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

[b-ny0s7i7pj0] .monitor-nav-group-icon,
[b-ny0s7i7pj0] .monitor-nav-group-caret {
    color: currentColor;
    flex: 0 0 auto;
}

[b-ny0s7i7pj0] .monitor-nav-group-caret {
    opacity: 0.6;
    transition: transform 160ms ease;
    transform: rotate(-90deg);
}

.monitor-nav-group.abierto[b-ny0s7i7pj0]  .monitor-nav-group-caret {
    transform: rotate(0deg);
}

/* The vertical line works as a bracket: it says where the group starts
   and where it ends without needing a frame drawn around it. */
.monitor-nav-group-items[b-ny0s7i7pj0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* The top margin is what says these belong to the heading above them
       and not to the group before it: without it the first child sits
       the same distance from both. */
    margin: 0.4rem 0 0.75rem 1.35rem;
    padding-left: 0.9rem;
    border-left: 1px dashed rgba(255, 255, 255, 0.22);
}

/*  ::deep EN TODO LO QUE CUELGA DE NavLink.

    Estas clases se ponen sobre <NavLink>, que es un COMPONENTE, no una
    etiqueta. El aislamiento de CSS de Blazor solo marca con el atributo de
    scope los elementos HTML escritos en este .razor: el <a> lo renderiza
    NavLink por dentro y nunca lo recibe. Sin ::deep, ninguna de estas reglas
    llegaba al enlace.

    Se notaba justo en el color: al no aplicar el blanco de aqui, el <a>
    caia en el a{color:var(--mud-palette-text-primary)} de MudBlazor. En tema
    oscuro eso es casi blanco y disimulaba el fallo; en tema CLARO es
    #1E293B, casi negro, sobre el rojo del menu -- y los nombres de las
    pantallas dejaban de leerse.

    Es la misma razon por la que .monitor-side-icon y los carets de mas
    arriba ya llevaban ::deep: van sobre <MudIcon>, que tambien es un
    componente. */
[b-ny0s7i7pj0] .monitor-side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    outline: none;
    transition: background-color 140ms ease, color 140ms ease;
}

[b-ny0s7i7pj0] .monitor-side-link > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

[b-ny0s7i7pj0] .monitor-side-link:hover,
[b-ny0s7i7pj0] .monitor-side-link:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}

/* The active pill is the menu colour lightened, not a separate red: that
   way it keeps standing out wherever it falls on the gradient, and there
   is no second set of colours to maintain for every accent. */
[b-ny0s7i7pj0] .monitor-side-link.active {
    color: #ffffff;
    background: color-mix(in srgb, #ffffff 20%, var(--monitor-menu-top, #1A2332));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
}

[b-ny0s7i7pj0] .monitor-side-icon {
    color: currentColor;
    flex: 0 0 auto;
}

/* Screens inside a group: normal weight and no icon. With an icon at both
   levels every row weighs the same and the eye cannot tell a group from a
   screen. */
[b-ny0s7i7pj0] .monitor-side-sublink {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.74);
}

[b-ny0s7i7pj0] .monitor-side-sublink.active {
    font-weight: 700;
}

/* The dot is what hooks the row onto the bracket line. */
[b-ny0s7i7pj0] .monitor-side-sublink::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

[b-ny0s7i7pj0] .monitor-side-sublink.active::before {
    background: var(--monitor-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

/* The chevron only on the active row: on all of them it would be noise,
   and on none of them the "you are here" confirmation would be lost. */
[b-ny0s7i7pj0] .monitor-side-sublink-caret {
    flex: 0 0 auto;
    opacity: 0;
    color: currentColor;
    transition: opacity 140ms ease;
}

[b-ny0s7i7pj0] .monitor-side-sublink.active .monitor-side-sublink-caret,
[b-ny0s7i7pj0] .monitor-side-sublink:hover .monitor-side-sublink-caret {
    opacity: 0.8;
}

[b-ny0s7i7pj0] .monitor-side-logout {
    color: rgba(255, 255, 255, 0.76);
}

[b-ny0s7i7pj0] .monitor-side-logout:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.22);
}

/* With the drawer squeezed as far as it goes (mobile, or very high zoom)
   the group indent eats the usable width of the names. */
@media (max-width: 599px) {
    .monitor-nav-group-items[b-ny0s7i7pj0] {
        margin-left: 0.8rem;
        padding-left: 0.65rem;
    }

    .monitor-side-nav[b-ny0s7i7pj0] {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}

/* ============================================================
   SYPPLYPOS: MENU AZUL NOCHE CON ICONOS NARANJA

   Tokens de la guia de diseno: DrawerBackground #1A2332 (el
   degradado lo ponen --monitor-menu-* desde ThemePreferenceService),
   DrawerText blanco, DrawerIcon #F97316 y el estado activo de la
   navegacion lateral en SecondaryLighten #263342 con el marcador
   naranja de "donde estoy".
   ============================================================ */

.monitor-rail-item[b-ny0s7i7pj0]  .mud-icon-root,
[b-ny0s7i7pj0] .monitor-side-icon {
    color: var(--mud-palette-drawer-icon, #F97316);
}

.monitor-rail-item.active[b-ny0s7i7pj0]  .mud-icon-root {
    color: var(--mud-palette-primary-lighten, #FB923C);
}

.monitor-rail-item.active[b-ny0s7i7pj0] {
    background: #263342;
}

[b-ny0s7i7pj0] .monitor-side-link.active {
    background: #263342;
    box-shadow: inset 3px 0 0 var(--monitor-accent);
}

[b-ny0s7i7pj0] .monitor-side-link.active .monitor-side-icon {
    color: var(--mud-palette-primary-lighten, #FB923C);
}

[b-ny0s7i7pj0] .monitor-side-logout .monitor-side-icon {
    color: currentColor;
}

.monitor-nav-brand-mark[b-ny0s7i7pj0] {
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.28);
    padding: 0;
    overflow: hidden;
}

.monitor-nav-brand-mark img[b-ny0s7i7pj0] {
    display: block;
    width: 100%;
    height: 100%;
}

.monitor-nav-brand-text strong[b-ny0s7i7pj0] {
    letter-spacing: 0.06em;
}

.monitor-nav-brand-text strong .monitor-nav-brand-accent[b-ny0s7i7pj0] {
    font-style: normal;
    color: var(--mud-palette-primary, #F97316);
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* ------------------------------------------------------------
   The bell in the top bar.

   Same footprint as the theme button beside it, so the row of
   icons reads as one row. The badge sits on the top-right of the
   bell and not beside it: a number next to an icon reads as a
   count of something else.
   ------------------------------------------------------------ */

.monitor-bell[b-68m9wpmkwy] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.monitor-bell-button[b-68m9wpmkwy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ci-text-muted);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.monitor-bell-button:hover[b-68m9wpmkwy],
.monitor-bell-button:focus-visible[b-68m9wpmkwy],
.monitor-bell-button.is-open[b-68m9wpmkwy] {
    background: color-mix(in srgb, var(--ci-text) 8%, transparent);
    color: var(--ci-text);
    outline: none;
}

/* The bell itself changes colour when there is something in it, badge or
   not: at a glance, from across the room, red means "look". */
.monitor-bell-button.has-new[b-68m9wpmkwy] {
    color: var(--ci-primary);
}

[b-68m9wpmkwy] .monitor-bell-button .mud-icon-root {
    color: currentColor;
}

.monitor-bell-badge[b-68m9wpmkwy] {
    position: absolute;
    top: 4px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--ci-surface);
    border-radius: 999px;
    background: var(--ci-primary);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   The panel. Fixed to the viewport for the reason the session
   panel is: the bar clips anything anchored to it.
   ------------------------------------------------------------ */

.monitor-bell-backdrop[b-68m9wpmkwy] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
}

.monitor-bell-panel[b-68m9wpmkwy] {
    position: fixed;
    top: calc(var(--monitor-topbar-height) + 0.35rem);
    right: clamp(0.6rem, 1.4vw, 1.5rem);
    z-index: 1401;
    display: flex;
    flex-direction: column;
    width: min(25rem, calc(100vw - 1.2rem));
    max-height: calc(100dvh - var(--monitor-topbar-height) - 1.5rem);
    padding: 0.5rem;
    overflow-y: auto;
    border: 1px solid var(--ci-outline);
    border-radius: 14px;
    background: var(--ci-surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.monitor-bell-head[b-68m9wpmkwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem 0.55rem;
    border-bottom: 1px solid var(--ci-outline);
    margin-bottom: 0.3rem;
}

.monitor-bell-head strong[b-68m9wpmkwy] {
    font-size: 0.95rem;
}

.monitor-bell-actions[b-68m9wpmkwy] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

/* "Limpiar" is a quiet button: it removes rows from a dropdown, nothing more,
   and it must not read as the primary action next to "Ver todas". */
.monitor-bell-clear[b-68m9wpmkwy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--ci-outline);
    border-radius: 999px;
    background: transparent;
    color: var(--ci-text-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.monitor-bell-clear:hover[b-68m9wpmkwy],
.monitor-bell-clear:focus-visible[b-68m9wpmkwy] {
    background: color-mix(in srgb, var(--ci-text) 8%, transparent);
    color: var(--ci-text);
    outline: none;
}

[b-68m9wpmkwy] .monitor-bell-clear .mud-icon-root {
    color: currentColor;
}

.monitor-bell-all[b-68m9wpmkwy] {
    color: var(--ci-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.monitor-bell-all:hover[b-68m9wpmkwy] {
    text-decoration: underline;
}

.monitor-bell-empty[b-68m9wpmkwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.6rem 1rem 1.4rem;
    color: var(--ci-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

[b-68m9wpmkwy] .monitor-bell-empty .mud-icon-root {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    color: var(--ci-text-muted);
    opacity: 0.6;
}

.monitor-bell-list[b-68m9wpmkwy] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tile, text, chevron: the same three columns as the session panel's rows,
   so the two panels a hand's width apart look like they belong together. */
.monitor-bell-item[b-68m9wpmkwy] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ci-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.monitor-bell-item.is-static[b-68m9wpmkwy] {
    cursor: default;
}

.monitor-bell-item:hover[b-68m9wpmkwy],
.monitor-bell-item:focus-visible[b-68m9wpmkwy] {
    background: color-mix(in srgb, var(--ci-text) 7%, transparent);
    outline: none;
}

/* New since the last look: a tinted row and a dot before the title. The
   tint alone is not enough in dark mode, and the dot alone is easy to miss. */
.monitor-bell-item.is-new[b-68m9wpmkwy] {
    background: color-mix(in srgb, var(--ci-primary) 7%, transparent);
}

.monitor-bell-item.is-new .monitor-bell-title[b-68m9wpmkwy]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--ci-primary);
    vertical-align: middle;
}

.monitor-bell-tile[b-68m9wpmkwy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tono) 16%, transparent);
    color: var(--tono);
}

.monitor-bell-tile.tone-info[b-68m9wpmkwy] { --tono: var(--mud-palette-info); }
.monitor-bell-tile.tone-success[b-68m9wpmkwy] { --tono: var(--mud-palette-success); }
.monitor-bell-tile.tone-warning[b-68m9wpmkwy] { --tono: var(--mud-palette-warning); }
.monitor-bell-tile.tone-error[b-68m9wpmkwy] { --tono: var(--mud-palette-error); }

[b-68m9wpmkwy] .monitor-bell-tile .mud-icon-root {
    color: var(--tono);
}

.monitor-bell-text[b-68m9wpmkwy] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.3;
}

.monitor-bell-title[b-68m9wpmkwy] {
    font-size: 0.86rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Two lines and an ellipsis: the detail is there to say what happened, not
   to be read to the end inside a dropdown. The screen shows it whole. */
.monitor-bell-message[b-68m9wpmkwy] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--ci-text);
    font-size: 0.79rem;
    opacity: 0.85;
}

.monitor-bell-meta[b-68m9wpmkwy] {
    color: var(--ci-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

[b-68m9wpmkwy] .monitor-bell-go {
    flex: 0 0 auto;
    color: var(--ci-text-muted);
    opacity: 0.55;
    transition: transform 140ms ease, opacity 140ms ease;
}

.monitor-bell-item:hover[b-68m9wpmkwy]  .monitor-bell-go {
    transform: translateX(2px);
    opacity: 1;
}
/* /Components/Layout/PageErrorBoundary.razor.rz.scp.css */
/* A card centred in the page area, not a banner: the page failed as a whole, and
   what replaces it has to read as "this is where the screen was". */
.page-error[b-g3qvb0wrjt] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    padding: clamp(1rem, 4vw, 3rem) clamp(0.75rem, 2vw, 2rem);
    overflow-y: auto;
}

.page-error-card[b-g3qvb0wrjt] {
    display: flex;
    gap: 1.1rem;
    width: min(44rem, 100%);
    padding: clamp(1.1rem, 2.4vw, 1.75rem);
    border: 1px solid var(--ci-outline);
    border-radius: 16px;
    background: var(--ci-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

@media (max-width: 599px) {
    .page-error-card[b-g3qvb0wrjt] {
        flex-direction: column;
    }
}

.page-error-icon[b-g3qvb0wrjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

[b-g3qvb0wrjt] .page-error-icon .mud-icon-root {
    color: var(--mud-palette-error);
}

.page-error-body[b-g3qvb0wrjt] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.page-error-title[b-g3qvb0wrjt] {
    margin: 0;
    color: var(--ci-text);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 800;
    line-height: 1.25;
}

.page-error-detail[b-g3qvb0wrjt] {
    margin: 0;
    color: var(--ci-text);
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.page-error-hint[b-g3qvb0wrjt] {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
    color: var(--ci-text);
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

[b-g3qvb0wrjt] .page-error-hint .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--mud-palette-info);
}

.page-error-actions[b-g3qvb0wrjt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.page-error-technical[b-g3qvb0wrjt] {
    margin-top: 0.25rem;
    color: var(--ci-text-muted);
    font-size: 0.78rem;
}

.page-error-technical summary[b-g3qvb0wrjt] {
    cursor: pointer;
    user-select: none;
}

.page-error-technical code[b-g3qvb0wrjt],
.page-error-technical span[b-g3qvb0wrjt] {
    display: block;
    margin-top: 0.4rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-aqmmvjwbwb],
.components-reconnect-repeated-attempt-visible[b-aqmmvjwbwb],
.components-reconnect-failed-visible[b-aqmmvjwbwb],
.components-pause-visible[b-aqmmvjwbwb],
.components-resume-failed-visible[b-aqmmvjwbwb],
.components-rejoining-animation[b-aqmmvjwbwb] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-retrying[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-failed[b-aqmmvjwbwb],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-aqmmvjwbwb] {
    display: block;
}


#components-reconnect-modal[b-aqmmvjwbwb] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-aqmmvjwbwb 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-aqmmvjwbwb 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-aqmmvjwbwb 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-aqmmvjwbwb]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-aqmmvjwbwb 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-aqmmvjwbwb {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-aqmmvjwbwb {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-aqmmvjwbwb {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-aqmmvjwbwb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-aqmmvjwbwb] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-aqmmvjwbwb] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-aqmmvjwbwb] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-aqmmvjwbwb] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-aqmmvjwbwb] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-aqmmvjwbwb] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-aqmmvjwbwb 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-aqmmvjwbwb] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-aqmmvjwbwb {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
.login-container[b-586jfznt7r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #2d1b69 100%);
    padding: 1rem;
}

.login-card[b-586jfznt7r] {
    background: rgba(30, 30, 46, 0.95);
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 80px rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    backdrop-filter: blur(10px);
}

.login-header[b-586jfznt7r] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-btn[b-586jfznt7r] {
    height: 48px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 8px !important;
}
/* /Components/Pages/Account/Profile.razor.rz.scp.css */
.profile[b-qkbrrf63fq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.profile-hero[b-qkbrrf63fq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    min-width: 0;
    padding: clamp(1rem, 1.6vw, 1.5rem);
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(120deg,
        var(--monitor-menu-top, #1A2332) 0%,
        var(--monitor-menu-bottom, #0F172A) 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.profile-avatar[b-qkbrrf63fq] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    font-size: 1.5rem;
    font-weight: 800;
}

.profile-hero-text[b-qkbrrf63fq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.profile-hero-text h1[b-qkbrrf63fq] {
    margin: 0;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.profile-hero-text p[b-qkbrrf63fq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.profile-roles[b-qkbrrf63fq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.profile-role[b-qkbrrf63fq] {
    padding: 0.12rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.profile-role-admin[b-qkbrrf63fq] {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.92);
    color: var(--monitor-menu-bottom, #0F172A);
}

/* An anchor styled as a button. Over the header gradient MudBlazor's Error
   red disappears, so it is painted white -- being alone in its corner is
   already enough weight. */
.profile-logout[b-qkbrrf63fq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.profile-logout:hover[b-qkbrrf63fq],
.profile-logout:focus-visible[b-qkbrrf63fq] {
    border-color: #ffffff;
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;
    outline: none;
}

[b-qkbrrf63fq] .profile-logout .mud-icon-root {
    color: currentColor;
}

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */

.profile-grid[b-qkbrrf63fq] {
    /* auto-fit rather than a column count: at high zoom or in half a window
       the cards stack on their own, without needing a breakpoint per width. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: 1rem;

    /* stretch, like .dash-grid in app.css and for the same reason: two cards
       side by side have to read as one band of the same height, whatever each
       one holds inside. This said start, which is why Sesion looked cut off
       next to Apariencia -- one rule for the whole application, not one per
       screen. */
    align-items: stretch;
}

[b-qkbrrf63fq] .profile-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;

    /* The same floor as .dash-card: a card with two facts should not look like
       a fragment beside one with a full list. Above the floor each row grows to
       whatever its tallest card needs. */
    min-height: 15.5rem;
    padding: clamp(0.9rem, 1.3vw, 1.25rem);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

[b-qkbrrf63fq] .profile-card-wide {
    grid-column: 1 / -1;
}

.profile-card-title[b-qkbrrf63fq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

[b-qkbrrf63fq] .profile-card-title .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* ------------------------------------------------------------
   Session facts
   ------------------------------------------------------------ */

.profile-facts[b-qkbrrf63fq] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.profile-facts > div[b-qkbrrf63fq] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
}

.profile-facts > div:last-child[b-qkbrrf63fq] {
    border-bottom: 0;
}

.profile-facts dt[b-qkbrrf63fq] {
    flex: 0 0 40%;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
}

.profile-facts dd[b-qkbrrf63fq] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   Administration permissions
   ------------------------------------------------------------ */

.profile-perms[b-qkbrrf63fq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.5rem;
}

.profile-perm[b-qkbrrf63fq] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
}

.profile-perm-name[b-qkbrrf63fq] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.profile-perm-level[b-qkbrrf63fq] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.profile-perm.granted[b-qkbrrf63fq] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

[b-qkbrrf63fq] .profile-perm.granted .mud-icon-root {
    color: var(--mud-palette-success);
}

/* Denied is stated, not hidden: without the row you cannot tell "I do not
   have it" from "it does not exist in this application". */
.profile-perm.denied[b-qkbrrf63fq] {
    opacity: 0.72;
}

[b-qkbrrf63fq] .profile-perm.denied .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.profile-codes[b-qkbrrf63fq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
}

.profile-codes-title[b-qkbrrf63fq] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-codes-title span[b-qkbrrf63fq] {
    color: var(--mud-palette-text-primary);
}

.profile-codes-empty[b-qkbrrf63fq] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.83rem;
    line-height: 1.4;
}

.profile-codes-empty strong[b-qkbrrf63fq] {
    color: var(--mud-palette-text-primary);
}

.profile-code-list[b-qkbrrf63fq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.profile-code-list code[b-qkbrrf63fq] {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
    font-size: 0.74rem;
}

/* ------------------------------------------------------------
   Reachable screens
   ------------------------------------------------------------ */

.profile-access[b-qkbrrf63fq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 0.9rem;
}

.profile-access-module[b-qkbrrf63fq] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-lines-default));
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.profile-access-module-name[b-qkbrrf63fq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.profile-access-module-name span[b-qkbrrf63fq] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
}

.profile-access-views[b-qkbrrf63fq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.profile-access-view[b-qkbrrf63fq] {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    text-decoration: none;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.profile-access-view:hover[b-qkbrrf63fq] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}
/* /Components/Pages/Administration/Companies.razor.rz.scp.css */
.companies-page[b-8t900o5wc3] { overflow-y: auto; padding-bottom: 2rem; }
.companies-heading[b-8t900o5wc3] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
h1[b-8t900o5wc3] { font-size: 1.8rem; font-weight: 700; }
h2[b-8t900o5wc3] { font-size: 1.2rem; font-weight: 650; margin: .7rem 0; }
p[b-8t900o5wc3] { color: var(--mud-palette-text-secondary); margin-bottom: .8rem; }
.company-grid[b-8t900o5wc3] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.company-fields[b-8t900o5wc3] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin: 1rem 0; }
.company-fields label[b-8t900o5wc3] { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; }
.company-fields[b-8t900o5wc3]  input { border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; padding: .8rem; color: inherit; background: var(--mud-palette-surface); }
.company-fields[b-8t900o5wc3]  input:focus { outline: 2px solid var(--mud-palette-primary); }
.company-modules[b-8t900o5wc3] { border: 1px solid var(--mud-palette-lines-default); padding: 1rem; border-radius: 10px; margin-top: 1rem; }
.company-modules legend[b-8t900o5wc3] { padding: 0 .4rem; font-weight: 700; }
.company-check[b-8t900o5wc3] { display: flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; }
.company-check input[b-8t900o5wc3], .company-check[b-8t900o5wc3]  input { width: 20px; height: 20px; accent-color: var(--mud-palette-primary); }
.company-code[b-8t900o5wc3] { font-size: .75rem; font-weight: 700; letter-spacing: .05em; }
.company-note[b-8t900o5wc3] { font-size: .85rem; }
.company-credentials[b-8t900o5wc3] { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.5rem; margin: 1rem 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .companies-heading[b-8t900o5wc3] { align-items: start; flex-direction: column; } }
/* /Components/Pages/Administration/Modules/CreateRoleDialog.razor.rz.scp.css */
.role-form[b-t3lrlzllru] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.role-fields[b-t3lrlzllru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 0.75rem;
}

.role-section[b-t3lrlzllru] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.role-section-head[b-t3lrlzllru] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.role-section-title[b-t3lrlzllru] {
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.role-section-hint[b-t3lrlzllru],
.role-empty[b-t3lrlzllru] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

/* ------------------------------------------------------------
   All modules / some modules
   ------------------------------------------------------------ */

.role-choice[b-t3lrlzllru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.6rem;
}

.role-choice-option[b-t3lrlzllru] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.role-choice-option:hover[b-t3lrlzllru] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-lines-default));
}

.role-choice-option.selected[b-t3lrlzllru] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

[b-t3lrlzllru] .role-choice-option .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

[b-t3lrlzllru] .role-choice-option.selected .mud-icon-root {
    color: var(--mud-palette-primary);
}

.role-choice-text[b-t3lrlzllru] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.role-choice-text strong[b-t3lrlzllru] {
    font-size: 0.9rem;
}

.role-choice-text small[b-t3lrlzllru] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.76rem;
    line-height: 1.35;
}

/* ------------------------------------------------------------
   Module list
   ------------------------------------------------------------ */

.role-modules[b-t3lrlzllru] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
}

.role-module + .role-module[b-t3lrlzllru] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.role-module.granted[b-t3lrlzllru] {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.role-module-row[b-t3lrlzllru] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0 0.6rem 0 0.25rem;
}

.role-module-name[b-t3lrlzllru] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.role-module-scope[b-t3lrlzllru] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    padding: 0.2rem 0.4rem 0.2rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}

.role-module-scope:hover[b-t3lrlzllru] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.role-module-body[b-t3lrlzllru] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 0.9rem 0.9rem 2.6rem;
}

.role-views[b-t3lrlzllru] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    gap: 0 0.5rem;
}

/* ------------------------------------------------------------
   Segmented control (screens scope, core levels)
   ------------------------------------------------------------ */

.role-seg[b-t3lrlzllru] {
    display: inline-flex;
    flex-wrap: wrap;
    align-self: flex-start;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.role-seg button[b-t3lrlzllru] {
    padding: 0.3rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.role-seg button + button[b-t3lrlzllru] {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.role-seg button:hover[b-t3lrlzllru] {
    color: var(--mud-palette-text-primary);
}

.role-seg button.selected[b-t3lrlzllru] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* ------------------------------------------------------------
   Core administration
   ------------------------------------------------------------ */

.role-core[b-t3lrlzllru] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.role-core-row[b-t3lrlzllru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.5rem 0.9rem;
}

.role-core-row + .role-core-row[b-t3lrlzllru] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.role-core-name[b-t3lrlzllru] {
    color: var(--mud-palette-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}