/* =============================================================================
   Sele IA Pipeline - UI admin
   Mundo: ferramenta de trabalho no mundo do site seleia.com.br. Navy dominante (trilho navy-deep, acao
   em navy), verde-limao so como sinal de "esta fluindo" (marca "IA", icone do item ativo do trilho,
   foco sobre o trilho). Sora nos titulos, Manrope no texto. Tema claro (escritorio, luz do dia).
   Contraste AA: texto >= 4.5:1; texto verde sobre claro usa --lime-deep (nunca --lime). Tintas de
   estado com texto em variante escura (-texto) sobre o fundo de 7-10% da tinta. Bordas de controle ~3:1.
   ============================================================================= */

/* Sora (titulos) e Manrope (texto): variaveis, hospedadas em wwwroot/fontes (OFL), subconjuntos como no Google Fonts. */
@font-face {
    font-family: "Sora";
    src: url("../fontes/Sora-LatinExt-Variable.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

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

@font-face {
    font-family: "Manrope";
    src: url("../fontes/Manrope-Latin-Variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

    /* Chao, superficie e tinta (tokens do :root do site seleia.com.br) */
    --fundo: #F6F7FC;                       /* bg */
    --superficie: #FFFFFF;
    --superficie-pautada: #F9FAFE;          /* zebra */
    --superficie-realce: #EEF0FA;           /* bg-2: hover de linha, hover de botao secundario */
    --tinta: #161A3F;                       /* ink: 15.7:1 sobre o fundo */
    --tinta-suave: #565C82;                 /* text: 6.0:1 sobre o fundo */
    --tinta-fraca: #6B7194;                 /* placeholder: 4.8:1 sobre branco */
    --hairline: #E5E7F2;
    --hairline-forte: #D5D8EC;
    --borda-controle: #8389AA;              /* 3.4:1 sobre branco, 3.2:1 sobre o fundo (contorno de controle) */
    --ink-2: #1E2246;

    /* Navy: acao e marca */
    --navy: #232C8B;                        /* 11.6:1 sobre branco */
    --navy-hover: #1C2370;
    --navy-ativo: #161A4D;
    --navy-tint: #EDEFFF;
    --navy-2: #4A54B8;
    --navy-profundo: #161A4D;

    /* Trilho (navy profundo) */
    --trilho-fundo: #161A4D;
    --trilho-hover: #1E2466;
    --trilho-ativo: #232C8B;
    --trilho-texto: #DDE1F5;                /* 12.5:1 sobre o trilho */
    --trilho-texto-suave: #9BA1C6;          /* 6.4:1 sobre o trilho */

    /* Verde-limao da marca: uso pontual. Texto verde sobre claro = --lime-deep, nunca --lime. */
    --lime: #8CC63F;                        /* 8.0:1 sobre o trilho */
    --lime-2: #7BB534;
    --lime-escuro: #5E9E1F;
    --lime-deep: #4E7A1E;                   /* 5.1:1 sobre branco */
    --lime-tint: #EAF5D9;

    /* Perigo e foco */
    --perigo: #C0392B;                      /* 5.4:1 sobre branco */
    --perigo-hover: #A93226;
    --perigo-ativo: #8E2A20;
    --foco: #4A54B8;                        /* 6.5:1 sobre branco */
    --foco-sobre-trilho: #8CC63F;           /* lime sobre navy-deep */

    /* Tintas de estado: base (borda, ponto) e texto (>= 4.5:1 sobre o fundo de 7-10% da base).
       O verde de status e separado do verde da marca. */
    --estado-ativo: #4A54B8;
    --estado-ativo-texto: #3A43A0;
    --estado-ok: #1E7F5C;
    --estado-ok-texto: #17664A;
    --estado-falha: #C0392B;
    --estado-falha-texto: #A93226;
    --estado-espera: #B26B00;
    --estado-espera-texto: #8A5300;
    --estado-neutro: #616787;
    --estado-neutro-texto: #4F5578;

    /* Tipografia: Manrope no texto, Sora nos titulos; escala 1.125 em rem fixo */
    --fonte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo: "Sora", "Manrope", 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 (sombras tingidas de navy, sempre com offset e blur) */
    --raio: 11px;                           /* controles: botao, campo, aba, aviso, toast */
    --raio-md: 16px;                        /* paineis, tabelas, ficha */
    --raio-lg: 22px;                        /* folha de login, blocos grandes */
    --raio-xl: 28px;
    --raio-pilula: 999px;                   /* carimbo, contadores */
    --sombra-1: 0 1px 2px rgba(22, 26, 77, 0.06), 0 2px 8px rgba(35, 44, 139, 0.06);
    --sombra-2: 0 12px 32px -10px rgba(35, 44, 139, 0.22), 0 2px 6px rgba(22, 26, 77, 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);

    accent-color: var(--navy);
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--fundo);
    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: #D8DCFB;
    color: var(--tinta);
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background-color: var(--borda-controle);
}

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

: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(--navy);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, var(--navy) 45%, transparent);
    transition: color var(--transicao), text-decoration-color var(--transicao);
}

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

