/* ==========================================================================
   AudiTech — tema do portal
   Tokens próprios sobre o Bootstrap 5.3. O tema escuro usa o data-bs-theme
   nativo do Bootstrap (aplicado no <html> pelo script do index.html), então os
   componentes acompanham sozinhos; aqui só redefinimos as variáveis.
   Accent DodgerBlue (#1E90FF) — o mesmo do desktop Avalonia.
   ========================================================================== */

/* --- Tokens: tema claro (default) ---------------------------------------- */
:root,
[data-bs-theme="light"] {
    --at-accent: #1E90FF;
    /* O MESMO valor em canais soltos, para o que precisa de alfa: `rgba()` não aceita hexadecimal, e
       sem este token o anel de foco e o realce de não-lida acabam com o DodgerBlue escrito à mão —
       ou, pior, com o azul do Bootstrap, que foi o que aconteceu (V6). Ver `--at-link-rgb`, que nasceu
       do mesmo tropeço no V4: cor e canais andam JUNTOS. */
    --at-accent-rgb: 30, 144, 255;
    --at-accent-hover: #0b74d4;
    --at-accent-contrast: #ffffff;
    /* Preenchimento sólido: o DodgerBlue puro com texto branco dá só 3.2:1,
       reprovado no WCAG AA. No tema claro o fill escurece (4.8:1); o accent
       segue DodgerBlue em bordas, foco e realces, preservando a identidade. */
    --at-accent-solid: #0b6fd4;
    --at-accent-solid-hover: #0a5fb5;
    --at-link: #0b6fd4;
    /* O MESMO valor de `--at-link`, em canais soltos. O Bootstrap 5.3 pinta o link por
       `rgba(var(--bs-link-color-rgb), …)`, que não aceita hexadecimal — sem este token o tema escuro
       herdava os canais do claro (ver o bloco escuro abaixo). */
    --at-link-rgb: 11, 111, 212;

    --at-surface: #ffffff;
    --at-surface-sunken: #f4f6f9;
    --at-border: #dfe3e8;
    --at-text: #1b2733;
    --at-text-muted: #5c6b7a;

    --at-shadow: 0 1px 2px rgba(16, 30, 48, .06), 0 2px 8px rgba(16, 30, 48, .05);
    --at-radius: .5rem;

    /* Tokens de resultado próprios, e não o `.text-success` do Bootstrap: aquele verde passa no claro
   (4,53:1) e cai para 3,78:1 sobre a superfície escura. */
    --at-ok: #15803d;
    --at-fail: #b91c1c;

    /* O par de nível para superfície ESCURA, com nome próprio: em tema escuro ele É o --at-warn/--at-fail,
   e no bloco de terminal vale sempre, porque ali o fundo é escuro nos dois temas. */
    --at-warn-escuro: #fbbf24;
    --at-fail-escuro: #f87171;
    /* O amarelo do Bootstrap (#ffc107) é ilegível sobre fundo claro. Mesmo tratamento do par acima:
       escurece no tema claro, clareia no escuro. */
    --at-warn: #a16207;

    color-scheme: light;
}

/* --- Tokens: tema escuro -------------------------------------------------- */
[data-bs-theme="dark"] {
    --at-accent: #1E90FF;
    --at-accent-rgb: 30, 144, 255;
    --at-accent-hover: #4aa8ff;
    --at-accent-contrast: #0b1119;
    /* No escuro o fill pode ser o DodgerBlue cheio: com texto escuro dá 5.9:1. */
    --at-accent-solid: #1E90FF;
    --at-accent-solid-hover: #4aa8ff;
    --at-link: #6cb8ff;
    /* ⚠️ Este token ESTAVA FALTANDO, e o link do tema escuro saía no azul do claro: 3,73:1 sobre a
       superfície escura, reprovado (medido no V4, 2026-08-20). O `--at-link` já trocava certo — e não
       adiantava nada, porque quem pinta o link é a versão em canais. Trocar um dos dois sem o outro é
       o defeito; eles andam juntos. */
    --at-link-rgb: 108, 184, 255;

    --at-surface: #161c24;
    --at-surface-sunken: #0f141a;
    --at-border: #2a333f;
    --at-text: #e6edf3;
    --at-text-muted: #98a5b3;

    --at-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);

    /* No escuro o par inverte: tons claros, que é onde o contraste vive. */
    --at-ok: #4ade80;
    --at-fail: var(--at-fail-escuro);
    --at-warn: var(--at-warn-escuro);

    color-scheme: dark;
}

