/* =============================================================================
   Sele IA Pipeline - UI admin
   Mundo: certidao em papel de seguranca + carimbo de tinta violeta. Tema claro (escritorio, luz do dia).
   Contraste: tintas de carimbo com texto em variante escura quando a tinta base nao chega a 4.5:1
   sobre o fundo "molhado" (verde e ambar). Bordas de controle a 3:1 sobre branco.
   ============================================================================= */

@font-face {
    font-family: "Public Sans";
    src: url("../fontes/PublicSans-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fontes/PublicSans-Italic-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------- tokens --- */
:root {
    color-scheme: light;

    /* Papel, superficie e tinta */
    --papel: #F2F5F8;
    --superficie: #FFFFFF;
    --superficie-pautada: #F8F9FC;          /* zebra: branco tingido do indigo */
    --superficie-realce: #EEF1F7;           /* hover de linha */
    --tinta: #1B2430;                       /* 15.6:1 sobre branco */
    --tinta-suave: #4F5B73;                 /* 6.2:1 sobre o papel */
    --tinta-fraca: #66708A;                 /* placeholder: 4.9:1 sobre branco */
    --hairline: #D5DBE6;
    --hairline-forte: #B9C2D3;
    --borda-controle: #7D879C;              /* 3.6:1 sobre branco (contorno de controle) */

    /* Capa do livro (trilho) */
    --indigo: #1F2A5A;
    --indigo-hover: #2A3670;
    --indigo-ativo: #35438A;
    --trilho-texto: #E6EAF5;
    --trilho-texto-suave: #AEB8D9;          /* 6.9:1 sobre o indigo */

    /* Acao e foco */
    --violeta: #5B3FA0;                     /* 7.9:1 sobre branco */
    --violeta-hover: #4C3489;
    --violeta-ativo: #3E2A70;
    --violeta-lavado: #EFECF6;
    --vermelhao: #B3261E;
    --vermelhao-hover: #96201A;
    --vermelhao-ativo: #7D1B15;
    --foco: #5B3FA0;
    --foco-sobre-indigo: #C9BDF0;           /* 7.8:1 sobre o indigo */

    /* Tintas de carimbo: base (borda) e texto (>= 4.5:1 sobre o fundo de 10%) */
    --carimbo-violeta: #5B3FA0;
    --carimbo-violeta-texto: #5B3FA0;       /* 6.7:1 */
    --carimbo-verde: #1E7A4A;
    --carimbo-verde-texto: #1A6B41;         /* base dava 4.3:1 sobre papel; escurecida -> 6.2:1 */
    --carimbo-vermelhao: #B3261E;
    --carimbo-vermelhao-texto: #B3261E;     /* 6.0:1 */
    --carimbo-ambar: #A66A00;
    --carimbo-ambar-texto: #8A5800;         /* base dava 4.2:1; escurecida -> 5.3:1 */
    --carimbo-neutro: #4E5B70;
    --carimbo-neutro-texto: #4E5B70;        /* 6.0:1 */

    /* Tipografia: uma familia, escala 1.125 em rem fixo */
    --fonte: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-base: 1rem;
    --texto-md: 1.125rem;
    --texto-lg: 1.266rem;
    --texto-xl: 1.424rem;
    --texto-2xl: 1.602rem;

    /* Espacos (grade de 8px) */
    --espaco-1: 4px;
    --espaco-2: 8px;
    --espaco-3: 12px;
    --espaco-4: 16px;
    --espaco-5: 24px;
    --espaco-6: 32px;
    --espaco-7: 48px;
    --espaco-8: 64px;

    /* Forma e profundidade */
    --raio: 2px;
    --sombra-1: 0 1px 2px rgba(31, 42, 90, 0.08), 0 1px 1px rgba(31, 42, 90, 0.04);
    --sombra-2: 0 4px 12px rgba(31, 42, 90, 0.14), 0 1px 3px rgba(31, 42, 90, 0.08);

    /* Medidas da casca */
    --trilho-largura: 240px;
    --barra-altura: 52px;
    --controle-altura: 36px;
    --controle-altura-pequeno: 28px;
    --linha-tabela: 36px;

    --transicao: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------- reset leve --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: #A9B3C7 var(--papel);
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--papel);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: var(--texto-sm);
    line-height: 1.5;
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

code,
kbd,
pre,
samp {
    font-family: var(--fonte-mono);
    font-size: 0.9em;
}

/* Superficies do navegador tematizadas */
::selection {
    background-color: #D9D0F2;
    color: var(--tinta);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--papel);
}

::-webkit-scrollbar-thumb {
    background-color: #A9B3C7;
    border: 2px solid var(--papel);
    border-radius: var(--raio);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #7D879C;
}

input,
textarea {
    caret-color: var(--violeta);
}

:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* FocusOnNavigate leva o foco ao h1 da pagina (leitores de tela anunciam o titulo); o contorno nao e desenhado. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

a {
    color: var(--violeta);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, var(--violeta) 45%, transparent);
    transition: color var(--transicao), text-decoration-color var(--transicao);
}

