@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 90%; /* Reduz TODO o sistema para 90% */
    background-color: var(--mud-palette-background);
}

/* MudBlazor - Ajustar fontes */
.mud-typography {
    font-size: 0.9rem !important;
}

.mud-typography-h1 {
    font-size: 2.7rem !important; /* Era 3rem */
}

.mud-typography-h2 {
    font-size: 2.25rem !important; /* Era 2.5rem */
}

.mud-typography-h3 {
    font-size: 1.8rem !important; /* Era 2rem */
}

.mud-typography-h4 {
    font-size: 1.53rem !important; /* Era 1.7rem */
}

.mud-typography-h5 {
    font-size: 1.26rem !important; /* Era 1.4rem */
}

.mud-typography-h6 {
    font-size: 1.08rem !important; /* Era 1.2rem */
}

.mud-typography-body1 {
    font-size: 0.9rem !important; /* Era 1rem */
}

.mud-typography-body2 {
    font-size: 0.81rem !important; /* Era 0.9rem */
}

/* Ajustar tamanho dos inputs */
.mud-input-control {
    font-size: 0.9rem !important;
}

/* Ajustar tamanho dos botões */
.mud-button-root {
    font-size: 0.81rem !important; /* Era 0.9rem */
}

/* Ajustar tamanho das labels */
.mud-input-label {
    font-size: 0.81rem !important;
}

/* Ajustar tamanho das tabelas */
.mud-table {
    font-size: 0.81rem !important;
}

/* Ajustar padding dos navlinks para compensar a redução */
.mud-nav-link {
    padding: 8px 12px !important; /* Reduzido de 10px 16px */
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

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

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

.loading-progress,
.loading-progress-text {
    display: none;
}

/* ===== APP SPLASH (carregamento inicial e refresh) ===== */
.app-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0b1b3f 0%, #10306f 55%, #1f4ab0 100%);
    z-index: 9999;
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    color: #fff;
    animation: app-splash-fade-in 0.25s ease-out;
}

.app-splash-card {
    width: min(360px, 88vw);
    animation: app-splash-pop 0.45s ease-out both;
}

/* Marca: o mesmo quadrado azul com "ERP" do cartao de login */
.app-splash-marca {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.app-splash-logo {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.app-splash-titulo {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.15;
}

.app-splash-subtitulo {
    font-size: 13px;
    opacity: 0.72;
    letter-spacing: 0.2px;
    margin-top: 3px;
}

.app-splash-bar {
    position: relative;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Progresso REAL: o Blazor publica --blazor-load-percentage enquanto baixa os
   recursos, e a barra so cresce com ele. Antes era uma animacao infinita, que
   dava a mesma imagem tanto num carregamento de 1s quanto num travado. */
.app-splash-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: #93c5fd;
    border-radius: 3px;
    transition: width 0.2s ease-out;
}

.app-splash-status {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 0.3px;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

.app-splash-percent::after {
    /* O proprio Blazor formata o texto ("42%"); antes de comecar, mostra 0% */
    content: var(--blazor-load-percentage-text, "0%");
    font-weight: 600;
}

.app-splash-rodape {
    position: absolute;
    bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.4;
}

@keyframes app-splash-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-splash-pop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}




/* Campos cujo conteudo e sempre maiusculo (ex.: codigo da embalagem).
   O Style do MudTextField vai para o wrapper, entao a regra precisa alcancar o input. */
.campo-maiusculo input {
    text-transform: uppercase;
}


/* ===================================================================
   Pedidos: PedidoForm (tela de digitacao do pedido)
   Só tokens da paleta (var(--mud-palette-*)) para funcionar no dark mode.
   O raio global de .mud-paper e 8px !important (erp-theme.css) — nao lutar contra.
   =================================================================== */

/* Cabecalho da pagina, dentro do proprio form */
.pedido-cabecalho {
    border-left: 4px solid var(--mud-palette-primary);
}
.pedido-cabecalho--edicao {
    border-left-color: var(--mud-palette-info);
}

/* Secoes numeradas 1..5 */
.pedido-secao {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.pedido-secao--atencao {
    border-color: var(--mud-palette-warning);
}
.pedido-secao-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.pedido-secao-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
    font-size: 0.8rem;
    flex: 0 0 auto;
}
.pedido-secao-titulo .mud-typography {
    font-weight: 600;
}
.pedido-secao-espaco {
    flex: 1 1 auto;
}
/* o MudExpansionPanel da secao 5 (transporte e frete) usa o mesmo titulo dentro do TitleContent */
.pedido-secao-painel {
    border: 1px solid var(--mud-palette-lines-default);
}
.pedido-secao-painel .pedido-secao-titulo {
    margin-bottom: 0;
}

/* Bancada de digitacao do item */
.pedido-bancada {
    position: relative;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pedido-bancada--editando {
    border-left-color: var(--mud-palette-info);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-info) 45%, transparent) inset;
}
.pedido-bancada-progresso {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}
.pedido-linha-rotulo {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
}
.pedido-linha-rotulo .mud-typography {
    font-size: 0.72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}
.pedido-bancada-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Grid de itens */
.pedido-grid-itens .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pedido-grid-itens th {
    font-weight: 600 !important;
    white-space: nowrap;
}
.pedido-grid-itens tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}
.pedido-grid-itens tr.pedido-linha-editando td {
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
}
.pedido-vazio {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
}

