/* ═══════════════════════════════════════════════════════════════════════════
   LIANNA UI — identidade visual comum (GIMC, Lianna Admin)
   Um só ficheiro, carregado no App.razor de cada aplicação. Prefixo "ln-".

   O aspecto vem do TEMA (Lianna Admin › Aparência): o layout de cada aplicação
   escreve as variáveis --ln-* com as cores, a densidade e a estrutura da
   instituição (LnTemaEstilo). Os valores abaixo são os do padrão "Marinho" e só
   valem enquanto o tema não chega.

   Regras da casa:
   - a cor da marca (--ln-primary) é a das acções e da navegação; o acento
     (--ln-accent) só marca "onde estou" (item activo) e pormenores;
   - verde/âmbar/vermelho só quando são semânticos, e nunca sozinhos (sempre
     com texto ou ícone);
   - hierarquia por peso de letra e linhas finas, não por sombras e gradientes;
   - números com algarismos tabulares e alinhados à direita;
   - nada de ::deep aqui — isto é CSS global, aplica-se em qualquer componente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── Montserrat (SIL Open Font License, ver fonts/Montserrat-OFL.txt) ───────────── */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ───────────── Tokens (padrão Marinho; o tema reescreve-os) ───────────── */
:root {
    --ln-font:"Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --ln-font-num:var(--ln-font);
    --ln-fs:13px;
    --ln-fs-sm:12px;
    --ln-fs-xs:11px;
    --ln-fs-lg:14px;
    --ln-fs-h:15px;
    --ln-fs-title:18px;
    --ln-fs-display:22px;
    --ln-primary:#001C51;
    --ln-primary-strong:#00163F;
    --ln-primary-050:#F2F4F6;
    --ln-primary-100:#E3E6EC;
    --ln-primary-200:#C2C9D5;
    --ln-primary-a08:rgba(0,28,81,0.08);
    --ln-primary-a16:rgba(0,28,81,0.16);
    --ln-on-primary:#FFFFFF;
    --ln-accent:#EDAE00;
    --ln-accent-bg:#FDF5E0;
    --ln-on-accent:#1B2333;
    --ln-accent-ink:#8E6800;
    --ln-bg:#F3F5F8;
    --ln-surface:#FFFFFF;
    --ln-surface-2:#F9FAFC;
    --ln-ink:#1B2333;
    --ln-ink-2:#384152;
    --ln-muted:#5B6578;
    --ln-faint:#99A0AB;
    --ln-line:#E2E7EF;
    --ln-line-soft:#EFF2F6;
    --ln-line-strong:#BEC4CD;
    --ln-focus:rgba(0,28,81,0.28);
    --ln-good:#1E7A4F;
    --ln-good-bg:#E8F2ED;
    --ln-warn:#975A00;
    --ln-warn-bg:#F6F0E6;
    --ln-bad:#C0352B;
    --ln-bad-bg:#F9EDEC;
    --ln-info:#1F5BD8;
    --ln-info-bg:#EBF0FB;
    --ln-neutral:#414B5C;
    --ln-neutral-bg:#F2F4F8;
    --ln-navy:var(--ln-primary);
    --ln-navy-700:#0B3280;
    --ln-navy-050:var(--ln-primary-050);
    --ln-navy-100:var(--ln-primary-100);
    --ln-gold:var(--ln-accent-ink);
    --ln-gold-bg:var(--ln-accent-bg);
    --ln-radius-xs:4px;
    --ln-radius-sm:6px;
    --ln-radius:8px;
    --ln-radius-lg:10px;
    --ln-ctl-h:32px;
    --ln-pad:14px;
    --ln-gap:14px;
    --ln-row-y:7px;
    --ln-cell-x:10px;
    --ln-shadow-1:0 1px 2px rgba(16,24,40,.05);
    --ln-shadow-2:0 12px 32px rgba(16,24,40,.13);
    --ln-shadow-hover:0 4px 12px rgba(16,24,40,.08);
    --ln-appbar-h:52px;
    --ln-appbar-bg:#FFFFFF;
    --ln-appbar-fg:#1B2333;
    --ln-appbar-line:#E2E7EF;
    --ln-appbar-hover:#F0F1F5;
    --ln-menu-w:248px;
    --ln-menu-bg:#001C51;
    --ln-menu-fg:rgba(255,255,255,0.9);
    --ln-menu-fg-2:rgba(255,255,255,0.68);
    --ln-menu-icon:rgba(255,255,255,0.58);
    --ln-menu-hover:rgba(255,255,255,.07);
    --ln-menu-active-bg:rgba(255,255,255,.12);
    --ln-menu-active-fg:#FFFFFF;
    --ln-menu-line:rgba(255,255,255,.10);
    --ln-menu-indicator:#EDAE00;
    --ln-content-max:none;
}

/* O template antigo (style.css, Bootstrap) passa a seguir o tema. html:root ganha ao :root do template. */
html:root {
    --bs-body-font-family: var(--ln-font);
    --bs-body-font-size: var(--ln-fs);
    --bs-body-color: var(--ln-ink);
    --bs-body-bg: var(--ln-bg);
    --bs-border-color: var(--ln-line);
    --bs-link-color: var(--ln-primary);
    --bs-border-radius: var(--ln-radius-sm);
}

/* ───────────── Base ───────────── */
/* O tamanho da letra vai no body e não no html: as medidas em rem (MudBlazor) continuam a contar com 16 px. */
html,
body {
    margin: 0;
    background: var(--ln-bg);
    color: var(--ln-ink);
    font-family: var(--ln-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-size: var(--ln-fs);
}

/* Uma só família em toda a aplicação, incluindo os ecrãs antigos que declaram a sua. Ficam de fora os
   ícones de fonte (remixicon), código e o que pedir explicitamente letra monoespaçada. */
.ln-app,
.ln-app *:not([class*="ri-"]):not(.ln-mono):not(code):not(pre):not(kbd):not(samp):not(.ln-perm__code) {
    font-family: var(--ln-font) !important;
}

.ln-app {
    min-height: 100vh;
    background: var(--ln-bg);
    color: var(--ln-ink);
    font-size: var(--ln-fs);
}

    .ln-app h1, .ln-app h2, .ln-app h3, .ln-app h4, .ln-app h5, .ln-app h6 {
        color: var(--ln-ink);
        letter-spacing: -.01em;
    }

    /* Títulos HTML soltos dos ecrãs antigos (o modelo Bootstrap dava-lhes 40/32/28 px): tamanhos compactos, os do
       tema. O :where() deixa a especificidade baixa, para as regras próprias de cada ecrã continuarem a valer; os
       títulos do MudBlazor (MudText Typo="h…") ficam com a tipografia do tema do MudBlazor. */
    .ln-app :where(h1, h2, h3, h4, h5, h6):where(:not(.mud-typography)) {
        font-weight: 600;
        line-height: 1.3;
    }

    .ln-app :where(h1:not(.mud-typography)) { font-size: var(--ln-fs-display); }
    .ln-app :where(h2:not(.mud-typography)) { font-size: var(--ln-fs-title); }
    .ln-app :where(h3:not(.mud-typography)) { font-size: var(--ln-fs-h); }
    .ln-app :where(h4:not(.mud-typography)) { font-size: var(--ln-fs-lg); }
    .ln-app :where(h5:not(.mud-typography)) { font-size: var(--ln-fs); }
    .ln-app :where(h6:not(.mud-typography)) { font-size: var(--ln-fs-sm); }

    .ln-app a {
        color: var(--ln-primary);
    }

    .ln-app ::selection {
        background: var(--ln-primary-100);
        color: var(--ln-ink);
    }

    .ln-app :focus-visible {
        outline: 2px solid var(--ln-focus);
        outline-offset: 1px;
    }

    .ln-app * {
        scrollbar-width: thin;
        scrollbar-color: var(--ln-line-strong) transparent;
    }

    .ln-app ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .ln-app ::-webkit-scrollbar-thumb {
        background: var(--ln-line-strong);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    .ln-app ::-webkit-scrollbar-track {
        background: transparent;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   ESTRUTURA DA APLICAÇÃO — barra superior, menu lateral e área de conteúdo
   ═══════════════════════════════════════════════════════════════════════════ */
.ln-app .mud-appbar.ln-appbar {
    background: var(--ln-appbar-bg);
    color: var(--ln-appbar-fg);
    border-bottom: 1px solid var(--ln-appbar-line);
    box-shadow: none;
}

    .ln-app .mud-appbar.ln-appbar .mud-toolbar {
        height: var(--ln-appbar-h);
        min-height: var(--ln-appbar-h);
        padding-left: 16px;
        padding-right: 16px;
        gap: 10px;
    }

/* O botão do menu leva Edge.Start, que o puxava 12 px para fora e o colava ao canto do ecrã. */
.ln-appbar__toggle.mud-icon-button {
    color: inherit;
    padding: 7px;
    margin: 0 4px 0 0 !important;
    border-radius: var(--ln-radius-sm);
}

    .ln-appbar__toggle.mud-icon-button:hover {
        background: var(--ln-appbar-hover);
    }

.ln-appbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .ln-appbar__brand img {
        height: 30px;
        width: auto;
        display: block;
    }

.ln-appbar__sep {
    width: 1px;
    height: 22px;
    background: currentColor;
    opacity: .18;
    flex-shrink: 0;
}

    /* Sem logótipo na barra (comentado no MainLayout), o separador não fica sozinho ao lado do botão do menu. */
    .ln-appbar__brand > .ln-appbar__sep:first-child {
        display: none;
    }

.ln-appbar__inst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.ln-appbar__inst-n {
    font-size: var(--ln-fs);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38vw;
}

.ln-appbar__inst-s {
    font-size: var(--ln-fs-xs);
    opacity: .7;
    white-space: nowrap;
}

.ln-appbar__user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--ln-radius-sm);
    cursor: pointer;
    transition: background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

    .ln-appbar__user:hover {
        background: var(--ln-appbar-hover);
    }

.ln-appbar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--ln-primary-100);
    color: var(--ln-primary);
    flex-shrink: 0;
}