a:hover {
    color: var(--violeta-hover);
    text-decoration-color: currentColor;
}

a:active {
    color: var(--violeta-ativo);
}

/* ---------------------------------------------------------- utilitarios --- */
.visualmente-oculto {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.numero,
.tabular {
    font-variant-numeric: tabular-nums;
}

.mono {
    font-family: var(--fonte-mono);
    font-size: 0.857em;
}

.texto-suave {
    color: var(--tinta-suave);
}

.pular-conteudo {
    position: absolute;
    left: var(--espaco-2);
    top: -100px;
    z-index: 100;
    padding: var(--espaco-2) var(--espaco-3);
    background: var(--superficie);
    color: var(--violeta);
    font-weight: 600;
    box-shadow: var(--sombra-2);
    border-radius: var(--raio);
}

.pular-conteudo:focus {
    top: var(--espaco-2);
}

/* ---------------------------------------------------------------- icone --- */
.icone {
    display: inline-block;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: -0.2em;
    color: currentColor;
}

.icone--invertido {
    transform: rotate(180deg);
}

.icone--espelhado {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------ tipografia --- */
.pagina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espaco-3) var(--espaco-5);
    margin-bottom: var(--espaco-5);
}

.pagina__titulo,
h1 {
    font-size: var(--texto-2xl);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.012em;
    color: var(--tinta);
    text-wrap: balance;
}

.pagina__titulo {
    margin-bottom: var(--espaco-2);
}

.pagina__cabecalho .pagina__titulo {
    margin-bottom: 0;
}

.pagina__subtitulo {
    margin-top: var(--espaco-1);
    color: var(--tinta-suave);
    max-width: 72ch;
}

.pagina__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
}

h2 {
    font-size: var(--texto-lg);
    line-height: 1.3;
    font-weight: 600;
    text-wrap: balance;
}

h3 {
    font-size: var(--texto-md);
    line-height: 1.35;
    font-weight: 600;
}

.pagina-autorizando {
    max-width: 720px;
    padding: var(--espaco-6);
}

/* ---------------------------------------------------------------- trilho --- */
.trilho {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--indigo);
    color: var(--trilho-texto);
    scrollbar-color: var(--indigo-ativo) var(--indigo);
    --foco: var(--foco-sobre-indigo);
}

.trilho::-webkit-scrollbar-track {
    background: var(--indigo);
}

.trilho::-webkit-scrollbar-thumb {
    background-color: var(--indigo-ativo);
    border-color: var(--indigo);
}

.trilho__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
    min-height: var(--barra-altura);
    padding: 0 var(--espaco-4);
    border-bottom: 1px solid rgba(230, 234, 245, 0.12);
}

.trilho__marca {
    color: #FFFFFF;
    font-size: var(--texto-base);
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;
}