/* A chrome lateral é escura nos dois temas — é a "marca" do portal. */
:root {
    --at-rail: #111823;
    --at-rail-text: #b9c4d0;
    --at-rail-text-strong: #ffffff;
    --at-rail-hover: rgba(255, 255, 255, .07);

    /* Altura dos DOIS rodapés — a assinatura no conteúdo e a versão no pé da coluna lateral. Eles
       ficam lado a lado na base da tela, então os filetes de topo precisam cair na MESMA linha.
       Antes cada um derivava a própria altura do seu padding e do seu tamanho de fonte: bastavam
       .55rem contra .5rem para dar 2px de diferença — invisível no código, visível na tela. Com uma
       altura só, o alinhamento passa a ser estrutural em vez de coincidência. */
    --at-footer-h: 2rem;

    /* Larguras máximas do conteúdo, em degraus nomeados. Antes cada bloco escolhia a sua em `style=`,
   com seis valores diferentes para o mesmo papel e tabelas sem limite nenhum — numa tela larga a
   linha de texto passava dos 120 caracteres. Escolha o TIPO do bloco; ver docs/UI-WEB.md §1. */
    --at-w-form: 40rem;   /* 640 — cartão de formulário e de detalhe */
    --at-w-read: 44rem;   /* 704 — texto corrido e grades de leitura */
    --at-w-list: 56rem;   /* 896 — tabelas e listas densas */
    --at-w-page: 75rem;   /* 1200 — teto da coluna inteira (MainLayout) */

    /* Os mesmos dois degraus para CONTROLES soltos, que tinham quatro valores para o mesmo papel
       (240, 256, 416 e 420 px — os dois últimos indistinguíveis a olho). */
    --at-w-field: 26rem;      /* 416 — campo ou grupo de uma linha */
    --at-w-field-sm: 16rem;   /* 256 — seletor curto: tema, antecedência */
}

/* --- Ponte para o Bootstrap ---------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: var(--at-accent);
    --bs-primary-rgb: var(--at-accent-rgb);
    --bs-link-color: var(--at-link);
    --bs-link-color-rgb: var(--at-link-rgb);
    --bs-link-hover-color: var(--at-accent-hover);
    --bs-body-bg: var(--at-surface-sunken);
    --bs-body-color: var(--at-text);
    --bs-secondary-color: var(--at-text-muted);
    --bs-border-color: var(--at-border);
    --bs-border-radius: var(--at-radius);
    --bs-emphasis-color: var(--at-text);
}

/* --- Base ---------------------------------------------------------------- */
html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--at-surface-sunken);
    color: var(--at-text);
}

/* O PISO da escala. Sem ele a página encolhia sem limite: nada transbordava, mas o layout se
   esmagava em silêncio. Medido a 180 px. 320 px é a largura do menor aparelho em uso. */
body {
    min-width: 320px;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--at-text);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

