/* ==========================================================================
   PanelaControle - estilos do sistema

   Direção visual: painel de instrumentos de planta industrial. O sistema
   registra medições auditáveis, então a interface é densa, calma e precisa -
   parecida com o painel de um equipamento, não com um site.

   Tudo aqui é CSS puro em cima do Bootstrap que já vem no projeto. Não há
   biblioteca de UI nova nem fonte baixada da internet: um sistema de planta
   precisa abrir igual mesmo sem rede.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes embarcadas (ver wwwroot/fonts/LEIA-ME.md)

   Servidas do próprio wwwroot, nunca de CDN: um sistema de planta precisa
   abrir igual quando a internet da usina oscilar. Todas sob SIL OFL 1.1,
   que permite embarcar em software fechado - fonte do Windows não permite.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    /* swap: o texto aparece na hora com a fonte do sistema e troca quando a
       Archivo carrega. Nunca deixa a tela em branco esperando fonte. */
    font-display: swap;
    src: url('fonts/archivo-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/archivo-800.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/plexmono-500.woff2') format('woff2');
}

:root {
    /* Aço: os neutros são frios (puxados pro azul), não bege - é a cor do
       material com que o sistema trabalha. */
    --aco-950: #0d1117;  /* chapa do cabeçalho - mais escuro que a lateral */
    --aco-900: #16191d;  /* texto principal */
    --aco-700: #2b3138;  /* barra lateral */
    --aco-600: #4a5159;  /* texto secundário */
    --aco-400: #838b95;  /* texto de apoio, eixos */
    --aco-300: #c3c9d0;  /* bordas fortes */
    --aco-200: #dde1e6;  /* bordas, linhas de tabela */
    --aco-100: #eef1f4;  /* trilhos de barra de progresso */
    --aco-50:  #f5f7f9;  /* plano de fundo da página */
    --superficie: #ffffff;

    /* Azul de forno: a cor de ação do sistema. Mais saturado que a versão
       anterior (#1a4f8a) porque agora ele carrega o cabeçalho - precisa ter
       presença sem recorrer ao laranja, que está reservado. */
    --primaria: #155ec4;
    --primaria-escura: #0f4796;
    --primaria-clara: #e7eefb;

    /* Tipografia */
    --fonte-display: 'Archivo', system-ui, "Segoe UI", sans-serif;
    --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-mostrador: 'IBM Plex Mono', ui-monospace, "Cascadia Mono", monospace;

    /* Altura da barra superior - usada também pelo layout para não deixar
       a lateral passar por baixo dela. */
    --altura-topo: 60px;

    /* Metal quente: RESERVADA para atenção/limite. Se usar essa cor em
       lugar decorativo, ela perde o poder de alertar. */
    --atencao: #c2410c;
    --atencao-clara: #fdf0e9;

    --ok: #1a7f4b;
    --ok-clara: #e8f4ee;
    --critico: #b42318;
    --critico-clara: #fdeceb;

    --raio: 6px;
    --sombra-card: 0 1px 2px rgba(22, 25, 29, 0.06),
                   0 1px 3px rgba(22, 25, 29, 0.04);
}

/* --------------------------------------------------------------------------
   Tema escuro — três estados, sem uma linha de JavaScript

   1. O :root acima  = tema claro, que é o padrão escrito
   2. O @media       = segue o sistema operacional quando NÃO houve escolha
   3. O [data-tema]  = a escolha da pessoa, que vence nos dois sentidos

   O guarda :not([data-tema="claro"]) no bloco do media query é o que permite
   escolher CLARO num computador configurado em escuro. Sem ele, a escolha
   só funcionaria num sentido.

   O atributo data-tema é escrito pelo SERVIDOR em App.razor, a partir de um
   cookie. Por isso a página já nasce no tema certo - não existe a piscada
   de branco antes de escurecer, que acontece quando o tema é aplicado por
   JavaScript depois do carregamento.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;

        --aco-950: #06080a;
        --aco-900: #e8ecf0;  /* texto principal - agora claro */
        --aco-700: #161a20;  /* barra lateral */
        --aco-600: #b0b8c1;  /* texto secundário */
        --aco-400: #7d858f;  /* texto de apoio */
        --aco-300: #3a424b;  /* bordas fortes */
        --aco-200: #2a3138;  /* bordas, linhas de tabela */
        --aco-100: #222830;  /* trilhos de barra de progresso */
        --aco-50:  #0f1216;  /* plano de fundo da página */
        --superficie: #171b21;

        /* As cores de acento CLAREIAM no escuro. #155ec4 sobre fundo escuro
           não alcança contraste de leitura - o mesmo vale para o verde, o
           laranja e o vermelho. */
        --primaria: #5b9cf0;
        --primaria-escura: #7db0f5;
        --primaria-clara: #16233a;

        --atencao: #f08c4a;
        --atencao-clara: #33210f;
        --ok: #3fbe7c;
        --ok-clara: #10281c;
        --critico: #f2706a;
        --critico-clara: #331619;

        --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.4),
                       0 1px 3px rgba(0, 0, 0, 0.3);
    }
}