.trilho__marca:hover,
.trilho__marca:active {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.trilho__alternar {
    display: none;
    align-items: center;
    gap: var(--espaco-2);
    min-height: var(--controle-altura);
    padding: 0 var(--espaco-3);
    border: 1px solid rgba(230, 234, 245, 0.35);
    border-radius: var(--raio);
    background: transparent;
    color: var(--trilho-texto);
    font-size: var(--texto-sm);
    font-weight: 600;
    transition: background-color var(--transicao), border-color var(--transicao);
}

.trilho__alternar:hover {
    background-color: var(--indigo-hover);
    border-color: rgba(230, 234, 245, 0.6);
}

.trilho__alternar:active {
    background-color: var(--indigo-ativo);
}

.trilho__nav {
    padding: var(--espaco-4) 0 var(--espaco-6);
}

.trilho__grupo + .trilho__grupo {
    margin-top: var(--espaco-5);
}

.trilho__grupo-titulo {
    padding: 0 var(--espaco-4) var(--espaco-2);
    color: var(--trilho-texto-suave);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.trilho__item {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    min-height: var(--controle-altura);
    margin: 0 var(--espaco-2);
    padding: 0 var(--espaco-3);
    border: 1px solid transparent;
    border-radius: var(--raio);
    color: var(--trilho-texto);
    font-size: var(--texto-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.trilho__item .icone {
    color: var(--trilho-texto-suave);
}

.trilho__item:hover {
    background-color: var(--indigo-hover);
    color: #FFFFFF;
}

.trilho__item:active {
    background-color: var(--indigo-ativo);
}

.trilho__item--ativo,
.trilho__item--ativo:hover {
    background-color: var(--indigo-ativo);
    border-color: rgba(201, 189, 240, 0.45);
    color: #FFFFFF;
    font-weight: 650;
}

.trilho__item--ativo .icone {
    color: var(--foco-sobre-indigo);
}

/* ---------------------------------------------------------- barra superior --- */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-4);
    min-height: var(--barra-altura);
    padding: 0 var(--espaco-7);
    background-color: var(--superficie);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 1px 2px rgba(31, 42, 90, 0.04);
}

.barra__busca {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex: 0 1 420px;
    min-width: 0;
    position: relative;
}

.barra__busca-icone {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tinta-suave);
    pointer-events: none;
}

.barra__busca-campo {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--controle-altura-pequeno);
    padding: 0 var(--espaco-2) 0 34px;
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio);
    background-color: var(--superficie);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.barra__busca-campo::placeholder {
    color: var(--tinta-fraca);
}

.barra__busca-campo:hover {
    border-color: var(--tinta-suave);
}

.barra__busca-campo:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
    border-color: var(--violeta);
}

.barra__usuario {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    min-width: 0;
}

.barra__usuario-nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.barra__usuario-origem {
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    white-space: nowrap;
}

.barra__sair {
    display: inline-flex;
}

/* --------------------------------------------------------------- botoes --- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    min-height: var(--controle-altura);
    padding: 0 var(--espaco-4);
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
}

.botao:hover {
    text-decoration: none;
}

.botao--pequeno {
    min-height: var(--controle-altura-pequeno);
    padding: 0 var(--espaco-3);
    font-size: var(--texto-xs);
    letter-spacing: 0.01em;
}

.botao--so-icone {
    padding: 0;
    width: var(--controle-altura);
}

.botao--pequeno.botao--so-icone {
    width: var(--controle-altura-pequeno);
}

.botao--primario {
    background-color: var(--violeta);
    border-color: var(--violeta);
    color: #FFFFFF;
    box-shadow: var(--sombra-1);
}

.botao--primario:hover {
    background-color: var(--violeta-hover);
    border-color: var(--violeta-hover);
    color: #FFFFFF;
}

.botao--primario:active {
    background-color: var(--violeta-ativo);
    border-color: var(--violeta-ativo);
    box-shadow: none;
}

.botao--secundario {
    background-color: var(--superficie);
    border-color: var(--borda-controle);
    color: var(--tinta);
    box-shadow: var(--sombra-1);
}

.botao--secundario:hover {
    background-color: var(--papel);
    border-color: var(--tinta-suave);
    color: var(--tinta);
}

.botao--secundario:active {
    background-color: #E4E9F1;
    box-shadow: none;
}

.botao--perigo {
    background-color: var(--vermelhao);
    border-color: var(--vermelhao);
    color: #FFFFFF;
    box-shadow: var(--sombra-1);
}

.botao--perigo:hover {
    background-color: var(--vermelhao-hover);
    border-color: var(--vermelhao-hover);
    color: #FFFFFF;
}

.botao--perigo:active {
    background-color: var(--vermelhao-ativo);
    border-color: var(--vermelhao-ativo);
    box-shadow: none;
}

.botao--fantasma {
    background-color: transparent;
    color: var(--tinta-suave);
}

.botao--fantasma:hover {
    background-color: rgba(31, 42, 90, 0.06);
    color: var(--tinta);
}

.botao--fantasma:active {
    background-color: rgba(31, 42, 90, 0.11);
}

.botao:disabled,
.botao[aria-disabled="true"] {
    cursor: not-allowed;
    background-color: #E7EAF0;
    border-color: #D5DBE6;
    color: #6B7489;
    box-shadow: none;
}

.botao--fantasma:disabled {
    background-color: transparent;
    border-color: transparent;
}

.botao--carregando,
.botao--carregando:disabled {
    cursor: progress;
}

.botao--primario.botao--carregando:disabled {
    background-color: color-mix(in srgb, var(--violeta) 72%, #ffffff);
    border-color: transparent;
    color: #FFFFFF;
}

.botao--perigo.botao--carregando:disabled {
    background-color: color-mix(in srgb, var(--vermelhao) 72%, #ffffff);
    border-color: transparent;
    color: #FFFFFF;
}

.botao__progresso {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 3px;
    overflow: hidden;
    background-color: currentColor;
    opacity: 0.45;
    border-radius: 1px;
}

.botao__progresso::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    animation: brilho-faixa 1.2s linear infinite;
}

/* -------------------------------------------------------------- campos --- */
.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    min-width: 0;
}