.ln-barra-marca .ln-appbar__avatar,
.ln-barra-escura .ln-appbar__avatar {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.ln-appbar__name {
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ln-appbar__chevron {
    width: 16px;
    height: 16px;
    opacity: .6;
}

/* Cartão do utilizador e itens do menu do utilizador */
.ln-usercard {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 340px;
    padding: 12px 14px 10px;
}

.ln-usercard__t {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .ln-usercard__t b {
        font-size: var(--ln-fs);
        font-weight: 600;
        color: var(--ln-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ln-usercard__t span {
        font-size: var(--ln-fs-xs);
        color: var(--ln-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ln-mi.mud-menu-item,
.ln-mi {
    font-size: var(--ln-fs-sm);
    min-height: unset !important;
    padding: 6px 14px !important;
    gap: 10px;
}

    .ln-mi .mud-icon-root {
        font-size: 18px;
        color: var(--ln-muted);
    }

.ln-mi--danger,
.ln-mi--danger .mud-icon-root {
    color: var(--ln-bad) !important;
}

    .ln-mi--danger:hover {
        background-color: var(--ln-bad-bg) !important;
    }

/* Menu lateral (gaveta) */
.ln-app .mud-drawer.ln-drawer {
    background: var(--ln-menu-bg);
    color: var(--ln-menu-fg);
    border-right: 1px solid var(--ln-menu-line);
    box-shadow: none;
}

.ln-app .mud-drawer.ln-drawer .mud-drawer-content {
    background: transparent;
}

/* Conteúdo */
.ln-app .mud-main-content.ln-main {
    padding: calc(var(--ln-appbar-h) + 20px) 24px 32px !important;
    background: var(--ln-bg);
    min-height: 100vh;
}

.ln-main__inner {
    max-width: var(--ln-content-max);
    margin: 0 auto;
    min-width: 0;
}

@media (max-width: 760px) {
    .ln-app .mud-main-content.ln-main {
        padding: calc(var(--ln-appbar-h) + 12px) 12px 24px !important;
    }

    .ln-appbar__inst-s {
        display: none;
    }
}

/* ───────────── Navegação (NavMenu do GIMC e do Lianna Admin) ───────────── */
.gnav {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: var(--ln-menu-fg);
    --g-logo-h: 46px;
}

.gnav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--ln-menu-line);
    flex: 0 0 auto;
}

.gnav__logo {
    height: var(--g-logo-h);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.gnav__logo--claro {
    display: none;
}

.ln-menu-marca .gnav__logo--escuro,
.ln-menu-escuro .gnav__logo--escuro {
    display: none;
}

.ln-menu-marca .gnav__logo--claro,
.ln-menu-escuro .gnav__logo--claro {
    display: block;
}

.gnav__name {
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    color: var(--ln-menu-fg-2);
    line-height: 1.3;
}

.gnav__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0 12px;
}

.gnav__sep {
    height: 1px;
    margin: 8px 18px;
    background: var(--ln-menu-line);
}

.gnav .mud-navmenu {
    color: var(--ln-menu-fg);
}

.gnav .mud-nav-link {
    position: relative;
    margin: 1px 10px;
    padding: 6px 10px;
    min-height: 32px;
    border-radius: var(--ln-radius-sm);
    line-height: 1.35;
    color: var(--ln-menu-fg-2);
    font-size: var(--ln-fs-sm);
    font-weight: 500;
    transition: background .13s ease, color .13s ease;
}

    .gnav .mud-nav-link:hover {
        background: var(--ln-menu-hover);
        color: var(--ln-menu-fg);
    }

.gnav button.mud-nav-link {
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    color: var(--ln-menu-fg);
}

.gnav .mud-nav-link .mud-nav-link-text {
    margin-left: 10px;
}

.gnav .mud-nav-link .mud-icon-root,
.gnav .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--ln-menu-icon);
    font-size: 18px;
    transition: color .13s ease;
}

.gnav .mud-nav-link:hover .mud-icon-root,
.gnav .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--ln-menu-fg);
}

.gnav .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 14px;
}

.gnav .mud-nav-link.gnav-on,
.gnav .mud-nav-link.active {
    background: var(--ln-menu-active-bg);
    color: var(--ln-menu-active-fg);
    font-weight: 600;
}

    .gnav .mud-nav-link.gnav-on::before,
    .gnav .mud-nav-link.active::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--ln-menu-indicator);
    }

    .gnav .mud-nav-link.gnav-on .mud-icon-root,
    .gnav .mud-nav-link.active .mud-icon-root,
    .gnav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
        color: var(--ln-menu-active-fg);
    }

.gnav .mud-nav-link.gnav-destaque {
    color: var(--ln-menu-fg);
    font-weight: 600;
}

.gnav .mud-nav-link .mud-nav-link-expand-icon,
.gnav .mud-navmenu .mud-nav-link-expand-icon {
    color: var(--ln-menu-icon);
    fill: var(--ln-menu-icon) !important;
    font-size: 16px;
}

.gnav__skel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
}

    .gnav__skel i {
        display: block;
        height: 10px;
        border-radius: 5px;
        background: var(--ln-menu-hover);
        animation: gnav-pulso 1.25s ease-in-out infinite;
    }

@keyframes gnav-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.gnav__aviso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    text-align: center;
}

    .gnav__aviso .mud-icon-root {
        font-size: 24px;
        color: var(--ln-menu-icon);
    }

    .gnav__aviso b {
        display: block;
        font-size: var(--ln-fs-sm);
        color: var(--ln-menu-fg);
    }

    .gnav__aviso span {
        display: block;
        font-size: var(--ln-fs-xs);
        color: var(--ln-menu-fg-2);
        line-height: 1.5;
        margin-top: 3px;
    }

.gnav .gnav__btn {
    text-transform: none !important;
    font-size: var(--ln-fs-xs) !important;
    border-radius: var(--ln-radius-sm) !important;
    color: var(--ln-menu-fg) !important;
}

/* Espaço de armazenamento do utilizador, por baixo de "Quotas e regras" (gestão de ficheiros). */
.gnav a.gnav-uso {
    display: block;
    margin: 6px 10px 8px 22px;
    padding: 8px 10px 9px;
    border: 1px solid var(--ln-menu-line);
    border-radius: var(--ln-radius-sm);
    color: var(--ln-menu-fg-2);
    font-size: 11px;
    line-height: 1.35;
    text-decoration: none !important;
    transition: background .13s ease, color .13s ease;
}

    .gnav a.gnav-uso:hover {
        background: var(--ln-menu-hover);
        color: var(--ln-menu-fg);
    }

    .gnav a.gnav-uso:focus-visible {
        outline: 2px solid var(--ln-menu-fg);
        outline-offset: 1px;
    }

.gnav-uso__cab {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .gnav-uso__cab .mud-icon-root {
        width: 15px;
        height: 15px;
        font-size: 15px;
        color: var(--ln-menu-icon);
        flex: 0 0 auto;
    }

.gnav-uso__t {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--ln-menu-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gnav-uso__p {
    font-variant-numeric: tabular-nums;
    color: var(--ln-menu-fg);
}

.gnav-uso__barra {
    height: 5px;
    margin: 7px 0 5px;
    border-radius: 999px;
    background: var(--ln-menu-line);
    overflow: hidden;
}

.gnav-uso__enchimento {
    height: 100%;
    border-radius: 999px;
    background: var(--ln-menu-fg);
    transition: width .3s ease;
}

    /* Quase cheio (90 % ou mais): vermelho, claro o bastante para se ler no fundo do menu. */
    .gnav-uso__enchimento.is-cheio {
        background: color-mix(in srgb, var(--ln-bad) 55%, #ffffff);
    }

.gnav-uso__d {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gnav__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--ln-menu-line);
    font-size: 10.5px;
    color: var(--ln-menu-fg-2);
}

.gnav__foot-v {
    white-space: nowrap;
}

.gnav__foot-u {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

@media (max-height: 680px) {
    .gnav {
        --g-logo-h: 36px;
    }

    .gnav__brand {
        padding: 10px 18px 9px;
    }

    .gnav__name {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECÇÕES COM MENU LATERAL (LnSecoes / LnSecao) — o padrão do ecrã Empresa
   ═══════════════════════════════════════════════════════════════════════════ */
.ln-secoes {
    container-type: inline-size;
    min-width: 0;
}

.ln-secoes__grid {
    display: grid;
    grid-template-columns: var(--ln-secoes-w, 232px) minmax(0, 1fr);
    gap: var(--ln-gap);
    align-items: start;
}

.ln-secoes__nav {
    position: sticky;
    top: calc(var(--ln-appbar-h) + 14px);
    background: var(--ln-surface);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-1);
    padding: 8px;
    min-width: 0;
}

.mud-dialog .ln-secoes__nav {
    top: 0;
}

.ln-secoes__head {
    padding: 6px 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ln-line-soft);
}

.ln-secoes__head-t {
    font-size: var(--ln-fs);
    font-weight: 600;
    color: var(--ln-ink);
}

.ln-secoes__head-d {
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    margin-top: 2px;
}

.ln-secoes__lista {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ln-secoes__grupo {
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    color: var(--ln-faint);
    padding: 12px 10px 4px;
}

    .ln-secoes__grupo:first-child {
        padding-top: 4px;
    }

.ln-secoes__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 10px;
    border-radius: var(--ln-radius-sm);
    color: var(--ln-ink-2);
    font: inherit;
    font-size: var(--ln-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}

    .ln-secoes__item:hover:not(:disabled) {
        background: var(--ln-primary-050);
        color: var(--ln-ink);
    }

    .ln-secoes__item:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .ln-secoes__item.is-on {
        background: var(--ln-primary-050);
        color: var(--ln-primary);
        font-weight: 600;
    }

        .ln-secoes__item.is-on::before {
            content: "";
            position: absolute;
            left: -8px;
            top: 7px;
            bottom: 7px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--ln-primary);
        }

.ln-secoes__icon.ln-icon {
    width: 17px;
    height: 17px;
    color: var(--ln-faint);
    flex-shrink: 0;
    transition: color .13s ease;
}

.ln-secoes__item:hover .ln-secoes__icon,
.ln-secoes__item.is-on .ln-secoes__icon {
    color: var(--ln-primary);
}

.ln-secoes__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ln-secoes__badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--ln-neutral-bg);
    color: var(--ln-muted);
}

.ln-secoes__badge--alerta {
    background: var(--ln-bad-bg);
    color: var(--ln-bad);
}

.ln-secoes__foot {
    margin-top: 8px;
    padding: 10px 8px 4px;
    border-top: 1px solid var(--ln-line-soft);
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
}

/* ───────────── Menu de acções (MudNavMenu dentro de um ecrã ou diálogo) ─────────────
   <MudNavMenu Class="ln-acoes"> para menus de documentos e operações ao lado do conteúdo (gestão de crédito,
   processo de financiamento): o desenho do menu de secções, com grupos que abrem e fecham. Os ícones do
   MudBlazor vinham da cor dos ícones da barra lateral (escura) e ficavam quase invisíveis num fundo claro.
   O Class de um MudNavLink fica no .mud-nav-item que o envolve. */
.ln-acoes.mud-navmenu {
    background: var(--ln-surface);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-1);
    padding: 6px;
    color: var(--ln-ink-2);
}

/* Dentro de um cartão que já tem moldura */
.ln-acoes.ln-acoes--embutido.mud-navmenu {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.ln-acoes.mud-navmenu .mud-nav-link {
    margin: 1px 0;
    padding: 6px 8px;
    min-height: 30px;
    border-radius: var(--ln-radius-sm);
    font-size: var(--ln-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ln-ink-2);
    transition: background .13s ease, color .13s ease;
}

.ln-acoes.mud-navmenu .mud-nav-link .mud-nav-link-text {
    margin-left: 9px;
    letter-spacing: 0;
}

.ln-acoes.mud-navmenu .mud-nav-link .mud-nav-link-icon {
    width: 17px;
    height: 17px;
    font-size: 17px;
    color: var(--ln-faint);
    flex-shrink: 0;
    transition: color .13s ease;
}

.ln-acoes.mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled),
.ln-acoes.mud-navmenu .mud-nav-link:focus-visible:not(.mud-nav-link-disabled) {
    background: var(--ln-primary-050);
    color: var(--ln-ink);
}

    .ln-acoes.mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon {
        color: var(--ln-primary);
    }