:root[data-tema="escuro"] {
    color-scheme: dark;

    --aco-950: #06080a;
    --aco-900: #e8ecf0;
    --aco-700: #161a20;
    --aco-600: #b0b8c1;
    --aco-400: #7d858f;
    --aco-300: #3a424b;
    --aco-200: #2a3138;
    --aco-100: #222830;
    --aco-50:  #0f1216;
    --superficie: #171b21;

    --primaria: #5b9cf0;
    --primaria-escura: #7db0f5;
    --primaria-clara: #16233a;

    --atencao: #f08c4a;
    --atencao-clara: #33210f;
    --ok: #3fbe7c;
    --ok-clara: #10281c;
    --critico: #f2706a;
    --critico-clara: #331619;

    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.4),
                   0 1px 3px rgba(0, 0, 0, 0.3);
}

html, body {
    font-family: var(--fonte-texto);
    background-color: var(--aco-50);
    color: var(--aco-900);
    font-size: 15px;
}

/* Todo número deste sistema é medição, e mostrador de painel de controle é
   monoespaçado. Contadores, percentuais, datas em tabela e hashes usam a
   mono - leem como leitura de instrumento, não como texto corrido. */
.mostrador,
.metrica-valor,
.tabular,
table td .text-nowrap,
.badge {
    font-family: var(--fonte-mostrador);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

table {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

/* Título de página: o momento tipográfico do sistema.
   O salto de 2.6rem para 1.35rem (seção) e 0.95rem (corpo) é grande de
   propósito - a versão anterior tinha 1.45 contra 1.1, e a hierarquia
   simplesmente não se lia. */
h1 {
    font-family: var(--fonte-display);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 0;
}

h2, .h5 {
    font-family: var(--fonte-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Título de card continua pequeno: é rótulo de bloco, não título de tela.
   Se crescer, briga com o h1 e a hierarquia se perde de novo. */
h6, .h6 {
    font-family: var(--fonte-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Em tela estreita o título de página encolhe: 2.6rem quebraria "Panelas
   de aço" em três linhas num celular. */
@media (max-width: 575.98px) {
    h1 { font-size: 1.9rem; }
    h2, .h5 { font-size: 1.15rem; }
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--aco-200);
}

.page-subtitle {
    color: var(--aco-600);
    font-size: 0.9rem;
    margin: 0.35rem 0 0;
    max-width: 70ch;
}

/* Etiqueta de seção no vocabulário da planta: caixa alta, bem espaçada,
   como sinalização estampada em equipamento. */
.eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aco-400);
}

.form-text, .text-muted {
    color: var(--aco-600) !important;
    font-size: 0.85rem;
}

a { color: var(--primaria); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primaria-escura); }

/* --------------------------------------------------------------------------
   Barra superior — a assinatura do sistema

   Tratada como PLACA DE IDENTIFICAÇÃO DE EQUIPAMENTO: toda peça de planta
   tem uma chapa com o nome em letra condensada, caixa alta, gravada. É daí
   que vem a autoridade tipográfica daqui - e é impossível confundir com
   painel administrativo genérico.

   O filete azul embaixo é a linha gravada da chapa. O laranja continua
   fora: ele é reservado para alertar, e gastá-lo aqui apagaria a tela de
   Panelas.
   -------------------------------------------------------------------------- */

.topo-sistema {
    height: var(--altura-topo);
    background: var(--aco-950);
    border-bottom: 2px solid var(--primaria);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* O mark: o mesmo trapézio do ícone do app de campo, para os dois sistemas
   se reconhecerem como a mesma família. */
.topo-mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.topo-marca {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}

.topo-nome {
    font-family: var(--fonte-display);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #ffffff;
}

.topo-sub {
    font-family: var(--fonte-texto);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 3px;
}

/* Quem está usando, no canto oposto da chapa */
.topo-usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.82rem;
}

.topo-usuario-nome { color: rgba(255, 255, 255, 0.9); font-weight: 550; }
.topo-usuario-perfil {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.topo-usuario a { color: rgba(255, 255, 255, 0.65); text-decoration: none; }
.topo-usuario a:hover { color: #ffffff; text-decoration: underline; }

/* Botão de tema: o rótulo diz o DESTINO, não o estado atual - "Escuro"
   significa "clique para escurecer". Rótulo de estado confunde. */
.botao-tema {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 5px;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
}

.botao-tema:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.botao-tema:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
}

.botao-tema svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

@media (max-width: 575.98px) {
    /* No celular sobra o essencial: mark, nome e sair. */
    .topo-sub, .topo-usuario-perfil, .topo-usuario-nome { display: none; }
    .topo-sistema { padding: 0 0.85rem; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    background: var(--superficie);
    border: 1px solid var(--aco-200);
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
}

.card-body { padding: 1.15rem 1.25rem; }
.card-title { margin-bottom: 0.85rem; }

/* ASSINATURA DO SISTEMA - o "trilho de status".
   Uma faixa colorida na borda esquerda que codifica o estado. Vem da
   sinalização pintada em equipamento de planta, e faz trabalho de verdade:
   você percorre a coluna de cores pra achar o que precisa de atenção,
   sem ler texto nenhum. */
.rail {
    border-left: 3px solid var(--aco-300);
}

.rail-ok       { border-left-color: var(--ok); }
.rail-atencao  { border-left-color: var(--atencao); }
.rail-critico  { border-left-color: var(--critico); }
.rail-primaria { border-left-color: var(--primaria); }
.rail-neutro   { border-left-color: var(--aco-300); }

/* Cartão de indicador (os números do resumo) */
.metrica {
    background: var(--superficie);
    border: 1px solid var(--aco-200);
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    padding: 0.9rem 1rem;
    height: 100%;
}

.metrica-valor {
    font-size: 1.9rem;
    font-weight: 660;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.metrica-rotulo {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--aco-400);
    margin-top: 0.2rem;
}

.metrica-amostra {
    font-size: 0.68rem;
    color: var(--aco-400);
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Ranking de barra horizontal (Métricas: tempo por camada, motivo de
   afastamento) - CSS puro, sem SVG. É comprimento proporcional a um
   valor, não ângulo/fatia de um todo, então uma div com largura em %
   já resolve sem desenhar um gráfico novo.
   -------------------------------------------------------------------------- */

.ranking-linha {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.ranking-rotulo {
    flex: 0 0 auto;
    width: 40%;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-trilho {
    flex: 1 1 auto;
    display: block;
    background: var(--aco-100);
    border-radius: 4px;
    height: 0.9rem;
    overflow: hidden;
}

.ranking-preenchimento {
    display: block;
    background: var(--primaria);
    height: 100%;
    border-radius: 4px;
}

.ranking-valor {
    flex: 0 0 auto;
    width: 4.5rem;
    text-align: right;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--aco-400);
}

/* --------------------------------------------------------------------------
   Gráfico de barras verticais (ficha da panela: corridas por campanha) -
   CSS puro, mesmo espírito das barras de ranking acima. .linha-tempo-trilho
   precisa de altura definida em px para a barra dentro dela poder crescer
   em altura percentual - sem isso, um "height: X%" não tem referência.
   -------------------------------------------------------------------------- */

.linha-tempo-grafico {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.linha-tempo-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
}

.linha-tempo-valor {
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.linha-tempo-trilho {
    display: flex;
    align-items: flex-end;
    height: 100px;
    width: 100%;
}

.linha-tempo-barra {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.linha-tempo-data {
    font-size: 0.65rem;
    color: var(--aco-400);
    margin-top: 0.3rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Selos de status
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.3em 0.6em;
    border-radius: 4px;
}

/* Nunca só cor: o selo sempre carrega o texto do estado junto. */
.status-ativa      { background: var(--ok-clara); color: var(--ok); }
.status-manutencao { background: var(--primaria-clara); color: var(--primaria); }
.status-afastada   { background: var(--aco-100); color: var(--aco-600); }
.status-atencao    { background: var(--atencao-clara); color: var(--atencao); }
.status-critico    { background: var(--critico-clara); color: var(--critico); }

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */

.table { margin-bottom: 0; }

.table > thead > tr > th {
    font-size: 0.72rem;
    font-weight: 660;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--aco-400);
    border-bottom: 1px solid var(--aco-200);
    padding: 0.7rem 0.75rem;
    background: transparent;
}

.table > tbody > tr > td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--aco-100);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr:hover > * { background-color: var(--aco-50); }

/* --------------------------------------------------------------------------
   Formulários e botões
   -------------------------------------------------------------------------- */

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--aco-600);
    margin-bottom: 0.25rem;
}

.form-control, .form-select {
    border-color: var(--aco-300);
    border-radius: 5px;
    color: var(--aco-900);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.13);
}

.btn {
    border-radius: 5px;
    font-weight: 570;
    font-size: 0.88rem;
}

.btn-primary {
    background-color: var(--primaria);
    border-color: var(--primaria);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primaria-escura);
    border-color: var(--primaria-escura);
}

.btn-success { background-color: var(--ok); border-color: var(--ok); }
/* color-mix escurece o próprio token, então o hover acompanha o tema em
   vez de pular para um verde fixo do tema claro. */
.btn-success:hover, .btn-success:focus {
    background-color: color-mix(in srgb, var(--ok) 82%, black);
    border-color: color-mix(in srgb, var(--ok) 82%, black);
}

/* Foco visível de teclado em tudo que é interativo. */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Barras de progresso
   -------------------------------------------------------------------------- */

.progress {
    background-color: var(--aco-100);
    border-radius: 3px;
}

.progress-bar { background-color: var(--primaria); }
.progress-bar.bg-success { background-color: var(--ok) !important; }

/* --------------------------------------------------------------------------
   Alertas
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--raio);
    border: 1px solid transparent;
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
}

/* Texto e borda derivam do próprio token de cor, em vez de hex fixo:
   com hex claro, o texto do alerta ficava ilegível no tema escuro. */
.alert-danger  { background: var(--critico-clara); border-color: var(--critico); color: var(--critico); }
.alert-warning { background: var(--atencao-clara); border-color: var(--atencao); color: var(--atencao); }
.alert-success { background: var(--ok-clara);      border-color: var(--ok);      color: var(--ok); }
.alert-secondary { background: var(--aco-100); border-color: var(--aco-200); color: var(--aco-600); }

/* --------------------------------------------------------------------------
   Estado vazio - uma tela sem dados é um convite pra agir, não um erro.
   -------------------------------------------------------------------------- */

.empty-state {
    background: var(--superficie);
    border: 1px dashed var(--aco-300);
    border-radius: var(--raio);
    padding: 2rem 1.5rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Etapas da reforma (accordion)
   -------------------------------------------------------------------------- */

.etapa {
    background: var(--superficie);
    border: 1px solid var(--aco-200);
    border-left: 3px solid var(--aco-300);
    border-radius: 5px;
    margin-bottom: 0.4rem;
    padding: 0.75rem 1rem;
}

.etapa-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

/* Sem fundo próprio: o #fcfdfc de antes era quase branco e virava uma
   faixa clara gritante no tema escuro. O trilho verde já sinaliza. */
.etapa-concluida { border-left-color: var(--ok); }
.etapa-andamento { border-left-color: var(--primaria); }
.etapa-aberta { box-shadow: var(--sombra-card); }

.etapa-nome { font-weight: 570; }
.etapa-concluida .etapa-nome { color: var(--aco-600); font-weight: 500; }

/* Miniatura de foto */
.foto-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--aco-200);
    display: block;
}

/* --------------------------------------------------------------------------
   Telas de acesso (login, troca de senha)

   Fundo grafite igual ao da barra lateral: quem ainda não entrou vê a
   "sala de controle" fechada, e o cartão claro é a única porta.
   -------------------------------------------------------------------------- */

.pagina-acesso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-image: linear-gradient(180deg, #2b3138 0%, #1c2127 100%);
}

.cartao-acesso {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

.marca-acesso {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--aco-200);
}

/* Mesma chapa da barra superior, para quem entra reconhecer o sistema
   antes mesmo de logar. */
.marca-acesso-nome {
    font-family: var(--fonte-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.marca-acesso-sub {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aco-400);
    margin-top: 3px;
}

/* No celular o cartão ocupa a tela toda: o operador usa de luva, em campo. */
@media (max-width: 480px) {
    .pagina-acesso { padding: 0; align-items: stretch; }
    .cartao-acesso {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        padding: 1.75rem 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* A identificação de quem está logado saiu do rodapé da lateral e foi para
   a barra superior (.topo-usuario). Manter as duas seria repetir a mesma
   informação em dois lugares da mesma tela. */

/* --------------------------------------------------------------------------
   Erro do Blazor (mantido do template, só realinhado ao sistema)
   -------------------------------------------------------------------------- */

.validation-message, .invalid-feedback { color: var(--critico); font-size: 0.85rem; }
.invalid { outline: 1px solid var(--critico); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }

.blazor-error-boundary {
    background: var(--critico);
    padding: 1rem;
    color: white;
    border-radius: var(--raio);
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro nesta parte da tela.";
}

/* Quem prefere menos movimento não recebe transição nenhuma. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}