.campo + .campo {
    margin-top: var(--espaco-4);
}

.campo__rotulo {
    color: var(--tinta);
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1.3;
}

.campo__obrigatorio {
    margin-left: 2px;
    color: var(--vermelhao);
}

.campo__controle {
    width: 100%;
    min-height: var(--controle-altura);
    padding: 0 var(--espaco-3);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio);
    background-color: var(--superficie);
    color: var(--tinta);
    font-size: var(--texto-sm);
    line-height: 1.4;
    transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}

.campo__controle::placeholder {
    color: var(--tinta-fraca);
    opacity: 1;
}

.campo__controle:hover {
    border-color: var(--tinta-suave);
}

.campo__controle:focus-visible,
.campo__controle:focus {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
    border-color: var(--violeta);
}

.campo__controle:disabled {
    cursor: not-allowed;
    background-color: #EEF1F5;
    border-color: #C3CAD8;
    color: #5D677D;
}

.campo__controle[readonly] {
    background-color: var(--superficie-pautada);
    border-style: dashed;
}

.campo__controle--area {
    min-height: calc(var(--controle-altura) * 2);
    padding: var(--espaco-2) var(--espaco-3);
    line-height: 1.5;
    resize: vertical;
}

.campo__controle--mono {
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    tab-size: 2;
}

.campo__controle--numero {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.campo__controle--selecao {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F5B73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    cursor: pointer;
}

.campo__controle--selecao:disabled {
    cursor: not-allowed;
}

.campo__controle--compacto {
    min-height: var(--controle-altura-pequeno);
    width: auto;
    font-size: var(--texto-xs);
}

.campo__numero {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
}

.campo__unidade {
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    white-space: nowrap;
}

.campo__ajuda {
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    line-height: 1.45;
}

.campo__contador {
    display: block;
    font-variant-numeric: tabular-nums;
}

.campo__erro {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-1);
    color: var(--vermelhao);
    font-size: var(--texto-xs);
    font-weight: 600;
    line-height: 1.45;
}

.campo__erro .icone {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 2px;
}

.campo--erro .campo__controle,
.campo--erro .campo__controle:hover {
    border-color: var(--vermelhao);
    background-color: #FFFBFB;
}

.campo--erro .campo__controle:focus-visible,
.campo--erro .campo__controle:focus {
    outline-color: var(--vermelhao);
}

.campo--desabilitado .campo__rotulo {
    color: #5D677D;
}

/* Interruptor (checkbox role=switch) */
.alternar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-3);
    min-height: var(--controle-altura);
    cursor: pointer;
    font-weight: 600;
}

.alternar__controle {
    position: absolute;
    opacity: 0;
    width: 34px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.alternar__trilho {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio);
    background-color: #E4E8EF;
    transition: background-color var(--transicao), border-color var(--transicao);
}

.alternar__botao {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: var(--raio);
    background-color: var(--superficie);
    box-shadow: 0 1px 2px rgba(31, 42, 90, 0.35);
    transition: transform var(--transicao);
}

.alternar:hover .alternar__trilho {
    border-color: var(--tinta-suave);
}

.alternar__controle:checked + .alternar__trilho {
    background-color: var(--violeta);
    border-color: var(--violeta);
}

.alternar__controle:checked + .alternar__trilho .alternar__botao {
    transform: translateX(14px);
}