a:active {
    color: var(--navy-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(--navy);
    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-family: var(--fonte-titulo);
    font-size: var(--texto-2xl);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    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-family: var(--fonte-titulo);
    font-size: var(--texto-lg);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h3 {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-md);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

/* ---------------------------------------------------------------- trilho --- */
/* Desktop: a coluna do trilho estica ate o fim da casca (o navy cobre a pagina inteira, inclusive em captura de
   pagina inteira); o topo e a navegacao e que ficam sticky dentro dela. Abaixo de 1024px o trilho vira barra
   (ver @media). */
.trilho {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--trilho-fundo);
    color: var(--trilho-texto);
    --foco: var(--foco-sobre-trilho);
}

.trilho__topo {
    position: sticky;
    top: 0;
    z-index: 1;
    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(221, 225, 245, 0.12);
}

/* Logo (robo + "Sele IA" com "IA" em lime + "Pipeline"): link para o Painel. */
.trilho__marca {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-3);
    min-width: 0;
    padding: var(--espaco-1) var(--espaco-2) var(--espaco-1) var(--espaco-1);
    border-radius: var(--raio);
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transicao);
}

.trilho__marca:hover,
.trilho__marca:active {
    background-color: var(--trilho-hover);
    color: #FFFFFF;
    text-decoration: none;
}

.trilho__robo {
    flex: none;
    width: auto;
    height: 34px;
}

.trilho__marca-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.trilho__marca-nome {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-md);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.trilho__marca-ia {
    color: var(--lime);
}

.trilho__marca-produto {
    color: var(--trilho-texto-suave);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.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(221, 225, 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(--trilho-hover);
    border-color: rgba(221, 225, 245, 0.6);
}

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

.trilho__nav {
    position: sticky;
    top: var(--barra-altura);
    max-height: calc(100vh - var(--barra-altura));
    max-height: calc(100dvh - var(--barra-altura));
    overflow-y: auto;
    padding: var(--espaco-4) 0 var(--espaco-6);
    scrollbar-color: var(--trilho-ativo) var(--trilho-fundo);
}

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

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

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

.trilho__grupo-titulo {
    padding: 0 calc(var(--espaco-2) + var(--espaco-3)) var(--espaco-2);
    color: var(--trilho-texto-suave);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

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

.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);
    transition: color var(--transicao);
}

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

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

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

.trilho__item--ativo,
.trilho__item--ativo:hover {
    background-color: var(--trilho-ativo);
    border-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-weight: 650;
}

.trilho__item--ativo .icone,
.trilho__item--ativo:hover .icone {
    color: var(--foco-sobre-trilho);
}

/* ---------------------------------------------------------- barra superior --- */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    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(22, 26, 77, 0.04);
}

.barra__busca {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex: 0 1 420px;
    min-width: 0;
    margin-right: auto;
    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;
    text-overflow: ellipsis;
    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(--navy);
}

/* O bloco do usuario nao encolhe: quem cede espaco e a busca (min-width: 0). O nome tambem nao encolhe;
   o limite e o max-width, com reticencias se passar. */
.barra__usuario {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--espaco-3);
    min-width: 0;
}