/* Barra fixa de totais no rodape (sticky: assenta no lugar quando a pagina acaba) */
.pedido-barra-totais {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.10);
}
.pedido-barra-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.pedido-barra-caixas {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.pedido-total-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 108px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    text-align: right;
    line-height: 1.15;
}
.pedido-total-box .rotulo {
    font-size: 0.68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.pedido-total-box .valor {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pedido-total-box--negativo .valor {
    color: var(--mud-palette-error);
}
.pedido-total-box--principal {
    min-width: 170px;
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.pedido-total-box--principal .rotulo {
    color: var(--mud-palette-primary-text);
    opacity: .85;
}
.pedido-total-box--principal .valor {
    font-size: 1.25rem;
    font-weight: 700;
}
.pedido-barra-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

@media (max-width: 959px) {
    .pedido-total-box--secundario {
        display: none;
    }
}
@media (max-width: 599px) {
    .pedido-barra-acoes {
        flex: 1 1 100%;
        justify-content: stretch;
    }
    .pedido-barra-acoes .mud-button-root {
        flex: 1 1 auto;
    }
}


/* --- Grid de itens: cabecalho agrupado, colunas fiscais e rolagem horizontal --- */
.pedido-grid-itens table {
    white-space: nowrap;
}
.pedido-grid-itens .pedido-grid-grupos th {
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.pedido-grid-itens .pedido-grid-grupos th.grupo {
    border-left: 1px solid var(--mud-palette-lines-default);
}
.pedido-grid-itens .pedido-grid-grupos th.grupo-item {
    border-left: none;
    text-align: left;
}
.pedido-grid-itens td.fiscal,
.pedido-grid-itens th.fiscal {
    color: var(--mud-palette-text-secondary);
    min-width: 72px;
}
.pedido-grid-itens .fixa-esq {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}
.pedido-grid-itens thead .fixa-esq {
    z-index: 2;
}
.pedido-grid-itens tfoot .fixa-esq {
    background: var(--mud-palette-background-gray);
}

/* Cadastro da regra fiscal: painel do ICMS desonerado, sob o grid de tributos */
.regra-desoneracao {
    padding: 12px 14px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
}
.regra-desoneracao .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

/* Grade de tributos da regra: leitura por padrao; a linha aberta pelo lapis ganha a tinta
   "info", como a bancada do pedido em edicao */
.regra-tributo-edicao .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface));
}

/* Gas de referencia sob o item-cilindro (emprestimo/recolhimento) */
.pedido-item-conteudo {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* --- Secao 6: Totalizacao do Pedido --- */
.pedido-totalizacao {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pedido-total-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* Cresce para fechar a linha: sem sobra no fim de cada faixa. O flex-basis
       continua sendo o conteudo, entao o ponto de quebra da linha nao muda. */
    flex: 1 1 auto;
    align-items: stretch;
    align-content: flex-end;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}
.pedido-total-grupo .grupo-titulo {
    flex: 1 1 100%;
    font-size: 0.7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}
.pedido-total-box--mini {
    /* As caixas dividem por igual a largura do grupo — inclusive na ultima
       linha, que antes terminava com um buraco a direita. */
    flex: 1 1 96px;
    min-width: 96px;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
}
.pedido-total-box--mini .valor {
    font-size: 0.86rem;
}

/* ===================================================================
   Pedidos: Details (tela de consulta do pedido)
   Reaproveita .pedido-secao, .pedido-grid-itens e .pedido-totalizacao
   da tela de digitacao — o usuario ve o mesmo mapa nas duas telas.
   =================================================================== */

.pedido-detalhe-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
}
.pedido-detalhe-topo--faturado {
    border-left-color: var(--mud-palette-success);
}
.pedido-detalhe-topo--cancelado {
    border-left-color: var(--mud-palette-error);
}

.pedido-detalhe-identificacao {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Placa com o numero do pedido — ancora visual da tela */
.pedido-detalhe-numero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    line-height: 1.1;
}
.pedido-detalhe-numero .rotulo {
    font-size: 0.66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}
.pedido-detalhe-numero .valor {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pedido-detalhe-titulo {
    min-width: 0;
}
.pedido-detalhe-titulo .linha-principal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.pedido-detalhe-titulo .linha-secundaria {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}
.pedido-detalhe-titulo .linha-secundaria span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pedido-detalhe-titulo .linha-secundaria .mud-icon-root {
    font-size: 0.95rem;
}

.pedido-detalhe-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Faixa de resumo financeiro */
.pedido-detalhe-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.pedido-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.pedido-kpi .rotulo {
    font-size: 0.68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.pedido-kpi .valor {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pedido-kpi--negativo .valor {
    color: var(--mud-palette-error);
}
.pedido-kpi--principal {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.pedido-kpi--principal .rotulo {
    color: var(--mud-palette-primary-text);
    opacity: .85;
}
.pedido-kpi--principal .valor {
    font-size: 1.25rem;
}

/* Cartoes de dados: duas colunas no desktop, uma no mobile */
.pedido-detalhe-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    /* Cartoes lado a lado terminam na mesma altura (frames casados). */
    align-items: stretch;
}
/* Dentro do cartao, os campos ocupam a altura toda: o cartao mais curto de uma
   linha nao fica com um vazio no rodape. */
.pedido-detalhe-cards > .mud-paper {
    display: flex;
    flex-direction: column;
}
.pedido-detalhe-cards > .mud-paper > .mud-grid {
    flex: 1 1 auto;
    align-content: space-between;
}

@media (max-width: 1279px) {
    .pedido-detalhe-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 959px) {
    .pedido-detalhe-cards {
        grid-template-columns: 1fr;
    }
    .pedido-detalhe-topo {
        align-items: flex-start;
    }
}

@media (max-width: 599px) {
    .pedido-detalhe-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pedido-detalhe-acoes {
        width: 100%;
    }
}

/* Rotulos dos campos: o Color.Secondary do MudBlazor usa a cor do tema (chamativa
   demais para rotulo). Nos cartoes de detalhe eles viram legenda cinza, em caixa alta. */
.pedido-detalhe-cards .mud-typography-caption {
    color: var(--mud-palette-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 0.66rem !important;
    font-weight: 600;
}
.pedido-detalhe-cards .pedido-secao-titulo .mud-typography-caption {
    text-transform: none;
    letter-spacing: normal;
}
.pedido-secao-titulo .mud-typography-caption {
    color: var(--mud-palette-text-secondary) !important;
}

/* ===== Fiscal: Classificacao Tributaria (IBS/CBS) ===== */

/* As descricoes do governo sao paragrafos de lei: corta em duas linhas e o texto
   inteiro fica no tooltip, senao uma linha empurra a grid inteira. */
.classtrib-descricao {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    max-height: 2.7em;
    cursor: help;
    /* E o max-width que segura a coluna: sozinho, o clamp limitava so a altura e a
       celula continuava esticando com o paragrafo inteiro da lei. */
    max-width: 240px;
}

/* Cabecalho do grupo do CST: faixa discreta que separa os blocos */
.classtrib-grupo {
    background-color: var(--mud-palette-background-grey);
}

/* ==========================================================================
   Contas a Receber: faixa de totais
   Mesma linguagem visual dos KPIs do detalhe do pedido.
   ========================================================================== */
.titulos-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.titulos-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.titulos-kpi-rotulo {
    font-size: 0.68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.titulos-kpi-valor {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.titulos-kpi-alerta .titulos-kpi-valor {
    color: var(--mud-palette-error);
}

@media (max-width: 959px) {
    .titulos-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .titulos-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Cancelamento de pedido: resumo de conferencia dentro do dialogo
   Numero do pedido sozinho nao evita cancelar o pedido errado.
   ========================================================================== */
.cancelar-pedido-resumo {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--mud-palette-background-grey);
}
.cancelar-pedido-resumo .linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.cancelar-pedido-resumo .rotulo {
    font-size: 0.72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.cancelar-pedido-resumo .valor {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}
.cancelar-pedido-resumo .linha-total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.cancelar-pedido-resumo .linha-total .valor {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Pedidos: escolha do movimento (tela de novo pedido)
   Só tokens da paleta — o .module-card da Home usa branco fixo e quebra no dark.
   ========================================================================== */
.movimento-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.movimento-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.movimento-card:hover {
    transform: translateY(-3px);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}
.movimento-card:active {
    transform: translateY(-1px);
}
.movimento-card-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.movimento-card-texto .titulo {
    font-size: 1rem;
    font-weight: 600;
}
.movimento-card-texto .descricao {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.25;
}

@media (max-width: 959px) {
    .movimento-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .movimento-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Master Admin: portal do dono do SaaS
   Só tokens da paleta — as classes .sag-* vivem no <style> do MainLayout e não
   existem sob o MasterAdminLayout.
   ========================================================================== */
.masteradmin-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.masteradmin-appbar {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}
.masteradmin-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-left: 4px;
}
.masteradmin-brand .nome {
    font-size: 1.05rem;
    font-weight: 700;
}
.masteradmin-brand .acento {
    opacity: .8;
}
.masteradmin-brand .tag {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

/* O portal do dono se distingue do ERP pela tinta de alerta na borda */
.masteradmin-cabecalho {
    border-left: 4px solid var(--mud-palette-error);
}

.masteradmin-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.masteradmin-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.masteradmin-card:hover {
    transform: translateY(-3px);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}
.masteradmin-card:active {
    transform: translateY(-1px);
}
.masteradmin-card-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.masteradmin-card-texto .titulo {
    font-size: 1rem;
    font-weight: 600;
}
.masteradmin-card-texto .descricao {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.25;
}

@media (max-width: 767px) {
    .masteradmin-cards {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Cadastros: ficha (lista / visualizar / editar) — primeira aplicacao: Clientes
   Mesmo idioma da consulta do pedido: placa do codigo, rotulos cinza em caixa
   alta, cartoes de mesma altura. So tokens var(--mud-palette-*) (dark mode).

   Regra desta familia de telas: o azul do tema so ANCORA (placa do codigo e a
   acao principal). Rotulo e texto de apoio sao cinza — nunca Color.Secondary,
   que no tema e azul-celeste e era o que deixava a tela "azul com branco".
   =================================================================== */

/* ---------- Cabecalho da ficha ---------- */
.ficha-topo {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}
.ficha-topo--edicao {
    border-left-color: var(--mud-palette-info);
}
.ficha-topo--inativo {
    border-left-color: var(--mud-palette-text-disabled);
}

.ficha-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 20px;
}

/* Placa do codigo — a mesma ancora do numero do pedido */
.ficha-codigo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    line-height: 1.1;
    flex: 0 0 auto;
}
.ficha-codigo .rotulo {
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}
.ficha-codigo .valor {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ficha-topo--inativo .ficha-codigo {
    background: var(--mud-palette-text-disabled);
}

.ficha-identidade {
    flex: 1 1 320px;
    min-width: 0;
}
.ficha-sobrenome {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.ficha-nome {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}
.ficha-razao {
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}
.ficha-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ficha-meta .mud-icon-root {
    font-size: .95rem;
}
.ficha-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* Situacao: ponto colorido + texto, mais sobrio que um chip cheio */
.ficha-situacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}
.ficha-situacao::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}
.ficha-situacao--inativo::before {
    background: var(--mud-palette-error);
}
.ficha-situacao--pendente::before {
    background: var(--mud-palette-warning);
}

/* ---------- Prontidao para faturar: a faixa no pe do cabecalho ----------
   Quieta quando esta tudo certo; ganha a tinta de alerta quando falta algo,
   e cada pendencia leva direto a tela que a resolve. */
.ficha-prontidao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    padding: 10px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
}
.ficha-prontidao--pendente {
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, var(--mud-palette-surface));
    border-top-color: color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
}
.ficha-prontidao-rotulo {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.ficha-prontidao-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}
.ficha-prontidao-item .mud-icon-root {
    font-size: 1.05rem;
}
.ficha-prontidao-item--ok .mud-icon-root {
    color: var(--mud-palette-success);
}
.ficha-prontidao-item--pendente .mud-icon-root {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}
.ficha-prontidao-item--pendente {
    font-weight: 600;
}
.ficha-prontidao-veredito {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-success);
}
.ficha-prontidao--pendente .ficha-prontidao-veredito {
    color: var(--mud-palette-text-primary);
}

/* Link de acao dentro da ficha (pendencias, "gerenciar", nome na lista) */
.ficha-link {
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.ficha-link:hover {
    text-decoration-thickness: 2px;
}
.ficha-link:focus-visible,
.ficha-filtro button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Cartoes de dados (visualizar) ---------- */
.ficha-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.ficha-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    min-width: 0;
}
.ficha-card--largo {
    grid-column: 1 / -1;
}
.ficha-card-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ficha-card-titulo h2 {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.ficha-card-titulo > .mud-icon-root {
    font-size: 1.1rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-card-titulo .espaco {
    flex: 1 1 auto;
}
.ficha-card-titulo .ficha-link {
    font-size: .78rem;
}

/* Campos: rotulo cinza em caixa alta sobre o valor */
.ficha-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin: 0;
    /* o cartao mais curto da linha distribui os campos na altura toda */
    flex: 1 1 auto;
    align-content: start;
}
.ficha-campos--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ficha-campo {
    min-width: 0;
}
.ficha-campo--largo {
    grid-column: 1 / -1;
}
.ficha-campo dt {
    margin-bottom: 3px;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.ficha-campo dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.ficha-campo dd.vazio {
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
}
.ficha-numero {
    font-variant-numeric: tabular-nums;
}

/* Estado vazio dentro de um cartao: diz o que falta e oferece a acao */
.ficha-vazio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: center;
    padding: 6px 0;
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-vazio strong {
    color: var(--mud-palette-text-primary);
}

/* Lista curta dentro do cartao (pontos de entrega) */
.ficha-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ficha-lista li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.ficha-lista li:first-child {
    border-top: 0;
    padding-top: 0;
}
.ficha-lista .ordem {
    flex: 0 0 auto;
    min-width: 22px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}
.ficha-lista .texto {
    flex: 1 1 auto;
    min-width: 0;
}
.ficha-lista .principal,
.ficha-lista .secundario {
    display: block;
}
.ficha-lista .principal {
    font-size: .86rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}
.ficha-lista .secundario {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-lista-mais {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Rodape de auditoria em uma linha (AuditoriaInfo Compacto="true") */
.ficha-auditoria {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 10px 4px 0;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-auditoria span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ficha-auditoria strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.ficha-auditoria .mud-icon-root {
    font-size: .95rem;
}

/* ---------- Formulario (editar) ---------- */
.ficha-secao {
    padding: 16px 20px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.ficha-secao + .ficha-secao {
    margin-top: 12px;
}
.ficha-secao-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 14px;
}
.ficha-secao-titulo h2 {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.ficha-secao-titulo p {
    margin: 0;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

/* Barra de acoes fixa no rodape: salvar esta sempre a um clique */
.ficha-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
    padding: 10px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, .18);
}
.ficha-barra .resumo {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-barra .resumo--alerta {
    color: var(--mud-palette-error);
    font-weight: 600;
}
.ficha-barra .espaco {
    flex: 1 1 auto;
}

/* ---------- Lista de cadastros ---------- */
.ficha-lista-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.ficha-lista-topo .titulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
}
.ficha-lista-topo .resumo {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-lista-topo .espaco {
    flex: 1 1 auto;
}

/* Filtro segmentado: botoes nativos (aria-pressed), sem depender de componente */
.ficha-filtro {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-background) 60%, var(--mud-palette-surface));
}
.ficha-filtro button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.ficha-filtro button:hover {
    color: var(--mud-palette-text-primary);
}
.ficha-filtro button[aria-pressed="true"] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.ficha-filtro .contagem {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mud-palette-lines-default);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.ficha-filtro button[aria-pressed="true"] .contagem {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.ficha-filtro .contagem--alerta {
    background: color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
    color: var(--mud-palette-text-primary);
}

.ficha-tabela .mud-table-head .mud-table-cell {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.ficha-tabela .cliente-nome {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}
.ficha-tabela .cliente-nome:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ficha-tabela .cliente-razao {
    display: block;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}
.ficha-tabela .linha-inativa .mud-table-cell {
    color: var(--mud-palette-text-secondary);
}
.ficha-tabela .texto-mudo {
    color: var(--mud-palette-text-disabled);
}
.ficha-tabela .pendencias {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ficha-tabela .pendencias .ficha-link {
    font-size: .76rem;
}

@media (max-width: 959px) {
    .ficha-cards {
        grid-template-columns: 1fr;
    }
    .ficha-campos--tres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .ficha-campos,
    .ficha-campos--tres {
        grid-template-columns: 1fr;
    }
    .ficha-acoes {
        width: 100%;
    }
    .ficha-prontidao-veredito {
        margin-left: 0;
    }
}

/* ===== Estoque: consultas ===== */
.estoque-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.estoque-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.estoque-kpi-rotulo {
    font-size: 0.68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.estoque-kpi-valor {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.estoque-kpi-alerta .estoque-kpi-valor {
    color: var(--mud-palette-error);
}
.estoque-kpis--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.estoque-kpis--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Saldo negativo: nao deve acontecer, mas se acontecer precisa saltar aos olhos. */
.estoque-linha-negativa .mud-table-cell {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* Movimento cancelado: discreto e riscado, sem sumir do kardex. */
.estoque-linha-cancelada .mud-table-cell {
    color: var(--mud-palette-text-disabled);
    text-decoration: line-through;
}
.estoque-linha-cancelada .mud-table-cell .estoque-sem-risco {
    text-decoration: none;
}

.estoque-legenda {
    display: block;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 959px) {
    .estoque-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .estoque-kpis,
    .estoque-kpis--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Dialog de mensagem (Components/Dialogs/MensagemDialog.razor) =====
   Erro, aviso, info e sucesso com a mesma cara; so tokens do tema. A faixa de orientacao
   ("o que fazer") fica em destaque suave na cor da severidade. */
.mensagem-dialog-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mensagem-dialog-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mensagem-dialog-icone .mud-icon-root {
    font-size: 24px;
}

/* Fundo = 12% da cor da severidade sobre a superficie: tinge sem gritar; o icone fica na cor cheia */
.mensagem-dialog--erro.mensagem-dialog-icone { background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface)); color: var(--mud-palette-error); }
.mensagem-dialog--aviso.mensagem-dialog-icone { background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface)); color: var(--mud-palette-warning-darken); }
.mensagem-dialog--sucesso.mensagem-dialog-icone { background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface)); color: var(--mud-palette-success); }
.mensagem-dialog--info.mensagem-dialog-icone { background: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface)); color: var(--mud-palette-info); }

.mensagem-dialog-lista {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.mensagem-dialog-lista li {
    line-height: 1.45;
}

.mensagem-dialog-orientacao {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.mensagem-dialog-orientacao .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Orientacao: faixa clara com borda a esquerda na cor da severidade; o texto e o do tema, para ler */
.mensagem-dialog-orientacao {
    color: var(--mud-palette-text-primary);
    border-left: 3px solid transparent;
}

.mensagem-dialog--erro.mensagem-dialog-orientacao { background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface)); border-left-color: var(--mud-palette-error); }
.mensagem-dialog--erro.mensagem-dialog-orientacao .mud-icon-root { color: var(--mud-palette-error); }
.mensagem-dialog--aviso.mensagem-dialog-orientacao { background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface)); border-left-color: var(--mud-palette-warning); }
.mensagem-dialog--aviso.mensagem-dialog-orientacao .mud-icon-root { color: var(--mud-palette-warning-darken); }
.mensagem-dialog--sucesso.mensagem-dialog-orientacao { background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface)); border-left-color: var(--mud-palette-success); }
.mensagem-dialog--sucesso.mensagem-dialog-orientacao .mud-icon-root { color: var(--mud-palette-success); }
.mensagem-dialog--info.mensagem-dialog-orientacao { background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface)); border-left-color: var(--mud-palette-info); }
.mensagem-dialog--info.mensagem-dialog-orientacao .mud-icon-root { color: var(--mud-palette-info); }


/* ===== Auditoria: sessoes, linha do tempo e trilha =====
   Mesmo idioma das consultas (Contas a Receber, kardex): faixa de KPIs, legendas cinza e o
   ponto de situacao da ficha. So tokens do tema. */
.auditoria-apoio {
    color: var(--mud-palette-text-secondary);
}
.auditoria-legenda {
    display: block;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}
.auditoria-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.auditoria-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.auditoria-kpi-rotulo {
    font-size: 0.68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.auditoria-kpi-valor {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.auditoria-kpi-alerta .auditoria-kpi-valor {
    color: var(--mud-palette-error);
}
.auditoria-kpi-atencao .auditoria-kpi-valor {
    color: var(--mud-palette-warning);
}
.auditoria-kpis--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Trilha: linha abre o detalhe; o payload mascarado sai formatado */
.auditoria-linha-clicavel {
    cursor: pointer;
}
.auditoria-detalhe {
    margin: 4px 0 0;
    padding: 10px 12px;
    max-height: 360px;
    overflow: auto;
    font-size: .74rem;
    line-height: 1.45;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-background) 60%, var(--mud-palette-surface));
    white-space: pre-wrap;
    word-break: break-word;
}

/* Sessao encerrada: ponto neutro (encerrar e o fim normal, nao um alerta) */
.ficha-situacao--neutro::before {
    background: var(--mud-palette-text-disabled);
}

.auditoria-ua {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-all;
}

/* Linha do tempo da sessao: hora, icone e o que aconteceu, numa trilha vertical */
.auditoria-linha-tempo {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
.auditoria-evento {
    display: grid;
    grid-template-columns: 64px 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0 8px 10px;
    border-left: 2px solid var(--mud-palette-lines-default);
}
.auditoria-evento--negado,
.auditoria-evento--erro {
    border-left-color: var(--mud-palette-error);
}
.auditoria-evento--recusado {
    border-left-color: var(--mud-palette-warning);
}
.auditoria-evento-hora {
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}
.auditoria-evento-texto {
    font-size: .85rem;
    min-width: 0;
}
.auditoria-evento--inclusao,
.auditoria-evento--inclusaoemlote {
    border-left-color: var(--mud-palette-success);
}
.auditoria-evento--alteracao {
    border-left-color: var(--mud-palette-info);
}
.auditoria-evento--exclusao {
    border-left-color: var(--mud-palette-error);
}

/* Campos antes -> depois de uma alteracao */
.auditoria-campos {
    width: 100%;
    margin-top: 6px;
    border-collapse: collapse;
    font-size: .78rem;
}
.auditoria-campos th,
.auditoria-campos td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.auditoria-campos th {
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}
.auditoria-campos td.antes {
    color: var(--mud-palette-error);
    text-decoration: line-through;
}
.auditoria-campos td.depois {
    color: var(--mud-palette-success);
    font-weight: 600;
}
.auditoria-dados {
    margin-top: 6px;
    font-size: .78rem;
}
.auditoria-dados summary {
    cursor: pointer;
    color: var(--mud-palette-primary);
}
.auditoria-linha-alerta td {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* ---------- Sem permissao (acesso negado) ---------- */
.sem-permissao {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 40px 32px 28px;
    margin-top: 24px;
    text-align: center;
}
.sem-permissao-icone {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
}
.sem-permissao-icone .mud-icon-root {
    font-size: 38px;
}
.sem-permissao h1 {
    margin: 0 0 8px;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.sem-permissao-apoio {
    margin: 0 auto 20px;
    max-width: 560px;
    color: var(--mud-palette-text-secondary);
    font-size: .95rem;
    line-height: 1.5;
}
.sem-permissao-apoio code {
    font-family: Consolas, "Courier New", monospace;
    font-size: .85em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}
.sem-permissao-alerta {
    text-align: left;
    margin-bottom: 20px;
}
.sem-permissao-cards {
    text-align: left;
    margin-bottom: 24px;
}
.sem-permissao-passos {
    margin: 0;
    padding-left: 20px;
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
    line-height: 1.6;
}
.sem-permissao-acoes {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ---------- Padrao: PaginaLista / PaginaFormulario / PaginaDetalhes ----------
   (Components/PaginaLista.razor, PaginaFormulario.razor, SecaoFormulario.razor,
   PaginaDetalhes.razor — 2026-10-08). Um cartao so por tela: cabecalho comum
   (.pagina-cabecalho), corpo e, no formulario, a barra de acoes fixa no rodape. */
.pagina-lista,
.pagina-form,
.pagina-detalhes {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
}
.pagina-lista {
    overflow: hidden;
}
/* Tinta de edicao e de registro inativo na borda esquerda, como na ficha do cliente */
.pagina-form--edicao {
    border-left: 4px solid var(--mud-palette-info);
}
.pagina-detalhes {
    border-left: 4px solid var(--mud-palette-primary);
}
.pagina-detalhes--inativo {
    border-left-color: var(--mud-palette-text-disabled);
}
.pagina-detalhes--inativo .ficha-codigo {
    background: var(--mud-palette-text-disabled);
}

/* Cabecalho comum */
.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.pagina-cabecalho .pagina-voltar {
    margin-left: -8px;
}
.pagina-icone {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
}
.pagina-icone .mud-icon-root {
    font-size: 26px;
}
.pagina-titulos {
    flex: 1 1 320px;
    min-width: 0;
}
.pagina-titulos h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}
.pagina-titulos p {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--mud-palette-text-secondary);
}
.pagina-titulos .ficha-sobrenome {
    margin-bottom: 2px;
}
.pagina-titulos .ficha-meta {
    margin-top: 4px;
}
.pagina-acoes {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.pagina-carregando {
    padding: 28px 0 12px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--mud-palette-text-secondary);
}

/* Formulario: corpo com secoes separadas por linha e barra fixa no rodape */
.pagina-form-corpo {
    padding: 4px 24px 8px;
}
.form-secao {
    padding: 18px 0 22px;
}
.form-secao + .form-secao {
    border-top: 1px solid var(--mud-palette-lines-default);
}
.form-secao-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 14px;
}
.form-secao-titulo h2 {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.form-secao-titulo p {
    margin: 0;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}
.form-secao-titulo > .mud-icon-root {
    font-size: 1.05rem;
    color: var(--mud-palette-text-secondary);
    align-self: center;
}
.pagina-form-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 12px 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, .14);
}
.pagina-form-barra .resumo {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}
.pagina-form-barra .resumo--alerta {
    color: var(--mud-palette-error);
    font-weight: 600;
}
.pagina-form-barra .espaco {
    flex: 1 1 auto;
}

/* Detalhes: faixa sob o cabecalho, corpo com os cartoes de campos e rodape de auditoria */
.pagina-detalhes-faixa {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.pagina-detalhes-faixa .ficha-prontidao {
    border-top: 0;
}
.pagina-detalhes-corpo {
    padding: 20px 24px 22px;
}
.pagina-detalhes-corpo .ficha-card {
    background: color-mix(in srgb, var(--mud-palette-background) 35%, var(--mud-palette-surface));
}
.pagina-detalhes-rodape {
    padding: 8px 24px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.pagina-detalhes-rodape .ficha-auditoria {
    padding: 4px 0 0;
}

@media (max-width: 959px) {
    .pagina-cabecalho,
    .pagina-form-corpo,
    .pagina-form-barra,
    .pagina-detalhes-corpo,
    .pagina-detalhes-rodape {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ficha-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pagina-lista-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 45%, var(--mud-palette-surface));
}
.pagina-lista-filtros .campo-busca {
    flex: 1 1 320px;
    min-width: 240px;
}
.pagina-lista-filtros .campo {
    flex: 0 1 260px;
    min-width: 200px;
}
.pagina-lista-filtros .acoes {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}
/* A MudTable (um mud-paper) dentro do cartao: sem borda nem raio proprios */
.pagina-lista-corpo .mud-paper,
.pagina-lista-corpo .mud-table {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.pagina-lista-vazio {
    padding: 48px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}
.pagina-lista-vazio .mud-icon-root {
    font-size: 56px;
    color: var(--mud-palette-lines-default);
}
.pagina-lista-vazio h2 {
    margin: 12px 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.pagina-lista-vazio p {
    margin: 0;
    font-size: 0.86rem;
}
.pagina-lista .mud-table-root .mud-table-cell .codigo {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 959px) {
    .auditoria-kpis,
    .auditoria-kpis--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Busca global (Components/BuscaGlobal.razor): paleta Ctrl+K / Ctrl+Space ----------
   Fora de .sag-main (a pele nao a alcanca): painel fixo no topo, como o Spotlight. So tokens. */
.busca-global {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 32px));
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    text-align: left;
}
.busca-global-campo {
    padding: 12px 12px 4px;
}
.busca-global-campo .mud-input-control {
    margin: 0;
}
.busca-global-lista {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding-bottom: 4px;
}
.busca-global-grupo {
    padding: 8px 16px 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    position: sticky;
    top: 0;
}
.busca-global-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.busca-global-item:hover,
.busca-global-item[aria-selected="true"] {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    border-left-color: var(--mud-palette-primary);
}
.busca-global-item .icone {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}
.busca-global-item .texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}
.busca-global-item .titulo {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.busca-global-item .codigo {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-right: 8px;
}
.busca-global-item .subtitulo {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.busca-global-item .inativo-tag {
    margin-left: 6px;
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--mud-palette-text-disabled);
}
.busca-global-item.inativo .titulo {
    color: var(--mud-palette-text-disabled);
}
.busca-global-item .enter {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}
.busca-global-vazio {
    padding: 18px 16px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}
.busca-global-rodape {
    display: flex;
    gap: 18px;
    padding: 8px 16px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}
.busca-global-rodape kbd {
    /* cor explicita: sem ela a tecla herdava um cinza que sumia sobre o fundo (pedido do dono, 2026-10-10) */
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 0 var(--mud-palette-lines-inputs);
}

/* ---------- Plano de Contas (Pages/PlanoContas/Index.razor): arvore achatada numa MudTable ---------- */
/* A grade usa a altura da janela: o teto de 600px da pele (.sag-main .mud-table-container) e
   pouco para um plano com 175 contas. Seletor mais especifico que o da pele, sem !important.
   Os 300px sao o que fica acima e abaixo da grade (barra 64 + respiro 24 + cabecalho 83 +
   filtros 73 em cima; respiro 40 + borda embaixo), medidos na tela — a grade fecha no rodape. */
.sag-main .plano-contas .mud-table-container {
    max-height: calc(100vh - 300px);
    min-height: 480px;
}
.plano-gerando {
    padding: 48px 24px;
    max-width: 560px;
    margin: 0 auto;
}
.plano-gerando .texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    text-align: center;
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
}
.plano-gerando strong {
    font-size: .98rem;
    color: var(--mud-palette-text-primary);
}
.plano-contas .mud-table-row.plano-linha--categoria .mud-table-cell {
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-top: 10px;
    padding-bottom: 10px;
}
.plano-contas .mud-table-row.plano-linha--grupo .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    font-weight: 600;
}
.plano-contas .mud-table-row.plano-linha--subgrupo .mud-table-cell {
    font-weight: 500;
}
.plano-contas .linha-inativa .mud-table-cell {
    color: var(--mud-palette-text-secondary);
}
.plano-contas .linha-inativa .codigo {
    color: var(--mud-palette-text-secondary);
}
.plano-descricao {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.plano-descricao .texto {
    overflow-wrap: anywhere;
}
.plano-recuo-2 { padding-left: 28px; }
.plano-recuo-3 { padding-left: 64px; }
.plano-chevron {
    margin-left: -6px;
}
.plano-contagem {
    font-size: .72rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}
.plano-dialog-pai {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    font-size: .84rem;
}
.plano-dialog-pai .rotulo {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.plano-dialog-pai .codigo {
    font-weight: 700;
    color: var(--mud-palette-primary);
}