/* ===== 01-base.css — boilerplate do template, tokens de cor, temas e tipografia =====

   Até 09/08/2026 tudo isto era UM app.css de 3.683 linhas. A quebra em onze arquivos não muda
   uma declaração: é recorte contíguo, provado byte a byte (a concatenação na ordem dos nomes
   reproduz o arquivo antigo exatamente). O que ela compra é poder achar a regra e poder mexer
   em duas telas ao mesmo tempo sem um conflito de merge no mesmo arquivo de 3,6 mil linhas.

   TRÊS REGRAS, e a primeira é a única que quebra a tela se for ignorada:

   1. O NÚMERO NO NOME É A CASCATA. Os arquivos entram no index.html em ordem numérica, e CSS
      resolve empate de especificidade por ordem de chegada. Reordenar os <link>, ou renumerar
      um arquivo, muda qual regra vence — sem erro de compilação e sem teste vermelho, só a
      tela diferente. Arquivo novo entra no fim, com o número seguinte, e o teste
      CssLinksTests exige que a lista do index.html bata com a pasta.

   2. NÃO EXISTE CSS ISOLADO POR COMPONENTE NESTE PROJETO (nada de .razor.css). Não é omissão:
      as classes daqui são compartilhadas entre telas de propósito — .cliente-card veste seis
      listas, .btn-secondary veste botão e link. Isolamento por componente as duplicaria em
      cada dono, que é exatamente a duplicação que o projeto passou o mês desfazendo no C#.
      Ver docs/ui-padroes.md § CSS antes de propor o contrário.

   3. AS TRÊS PRIMEIRAS SEÇÕES ABAIXO SÃO DO FRAMEWORK, NÃO DO APP. As classes de validação
      (.valid.modified / .invalid / .validation-message), o #blazor-error-ui e o
      .loading-progress são escritos no DOM pelo Blazor e pelo index.html, não por markup
      nosso — não aparecem em varredura de classe morta. Não apagar por "ninguém usa". */

html, body {
    font-family: var(--font-body);
}

h1:focus {
    outline: none;
}

a {
    color: #0071c1;
}

/* Fallback do <Authorizing> do App.razor. Era `p-4` do Bootstrap, a última classe do framework viva
   no app — mesmo padding, agora sem depender de 232 KB para uma linha. */
.carregando-fallback {
    padding: 1.5rem;
}

/* As classes que o Blazor aplica sozinho no <input> de um <EditForm> (o EditContext escreve
   `modified valid` / `modified invalid` no DOM) — não aparecem em markup nenhum e por isso somem de
   qualquer varredura de classe morta. Não apagar por "ninguém usa". */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #212529; /* o color-scheme fixa o fundo claro; sem cor explícita, o texto herdava o do tema escuro */
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    /* Folga à direita para o 🗙 (posicionado absoluto) não cair por cima do texto no celular. */
    padding: 0.6rem 2.5rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    /* Recarregar / Relatar problema. Alvo de toque de 44px (WCAG 2.5.5) porque este aviso é lido de
       pé, com o celular na mão — é a tela em que errar o toque custa mais. */
    #blazor-error-ui .erro-acoes {
        display: inline-flex;
        gap: 1.25rem;
        margin-left: 0.5rem;
    }

        #blazor-error-ui .erro-acoes a {
            color: #0b3c8a; /* contraste AA sobre lightyellow */
            font-weight: 600;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }

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

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

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

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

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

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

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

code {
    color: #c02d76;
}