.alternar__controle:focus-visible + .alternar__trilho {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.alternar__controle:disabled + .alternar__trilho {
    background-color: #EEF1F5;
    border-color: #C3CAD8;
}

.alternar__controle:disabled:checked + .alternar__trilho {
    background-color: color-mix(in srgb, var(--violeta) 45%, #ffffff);
}

.campo--desabilitado .alternar {
    cursor: not-allowed;
    color: #5D677D;
}

.alternar__estado {
    color: var(--tinta-suave);
    font-weight: 500;
    font-size: var(--texto-xs);
}

/* -------------------------------------------------------------- filtros --- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espaco-3) var(--espaco-4);
    margin-bottom: var(--espaco-4);
    padding: var(--espaco-3) var(--espaco-4);
    background-color: var(--superficie);
    border: 1px solid var(--hairline);
    border-radius: var(--raio);
}

.filtros__campos {
    display: flex;
    flex: 1 1 520px;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espaco-3) var(--espaco-4);
    min-width: 0;
}

.filtros__campos > .campo {
    flex: 1 1 160px;
    max-width: 280px;
}

.filtros__campos > .campo + .campo {
    margin-top: 0;
}

.filtros__campos .campo__controle {
    min-height: var(--controle-altura-pequeno);
    font-size: var(--texto-xs);
}

.filtros__campos .campo__rotulo {
    font-size: var(--texto-xs);
}

.filtros__acoes {
    display: flex;
    gap: var(--espaco-2);
}

/* --------------------------------------------------------------- tabela --- */
.tabela {
    background-color: var(--superficie);
    border: 1px solid var(--hairline);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
}

.tabela__rolagem {
    overflow: auto;
    max-height: var(--tabela-altura-maxima, 72vh);
}

.tabela__rolagem:focus-visible {
    outline-offset: -2px;
}

.tabela__grade {
    width: 100%;
    font-size: var(--texto-sm);
    font-variant-numeric: tabular-nums;
}

.tabela__grade thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--linha-tabela);
    padding: 0 var(--espaco-3);
    background-color: var(--superficie);
    border-bottom: 1px solid var(--hairline-forte);
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.tabela__cabecalho--ordenado {
    color: var(--tinta);
}

.tabela__ordenar {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    margin: 0 calc(var(--espaco-1) * -1);
    padding: 2px var(--espaco-1);
    border: 0;
    border-radius: var(--raio);
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    transition: background-color var(--transicao), color var(--transicao);
}

.tabela__ordenar:hover {
    background-color: var(--superficie-realce);
    color: var(--tinta);
}

.tabela__ordenar:active {
    background-color: #E2E7F0;
}

.tabela__ordenar:disabled {
    cursor: progress;
}

.tabela__ordenar-icone {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.55;
}

.tabela__cabecalho--ordenado .tabela__ordenar-icone {
    opacity: 1;
    color: var(--violeta);
}

.tabela__grade td {
    height: var(--linha-tabela);
    padding: 0 var(--espaco-3);
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}

.tabela__grade tbody tr:last-child td {
    border-bottom: 0;
}

.tabela__grade tbody tr:nth-child(even) {
    background-color: var(--superficie-pautada);
}

.tabela__grade tbody tr.tabela__linha:not(.tabela__linha--esqueleto):hover {
    background-color: var(--superficie-realce);
}

.tabela__celula--numerica {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabela__grade thead th.tabela__celula--numerica {
    text-align: right;
}

.tabela .vazio {
    border-top: 1px solid var(--hairline);
}

.tabela .paginacao {
    border-top: 1px solid var(--hairline);
    padding: var(--espaco-2) var(--espaco-3);
}

/* ------------------------------------------------------------ paginacao --- */
.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2) var(--espaco-4);
    font-size: var(--texto-xs);
}

.paginacao__resumo {
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}

.paginacao__resumo strong {
    color: var(--tinta);
    font-weight: 600;
}

.paginacao__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.paginacao__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-1);
    min-width: var(--controle-altura-pequeno);
    min-height: var(--controle-altura-pequeno);
    padding: 0 var(--espaco-2);
    border: 1px solid transparent;
    border-radius: var(--raio);
    background: transparent;
    color: var(--tinta);
    font-size: var(--texto-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transicao), border-color var(--transicao);
}

.paginacao__botao:hover {
    background-color: var(--superficie-realce);
    border-color: var(--hairline);
}

.paginacao__botao:active {
    background-color: #E2E7F0;
}

.paginacao__botao:disabled {
    cursor: not-allowed;
    color: #8A93A6;
    background: transparent;
    border-color: transparent;
}

.paginacao__numero--atual,
.paginacao__numero--atual:hover,
.paginacao__numero--atual:disabled {
    background-color: var(--violeta-lavado);
    border-color: var(--violeta);
    color: var(--violeta);
}