.barra__usuario-nome {
    flex-shrink: 0;
    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(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
    box-shadow: var(--sombra-1);
}

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

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

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

.botao--secundario:hover {
    background-color: var(--superficie-realce);
    border-color: var(--hairline-forte);
    color: var(--tinta);
}

.botao--secundario:active {
    background-color: color-mix(in srgb, var(--navy) 10%, #ffffff);
    box-shadow: none;
}

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

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

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

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

.botao--fantasma:hover {
    background-color: rgba(35, 44, 139, 0.06);
    color: var(--tinta);
}

.botao--fantasma:active {
    background-color: rgba(35, 44, 139, 0.11);
}

.botao:disabled,
.botao[aria-disabled="true"] {
    cursor: not-allowed;
    background-color: #ECEEF7;
    border-color: var(--hairline-forte);
    color: #747A9B;
    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(--navy) 72%, #ffffff);
    border-color: transparent;
    color: #FFFFFF;
}

.botao--perigo.botao--carregando:disabled {
    background-color: color-mix(in srgb, var(--perigo) 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: var(--raio-pilula);
}

.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(--perigo);
}

.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(--navy);
}

.campo__controle:disabled {
    cursor: not-allowed;
    background-color: var(--superficie-realce);
    border-color: var(--hairline-forte);
    color: var(--tinta-fraca);
}

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

/* Seta do select: caret-down (Phosphor Bold, MIT - ver LICENCA-Phosphor-MIT.txt), na cor --tinta-suave. */
.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 256 256' fill='%23565C82'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    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(--perigo);
    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(--perigo);
    background-color: #FFFAF9;
}

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

.campo--desabilitado .campo__rotulo {
    color: var(--tinta-fraca);
}

/* 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-pilula);
    background-color: var(--superficie-realce);
    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-pilula);
    background-color: var(--superficie);
    box-shadow: 0 1px 2px rgba(22, 26, 77, 0.35);
    transition: transform var(--transicao);
}

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

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

.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: var(--superficie-realce);
    border-color: var(--hairline-forte);
}

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

.campo--desabilitado .alternar {
    cursor: not-allowed;
    color: var(--tinta-fraca);
}

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

.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 --- */
/* overflow: clip so recorta o conteudo nos cantos arredondados (nao cria rolagem; o sticky do cabecalho
   continua preso ao .tabela__rolagem). */
.tabela {
    background-color: var(--superficie);
    border: 1px solid var(--hairline);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-1);
    overflow: clip;
}

.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.01em;
    text-align: left;
    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;
    transition: background-color var(--transicao), color var(--transicao);
}

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

.tabela__ordenar:active {
    background-color: color-mix(in srgb, var(--navy) 10%, #ffffff);
}

.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(--navy);
}

.tabela__grade td {
    height: var(--linha-tabela);
    padding: var(--espaco-1) 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;
    white-space: nowrap;
}

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

/* Identificadores (protocolo "A/DEMO-A020", codigo "SEED-V1") nao quebram no hifen/barra dentro da celula.
   Valem so no desktop; no celular empilhado podem quebrar (ver @media 639px). Os demais .mono em celula
   (.modelo, .chave-celula, .condicao...) tem regra propria de quebra/reticencias e nao entram aqui. */
.tabela__grade td .tabular,
.tabela__grade td a.mono {
    white-space: nowrap;
}

.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: color-mix(in srgb, var(--navy) 10%, #ffffff);
}

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

.paginacao__numero--atual,
.paginacao__numero--atual:hover,
.paginacao__numero--atual:disabled {
    background-color: var(--navy-tint);
    border-color: color-mix(in srgb, var(--navy) 28%, transparent);
    color: var(--navy);
}

.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-md);
    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-family: var(--fonte-titulo);
    font-size: var(--texto-md);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

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

/* Tabela encostada nas bordas do painel: so os cantos de baixo seguem o raio do painel (menos a borda de 1px). */
.painel__corpo > .tabela {
    margin: calc(var(--espaco-4) * -1) calc(var(--espaco-5) * -1) calc(var(--espaco-5) * -1);
    border: 0;
    border-radius: 0 0 calc(var(--raio-md) - 1px) calc(var(--raio-md) - 1px);
    box-shadow: none;
}