.ln-acoes.mud-navmenu .mud-nav-link.mud-nav-link-disabled .mud-nav-link-icon {
    opacity: .55;
}

/* Título de grupo */
.ln-acoes.mud-navmenu .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    color: var(--ln-ink);
}

    .ln-acoes.mud-navmenu .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
        font-weight: 600;
    }

.ln-acoes.mud-navmenu .mud-nav-link-expand-icon {
    width: 18px;
    height: 18px;
    color: var(--ln-faint);
    fill: currentColor !important;
}

/* Itens de um grupo: sem ícone, alinhados com o texto do grupo; com ícone, um pouco recolhidos */
.ln-acoes.mud-navmenu .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: 34px;
    padding-inline-start: 34px;
}

    .ln-acoes.mud-navmenu .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link:has(.mud-nav-link-icon) {
        padding-left: 14px;
        padding-inline-start: 14px;
    }

.ln-acoes.mud-navmenu .ln-acoes__sep.mud-divider {
    margin: 6px 8px;
    border-color: var(--ln-line-soft);
}

/* Acção que desfaz um passo importante (cancelar uma autorização…) */
.ln-acoes.mud-navmenu .ln-acoes__perigo > .mud-nav-link,
.ln-acoes.mud-navmenu .ln-acoes__perigo > .mud-nav-link .mud-nav-link-icon {
    color: var(--ln-bad);
}

    .ln-acoes.mud-navmenu .ln-acoes__perigo > .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        background: var(--ln-bad-bg);
        color: var(--ln-bad);
    }

        .ln-acoes.mud-navmenu .ln-acoes__perigo > .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon {
            color: var(--ln-bad);
        }

.ln-secoes__conteudo {
    min-width: 0;
}

.ln-secao {
    min-width: 0;
}

    /* As margens de topo que os painéis traziam dos separadores (mt-4…) desalinhavam o conteúdo do menu. */
    .ln-secao > :first-child {
        margin-top: 0 !important;
    }

.ln-secoes--oculto .ln-secoes__grid {
    grid-template-columns: minmax(0, 1fr);
}

.ln-secoes--compacto .ln-secoes__grid {
    gap: 12px;
}

.ln-secoes--compacto .ln-secoes__nav {
    padding: 6px;
    box-shadow: none;
    background: var(--ln-surface-2);
}

.ln-secoes--compacto .ln-secoes__item {
    padding: 6px 8px;
}

/* Disposição "topo" (secções dentro de um ecrã que já tem menu lateral) e menu lateral sem espaço:
   uma barra de escolha por cima do conteúdo, com a opção activa destacada a branco. */
.ln-secoes--topo .ln-secoes__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.ln-secoes--topo .ln-secoes__nav {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ln-secoes--topo .ln-secoes__head,
.ln-secoes--topo .ln-secoes__grupo,
.ln-secoes--topo .ln-secoes__foot {
    display: none;
}

.ln-secoes--topo .ln-secoes__lista {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    background: var(--ln-neutral-bg);
    border: 1px solid var(--ln-line-soft);
    border-radius: var(--ln-radius);
}

.ln-secoes--topo .ln-secoes__item {
    width: auto;
    flex: 0 0 auto;
    padding: 5px 12px;
    color: var(--ln-muted);
}

    .ln-secoes--topo .ln-secoes__item:hover:not(:disabled) {
        background: var(--ln-primary-a08);
        color: var(--ln-ink);
    }

    .ln-secoes--topo .ln-secoes__item.is-on {
        background: var(--ln-surface);
        color: var(--ln-primary);
        box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--ln-line);
    }

        .ln-secoes--topo .ln-secoes__item.is-on::before {
            display: none;
        }

.ln-secoes--topo .ln-secoes__label {
    overflow: visible;
}

@container (max-width: 760px) {
    .ln-secoes__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ln-secoes__nav {
        position: static;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .ln-secoes__head,
    .ln-secoes__grupo,
    .ln-secoes__foot {
        display: none;
    }

    .ln-secoes__lista {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 2px;
        padding: 3px;
        background: var(--ln-neutral-bg);
        border: 1px solid var(--ln-line-soft);
        border-radius: var(--ln-radius);
    }

    .ln-secoes__item {
        width: auto;
        flex: 0 0 auto;
        padding: 5px 12px;
        color: var(--ln-muted);
    }

        .ln-secoes__item:hover:not(:disabled) {
            background: var(--ln-primary-a08);
        }

        .ln-secoes__item.is-on {
            background: var(--ln-surface);
            color: var(--ln-primary);
            box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--ln-line);
        }

            .ln-secoes__item.is-on::before {
                display: none;
            }

    .ln-secoes__label {
        overflow: visible;
    }
}

/* ───────────── Ícones (LnIcon) ───────────── */
.ln-icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.2em;
    fill: currentColor;
}

/* ───────────── Página ───────────── */
.ln-page {
    display: flex;
    flex-direction: column;
    gap: var(--ln-gap);
    min-width: 0;
    color: var(--ln-ink);
}

.ln-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}

.ln-head__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ln-head__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ln-radius-sm);
    background: var(--ln-primary-050);
    border: 1px solid var(--ln-primary-100);
    color: var(--ln-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ln-head__icon .ln-icon,
    .ln-head__icon .mud-icon-root {
        color: var(--ln-primary);
        width: 19px;
        height: 19px;
        font-size: 19px;
    }

.ln-head__eyebrow {
    display: block;
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    color: var(--ln-muted);
    margin-bottom: 1px;
}

.ln-head__title {
    margin: 0;
    font-size: var(--ln-fs-title);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ln-ink);
}

.ln-head__sub {
    margin: 2px 0 0;
    font-size: var(--ln-fs-sm);
    color: var(--ln-muted);
    max-width: 760px;
    line-height: 1.45;
}

.ln-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Ecrã dentro de outro (a opção escolhida na gestão de crédito, no ecrã Empresa…): o cabeçalho da página
   embutida passa a cabeçalho de secção, sem sobretítulo e com ícone e título mais pequenos, para não
   competir com o cabeçalho do ecrã que a contém. */
.ln-embutido .ln-head__eyebrow {
    display: none;
}

.ln-embutido .ln-head__icon {
    width: 30px;
    height: 30px;
}

    .ln-embutido .ln-head__icon .ln-icon,
    .ln-embutido .ln-head__icon .mud-icon-root {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

.ln-embutido .ln-head__title {
    font-size: var(--ln-fs-h, 16px);
}

/* Segundo nível (uma lista dentro da situação do cliente, dentro da gestão de crédito). */
.ln-embutido .ln-embutido .ln-head__icon {
    display: none;
}

.ln-embutido .ln-embutido .ln-head__title {
    font-size: var(--ln-fs-lg);
}

/* Mini-indicadores em linha (no cabeçalho de uma página: "● Total 12  ● Activos 10  ● Inactivos 2") */
.ln-minis {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ln-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    white-space: nowrap;
}

    .ln-mini b {
        color: var(--ln-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.ln-mini__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--ln-faint);
}

    .ln-mini__dot.ln-tone--navy { background: var(--ln-primary); }
    .ln-mini__dot.ln-tone--good { background: var(--ln-good); }
    .ln-mini__dot.ln-tone--warn { background: var(--ln-warn); }
    .ln-mini__dot.ln-tone--bad { background: var(--ln-bad); }
    .ln-mini__dot.ln-tone--info { background: var(--ln-info); }
    .ln-mini__dot.ln-tone--gold { background: var(--ln-accent); }
    .ln-mini__dot.ln-tone--neutral { background: var(--ln-neutral); }

/* ───────────── Indicadores (KPI) ───────────── */
.ln-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.ln-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ln-surface);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-1);
    padding: 12px 14px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ln-stat--link {
    cursor: pointer;
}

    .ln-stat--link:hover {
        border-color: var(--ln-primary-200);
        box-shadow: var(--ln-shadow-hover);
    }

.ln-stat__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--ln-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ln-stat__icon .ln-icon {
        width: 18px;
        height: 18px;
    }

/* O valor encolhe com a largura do cartão (por exemplo, quatro indicadores ao lado de um menu lateral) em vez de
   ficar cortado com reticências: o corpo do cartão é um contentor e o tamanho da letra segue a sua largura. */
.ln-stat__body {
    flex: 1 1 auto;
    min-width: 0;
    container-type: inline-size;
}

.ln-stat__value {
    font-family: var(--ln-font-num);
    font-size: clamp(15px, 11.5cqi, var(--ln-fs-display));
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ln-ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-stat__label {
    font-size: var(--ln-fs-xs);
    font-weight: 500;
    color: var(--ln-muted);
    margin-top: 2px;
}

.ln-stat__hint {
    font-size: 10.5px;
    color: var(--ln-faint);
    margin-top: 2px;
}

/* tons — usados por stats, pills, ícones e barras */
.ln-tone--navy { background: var(--ln-primary-050); color: var(--ln-primary); }
.ln-tone--good { background: var(--ln-good-bg); color: var(--ln-good); }
.ln-tone--warn { background: var(--ln-warn-bg); color: var(--ln-warn); }
.ln-tone--bad { background: var(--ln-bad-bg); color: var(--ln-bad); }
.ln-tone--info { background: var(--ln-info-bg); color: var(--ln-info); }
.ln-tone--gold { background: var(--ln-accent-bg); color: var(--ln-accent-ink); }
.ln-tone--neutral { background: var(--ln-neutral-bg); color: var(--ln-neutral); }

.ln-stat__icon.ln-tone--navy .mud-icon-root { color: var(--ln-primary); }
.ln-stat__icon.ln-tone--good .mud-icon-root { color: var(--ln-good); }
.ln-stat__icon.ln-tone--warn .mud-icon-root { color: var(--ln-warn); }
.ln-stat__icon.ln-tone--bad .mud-icon-root { color: var(--ln-bad); }
.ln-stat__icon.ln-tone--info .mud-icon-root { color: var(--ln-info); }
.ln-stat__icon.ln-tone--gold .mud-icon-root { color: var(--ln-accent-ink); }
.ln-stat__icon.ln-tone--neutral .mud-icon-root { color: var(--ln-neutral); }

/* ───────────── Cartões / secções ───────────── */
.ln-card {
    background: var(--ln-surface);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-1);
    min-width: 0;
    overflow: hidden;
}

.ln-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px var(--ln-pad);
    border-bottom: 1px solid var(--ln-line-soft);
    flex-wrap: wrap;
}

.ln-card__titles {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

    .ln-card__titles .ln-icon,
    .ln-card__titles .mud-icon-root {
        color: var(--ln-primary);
        font-size: 17px;
        width: 17px;
        height: 17px;
    }

.ln-card__title {
    margin: 0;
    font-size: var(--ln-fs-lg);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ln-ink);
}