.paginacao__reticencias {
    padding: 0 var(--espaco-1);
    color: var(--tinta-suave);
}

.paginacao__tamanho {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- painel --- */
.painel {
    background-color: var(--superficie);
    border: 1px solid var(--hairline);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
}

.painel + .painel {
    margin-top: var(--espaco-5);
}

.painel__cabecalho {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espaco-2) var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5) var(--espaco-3);
    border-bottom: 1px solid var(--hairline);
}

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

.painel__titulo {
    font-size: var(--texto-md);
    font-weight: 650;
    line-height: 1.3;
}

.painel__descricao {
    margin-top: 2px;
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    max-width: 72ch;
}

.painel__acoes {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: var(--espaco-2);
}

.painel__corpo {
    padding: var(--espaco-4) var(--espaco-5) var(--espaco-5);
}

.painel__corpo > .tabela {
    margin: calc(var(--espaco-4) * -1) calc(var(--espaco-5) * -1) calc(var(--espaco-5) * -1);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.painel--sem-moldura {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.painel--sem-moldura > .painel__cabecalho {
    padding-left: 0;
    padding-right: 0;
}

.painel--sem-moldura > .painel__corpo {
    padding-left: 0;
    padding-right: 0;
}

/* ------------------------------------------------------------------ abas --- */
.abas__lista {
    display: flex;
    gap: var(--espaco-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--hairline-forte);
    scrollbar-width: thin;
}

.abas__aba {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    min-height: var(--controle-altura);
    margin-bottom: -1px;
    padding: 0 var(--espaco-4);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--raio) var(--raio) 0 0;
    background: transparent;
    color: var(--tinta-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--transicao), color var(--transicao);
}

.abas__aba:hover {
    background-color: rgba(31, 42, 90, 0.05);
    color: var(--tinta);
}

.abas__aba:active {
    background-color: rgba(31, 42, 90, 0.09);
}

.abas__aba:focus-visible {
    outline-offset: -2px;
}

.abas__aba--ativa,
.abas__aba--ativa:hover {
    background-color: var(--superficie);
    border-color: var(--hairline-forte);
    color: var(--violeta);
}

.abas__aba--ativa::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 2px;
    background-color: var(--violeta);
}

.abas__aba:disabled {
    cursor: not-allowed;
    color: #8A93A6;
    background: transparent;
}

.abas__contador {
    min-width: 1.5em;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: var(--raio);
    font-size: var(--texto-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    text-align: center;
}

.abas__painel {
    padding-top: var(--espaco-5);
}

.abas__painel:focus-visible {
    outline-offset: 4px;
}

/* ----------------------------------------------------------------- aviso --- */
.aviso {
    --aviso-tinta: var(--carimbo-neutro);
    --aviso-texto: var(--tinta);
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border: 1px solid color-mix(in srgb, var(--aviso-tinta) 45%, #ffffff);
    border-radius: var(--raio);
    background-color: color-mix(in srgb, var(--aviso-tinta) 7%, #ffffff);
    color: var(--aviso-texto);
}

.aviso + * {
    margin-top: var(--espaco-4);
}

.aviso--info {
    --aviso-tinta: var(--violeta);
}

.aviso--sucesso {
    --aviso-tinta: var(--carimbo-verde);
}

.aviso--alerta {
    --aviso-tinta: var(--carimbo-ambar);
}

.aviso--erro {
    --aviso-tinta: var(--vermelhao);
}

.aviso__icone {
    flex: none;
    margin-top: 1px;
    color: var(--aviso-tinta);
}

.aviso--sucesso .aviso__icone {
    color: var(--carimbo-verde-texto);
}

.aviso--alerta .aviso__icone {
    color: var(--carimbo-ambar-texto);
}

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

.aviso__titulo {
    font-weight: 650;
    line-height: 1.4;
}

.aviso__titulo + .aviso__texto {
    margin-top: 2px;
}

.aviso__texto {
    line-height: 1.5;
    max-width: 80ch;
}

.aviso__texto > * + * {
    margin-top: var(--espaco-1);
}

.aviso__fechar,
.toast__fechar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--controle-altura-pequeno);
    height: var(--controle-altura-pequeno);
    margin: -4px -8px -4px 0;
    border: 0;
    border-radius: var(--raio);
    background: transparent;
    color: var(--tinta-suave);
    transition: background-color var(--transicao), color var(--transicao);
}

.aviso__fechar:hover,
.toast__fechar:hover {
    background-color: rgba(31, 42, 90, 0.08);
    color: var(--tinta);
}

.aviso__fechar:active,
.toast__fechar:active {
    background-color: rgba(31, 42, 90, 0.14);
}

/* ----------------------------------------------------------- estado vazio --- */
.vazio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-2);
    padding: var(--espaco-6) var(--espaco-5);
}