/* ===================== Camarada — shell mobile-first ===================== */
:root {
    --brand: #1E3A5F;
    --brand-dark: #132840;
    --brand-tint: #DCE4F0;
    --ink: #1C1B19;
    --ink-soft: #47443F;
    --muted: #78746C;
    --line: #E7E2D9;
    --bg: #FAF7F2;
    --card: #FFFFFF;
    --ok: #146C43;
    --ok-tint: #E3F1E9;
    --danger: #BE123C;
    --danger-tint: #FCE4E9;
    /* Âmbar escurecido de #B8790A para passar em AA (4,5:1) nos dois usos que ele tem: texto sobre
       --wait-tint (badges "Enviado", "Não sincronizada", "OS aberta", "Agendamento") e texto branco
       sobre ele (pílula de pendências do widget de conexão). Nos 3,22:1 antigos, justamente os
       rótulos de "precisa de você" eram os mais difíceis de ler no sol. Medidos: 5,25:1 sobre o
       tint, 5,93:1 com branco, 5,55:1 sobre o fundo da página. A variável não é redefinida por tema
       (só --brand é), então esta linha vale para os três. */
    --wait: #8A5A00;
    --wait-tint: #FBF0DD;

    /* O terracota do ícone do app, que NÃO acompanha o tema — mesmo valor do `--brand` do tema
       terracota, mas variável própria de propósito: são duas decisões diferentes que hoje batem por
       coincidência, e quem um dia acertar o tom do tema não deve mexer no ícone junto. É a mesma
       razão de o ícone continuar vermelho nos três temas (easter egg registrado no historico.md).
       Fica no `:root` e em nenhum bloco `[data-theme]` — redefini-lo lá é o que o desfaria. */
    --brand-icon: #A8402E;

    /* Placa do logotipo horizontal (<Logo>) — a ÚNICA peça da marca que acompanha o tema, e por uma
       regra própria: a placa é sempre o OPOSTO da superfície em que está. A regra não é invenção
       daqui, é a do desenho — o logotipo entregue para fundo claro tem placa azul marinho, e o de
       fundo escuro tem placa terracota. Aqui ela só se estende ao terceiro tema.

       Sem isso, o tema terracota pinta placa terracota sobre cabeçalho terracota e o logotipo
       desaparece — some a placa e some a inicial da palavra junto, sobrando "amarada" no cabeçalho.

       Não confundir com o --brand-icon logo acima, que é o ícone do APP e é fixo nos três temas de
       propósito (o easter egg). São duas variáveis porque são duas decisões: uma responde "que cor
       tem o app instalado", a outra responde "o que contrasta com o cabeçalho de agora". */
    --logo-placa: var(--brand-icon);
    --logo-c: #1E3A5F;

    /* Padrão de tijolo do cabeçalho — mesma amarração do ícone (fiada ímpar deslocada meio tijolo).
       SVG embutido e não gradiente: `repeating-linear-gradient` varia em UM eixo só, então ele só
       sabe produzir junta alinhada em toda fiada (assentamento empilhado). A defasada precisa de um
       ladrilho que saiba onde a fiada começa, e isso o gradiente não expressa.

       Desenha só a JUNTA, em preto translúcido — o tijolo continua sendo o `background-color`. É o
       que faz o cabeçalho seguir o tema escolhido em vez de virar terracota fixo (ao contrário do
       `--brand-icon`, que é fixo de propósito). Os 28% são os mesmos da variante do ícone.

       Não reduz contraste de nada: a junta só ESCURECE o fundo, e o texto do cabeçalho é branco. */
    --tijolo: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Cg%20fill='%23000'%20fill-opacity='.28'%3E%3Crect%20width='40'%20height='1'/%3E%3Crect%20y='20'%20width='40'%20height='1'/%3E%3Crect%20width='1'%20height='20'/%3E%3Crect%20x='20'%20y='20'%20width='1'%20height='20'/%3E%3C/g%3E%3C/svg%3E");
    /* O ladrilho tem DUAS fiadas, então 2/3 da altura dá exatamente três — e a terceira fecha no pé
       do cabeçalho em vez de sair cortada. Tem de ser proporção, não pixel: o `padding-top` do
       cabeçalho é `max(.75rem, env(safe-area-inset-top))`, ou seja, a altura muda conforme o
       aparelho tem entalhe ou não, e qualquer valor fixo acerta num e erra no outro.

       `auto` na largura é o que segura a proporção 2:1 do tijolo — o SVG é quadrado, então a largura
       acompanha a altura. Trocar por uma porcentagem esticaria o tijolo, porque porcentagem de
       largura se mede contra a LARGURA do elemento (a tela inteira), não contra a altura.

       A terceira fiada repete o alinhamento da primeira, e isso é o certo: em amarração as fiadas
       alternam de duas em duas. */
    --tijolo-tile: auto calc(200% / 3);

    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Temas alternativos — escolhidos em Parâmetros, aplicados via [data-theme] no <html> (ver ThemeService).

   **Azul marinho é o padrão desde 2026-08-03** (bare :root, sem atributo); antes era o chumbo
   azulado, que passou a ser um dos alternativos. Trocar o padrão é trocar TRÊS lugares além destes
   blocos, e esquecer qualquer um deles produz uma piscada de cor errada no boot ou uma barra de
   sistema destoando do app: o `:root` acima, o `tema !== 'azul-marinho'` do script do <head> do
   index.html (ele é quem evita a piscada, rodando antes do CSS) e o `theme_color` do
   manifest.webmanifest (a cor que o sistema pinta em volta do app instalado). O ícone continua
   vermelho de propósito, em qualquer tema — ver o easter egg registrado no historico.md.

   O bloco do azul-marinho continua existindo mesmo agora que ele é o padrão: quem já o tinha
   escolhido carrega `data-theme="azul-marinho"` no <html> da aba aberta, e sem ele essa aba cairia
   nas cores do :root só depois de recarregar. */
:root[data-theme="terracota"] {
    --brand: #A8402E;
    --brand-dark: #7D2E20;
    --brand-tint: #F5DFDA;
    /* Único tema que inverte a placa do logotipo — é o único em que o --brand bate com o terracota
       da marca. Ver --logo-placa acima. */
    --logo-placa: #1E3A5F;
    --logo-c: #A8402E;
}

:root[data-theme="chumbo-azulado"] {
    --brand: #3E4C5C;
    --brand-dark: #29333F;
    --brand-tint: #DFE4E8;
}

:root[data-theme="azul-marinho"] {
    --brand: #1E3A5F;
    --brand-dark: #132840;
    --brand-tint: #DCE4F0;
}

/* Marcador de checkbox/radio, em UMA regra e não por tela. `accent-color` é o único jeito de pintar
   o controle nativo sem redesenhá-lo com pseudo-elemento — e redesenhar custaria o estado
   indeterminado, o foco do teclado e o alto contraste do sistema, que o nativo dá de graça (o
   navegador ainda escolhe sozinho a cor do "V" que contrasta com o fundo).

   Terracota fixo, `--brand-icon` e não `--brand`: é a cor do ícone do app, que já não acompanha o
   tema. Consequência assumida — em azul-marinho e chumbo azulado o check é o único elemento fora da
   paleta da tela. Isso é a decisão, não um descuido: quem trocar por `--brand` está desfazendo. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-icon);
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Texto só para leitor de tela — some da tela sem sair da árvore de acessibilidade (`display:none`
   e `visibility:hidden` tirariam dos dois). Serve onde o desenho comunica por ícone e o ícone é
   aria-hidden: sem isso a linha de datas do card chega como números soltos. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-main h1,
.page-title-strong,
.section-header h1.title-strong,
.attention-count,
.itens-total .value {
    font-family: var(--font-display);
}