h1:focus { outline: none; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

code { color: #c02d76; }
[data-bs-theme="dark"] code { color: #ff8ac0; }

/* Assinatura da marca: o nome no texto padrão e só o sufixo em DodgerBlue. Global, e não scoped,
   porque aparece em três lugares — copiada uma terceira vez, a próxima mudança deixaria uma para trás. */
.brand-version { color: var(--at-accent); }

/* --- Botão-ícone da barra (sino, atualizar, tema) -------------------------- */
/* Global, e não scoped: os três vivem lado a lado e o estilo estava copiado em três arquivos — a
   correção de alvo de toque abaixo teria de ser feita três vezes (R13). */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    background-color: transparent;
    color: var(--at-text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.icon-button:hover {
    color: var(--at-accent);
    border-color: var(--at-accent);
}

.icon-button:focus-visible {
    outline: none;
    border-color: var(--at-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--at-accent-rgb), .3);
}


/* Variante para ícone DENTRO de um painel. Menor que a caixa da barra do topo (2,25rem), que ali
   encosta nas bordas — e sem borda, porque o painel já delimita. */
.icon-button.icon-sm {
    width: 2.15rem;
    height: 2.15rem;
    border-color: transparent;
}

.icon-button.icon-sm svg {
    width: 1.2rem;
    height: 1.2rem;
}

.icon-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dedo em vez de mouse: 36px é confortável com cursor e pequeno demais para toque (mínimo de 44px
   das diretrizes da Apple). `pointer: coarse` cresce só onde o apontador é impreciso, sem inchar a
   barra no desktop. */
@media (pointer: coarse) {
    .icon-button {
        width: 2.75rem;
        height: 2.75rem;
    }

    .navbar-toggler {
        padding: .6rem .75rem;
    }
}

/* --- Botões --------------------------------------------------------------- */
.btn { border-radius: var(--at-radius); font-weight: 500; }

/* Botão que é <a> não sublinha no hover. A causa é a nossa própria regra `a:hover`: ela tem
   especificidade (0,1,1) e ganhava de `.btn` (0,1,0). */
a.btn:hover,
a.btn:focus,
a.navbar-brand:hover,
a.navbar-brand:focus { text-decoration: none; }

/* Botão secundário TONAL: preenchimento leve permanente, no lugar da borda solta.
   O outline puro se apoia no preenchimento do hover para parecer acionável — e em tela de toque esse
   hover não existe. Parado, ele lê como rótulo. Com um tom próprio ele já parece botão sem depender
   de nada, e continua abaixo do sólido, que é da ação principal.
   Também conserta o contraste: o cinza do Bootstrap dava 3,94:1 no tema escuro, reprovado. */
.btn-outline-secondary {
    --bs-btn-color: var(--at-text);
    --bs-btn-bg: var(--at-surface);
    --bs-btn-border-color: var(--at-border);
    --bs-btn-hover-color: var(--at-text);
    --bs-btn-hover-bg: var(--at-surface-sunken);
    --bs-btn-hover-border-color: var(--at-text-muted);
    --bs-btn-active-color: var(--at-text);
    --bs-btn-active-bg: var(--at-surface-sunken);
    --bs-btn-active-border-color: var(--at-text-muted);
    --bs-btn-disabled-color: var(--at-text-muted);
    --bs-btn-disabled-bg: var(--at-surface);
    --bs-btn-disabled-border-color: var(--at-border);
}

.btn-primary {
    --bs-btn-bg: var(--at-accent-solid);
    --bs-btn-border-color: var(--at-accent-solid);
    --bs-btn-color: var(--at-accent-contrast);
    --bs-btn-hover-bg: var(--at-accent-solid-hover);
    --bs-btn-hover-border-color: var(--at-accent-solid-hover);
    --bs-btn-hover-color: var(--at-accent-contrast);
    --bs-btn-active-bg: var(--at-accent-solid-hover);
    --bs-btn-active-border-color: var(--at-accent-solid-hover);
    --bs-btn-active-color: var(--at-accent-contrast);
    --bs-btn-disabled-bg: var(--at-accent-solid);
    --bs-btn-disabled-border-color: var(--at-accent-solid);
    --bs-btn-disabled-color: var(--at-accent-contrast);
}

/* As demais variantes outline, tonais pelo mesmo motivo do secundário: sem hover, a borda sozinha
   não diz que aquilo é acionável. O preenchimento é 12% da cor da variante misturada à superfície —
   basta para o olho registrar a área sem competir com a ação primária. */
.btn-outline-primary {
    --bs-btn-color: color-mix(in srgb, var(--at-link) 85%, var(--at-text));
    --bs-btn-bg: color-mix(in srgb, var(--at-accent) 12%, var(--at-surface));
    --bs-btn-border-color: color-mix(in srgb, var(--at-accent) 40%, var(--at-surface));
    --bs-btn-hover-bg: var(--at-accent-solid);
    --bs-btn-hover-border-color: var(--at-accent-solid);
    --bs-btn-hover-color: var(--at-accent-contrast);
    --bs-btn-active-bg: var(--at-accent-solid-hover);
    --bs-btn-active-border-color: var(--at-accent-solid-hover);
    --bs-btn-active-color: var(--at-accent-contrast);
}

.btn-outline-danger {
    --bs-btn-color: color-mix(in srgb, var(--at-fail) 85%, var(--at-text));
    --bs-btn-bg: color-mix(in srgb, var(--at-fail) 12%, var(--at-surface));
    --bs-btn-border-color: color-mix(in srgb, var(--at-fail) 40%, var(--at-surface));
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--at-fail);
    --bs-btn-hover-border-color: var(--at-fail);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--at-fail);
    --bs-btn-active-border-color: var(--at-fail);
}

.btn-outline-success {
    --bs-btn-color: color-mix(in srgb, var(--at-ok) 85%, var(--at-text));
    --bs-btn-bg: color-mix(in srgb, var(--at-ok) 12%, var(--at-surface));
    --bs-btn-border-color: color-mix(in srgb, var(--at-ok) 40%, var(--at-surface));
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--at-ok);
    --bs-btn-hover-border-color: var(--at-ok);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--at-ok);
    --bs-btn-active-border-color: var(--at-ok);
}