.vazio__icone {
    color: var(--tinta-suave);
}

.vazio__icone .icone {
    width: 1.5rem;
    height: 1.5rem;
}

.vazio__titulo {
    font-size: var(--texto-base);
    font-weight: 650;
}

.vazio__texto {
    color: var(--tinta-suave);
    max-width: 64ch;
}

.vazio__acao {
    margin-top: var(--espaco-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
}

/* -------------------------------------------------------------- esqueleto --- */
.esqueleto {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding: var(--espaco-2) 0;
}

.esqueleto__linha {
    display: block;
    height: 12px;
    border-radius: var(--raio);
    background-color: #E3E8F0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: brilho 1.2s linear infinite;
}

.esqueleto__linha--celula {
    width: 70%;
    max-width: 160px;
    height: 10px;
}

.tabela__linha--esqueleto:nth-child(3n) .esqueleto__linha--celula {
    width: 45%;
}

.tabela__linha--esqueleto:nth-child(3n + 1) .esqueleto__linha--celula {
    width: 82%;
}

@keyframes brilho {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

@keyframes brilho-faixa {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* ----------------------------------------------------------- confirmacao --- */
.confirmacao {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-1) var(--espaco-2);
    border: 1px solid var(--hairline-forte);
    border-radius: var(--raio);
    background-color: var(--superficie);
    box-shadow: var(--sombra-1);
}

.confirmacao__pergunta {
    font-weight: 600;
    font-size: var(--texto-sm);
}

/* ---------------------------------------------------------------- toasts --- */
.toasts {
    position: fixed;
    right: var(--espaco-5);
    bottom: var(--espaco-5);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--espaco-2);
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    --toast-tinta: var(--violeta);
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    width: 100%;
    padding: var(--espaco-3) var(--espaco-4);
    border: 1px solid color-mix(in srgb, var(--toast-tinta) 50%, #ffffff);
    border-radius: var(--raio);
    background-color: var(--superficie);
    box-shadow: var(--sombra-2);
    pointer-events: auto;
}

.toast--sucesso {
    --toast-tinta: var(--carimbo-verde-texto);
}

.toast--erro {
    --toast-tinta: var(--vermelhao);
}

.toast--alerta {
    --toast-tinta: var(--carimbo-ambar-texto);
}

.toast__icone {
    flex: none;
    margin-top: 1px;
    color: var(--toast-tinta);
}

.toast__texto {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    line-height: 1.45;
}

/* -------------------------------------------------------- acesso (login) --- */
.acesso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-5);
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--espaco-6) var(--espaco-4);
    background-color: var(--papel);
    background-image:
        repeating-linear-gradient(135deg, rgba(31, 42, 90, 0.028) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(45deg, rgba(31, 42, 90, 0.02) 0 1px, transparent 1px 9px);
}

.acesso__cabecalho {
    width: min(100%, 400px);
}

.acesso__marca {
    color: var(--indigo);
    font-size: var(--texto-md);
    font-weight: 650;
}

.acesso__folha {
    width: min(100%, 400px);
    padding: var(--espaco-6) var(--espaco-6) var(--espaco-5);
    background-color: var(--superficie);
    border: 1px solid var(--hairline);
    border-top: 3px double var(--indigo);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
}

.acesso__titulo {
    font-size: var(--texto-xl);
}

.acesso__texto {
    margin: var(--espaco-2) 0 var(--espaco-5);
    color: var(--tinta-suave);
}

.acesso__form {
    margin-top: var(--espaco-4);
}

.acesso__acoes {
    margin-top: var(--espaco-5);
}

.acesso__acoes .botao {
    width: 100%;
}

.acesso__rodape {
    display: flex;
    gap: var(--espaco-2);
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
}