/* Sem moldura dentro de moldura: filtros e tabelas dentro do corpo do painel nao repetem borda/sombra. */
.painel__corpo .filtros {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.painel__corpo .tabela {
    border: 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 --- */
/* O filete da lista e um box-shadow inset (e nao border) para o sublinhado da aba ativa sobrepor o filete
   sem depender de margem negativa, que o overflow da lista recortaria. */
.abas__lista {
    display: flex;
    gap: var(--espaco-1);
    overflow-x: auto;
    box-shadow: inset 0 -1px 0 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);
    padding: 0 var(--espaco-4);
    border: 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(35, 44, 139, 0.05);
    color: var(--tinta);
}

.abas__aba:active {
    background-color: rgba(35, 44, 139, 0.09);
}

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

.abas__aba--ativa,
.abas__aba--ativa:hover {
    background: transparent;
    color: var(--navy);
}

.abas__aba--ativa::after {
    content: "";
    position: absolute;
    left: var(--espaco-2);
    right: var(--espaco-2);
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background-color: var(--navy);
}

.abas__aba:disabled {
    cursor: not-allowed;
    color: #9AA0BE;
    background: transparent;
}

.abas__contador {
    min-width: 1.5em;
    padding: 1px 7px;
    border-radius: var(--raio-pilula);
    background-color: var(--superficie-realce);
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    text-align: center;
}

.abas__aba--ativa .abas__contador {
    background-color: var(--navy-tint);
    color: var(--navy);
}

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

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

/* ----------------------------------------------------------------- aviso --- */
.aviso {
    --aviso-tinta: var(--estado-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) 40%, #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(--estado-ativo);
}

.aviso--sucesso {
    --aviso-tinta: var(--estado-ok);
}

.aviso--alerta {
    --aviso-tinta: var(--estado-espera);
}

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

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

.aviso--sucesso .aviso__icone {
    color: var(--estado-ok-texto);
}

.aviso--alerta .aviso__icone {
    color: var(--estado-espera-texto);
}

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

.aviso__titulo {
    font-weight: 700;
    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(35, 44, 139, 0.08);
    color: var(--tinta);
}

.aviso__fechar:active,
.toast__fechar:active {
    background-color: rgba(35, 44, 139, 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 {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--espaco-1);
    border-radius: var(--raio-pilula);
    background-color: var(--navy-tint);
    color: var(--navy);
}

.vazio__icone .icone {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: baseline;
}

.vazio__titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-base);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.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: color-mix(in srgb, var(--navy) 8%, #ffffff);
    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(--estado-ativo);
    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) 40%, #ffffff);
    border-radius: var(--raio);
    background-color: color-mix(in srgb, var(--toast-tinta) 7%, #ffffff);
    box-shadow: var(--sombra-2);
    pointer-events: auto;
}

.toast--sucesso {
    --toast-tinta: var(--estado-ok-texto);
}

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

.toast--alerta {
    --toast-tinta: var(--estado-espera-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(--fundo);
}

.acesso__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-4);
    width: min(100%, 400px);
}

.acesso__robo {
    flex: none;
    width: auto;
    height: 72px;
}

.acesso__marca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}

.acesso__marca-nome {
    color: var(--navy-profundo);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Fundo claro: o "IA" usa --lime-deep (texto verde); --lime so serve sobre o trilho navy. */
.acesso__marca-ia {
    color: var(--lime-deep);
}

.acesso__marca-produto {
    color: var(--tinta-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
}

.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-radius: var(--raio-lg);
    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(--perigo);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
    color: var(--tinta);
    font-weight: 600;
}

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

#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(35, 44, 139, 0.08);
    color: var(--tinta);
}

/* ------------------------------------------------------------ responsivo --- */
/* Abaixo de 1280px a origem do usuario ("Master Sele"...) sai da barra: o espaco fica para o nome e a busca. */
@media (max-width: 1279.98px) {
    .barra__usuario-origem {
        display: none;
    }
}

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

    /* A barra inteira e que fica sticky: topo e navegacao voltam ao fluxo normal. */
    .trilho__topo {
        position: static;
    }

    /* Barra superior no celular/tablet: logo compacto (robo menor). */
    .trilho__robo {
        height: 28px;
    }

    .trilho__marca-nome {
        font-size: var(--texto-base);
    }

    .trilho__alternar {
        display: inline-flex;
    }

    .trilho__nav {
        display: none;
        position: static;
        max-height: calc(100dvh - var(--barra-altura));
        overflow-y: auto;
        padding-top: var(--espaco-3);
        border-bottom: 1px solid rgba(221, 225, 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) {
    /* Alvo de toque de 36px nos controles pequenos (botao, campo de filtro, paginacao, fechar). */
    :root {
        --controle-altura-pequeno: 36px;
    }

    /* Barra numa linha so: o nome do usuario sai (fica o botao Sair, que tem texto) e a busca cede largura
       (200px de base; abaixo de ~375px a barra volta a quebrar em duas linhas). */
    .barra__usuario-nome {
        display: none;
    }

    .barra__busca {
        flex-basis: 200px;
    }

    .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;
        justify-items: start;
        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;
        white-space: normal;
    }

    .tabela__grade td .tabular,
    .tabela__grade td a.mono {
        white-space: normal;
    }

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

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