.btn-outline-warning {
    --bs-btn-color: color-mix(in srgb, var(--at-warn) 85%, var(--at-text));
    --bs-btn-bg: color-mix(in srgb, var(--at-warn) 12%, var(--at-surface));
    --bs-btn-border-color: color-mix(in srgb, var(--at-warn) 40%, var(--at-surface));
    --bs-btn-hover-color: #1b2733;
    --bs-btn-hover-bg: var(--at-warn);
    --bs-btn-hover-border-color: var(--at-warn);
    --bs-btn-active-color: #1b2733;
    --bs-btn-active-bg: var(--at-warn);
    --bs-btn-active-border-color: var(--at-warn);
}

/* Onde NÃO existe mouse, o estado de hover não deve existir. Sem isto o navegador mantém o :hover
   depois do toque, e o botão fica preenchido até você tocar em outro lugar — parecendo selecionado.
   Vale para TODOS os botões, não só o tonal: o problema é do apontador, não do estilo.
   O :active continua dando o retorno do toque.

   Vem DEPOIS de todas as variantes de propósito: o seletor é `.btn`, mesma especificidade de
   `.btn-primary` e companhia, então quem vence é a ordem. Colocado antes, ele não alcançava nenhuma
   variante — medido: o primário continuava trocando de cor no hover. */
@media (hover: none) {
    .btn {
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--bs-btn-bg);
        --bs-btn-hover-border-color: var(--bs-btn-border-color);
    }
}

/* Alvo de toque dos botões pequenos. O .btn-sm do Bootstrap dá 31 px de altura — dedo erra. Mesmo
   tratamento já aplicado aos ícones da barra: cresce só onde o apontador é impreciso, e no desktop
   o botão continua compacto.
   O inline-flex é necessário: só com min-height o rótulo ficaria colado no topo, porque a altura
   extra viria depois do texto. */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--at-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--at-accent-rgb), .3);
}

/* --- Larguras: as três classes que aplicam a escala ----------------------- */
/* Uma classe por tipo de bloco, em vez de um `style="max-width: …"` por elemento. O ganho não é de
   escrita: é que a próxima página herda a decisão em vez de inventar mais um número.

   `.larg-lista` vai no ENVOLTÓRIO `.table-responsive`, nunca na `<table>` — é ele que precisa parar,
   para a tabela rolar dentro do próprio bloco quando não couber (mesma razão da R13). */
.larg-form { max-width: var(--at-w-form); }
.larg-texto { max-width: var(--at-w-read); }
.larg-lista { max-width: var(--at-w-list); }
.larg-campo { max-width: var(--at-w-field); }
.larg-campo-sm { max-width: var(--at-w-field-sm); }