/* ------------------------------------------------------ erro do Blazor --- */
#blazor-error-ui {
    position: fixed;
    left: 50%;
    bottom: var(--espaco-5);
    z-index: 60;
    display: none;
    align-items: center;
    gap: var(--espaco-3);
    width: min(640px, calc(100vw - 32px));
    padding: var(--espaco-3) var(--espaco-4);
    transform: translateX(-50%);
    background-color: var(--superficie);
    border: 1px solid var(--vermelhao);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
    color: var(--tinta);
    font-weight: 600;
}

#blazor-error-ui > .icone {
    color: var(--vermelhao);
}

#blazor-error-ui .reload {
    margin-left: auto;
    white-space: nowrap;
}

#blazor-error-ui .dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--controle-altura-pequeno);
    height: var(--controle-altura-pequeno);
    border: 0;
    border-radius: var(--raio);
    background: transparent;
    color: var(--tinta-suave);
}

#blazor-error-ui .dismiss:hover {
    background-color: rgba(31, 42, 90, 0.08);
    color: var(--tinta);
}

/* ------------------------------------------------------------ responsivo --- */
@media (max-width: 1023.98px) {
    .trilho {
        position: sticky;
        top: 0;
        z-index: 30;
        height: auto;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: visible;
    }

    .trilho__alternar {
        display: inline-flex;
    }

    .trilho__nav {
        display: none;
        max-height: calc(100dvh - var(--barra-altura));
        overflow-y: auto;
        padding-top: var(--espaco-3);
        border-bottom: 1px solid rgba(230, 234, 245, 0.12);
        box-shadow: var(--sombra-2);
    }

    .trilho--aberto .trilho__nav {
        display: block;
    }

    .trilho__grupo + .trilho__grupo {
        margin-top: var(--espaco-4);
    }

    .barra {
        position: static;
        padding: var(--espaco-2) var(--espaco-4);
        flex-wrap: wrap;
    }

    .barra__busca {
        flex: 1 1 260px;
    }
}

@media (max-width: 639.98px) {
    .barra__usuario-origem {
        display: none;
    }

    .paginacao__texto-largo {
        display: none;
    }

    .pagina__titulo,
    h1 {
        font-size: var(--texto-xl);
    }

    .painel__cabecalho {
        flex-wrap: wrap;
    }

    .painel__cabecalho,
    .painel__corpo {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    .painel__corpo > .tabela {
        margin-left: calc(var(--espaco-4) * -1);
        margin-right: calc(var(--espaco-4) * -1);
    }

    .filtros__campos > .campo {
        max-width: none;
        flex-basis: 100%;
    }

    .filtros__acoes {
        width: 100%;
    }

    .filtros__acoes .botao {
        flex: 1 1 0;
    }

    /* Tabela vira lista de linhas com rotulo + valor */
    .tabela__rolagem {
        max-height: none;
        overflow: visible;
    }

    .tabela__grade,
    .tabela__grade tbody,
    .tabela__grade tr,
    .tabela__grade td {
        display: block;
        width: 100%;
    }

    .tabela__grade thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .tabela__grade tbody tr {
        padding: var(--espaco-2) var(--espaco-3);
        border-bottom: 1px solid var(--hairline);
    }

    .tabela__grade tbody tr:nth-child(even) {
        background-color: var(--superficie);
    }

    .tabela__grade td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        align-items: center;
        gap: var(--espaco-3);
        height: auto;
        min-height: 28px;
        padding: 2px 0;
        border-bottom: 0;
        text-align: left;
    }

    .tabela__grade td.tabela__celula--numerica {
        text-align: left;
    }

    .tabela__grade td::before {
        content: attr(data-rotulo);
        color: var(--tinta-suave);
        font-size: var(--texto-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .tabela__linha--esqueleto td::before {
        content: "";
    }

    .toasts {
        right: var(--espaco-4);
        bottom: var(--espaco-4);
    }

    .acesso__folha {
        padding: var(--espaco-5) var(--espaco-4);
    }
}

/* -------------------------------------------------------- movimento --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .esqueleto__linha,
    .botao__progresso::after {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------- print --- */
@media print {
    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 10pt;
    }

    .trilho,
    .barra,
    .toasts,
    .pular-conteudo,
    #blazor-error-ui,
    .filtros,
    .paginacao,
    .painel__acoes,
    .botao {
        display: none !important;
    }

    .painel,
    .tabela {
        border-color: #999999;
        box-shadow: none;
    }

    .tabela__rolagem {
        max-height: none;
        overflow: visible;
    }

    .tabela__grade thead th {
        position: static;
    }

    a {
        color: #000000;
        text-decoration: none;
    }
}