.ln-card__sub {
    margin: 1px 0 0;
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
}

.ln-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ln-card__body {
    padding: var(--ln-pad);
}

.ln-card--flush .ln-card__body {
    padding: 0;
}

.ln-card__foot {
    padding: 9px var(--ln-pad);
    border-top: 1px solid var(--ln-line-soft);
    background: var(--ln-surface-2);
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
}

.ln-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ln-gap);
}

.ln-grid-2--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cartões em duas colunas que se arrumam por altura (secções de formulários compridos) */
.ln-masonry {
    column-count: 2;
    column-gap: var(--ln-gap);
}

    .ln-masonry > * {
        break-inside: avoid;
        display: inline-block;
        width: 100%;
        margin-bottom: var(--ln-gap);
    }

    .ln-masonry > *:last-child {
        margin-bottom: 0;
    }

.ln-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ln-gap);
}

/* ───────────── Barra de ferramentas / filtros ───────────── */
.ln-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px var(--ln-pad);
    border-bottom: 1px solid var(--ln-line-soft);
    background: var(--ln-surface);
}

.ln-toolbar__grow {
    flex: 1 1 260px;
    min-width: 200px;
}

/* Uma barra dentro da barra do LnCard (<Toolbar><div class="ln-toolbar">…): a de dentro ocupa a linha toda. */
.ln-toolbar > .ln-toolbar {
    flex: 1 1 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Campos do MudBlazor numa barra: ficam do tamanho que pedem (Style/largura própria) em vez de esticarem e
   empurrarem o resto para longe; para um campo que deve ocupar o espaço livre, Class="ln-toolbar__grow". */
.ln-toolbar > .mud-input-control,
.ln-toolbar > .mud-select,
.ln-toolbar > .mud-picker {
    flex: 0 1 auto;
    min-width: 0;
}

    .ln-toolbar > .mud-input-control.ln-toolbar__grow {
        flex: 1 1 260px;
        min-width: 200px;
    }

    /* Vazio, é só um espaçador: empurra as acções para a direita sem forçar uma linha nova. Se as acções não
       couberem e passarem para baixo, ficam encostadas à direita. */
    .ln-toolbar__grow:empty {
        flex: 1 1 0;
        min-width: 0;
    }

        .ln-toolbar__grow:empty + * {
            margin-left: auto;
        }

.ln-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    align-items: end;
}

/* ───────────── Botões ───────────── */
.ln-btn.mud-button-root {
    border-radius: var(--ln-radius-sm);
    text-transform: none;
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    padding: 0 12px;
    min-height: var(--ln-ctl-h);
    height: var(--ln-ctl-h);
}

    .ln-btn.mud-button-root:hover {
        box-shadow: none;
    }

.ln-botoes-maiusculas .ln-btn.mud-button-root {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: var(--ln-fs-xs);
}

.ln-btn--primary.mud-button-root {
    background: var(--ln-primary);
    color: var(--ln-on-primary);
}

    .ln-btn--primary.mud-button-root:hover {
        background: var(--ln-primary-strong);
    }

.ln-botoes-suave .ln-btn--primary.mud-button-root {
    background: var(--ln-primary-100);
    color: var(--ln-primary);
}

    .ln-botoes-suave .ln-btn--primary.mud-button-root:hover {
        background: var(--ln-primary-200);
    }

.ln-botoes-contorno .ln-btn--primary.mud-button-root {
    background: transparent;
    color: var(--ln-primary);
    box-shadow: inset 0 0 0 1px var(--ln-primary);
}

    .ln-botoes-contorno .ln-btn--primary.mud-button-root:hover {
        background: var(--ln-primary-050);
    }

.ln-btn--soft.mud-button-root {
    background: var(--ln-primary-050);
    color: var(--ln-primary);
    box-shadow: inset 0 0 0 1px var(--ln-primary-100);
}

    .ln-btn--soft.mud-button-root:hover {
        background: var(--ln-primary-100);
    }

.ln-btn--danger.mud-button-root {
    background: var(--ln-bad-bg);
    color: var(--ln-bad);
}

    .ln-btn--danger.mud-button-root:hover {
        background: var(--ln-bad);
        color: #fff;
    }

.ln-btn--good.mud-button-root {
    background: var(--ln-good-bg);
    color: var(--ln-good);
}

.ln-btn--ghost.mud-button-root {
    background: transparent;
    color: var(--ln-ink-2);
}

    .ln-btn--ghost.mud-button-root:hover {
        background: var(--ln-neutral-bg);
    }

.ln-btn .mud-button-icon-start {
    margin-right: 6px;
}

.ln-btn .mud-button-icon-start .mud-icon-root,
.ln-btn .mud-button-icon-end .mud-icon-root {
    font-size: 17px;
}

.ln-btn.mud-button-root.mud-disabled,
.ln-btn.mud-button-root:disabled {
    background: var(--ln-neutral-bg) !important;
    color: var(--ln-faint) !important;
    box-shadow: none !important;
}

.ln-icon-btn.mud-icon-button {
    background: transparent;
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius-sm);
    padding: 6px;
    color: var(--ln-ink-2);
}

    .ln-icon-btn.mud-icon-button:hover {
        background: var(--ln-primary-050);
        color: var(--ln-primary);
        border-color: var(--ln-primary-100);
    }

    .ln-icon-btn.mud-icon-button .mud-icon-root {
        font-size: 17px;
    }

/* ───────────── Pílulas de estado ───────────── */
.ln-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.55;
}

    .ln-pill .ln-icon,
    .ln-pill .mud-icon-root {
        font-size: 13px;
        width: 1em;
        height: 1em;
        color: inherit;
    }

.ln-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ln-dot--pulse {
    animation: ln-pulse 1.6s ease-in-out infinite;
}

@keyframes ln-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ───────────── Barras / medidores ───────────── */
.ln-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
}

.ln-bar__track {
    height: 6px;
    border-radius: 999px;
    background: var(--ln-line-soft);
    overflow: hidden;
}

.ln-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ln-primary);
    transition: width .3s ease;
}

    .ln-bar__fill.ln-tone--navy { background: var(--ln-primary); }
    .ln-bar__fill.ln-tone--neutral { background: var(--ln-neutral); }
    .ln-bar__fill.ln-tone--good { background: var(--ln-good); }
    .ln-bar__fill.ln-tone--warn { background: var(--ln-warn); }
    .ln-bar__fill.ln-tone--bad { background: var(--ln-bad); }
    .ln-bar__fill.ln-tone--info { background: var(--ln-info); }
    .ln-bar__fill.ln-tone--gold { background: var(--ln-accent); }

.ln-bar__label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    font-variant-numeric: tabular-nums;
}

/* gráfico de colunas simples em HTML (sem bibliotecas) */
.ln-cols {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 130px;
    padding-top: 8px;
}

.ln-cols__col {
    flex: 1 1 0;
    min-width: 4px;
    border-radius: 3px 3px 0 0;
    background: var(--ln-primary-100);
    position: relative;
    transition: background .15s ease;
}

    .ln-cols__col:hover {
        background: var(--ln-primary);
    }

    .ln-cols__col--hoje {
        background: var(--ln-accent);
    }

.ln-cols__axis {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--ln-faint);
    margin-top: 5px;
}

/* ───────────── Tabelas simples ───────────── */
.ln-table-wrap {
    overflow-x: auto;
}

.ln-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ln-fs-sm);
}

    .ln-table th {
        text-align: left;
        font-size: var(--ln-fs-xs);
        font-weight: 600;
        color: var(--ln-muted);
        background: var(--ln-surface-2);
        padding: 8px var(--ln-cell-x);
        border-bottom: 1px solid var(--ln-line);
        white-space: nowrap;
    }

    .ln-table td {
        padding: var(--ln-row-y) var(--ln-cell-x);
        border-bottom: 1px solid var(--ln-line-soft);
        vertical-align: middle;
        color: var(--ln-ink);
    }

.ln-tabelas-listradas .ln-table tbody tr:nth-child(even) td {
    background: var(--ln-surface-2);
}

.ln-table tbody tr:hover td {
    background: var(--ln-primary-050);
}

.ln-table tbody tr:last-child td {
    border-bottom: none;
}

.ln-table .ln-num,
.ln-table th.ln-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ln-table tfoot td {
    font-weight: 600;
    background: var(--ln-surface-2);
    border-top: 1px solid var(--ln-line);
}

/* MudDataGrid / MudTable com Class="ln-grid" (o resto da compactação é global, mais abaixo) */
.ln-grid .mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--ln-muted);
    background: var(--ln-surface-2);
}

/* ───────────── Listas chave/valor ───────────── */
.ln-kv {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 7px 14px;
    font-size: var(--ln-fs-sm);
}

.ln-kv__k {
    color: var(--ln-muted);
}

.ln-kv__v {
    color: var(--ln-ink);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ───────────── Ficha (cliente, crédito, notas) ─────────────
   Painel de leitura ao lado de uma tabela ou num diálogo: blocos com título discreto e pares chave/valor.
   <div class="ln-ficha"><section class="ln-ficha__bloco"><div class="ln-ficha__titulo">…</div>
   <dl class="ln-ficha__kv"><dt>…</dt><dd>…</dd></dl></section></div> */
.ln-ficha {
    background: var(--ln-surface);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-1);
    min-width: 0;
}

.ln-ficha__bloco {
    padding: 14px 16px;
}

    .ln-ficha__bloco + .ln-ficha__bloco {
        border-top: 1px solid var(--ln-line-soft);
    }

.ln-ficha__titulo {
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    color: var(--ln-muted);
    margin-bottom: 8px;
}

.ln-ficha__nome {
    font-size: var(--ln-fs);
    font-weight: 600;
    color: var(--ln-ink);
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.ln-ficha__kv {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px 10px;
    margin: 0;
    font-size: var(--ln-fs-sm);
}

    .ln-ficha__kv dt {
        color: var(--ln-muted);
    }

    .ln-ficha__kv dd {
        margin: 0;
        color: var(--ln-ink);
        font-weight: 500;
        min-width: 0;
        overflow-wrap: anywhere;
    }

.ln-ficha__vazio {
    color: var(--ln-faint);
}

.ln-ficha__nota {
    padding: 8px 10px;
    border-radius: var(--ln-radius-sm);
    background: var(--ln-warn-bg);
    border-left: 3px solid var(--ln-warn);
}

    .ln-ficha__nota + .ln-ficha__nota {
        margin-top: 6px;
    }

.ln-ficha__nota-texto {
    font-size: var(--ln-fs-sm);
    color: var(--ln-ink);
    overflow-wrap: anywhere;
}

.ln-ficha__nota-data {
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    margin-top: 2px;
}

/* ───────────── Itens de lista ───────────── */
.ln-list {
    display: flex;
    flex-direction: column;
}

.ln-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--ln-pad);
    border-bottom: 1px solid var(--ln-line-soft);
    min-width: 0;
}

    .ln-list__item:last-child {
        border-bottom: none;
    }