/* Grade de atalhos da Administração e do Avançado. `auto-fit` + `minmax`: no desktop enche a largura em
   colunas, no celular vira uma coluna só, sem media query. Mora aqui, e não no CSS isolado de uma página,
   desde que são duas páginas a usá-la. */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
    max-width: var(--at-w-read);
}

.admin-grid .btn {
    padding-block: .75rem;
}

/* --- Superfícies: cards, tabelas, formulários ----------------------------- */
.card {
    background-color: var(--at-surface);
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--at-border);
    font-weight: 600;
}

.table {
    --bs-table-bg: var(--at-surface);
    --bs-table-color: var(--at-text);
    --bs-table-border-color: var(--at-border);
    border-radius: var(--at-radius);
    overflow: hidden;
    vertical-align: middle;
}

.table > thead th {
    background-color: var(--at-surface-sunken);
    color: var(--at-text-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--at-border);
    white-space: nowrap;
}

.table > tbody td { border-color: var(--at-border); }

/* Tabelas largas rolam dentro de si, nunca empurram a página. */
.table-responsive { overflow-x: auto; }

.form-control, .form-select {
    background-color: var(--at-surface);
    border-color: var(--at-border);
    color: var(--at-text);
    border-radius: var(--at-radius);
}

.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }

.form-control::placeholder { color: var(--at-text-muted); opacity: .8; }

.badge { font-weight: 600; letter-spacing: .02em; }

/* Pílula no tom de acento. O `bg-primary` do Bootstrap não serve: ele pinta o DodgerBlue cheio com
   texto branco, que dá 3,24:1 — reprovado no AA. Aqui o fundo é tingido e o texto fica no tom escuro
   do próprio acento. */
.badge-acento {
    background: var(--at-accent-solid);
    color: var(--at-accent-contrast);
}

.list-group-item {
    background-color: var(--at-surface);
    border-color: var(--at-border);
    color: var(--at-text);
}

/* O item SELECIONADO vinha no `#0d6efd` cru do Bootstrap — um azul que não é de nenhum token daqui, e
   que com texto branco dava 4,50:1: passa no WCAG AA por dois centésimos, o que não é margem nenhuma.
   O par `--at-accent-solid` / `--at-accent-contrast` é o mesmo do `.badge-acento`, e os dois valores
   andam JUNTOS: mapear só o fundo deixaria o texto branco sobre o DodgerBlue cheio no tema escuro —
   3,24:1, pior do que estava.

   ⚠️ No `.list-group`, e NÃO na ponte do `:root` lá em cima: o Bootstrap 5.3 declara os tokens de cada
   componente no PRÓPRIO componente, e essa declaração é mais específica que a da raiz. Redefinido no
   `:root`, o valor é lido e descartado — a tela não muda e parece que a regra não existe. */
.list-group {
    --bs-list-group-active-color: var(--at-accent-contrast);
    --bs-list-group-active-bg: var(--at-accent-solid);
    --bs-list-group-active-border-color: var(--at-accent-solid);
}

.modal-content, .dropdown-menu, .offcanvas {
    background-color: var(--at-surface);
    border-color: var(--at-border);
    color: var(--at-text);
}

.text-muted { color: var(--at-text-muted) !important; }

hr { border-color: var(--at-border); opacity: 1; }

/* --- Linha de tabela clicável -------------------------------------------------
   O alvo de toque passa a ser a LINHA inteira: com o dedo, acertar só o texto era a parte difícil.
   O cursor e o realce no hover dizem que ela é clicável. */
.linha-clicavel {
    cursor: pointer;
}

.linha-clicavel a {
    color: inherit;
    text-decoration: none;
}

/* --- Lista de pares rótulo/valor ----------------------------------------------
   Grade de duas colunas em vez do `row` do Bootstrap: filete entre as linhas, rótulo alinhado e
   valor livre para quebrar. */
.detalhes {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    margin: 0;
}