.ln-list__main {
    flex: 1 1 auto;
    min-width: 0;
}

.ln-list__title {
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    color: var(--ln-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-list__sub {
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ln-primary-050);
    color: var(--ln-primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ───────────── Estado vazio / avisos ───────────── */
.ln-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 32px 16px;
    color: var(--ln-muted);
}

    .ln-empty .ln-icon,
    .ln-empty .mud-icon-root {
        font-size: 32px;
        width: 1em;
        height: 1em;
        color: var(--ln-line-strong);
        margin-bottom: 6px;
    }

.ln-empty__title {
    font-size: var(--ln-fs);
    font-weight: 600;
    color: var(--ln-ink-2);
}

.ln-empty__hint {
    font-size: var(--ln-fs-sm);
    color: var(--ln-muted);
    max-width: 420px;
}

.ln-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--ln-radius-sm);
    font-size: var(--ln-fs-sm);
    line-height: 1.5;
}

    .ln-note .ln-icon,
    .ln-note .mud-icon-root {
        font-size: 17px;
        width: 1em;
        height: 1em;
        color: inherit;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ───────────── "Saber mais" (LnSaberMais): ajuda que abre por baixo de um botão ───────────── */
.ln-saber {
    position: relative;
    display: inline-block;
}

.ln-saber__botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ln-ctl-h);
    padding: 0 10px;
    border-radius: var(--ln-radius-sm);
    border: 1px solid var(--ln-line);
    background: var(--ln-surface);
    color: var(--ln-muted);
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color .13s ease, color .13s ease, border-color .13s ease;
}

    .ln-saber__botao::-webkit-details-marker {
        display: none;
    }

    .ln-saber__botao .ln-icon {
        width: 16px;
        height: 16px;
        color: var(--ln-primary);
    }

    .ln-saber__botao:hover,
    .ln-saber[open] > .ln-saber__botao {
        background: var(--ln-primary-050);
        border-color: var(--ln-primary-100);
        color: var(--ln-ink);
    }

.ln-saber__painel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: min(400px, calc(100vw - 32px));
    max-height: min(62vh, 520px);
    overflow: auto;
    padding: 14px 16px;
    background: var(--ln-surface);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-2);
    text-align: left;
}

.ln-saber__titulo {
    font-size: var(--ln-fs);
    font-weight: 600;
    color: var(--ln-ink);
    margin-bottom: 8px;
}

.ln-saber__texto {
    font-size: var(--ln-fs-sm);
    line-height: 1.6;
    color: var(--ln-ink-2);
}

    .ln-saber__texto p {
        margin: 0 0 10px;
    }

        .ln-saber__texto p:last-child {
            margin-bottom: 0;
        }

    .ln-saber__texto strong,
    .ln-saber__texto b {
        color: var(--ln-ink);
        font-weight: 600;
    }

@media (max-width: 760px) {
    .ln-saber__rotulo {
        display: none;
    }
}

/* ───────────── Cabeçalho de secção dos ecrãs antigos ─────────────
   <MudStack Row Class="ln-sec-cab"> com um MudIcon grande, um título (subtitle2) e uma descrição (body2):
   o mesmo desenho do cabeçalho dos diálogos do kit (.ln-dlg-cab), em vez de caixas com cores e margens próprias. */
.ln-sec-cab.mud-stack {
    width: 100%;
    gap: 12px;
    padding: 4px 0 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ln-line-soft);
    background: transparent;
}

    .ln-sec-cab.mud-stack > .mud-stack {
        align-items: center;
        gap: 10px;
        margin: 0 !important;
    }

    .ln-sec-cab .mud-icon-root.mud-icon-size-large {
        width: 34px;
        height: 34px;
        padding: 8px;
        flex: 0 0 auto;
        border-radius: var(--ln-radius-sm);
        background: var(--ln-primary-050);
        color: var(--ln-primary);
    }

    .ln-sec-cab .mud-icon-root.mud-icon-size-large.mud-error-text {
        background: var(--ln-bad-bg);
        color: var(--ln-bad);
    }

    .ln-sec-cab .mud-icon-root.mud-icon-size-large.mud-success-text {
        background: var(--ln-good-bg);
        color: var(--ln-good);
    }

    .ln-sec-cab .mud-typography-subtitle2 {
        font-size: var(--ln-fs-lg);
        font-weight: 600;
        color: var(--ln-ink);
        line-height: 1.3;
    }

    .ln-sec-cab .mud-typography-body2 {
        font-size: var(--ln-fs-xs);
        color: var(--ln-muted);
    }

/* Directamente no diálogo (componente aberto sem <MudDialog>): alinhado com o título do diálogo */
.mud-dialog > .ln-sec-cab.mud-stack {
    width: auto;
    margin: 4px 24px 12px;
}

/* ───────────── Formulários em diálogo ───────────── */
/* Cabeçalho de um formulário dentro de um diálogo: ícone, título e descrição à esquerda, ajuda à direita */
.ln-dlg-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 12px;
    margin: 14px 0 4px;
    border-bottom: 1px solid var(--ln-line-soft);
}

.ln-dlg-cab__id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .ln-dlg-cab__id > .ln-icon {
        width: 34px;
        height: 34px;
        padding: 8px;
        border-radius: var(--ln-radius-sm);
        background: var(--ln-primary-050);
        color: var(--ln-primary);
        flex: 0 0 auto;
    }

.ln-dlg-cab__t {
    font-size: var(--ln-fs-lg);
    font-weight: 600;
    color: var(--ln-ink);
}

.ln-dlg-cab__d {
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    margin-top: 1px;
}

.ln-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.ln-form__full {
    grid-column: 1 / -1;
}

.ln-section-title {
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    color: var(--ln-ink);
    margin: 4px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ln-line-soft);
}

/* ───────────── Árvore de permissões ───────────── */
.ln-perm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ln-perm__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ln-perm__list {
    overflow-y: auto;
    padding-right: 4px;
}

.ln-perm__mod {
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--ln-surface);
}

.ln-perm__mod--off {
    opacity: .72;
}

.ln-perm__modhead {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 4px;
    background: var(--ln-surface-2);
    min-width: 0;
}

.ln-perm__children {
    padding: 3px 10px 8px 4px;
    border-top: 1px solid var(--ln-line-soft);
}

.ln-perm__row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 6px 0 0;
    border-radius: var(--ln-radius-xs);
    min-width: 0;
}

    .ln-perm__row:hover {
        background: var(--ln-primary-050);
    }

.ln-perm__name {
    font-size: var(--ln-fs-sm);
    color: var(--ln-ink-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ln-perm__name--group {
    font-weight: 600;
    color: var(--ln-ink);
}

.ln-perm__code {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    color: var(--ln-faint);
    flex-shrink: 0;
}

.ln-perm__count {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ln-faint);
    white-space: nowrap;
}

.ln-perm__badges {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.ln-perm__toggle {
    border: 0;
    background: transparent;
    color: var(--ln-muted);
    cursor: pointer;
    border-radius: var(--ln-radius-xs);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ln-perm__toggle:hover {
        background: var(--ln-line-soft);
        color: var(--ln-primary);
    }

    .ln-perm__toggle .ln-icon {
        width: 18px;
        height: 18px;
        transition: transform .15s ease;
    }

.ln-perm__toggle--open .ln-icon {
    transform: rotate(90deg);
}

.ln-perm__mini {
    border: 0;
    background: transparent;
    color: var(--ln-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--ln-radius-xs);
}

    .ln-perm__mini:hover {
        background: var(--ln-primary-050);
    }

    .ln-perm__mini:disabled {
        color: var(--ln-faint);
        cursor: default;
        background: transparent;
    }

.ln-check {
    width: 15px;
    height: 15px;
    margin: 7px 4px;
    accent-color: var(--ln-primary);
    cursor: pointer;
    flex-shrink: 0;
}

    .ln-check:disabled {
        cursor: not-allowed;
    }

.ln-input {
    height: var(--ln-ctl-h);
    border: 1px solid var(--ln-line-strong);
    border-radius: var(--ln-radius-sm);
    padding: 0 10px;
    font: inherit;
    font-size: var(--ln-fs);
    color: var(--ln-ink);
    background: var(--ln-surface);
    outline: none;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ln-input:focus {
        border-color: var(--ln-primary);
        box-shadow: 0 0 0 3px var(--ln-focus);
    }

/* diálogo de duas colunas (contexto à esquerda, conteúdo à direita) */
.ln-split {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}

.ln-split__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

@media (max-width: 900px) {
    .ln-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ───────────── Explorador de ficheiros (caminho, grelha, zona de envio) ───────────── */
.ln-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    font-size: var(--ln-fs);
}

.ln-crumb {
    border: none;
    background: transparent;
    color: var(--ln-ink-2);
    font: inherit;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: var(--ln-radius-xs);
    cursor: pointer;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ln-crumb:hover {
        background: var(--ln-primary-050);
        color: var(--ln-primary);
    }

    .ln-crumb--actual {
        color: var(--ln-primary);
        font-weight: 700;
        cursor: default;
    }

        .ln-crumb--actual:hover {
            background: transparent;
        }

.ln-crumbs__sep {
    color: var(--ln-faint);
    font-size: var(--ln-fs-sm);
}

.ln-fileicon {
    width: 32px;
    height: 32px;
    border-radius: var(--ln-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ln-neutral-bg);
}

.ln-filename {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .ln-filename button {
        border: none;
        background: transparent;
        padding: 0;
        font: inherit;
        color: var(--ln-ink);
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .ln-filename button:hover {
            color: var(--ln-primary);
            text-decoration: underline;
        }

.ln-table tr.ln-row--sel td {
    background: var(--ln-primary-050);
}

.ln-th-sort {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    padding: 0;
}

.ln-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: var(--ln-pad);
}

/* Cartão de um item: a área da pasta/ficheiro ocupa o topo de ponta a ponta e acompanha os cantos do cartão
   (raio de dentro = raio do cartão menos a borda), em vez de uma caixa solta com cantos de outro raio. */
.ln-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    background: var(--ln-surface);
    cursor: pointer;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .ln-tile:hover {
        border-color: var(--ln-primary-200);
        box-shadow: var(--ln-shadow-hover);
    }

    .ln-tile:focus-within {
        border-color: var(--ln-primary-200);
    }

.ln-tile--sel {
    border-color: var(--ln-primary);
    background: var(--ln-primary-050);
    box-shadow: 0 0 0 1px var(--ln-primary);
}

.ln-tile__thumb {
    height: 96px;
    border-radius: calc(var(--ln-radius) - 1px) calc(var(--ln-radius) - 1px) 0 0;
    border-bottom: 1px solid var(--ln-line-soft);
    background: var(--ln-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .ln-tile__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ln-tile__name {
    padding: 9px 11px 0;
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    color: var(--ln-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-tile__meta {
    padding: 2px 11px 10px;
    font-size: 10.5px;
    color: var(--ln-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-tile__check {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 1;
    opacity: 0;
    transition: opacity .12s ease;
}

.ln-tile:hover .ln-tile__check,
.ln-tile--sel .ln-tile__check {
    opacity: 1;
}

.ln-tile__menu {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 1;
}

.ln-selbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px var(--ln-pad);
    background: var(--ln-primary-050);
    border-bottom: 1px solid var(--ln-primary-100);
    font-size: var(--ln-fs-sm);
    color: var(--ln-primary);
    font-weight: 600;
}

.ln-dropzone {
    position: relative;
    border: 1.5px dashed var(--ln-primary-200);
    border-radius: var(--ln-radius);
    background: var(--ln-surface-2);
    padding: 22px 16px;
    text-align: center;
    color: var(--ln-ink-2);
    transition: border-color .15s ease, background .15s ease;
}

.ln-dropzone--activa {
    border-color: var(--ln-primary);
    background: var(--ln-primary-050);
}

/* conteúdo à esquerda e detalhes à direita (pré-visualização) */
.ln-split--preview {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

@media (max-width: 900px) {
    .ln-split--preview {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ln-preview {
    min-height: 320px;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ln-surface-2);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius-sm);
    overflow: auto;
}

    .ln-preview img,
    .ln-preview video {
        max-width: 100%;
        max-height: 70vh;
    }

    .ln-preview iframe {
        width: 100%;
        height: 70vh;
        border: none;
    }

    .ln-preview pre {
        align-self: stretch;
        width: 100%;
        margin: 0;
        padding: 14px;
        font-size: 11.5px;
        white-space: pre-wrap;
        word-break: break-word;
    }

@media (max-width: 760px) {
    .ln-tiles {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        padding: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENTOS — o modal que mostra os PDF (QuestPDF): folhas desenhadas em canvas,
   barra com zoom, descarregar, imprimir e enviar por email (DocumentoDialog)
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-dialog.ln-doc-dialog {
    height: min(92vh, 1180px);
    max-height: 92vh;
    overflow: hidden;
    border-radius: var(--ln-radius-lg);
}

.mud-dialog.ln-doc-dialog .mud-dialog-content.ln-doc-dialog__conteudo {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ln-doc {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--ln-surface);
}

.ln-doc__barra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid var(--ln-line);
    background: var(--ln-surface);
    flex-wrap: wrap;
}

.ln-doc__id {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1 1 260px;
}

.ln-doc__icone {
    width: 34px;
    height: 34px;
    border-radius: var(--ln-radius);
    display: grid;
    place-items: center;
    background: var(--ln-bad-bg);
    color: var(--ln-bad);
    flex: 0 0 auto;
}

    .ln-doc__icone .ln-icon {
        width: 19px;
        height: 19px;
    }

.ln-doc__titulo {
    font-size: var(--ln-fs-lg);
    font-weight: 600;
    color: var(--ln-ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-doc__meta {
    font-size: var(--ln-fs-xs);
    color: var(--ln-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-doc__zoom {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius-sm);
    background: var(--ln-surface-2);
}

.ln-doc__zoom-valor {
    min-width: 46px;
    text-align: center;
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    color: var(--ln-ink-2);
    font-variant-numeric: tabular-nums;
}

.ln-doc__accoes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ln-doc__sep {
    width: 1px;
    height: 22px;
    background: var(--ln-line);
}

.ln-doc__fechar.mud-icon-button {
    margin-left: 2px;
}

.ln-doc__corpo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.ln-doc__mesa {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

/* A mesa onde ficam as folhas: um cinzento um pouco mais escuro que o fundo, para o papel se destacar. */
.ln-doc__folhas {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: color-mix(in srgb, var(--ln-bg) 72%, var(--ln-line-strong));
    outline: none;
    scroll-behavior: auto;
}

.ln-doc-folha {
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16), 0 0 0 1px rgba(16, 24, 40, .05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

    .ln-doc-folha:empty::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(16, 24, 40, .035), transparent);
        background-size: 220% 100%;
        animation: ln-doc-brilho 1.2s linear infinite;
    }

    .ln-doc-folha canvas {
        display: block;
    }

@keyframes ln-doc-brilho {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

.ln-doc__estado {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    color: var(--ln-muted);
    font-size: var(--ln-fs-sm);
    background: color-mix(in srgb, var(--ln-bg) 72%, var(--ln-line-strong));
    z-index: 1;
}

.ln-doc__estado-t {
    font-size: var(--ln-fs);
    font-weight: 600;
    color: var(--ln-ink);
}

.ln-doc__pagina {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(16, 24, 40, .72);
    color: #fff;
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 2;
}

/* Painel lateral de envio por email */
.ln-doc__envio {
    flex: 0 0 340px;
    max-width: 100%;
    border-left: 1px solid var(--ln-line);
    background: var(--ln-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ln-doc__envio-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 12px 16px;
    border-bottom: 1px solid var(--ln-line-soft);
}

.ln-doc__envio-t {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--ln-ink);
}

.ln-doc__envio-corpo {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* Os campos do MudBlazor crescem (flex: 1) dentro de colunas flexíveis: aqui ficam do tamanho que têm. */
    .ln-doc__envio-corpo > * {
        flex: 0 0 auto;
    }

.ln-doc__anexo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius-sm);
    background: var(--ln-surface-2);
    font-size: var(--ln-fs-sm);
    min-width: 0;
}

    .ln-doc__anexo .ln-icon {
        color: var(--ln-bad);
        flex: 0 0 auto;
    }

    .ln-doc__anexo span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ln-doc__envio-pe {
    padding: 12px 16px;
    border-top: 1px solid var(--ln-line-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ln-doc__resultado {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ln-fs-sm);
}

@media (max-width: 900px) {
    .mud-dialog.ln-doc-dialog {
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        border-radius: 0;
    }

    .ln-doc__folhas {
        padding: 12px;
    }

    .ln-doc__envio {
        position: absolute;
        inset: 0 0 0 auto;
        width: min(360px, 100%);
        box-shadow: var(--ln-shadow-2);
        z-index: 3;
    }

    .ln-doc__rotulo {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUDBLAZOR — versão compacta e sóbria, em toda a aplicação (.ln-app)
   O tema do MudBlazor já recebe as cores, a letra e os cantos; aqui só se acertam
   tamanhos e se tiram sombras e maiúsculas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Campos (MudTextField, MudSelect, MudDatePicker, MudAutocomplete…): todos com a altura dos densos */
.ln-app .mud-input.mud-input-outlined .mud-input-root-outlined {
    padding-top: 8.5px;
    padding-bottom: 8.5px;
}

.ln-dens-normal .mud-input.mud-input-outlined .mud-input-root-outlined {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ln-dens-confortavel .mud-input.mud-input-outlined .mud-input-root-outlined {
    padding-top: 12px;
    padding-bottom: 12px;
}

.ln-app .mud-input-label-outlined:not(.mud-input-label-margin-dense) {
    transform: translate(14px, 6px) scale(1);
}

.ln-app .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 6px) scale(1);
}

.ln-dens-normal .mud-input-label-outlined:not(.mud-input-label-margin-dense),
.ln-dens-normal .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 7.5px) scale(1);
}

.ln-dens-confortavel .mud-input-label-outlined:not(.mud-input-label-margin-dense),
.ln-dens-confortavel .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 9.5px) scale(1);
}

.ln-app .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.ln-app .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(.86);
}

/* O rótulo vinha a 16 px (1rem) quando o valor e o resto do texto estão a 13: fica do tamanho do texto. */
.ln-app .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--ln-fs);
}

.ln-app .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ln-line-strong);
    border-radius: var(--ln-radius-sm);
}

.ln-app .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--ln-faint);
}

.ln-app .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 1.5px;
}

.ln-app .mud-input-label {
    color: var(--ln-muted);
    font-weight: 500;
}

.ln-app .mud-input-helper-text {
    font-size: var(--ln-fs-xs);
}

/* Rótulos de interruptores, caixas de selecção e opções: do tamanho do texto (vinham a 16 px). */
.ln-app .mud-switch-label-medium,
.ln-app .mud-switch-label-large {
    font-size: var(--ln-fs) !important;
}

.ln-app .mud-switch-label-small {
    font-size: var(--ln-fs-sm) !important;
}

.ln-app .mud-checkbox > .mud-typography,
.ln-app .mud-radio > .mud-typography,
.ln-app label.mud-checkbox .mud-typography-body1,
.ln-app label.mud-radio .mud-typography-body1 {
    font-size: var(--ln-fs);
}

.ln-app .mud-input-adornment .mud-icon-root,
.ln-app .mud-input-adornment .mud-icon-button .mud-icon-root {
    font-size: 18px;
}

/* Botões: planos, sem sombras nem maiúsculas */
.ln-app .mud-button-root.mud-button {
    border-radius: var(--ln-radius-sm);
    box-shadow: none;
    letter-spacing: 0;
}

    .ln-app .mud-button-root.mud-button:hover,
    .ln-app .mud-button-root.mud-button:active {
        box-shadow: none;
    }

.ln-app .mud-button-filled {
    font-weight: 600;
}

.ln-app .mud-button-outlined {
    border-color: var(--ln-line-strong);
}

.ln-app .mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--ln-primary-200);
}

.ln-app .mud-button-root .mud-button-icon-start .mud-icon-root,
.ln-app .mud-button-root .mud-button-icon-end .mud-icon-root {
    font-size: 17px;
}

.ln-app .mud-icon-button {
    border-radius: var(--ln-radius-sm);
}

.ln-app .mud-fab {
    box-shadow: var(--ln-shadow-hover);
}

/* Tabelas (MudTable, MudDataGrid, MudSimpleTable) */
.ln-app .mud-table {
    border-radius: var(--ln-radius);
}

.ln-app .mud-table-root .mud-table-cell,
.ln-app .mud-table .mud-table-cell {
    padding: var(--ln-row-y) var(--ln-cell-x);
    font-size: var(--ln-fs-sm);
    border-bottom-color: var(--ln-line-soft);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.ln-app .mud-table-root .mud-table-head .mud-table-cell,
.ln-app .mud-table .mud-table-head .mud-table-cell {
    font-size: var(--ln-fs-xs);
    font-weight: 600;
    color: var(--ln-muted);
    background: var(--ln-surface-2);
    border-bottom: 1px solid var(--ln-line);
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: nowrap;
}

.ln-app .mud-table-root .mud-table-foot .mud-table-cell {
    font-weight: 600;
    background: var(--ln-surface-2);
}

/* MudDataGrid: nenhuma tabela usa filtros, colunas escondíveis ou agrupamento, por isso o menu "Opções da
   coluna" e o índice de ordenação só ocupavam largura em cada cabeçalho (~40 px, mesmo invisíveis) e
   alargavam todas as tabelas. Saem; o ícone de ordenar só aparece com a coluna ordenada (ordena-se
   clicando no título da coluna, como antes). */
.ln-app .mud-data-grid .column-header .column-options .mud-menu,
.ln-app .mud-data-grid .column-header .column-options .mud-sort-index,
.ln-app .mud-data-grid .column-header .column-options .sort-direction-icon:not(.mud-direction-asc):not(.mud-direction-desc) {
    display: none;
}

.ln-app .mud-data-grid .column-header .column-options .sort-direction-icon {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 2px;
}

    .ln-app .mud-data-grid .column-header .column-options .sort-direction-icon .mud-icon-root {
        font-size: 16px;
    }

/* Colunas de valores (HeaderClass/CellClass="ln-num"): à direita, com algarismos de largura fixa */
.ln-app .mud-table .mud-table-cell.ln-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ln-app .mud-data-grid th.ln-num .column-header {
    justify-content: flex-end;
}

    .ln-app .mud-data-grid th.ln-num .column-header .sortable-column-header {
        width: auto;
    }

.ln-tabelas-listradas .mud-table-root .mud-table-body .mud-table-row:nth-child(even) {
    background: var(--ln-surface-2);
}

.ln-app .mud-table-root .mud-table-body .mud-table-row:hover {
    background: var(--ln-primary-050);
}

.ln-app .mud-table-pagination-toolbar,
.ln-app .mud-table-pagination .mud-toolbar {
    font-size: var(--ln-fs-xs);
    min-height: 44px;
}

/* "Linhas por página": o número cabia mal ("1…") com a letra mais larga */
.ln-app .mud-table-pagination-select {
    min-width: 72px;
}

    .ln-app .mud-table-pagination-select .mud-input .mud-input-root {
        font-size: var(--ln-fs-sm);
        text-overflow: clip;
    }

.ln-app .mud-simple-table table * tr > td,
.ln-app .mud-simple-table table * tr th {
    padding: var(--ln-row-y) var(--ln-cell-x);
    font-size: var(--ln-fs-sm);
}

/* Papéis e cartões do MudBlazor */
.ln-app .mud-paper {
    border-radius: var(--ln-radius);
}

.ln-app .mud-paper-outlined {
    border-color: var(--ln-line);
}

.ln-app .mud-card-header {
    padding: 12px var(--ln-pad);
}

.ln-app .mud-card-content {
    padding: var(--ln-pad);
}

.ln-app .mud-card-actions {
    padding: 8px var(--ln-pad);
}

/* Botões de gravar em largura total nos formulários antigos (muitos em verde e com 42 px): altura dos controlos e
   a cor da marca — o verde fica para os estados. O texto, o ícone e a largura ficam. */
.ln-app .mud-dialog .mud-button-filled.mud-width-full:not(.ln-btn),
.ln-app .ln-secao .mud-button-filled.mud-width-full:not(.ln-btn) {
    height: var(--ln-ctl-h) !important;
    min-height: var(--ln-ctl-h);
    font-size: var(--ln-fs-sm);
}

.ln-app .mud-dialog .mud-button-filled-success.mud-width-full:not(.ln-btn),
.ln-app .ln-secao .mud-button-filled-success.mud-width-full:not(.ln-btn) {
    background-color: var(--ln-primary);
    color: var(--ln-on-primary);
}

    .ln-app .mud-dialog .mud-button-filled-success.mud-width-full:not(.ln-btn):hover,
    .ln-app .ln-secao .mud-button-filled-success.mud-width-full:not(.ln-btn):hover {
        background-color: var(--ln-primary-strong);
    }

/* Diálogos */
.ln-app .mud-dialog {
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-2);
}

.ln-app .mud-dialog .mud-dialog-title {
    padding: 14px 20px 10px;
}

    .ln-app .mud-dialog .mud-dialog-title .mud-typography {
        font-size: var(--ln-fs-h);
        font-weight: 600;
        letter-spacing: -.01em;
    }

.ln-app .mud-dialog .mud-dialog-content {
    padding: 6px 20px 10px;
}

.ln-app .mud-dialog .mud-dialog-actions {
    padding: 10px 20px 14px;
    gap: 8px;
}

.ln-app .mud-overlay-dialog .mud-overlay-scrim,
.ln-app .mud-overlay .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(15, 23, 42, .42);
}

/* Separadores (onde ainda existam) */
.ln-app .mud-tabs-tabbar {
    background: transparent;
}

.ln-app .mud-tab {
    text-transform: none;
    font-size: var(--ln-fs-sm);
    font-weight: 600;
    min-height: 40px;
    letter-spacing: 0;
}

/* Chips, emblemas, tooltips, alertas, listas, menus */
.ln-app .mud-chip {
    font-weight: 600;
}

.ln-app .mud-chip.mud-chip-size-medium {
    height: 26px;
    font-size: var(--ln-fs-xs);
}

.ln-app .mud-chip.mud-chip-size-small {
    height: 22px;
    font-size: 10.5px;
}

/* Etiquetas (MudChip) cheias em tom suave — fundo claro e texto da cor —, como as pílulas do kit (LnPill):
   os estados nas tabelas antigas deixam de ser blocos de cor forte. */
.ln-app .mud-chip-filled.mud-chip-color-primary { background-color: var(--ln-primary-050); color: var(--ln-primary); }
.ln-app .mud-chip-filled.mud-chip-color-success { background-color: var(--ln-good-bg); color: var(--ln-good); }
.ln-app .mud-chip-filled.mud-chip-color-warning { background-color: var(--ln-warn-bg); color: var(--ln-warn); }
.ln-app .mud-chip-filled.mud-chip-color-error { background-color: var(--ln-bad-bg); color: var(--ln-bad); }
.ln-app .mud-chip-filled.mud-chip-color-info { background-color: var(--ln-info-bg); color: var(--ln-info); }
.ln-app .mud-chip-filled.mud-chip-color-dark,
.ln-app .mud-chip-filled.mud-chip-color-default,
.ln-app .mud-chip-filled.mud-chip-color-secondary,
.ln-app .mud-chip-filled.mud-chip-color-tertiary { background-color: var(--ln-neutral-bg); color: var(--ln-neutral); }

/* Botões cheios nas linhas das tabelas (acções de cada linha): discretos, em tom suave, para a tabela não gritar.
   Os botões do kit (ln-btn) já são assim e ficam de fora. */
.ln-app .mud-table-cell .mud-button-filled:not(.ln-btn) {
    box-shadow: none;
    min-height: 26px;
    padding: 2px 10px;
    font-size: var(--ln-fs-xs);
    font-weight: 600;
}

.ln-app .mud-table-cell .mud-button-filled-default:not(.ln-btn),
.ln-app .mud-table-cell .mud-button-filled-dark:not(.ln-btn),
.ln-app .mud-table-cell .mud-button-filled-secondary:not(.ln-btn),
.ln-app .mud-table-cell .mud-button-filled-tertiary:not(.ln-btn) { background-color: var(--ln-neutral-bg); color: var(--ln-ink-2); }
.ln-app .mud-table-cell .mud-button-filled-primary:not(.ln-btn) { background-color: var(--ln-primary-050); color: var(--ln-primary); }
.ln-app .mud-table-cell .mud-button-filled-success:not(.ln-btn) { background-color: var(--ln-good-bg); color: var(--ln-good); }
.ln-app .mud-table-cell .mud-button-filled-warning:not(.ln-btn) { background-color: var(--ln-warn-bg); color: var(--ln-warn); }
.ln-app .mud-table-cell .mud-button-filled-error:not(.ln-btn) { background-color: var(--ln-bad-bg); color: var(--ln-bad); }
.ln-app .mud-table-cell .mud-button-filled-info:not(.ln-btn) { background-color: var(--ln-info-bg); color: var(--ln-info); }

    .ln-app .mud-table-cell .mud-button-filled:not(.ln-btn):hover {
        filter: brightness(.96);
    }

.ln-app .mud-tooltip {
    font-size: var(--ln-fs-xs);
    font-weight: 500;
    border-radius: var(--ln-radius-xs);
    padding: 5px 9px;
}

.ln-app .mud-alert {
    border-radius: var(--ln-radius-sm);
    font-size: var(--ln-fs-sm);
    padding: 8px 12px;
}

.ln-app .mud-alert .mud-alert-icon .mud-icon-root {
    font-size: 18px;
}

.ln-app .mud-popover-open {
    border-radius: var(--ln-radius-sm);
}

.ln-app .mud-popover .mud-list-item,
.ln-app .mud-popover .mud-menu-item {
    font-size: var(--ln-fs-sm);
}

.ln-app .mud-popover .mud-list-item,
.ln-app .mud-popover li {
    margin: 0;
}

.ln-app .mud-popover .mud-divider {
    margin: 4px 0;
    border-color: var(--ln-line);
    opacity: 1;
}

.ln-app .mud-list-item-text .mud-typography-body1 {
    font-size: var(--ln-fs-sm);
}

.ln-app .mud-snackbar {
    border-radius: var(--ln-radius-sm);
    font-size: var(--ln-fs-sm);
    box-shadow: var(--ln-shadow-2);
}

.ln-app .mud-expand-panel {
    border-radius: var(--ln-radius-sm);
}

.ln-app .mud-expand-panel .mud-expand-panel-header {
    padding: 10px var(--ln-pad);
    font-weight: 600;
}

.ln-app .mud-breadcrumbs {
    font-size: var(--ln-fs-sm);
    padding: 0;
}

.ln-app .mud-progress-linear {
    border-radius: 999px;
}

/* ───────────── Utilitários ───────────── */
.ln-muted { color: var(--ln-muted); }
.ln-faint { color: var(--ln-faint); }
.ln-num { font-variant-numeric: tabular-nums; }
.ln-mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: var(--ln-ink-2); }
.ln-strong { font-weight: 700; color: var(--ln-ink); }
.ln-nowrap { white-space: nowrap; }
.ln-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-gap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ln-spacer { flex: 1 1 auto; }

/* ───────────── Responsivo ───────────── */
@media (max-width: 1100px) {
    .ln-grid-2,
    .ln-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ln-masonry {
        column-count: 1;
    }
}

@media (max-width: 760px) {
    .ln-grid-2--even,
    .ln-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .ln-head {
        align-items: stretch;
    }

    .ln-kv {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ln-kv__v {
        margin-bottom: 7px;
    }
}

/* ───────────── Listas dentro dos detalhes (anexos, contas, parentes, garantias, contratos…) ─────────────
   <MudDataGrid Class="ln-subgrelha"> com uma barra (ToolBarContent) de ícone, título e acções numa
   <MudStack Class="ln-subgrelha__barra">. Era o mesmo Style escrito em cada lista; como classe, o telemóvel
   pode ter uma barra mais baixa que parte em duas linhas (o título ficava espremido ao lado dos botões). */
.mud-table.ln-subgrelha {
    margin: 15px 20px 25px;
    border-bottom: 1px solid var(--ln-accent);
}

.ln-subgrelha .ln-subgrelha__barra {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELEMÓVEL (até 600 px) — o que muda em todos os ecrãs num ecrã pequeno.
   Indicadores dois a dois, filtros arrumados em grelha, separadores que rolam de lado
   (em vez de partirem em duas linhas), tabelas empilhadas com rótulo e valor alinhados,
   paginação numa linha só, avisos em baixo (perto do polegar, sem taparem o título) e a
   ajuda «Saber mais» como painel em baixo, sempre dentro do ecrã.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 599.98px) {
    /* ── Indicadores: dois por linha; ícone e rótulo em cima, o valor por baixo ── */
    .ln-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

        /* número ímpar de indicadores: o último ocupa a linha toda */
        .ln-stats > .ln-stat:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

    .ln-stat {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icone rotulo"
            "valor valor"
            "nota nota";
        align-items: center;
        gap: 4px 8px;
        padding: 10px 12px;
        /* o valor encolhe com a largura do cartão (o corpo deixa de ser caixa: display: contents) */
        container-type: inline-size;
    }

    .ln-stat__body {
        display: contents;
    }

    .ln-stat__icon {
        grid-area: icone;
        width: 26px;
        height: 26px;
    }

        .ln-stat__icon .ln-icon {
            width: 15px;
            height: 15px;
        }

    .ln-stat__label {
        grid-area: rotulo;
        margin: 0;
        line-height: 1.25;
    }

    .ln-stat__value {
        grid-area: valor;
        font-size: clamp(14px, 10.5cqi, 20px);
    }

    .ln-stat__hint {
        grid-area: nota;
        margin: 0;
        line-height: 1.3;
    }

    /* ── Barras de filtros: campos a toda a largura, dois por linha quando cabem ──
       O Style="max-width:…" dos campos (pensado para o computador) deixa de contar. O MudBlazor põe esse
       Style numa caixa de dentro (.mud-input no MudDatePicker e no MudTextField, .mud-input-control dentro
       do invólucro .mud-select no MudSelect), não na raiz que é filha da barra. */
    .ln-toolbar {
        padding: 10px 12px;
    }

        .ln-toolbar > .mud-input-control,
        .ln-toolbar > .mud-select,
        .ln-toolbar > .mud-picker,
        .ln-toolbar > .mud-input-control.ln-toolbar__grow {
            flex: 1 1 140px;
            min-width: 0 !important;
            max-width: none !important;
        }

            .ln-toolbar > :is(.mud-input-control, .mud-select, .mud-picker) :is(.mud-input-control, .mud-input) {
                min-width: 0 !important;
                max-width: none !important;
            }

            /* caixas de texto (pesquisa) e interruptores: a linha toda (a mesma especificidade da regra de cima,
               que também apanha as caixas com Class="ln-toolbar__grow") */
            .ln-toolbar > .mud-input-control.mud-input-input-control,
            .ln-toolbar > .mud-input-control.mud-input-control-boolean-input,
            .ln-toolbar > .mud-select.mud-autocomplete {
                flex-basis: 100%;
            }

    /* campos no cabeçalho da página (mês, ano, período…): lado a lado em vez de um por linha */
    .ln-head__actions {
        width: 100%;
    }

        .ln-head__actions > :is(.mud-select, .mud-input-control, .mud-picker) {
            flex: 1 1 120px;
            min-width: 0;
        }

    .ln-filters {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

        /* caixas de texto (pesquisa) e a fila dos botões (Limpar, Pesquisar) a toda a largura: o rótulo comprido
           já não sai da moldura e o «Pesquisar» já não fica cortado numa célula de meia largura */
        .ln-filters > .mud-input-input-control,
        .ln-filters > div:has(> .mud-button-root) {
            grid-column: 1 / -1;
        }

    .ln-filters .mud-button-root,
    .ln-toolbar > .mud-button-root {
        flex-shrink: 0;
    }

    /* listas com uma linha de nota cortada com reticências: no telemóvel a nota parte em linhas */
    .ln-list__sub {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* ── Separadores (LnSecoes em cima do conteúdo): uma linha que rola de lado ── */
    .ln-secoes__lista,
    .ln-secoes--topo .ln-secoes__lista {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .ln-secoes__lista::-webkit-scrollbar {
            display: none;
        }

    .ln-secoes__item {
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* ── Tabelas empilhadas (MudDataGrid / MudTable no telemóvel): rótulo à esquerda, valor à direita,
       o que está numa célula fica junto (antes, duas linhas de texto ficavam lado a lado e apertadas) ── */
    .mud-xs-table .mud-table-body .mud-table-row {
        display: block;
        padding: 6px 0;
        border-bottom: 1px solid var(--ln-line);
    }

        .mud-xs-table .mud-table-body .mud-table-row:last-child {
            border-bottom: 0;
        }

        .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
            border-bottom: 0;
        }

    /* O rótulo flutua à esquerda e o conteúdo corre à direita dele, alinhado à direita: as linhas de texto
       (blocos) ficam umas por baixo das outras e os botões, ícones e etiquetas (em linha) lado a lado. */
    .mud-xs-table .mud-table-body .mud-table-cell {
        display: flow-root;
        padding: 5px 14px;
        text-align: right !important;
        min-height: 0;
        height: auto;
        /* larguras de coluna (Nº com 48 px, acções com 76 px…) são para a tabela do computador */
        width: auto !important;
        max-width: none !important;
    }

        .mud-xs-table .mud-table-body .mud-table-cell::before {
            float: left;
            box-sizing: border-box;
            width: 34%;
            min-width: 84px;
            max-width: 168px;
            padding: 0 12px 0 0;
            font-size: var(--ln-fs-xs);
            font-weight: 500;
            line-height: 1.7;
            color: var(--ln-muted);
            text-align: left;
        }

        /* barras: caixa própria ao lado do rótulo (sem isso o trilho passava por baixo dele) */
        .mud-xs-table .mud-table-body .mud-table-cell > :is(.ln-bar, .mud-progress-linear) {
            overflow: hidden;
        }

        /* texto cortado com reticências no computador: no telemóvel não há rato para ver o resto */
        .mud-xs-table .mud-table-body .mud-table-cell .ln-truncate {
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* grupos de acções em flex dentro da célula: também à direita */
        .mud-xs-table .mud-table-body .mud-table-cell > :is(.d-flex, .ln-gap) {
            justify-content: flex-end;
        }

        /* coluna sem título (acções, selecção): sem rótulo, numa linha encostada à direita */
        .mud-xs-table .mud-table-body .mud-table-cell:not([data-label]),
        .mud-xs-table .mud-table-body .mud-table-cell[data-label=""] {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
        }

            .mud-xs-table .mud-table-body .mud-table-cell:not([data-label])::before,
            .mud-xs-table .mud-table-body .mud-table-cell[data-label=""]::before {
                display: none;
            }

            .mud-xs-table .mud-table-body .mud-table-cell:not([data-label]) > .mud-input-control,
            .mud-xs-table .mud-table-body .mud-table-cell[data-label=""] > .mud-input-control {
                width: auto;
                flex: 0 0 auto;
            }

    /* ── Listas dentro dos detalhes: sem margens laterais, barra baixa e em duas linhas se for preciso ── */
    .mud-table.ln-subgrelha {
        margin: 8px 0 16px;
    }

    .ln-subgrelha .mud-table-toolbar {
        height: auto;
        min-height: 0;
        padding: 0 12px;
    }

    .ln-subgrelha .ln-subgrelha__barra {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 0;
    }

        .ln-subgrelha .ln-subgrelha__barra > .mud-stack:first-child {
            flex: 1 1 200px;
            min-width: 0;
        }

        .ln-subgrelha .ln-subgrelha__barra > .mud-stack:last-child {
            margin-left: auto;
        }

        .ln-subgrelha .ln-subgrelha__barra .mud-icon-root.mud-icon-size-large {
            font-size: 1.75rem;
        }

    /* ── Tabelas simples (<table class="ln-table ln-table--empilhar">, com data-label em cada <td>):
       uma linha passa a cartão, como nas grelhas do MudBlazor, em vez de uma tabela larga que rola de lado ── */
    .ln-table.ln-table--empilhar,
    .ln-table--empilhar > tbody,
    .ln-table--empilhar > tbody > tr {
        display: block;
        width: 100%;
    }

        .ln-table--empilhar > thead {
            display: none;
        }

        .ln-table--empilhar > tbody > tr {
            padding: 6px 0;
            border-bottom: 1px solid var(--ln-line);
        }

            .ln-table--empilhar > tbody > tr:last-child {
                border-bottom: 0;
            }

            .ln-table.ln-table--empilhar > tbody > tr > td {
                display: flow-root;
                padding: 5px 14px;
                border: 0;
                text-align: right;
                white-space: normal;
            }

                .ln-table--empilhar > tbody > tr > td::before {
                    content: attr(data-label);
                    float: left;
                    box-sizing: border-box;
                    width: 34%;
                    min-width: 84px;
                    max-width: 168px;
                    padding-right: 12px;
                    font-size: var(--ln-fs-xs);
                    font-weight: 500;
                    line-height: 1.7;
                    color: var(--ln-muted);
                    text-align: left;
                }

                .ln-table--empilhar > tbody > tr > td:not([data-label])::before,
                .ln-table--empilhar > tbody > tr > td[data-label=""]::before {
                    display: none;
                }

    /* ── Paginação: «1–10 de 37» e as setas numa só linha. A caixa tinha altura fixa (52 px) e a segunda
       linha que o MudBlazor cria nos telemóveis ficava cortada pelo cartão — não se via a página nem as setas.
       O número de linhas por página fica para o computador. ── */
    .ln-app .mud-table-pagination .mud-table-pagination-toolbar {
        height: auto;
        min-height: 44px;
        flex-wrap: nowrap;
        justify-content: flex-end;
        padding: 2px 4px 2px 12px;
    }

        .ln-app .mud-table-pagination .mud-table-pagination-toolbar > .mud-table-pagination-caption:first-of-type,
        .ln-app .mud-table-pagination .mud-table-pagination-toolbar > .mud-select {
            display: none;
        }

        .ln-app .mud-table-pagination .mud-table-pagination-toolbar .mud-table-pagination-actions {
            margin: 0 !important;
        }

    /* ── Avisos (snackbars): em baixo, a toda a largura; com um diálogo aberto, por cima dos botões dele ── */
    #mud-snackbar-container {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        transform: none;
    }

        #mud-snackbar-container .mud-snackbar {
            min-width: 0;
            max-width: none;
            width: 100%;
            margin-top: 8px;
        }

    body:has(.mud-dialog-container) #mud-snackbar-container {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    /* ── «Saber mais»: o painel abria à esquerda do botão e saía do ecrã; passa a painel fixo em baixo, com o
       resto do ecrã escurecido. O fundo escuro pertence ao próprio botão (::after do <summary>): tocar fora do
       painel fecha-o, sem JavaScript. ── */
    .ln-saber[open] > .ln-saber__botao::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1340;
        background: rgba(16, 24, 40, .32);
        cursor: default;
    }

    .ln-saber__painel {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: 70vh;
        z-index: 1350;
        border-radius: var(--ln-radius-lg, var(--ln-radius));
        box-shadow: 0 -2px 6px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ln-app *,
    .ln-app *::before,
    .ln-app *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}