.detalhes dt {
    font-weight: 500;
    color: var(--at-text-muted);
    padding: .45rem 0;
    border-top: 1px solid var(--at-border);
}

.detalhes dd {
    margin: 0;
    padding: .45rem 0 .45rem 1rem;
    border-top: 1px solid var(--at-border);
    min-width: 0;
    /* A chave única é um GUID de 36 caracteres: sem isto ela estica a coluna e empurra o cartão. */
    overflow-wrap: anywhere;
}

.detalhes dt:first-of-type,
.detalhes dd:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* A Nota é digitada num `textarea`: um texto de duas frases escrito em duas linhas sairia numa só,
   colado, se o `dd` não preservasse a quebra. `pre-wrap` guarda a quebra e continua quebrando sozinho
   quando a linha é longa. */
.detalhes dd.nota {
    white-space: pre-wrap;
}

/* Em tela estreita as duas colunas não cabem — o rótulo passa a ficar ACIMA do valor, e o filete
   separa pares, não células. */
@media (max-width: 480px) {
    .detalhes {
        grid-template-columns: 1fr;
    }

    .detalhes dt {
        padding-bottom: 0;
        font-size: .8rem;
    }

    .detalhes dd {
        padding: .15rem 0 .5rem;
        border-top: 0;
    }

    .detalhes dd:first-of-type {
        padding-top: .15rem;
    }
}

/* --- Validação ------------------------------------------------------------ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid var(--bs-danger); }
.validation-message { color: var(--bs-danger); font-size: .875rem; }

/* Vermelho na falha. O verde do sucesso saiu: a célula fica vazia quando dá certo. */
.detail-fail { color: var(--at-fail); }

/* Dentro de uma .table o Bootstrap pinta CADA célula com `.table>:not(caption)>*>*`, que tem
   especificidade 0,1,1 — mais que uma classe sozinha (0,1,0). Sem este seletor mais específico a cor
   acima é simplesmente ignorada na tabela, que é o único lugar onde ela é usada. (O vermelho anterior
   funcionava por acidente: `.text-danger` é utilitário do Bootstrap e carrega `!important`.) */
.table td.detail-fail,
.table th.detail-fail { color: var(--at-fail); }

/* --- Erro do Blazor ------------------------------------------------------- */
#blazor-error-ui {
    background: #fff3cd;
    color: #533f03;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

[data-bs-theme="dark"] #blazor-error-ui { background: #4a3c0a; color: #ffe69c; }

/* O link herdava a cor de link padrão sobre o fundo âmbar — 2,18:1, reprovado (R13). Herda a cor do
   próprio aviso, que é a que foi escolhida para contrastar com esse fundo, e mantém o sublinhado
   para continuar lendo como link. */
#blazor-error-ui a {
    color: inherit;
    text-decoration: underline;
}

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

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: #fff;
    border-radius: var(--at-radius);
}

.blazor-error-boundary::after { content: "Ocorreu um erro."; }

/* --- Splash de carregamento do WASM --------------------------------------- */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--at-border);
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--at-accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: var(--at-text-muted);
    inset: calc(20vh + 3.25rem) 0 auto .2rem;
}

.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregando"); }

/* --- Caixa de busca das listagens ---------------------------------------- */
/* Larga o suficiente para um nome, e limitada para não virar um campo de página inteira no desktop.
   No celular ocupa a largura toda. É a origem do degrau `--at-w-field`. */
.search-box { max-width: var(--at-w-field); }

/* --- Chave única --------------------------------------------------------- */
/* Identificador de 36 caracteres: numa listagem consome quase metade da linha e quase nunca é o que
   se procura. Some em tela estreita, onde ele aparece só de passagem. */
@media (max-width: 640.98px) {
    .chave-unica { display: none; }
}


/* --- Movimento reduzido, uma regra global ------------------------------------
   Quem liga "reduzir movimento" no sistema pede isso da página inteira. O Bootstrap não cobre as
   nossas transições — a conferência achou duas de cinco cobertas —, então a regra é nossa e vale
   para tudo de uma vez. Ver docs/UI-WEB.md §10. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}