/* =============================================================================================
   DESIGN SYSTEM — AcoInox
   Conceito e justificativa das decisões: docs/identidade-visual.md

   Este arquivo declara TOKENS e PRIMITIVAS. Ele é carregado antes de loja.css e painel.css, e
   nenhum dos dois deve conter valor cru de cor, espaço, raio ou tipo — só referência a token.
   Trocar a marca inteira tem que ser mexer aqui e em mais lugar nenhum.
   ============================================================================================= */

:root {
    /* ---------- Marca · petróleo ----------
       Origem: o logotipo da empresa, em verde-petróleo com tipografia serifada e tratamento
       metálico. A cor institucional vira a base da interface; o azul genérico da rodada anterior
       sai — ele podia pertencer a qualquer sistema B2B. */
    --marca-petroleo-950: #061c1f;
    --marca-petroleo-900: #0a2a2e;
    --marca-petroleo-800: #0f3a40;
    --marca-petroleo-700: #144c54;
    --marca-petroleo: #17606a;      /* institucional */
    --marca-petroleo-600: #1c7683;
    --marca-petroleo-500: #2a8e9c;
    --marca-petroleo-300: #6bb8c2;
    --marca-petroleo-100: #d9ecef;
    --marca-petroleo-050: #eef6f8;

    /* ---------- Aço: a escala neutra, com cast frio levemente esverdeado para conversar com o
         petróleo. Cinza puro ao lado de verde-petróleo lê como sujo. ---------- */
    --aco-950: #0d1113;
    --aco-900: #151b1d;
    --aco-800: #1f272a;
    --aco-700: #2d3639;
    --aco-600: #475357;
    --aco-500: #66747a;
    --aco-400: #8c9aa0;
    --aco-300: #bac5c9;
    --aco-200: #d9e0e3;
    --aco-100: #edf1f2;
    --aco-050: #f6f8f9;
    --aco-000: #ffffff;

    /* Cobre: a cor complementar das ações comerciais e das marcas de medição. Metal contra metal
       — petróleo é a patina, cobre é o metal quente. Usada com parcimônia e NUNCA em preenchimento
       de botão: ela marca, não grita. */
    /* Calibrados por contraste, não por gosto: o --cobre é usado em rótulo de 11px sobre o
       fundo claro (4,84:1) e o --cobre-claro sobre o petróleo escuro (4,84:1). Os valores
       anteriores davam 4,41 e 4,23 — reprovavam AA em texto pequeno, que é justamente onde
       eles aparecem. */
    --cobre: #a05d1c;
    --cobre-claro: #d3964b;
    --cobre-fraco: #fbf1e6;

    /* Compatibilidade: o resto do projeto ainda referencia a escala anterior por nome. Mapear em
       vez de renomear em 60 arquivos mantém o diff desta rodada legível. */
    --g-950: var(--aco-950);
    --g-900: var(--aco-900);
    --g-800: var(--aco-800);
    --g-700: var(--aco-700);
    --g-600: var(--aco-600);
    --g-500: var(--aco-500);
    --g-400: var(--aco-400);
    --g-300: var(--aco-300);
    --g-200: var(--aco-200);
    --g-100: var(--aco-100);
    --g-050: var(--aco-050);
    --g-000: var(--aco-000);

    --acento: var(--marca-petroleo);
    --acento-vivo: var(--marca-petroleo-600);
    --acento-escuro: var(--marca-petroleo-800);
    --acento-fraco: var(--marca-petroleo-050);
    --acento-sobre-escuro: #7fc9d4;   /* 8,3:1 sobre o petróleo escuro */

    /* ---------- Semânticos. Todos passam AA sobre branco em texto normal: são usados em
         texto de tabela, não só em pastilha. ---------- */
    --ok: #1b7a4b;
    --ok-fraco: #e6f4ec;
    --atencao: #9a6209;
    --atencao-fraco: #fdf3e2;
    --erro: #a32626;
    --erro-fraco: #fbebeb;
    --info: var(--marca-petroleo);
    --info-fraco: var(--marca-petroleo-050);

    /* ---------- Papéis de superfície e texto ---------- */
    --sup-pagina: var(--aco-050);
    --sup-cartao: var(--aco-000);
    --sup-sutil: var(--aco-100);
    --sup-escura: var(--marca-petroleo-900);
    --sup-escura-2: var(--marca-petroleo-800);

    --txt: var(--aco-900);
    --txt-suave: var(--aco-600);
    --txt-fraco: var(--aco-500);
    --txt-claro: var(--aco-000);
    /* Sobre petróleo escuro, este era o cinza que fazia o rodapé sumir. Subiu o suficiente para
       ler confortável sem virar branco — o rodapé é apoio, não conteúdo principal. */
    --txt-claro-suave: #b6c6c9;
    --txt-claro-fraco: #9db1b5;

    --borda: var(--aco-200);
    --borda-forte: var(--aco-300);
    --borda-escura: rgba(255, 255, 255, .13);

    /* ---------- Tipografia ----------
       Pilha de sistema: a CSP é 'self' e não há bundler, então CDN de fonte é bloqueado pelo
       navegador. Ver docs/identidade-visual.md §4 — inclusive o ponto exato de troca quando
       houver licença de uma fonte própria.

       A serifada existe por causa do logotipo: ele é serifado, e o wordmark e as headlines da
       home ecoam isso. O resto da interface é sans — número e tabela pedem sans. */
    --fonte-ui: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
                Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
    --fonte-marca: "Georgia", "Iowan Old Style", "Times New Roman", "Nimbus Roman", serif;
    --fonte-dado: "Cascadia Mono", "SF Mono", SFMono-Regular, Consolas, "Roboto Mono",
                  ui-monospace, monospace;

    /* Escala modular ampliada: a rodada anterior tinha tudo com quase o mesmo peso. Display e
       corpo agora estão a três passos de distância. */
    --t-xs: .6875rem;   /* 11px — rótulo técnico, contador */
    --t-sm: .8125rem;   /* 13px — apoio, tabela densa */
    --t-md: .9375rem;   /* 15px — corpo */
    --t-lg: 1.125rem;   /* 18px — subtítulo */
    --t-xl: 1.375rem;   /* 22px — título de seção */
    --t-2xl: 1.875rem;  /* 30px — título de página */
    --t-3xl: 2.75rem;   /* 44px — display */
    --t-4xl: 4rem;      /* 64px — headline da home */

    --lh-apertada: 1.08;
    --lh-titulo: 1.2;
    --lh-normal: 1.55;

    /* ---------- Espaço: escala única, base 4px ---------- */
    --e-1: .25rem;
    --e-2: .5rem;
    --e-3: .75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;

    /* ---------- Raio: pequeno. Canto muito arredondado adoça, e este produto não é doce. */
    --raio-sm: 2px;
    --raio: 4px;
    --raio-lg: 6px;

    /* ---------- Elevação: usada com parcimônia. A separação padrão é o fio, não a sombra. */
    --sombra-sutil: 0 1px 2px rgba(6, 28, 31, .06);
    --sombra: 0 6px 20px rgba(6, 28, 31, .10);
    --sombra-forte: 0 14px 40px rgba(6, 28, 31, .16);

    /* ---------- Movimento: só para explicar mudança de estado ---------- */
    /* Curva e duracao unicas do sistema. 180 ms é o ponto em que a mudança é percebida sem ser
       esperada; a variante lenta serve a movimento de superfície maior — cartão que sobe, luz
       que corre na chapa. */
    --transicao: 180ms cubic-bezier(.2, 0, .2, 1);
    --transicao-lenta: 240ms cubic-bezier(.2, 0, .2, 1);

    --foco: 0 0 0 3px rgba(28, 118, 131, .32);

    /* ---------- Materialidade ----------
       Aço escovado desenhado em CSS: sem imagem, sem requisição, sem estourar a CSP. O contraste
       é propositalmente baixíssimo — textura de metal só funciona quando você a percebe sem
       conseguir apontá-la. */
    --escovado: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, .05) 0px,
        rgba(255, 255, 255, .05) 1px,
        rgba(0, 0, 0, .03) 1px,
        rgba(0, 0, 0, .03) 2px,
        rgba(255, 255, 255, .02) 2px,
        rgba(255, 255, 255, .02) 4px);

    /* Reflexo de superfície plana — o brilho que corre numa chapa. */
    --reflexo: linear-gradient(
        104deg,
        rgba(255, 255, 255, 0) 18%,
        rgba(255, 255, 255, .10) 38%,
        rgba(255, 255, 255, .02) 52%,
        rgba(255, 255, 255, 0) 70%);
}

/* Movimento é acessório: quem pediu para reduzir não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================================
   PRIMITIVAS
   ============================================================================================= */

body {
    font-family: var(--fonte-ui);
    font-size: var(--t-md);
    line-height: var(--lh-normal);
    color: var(--txt);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-apertada);
    letter-spacing: -.011em;
    font-weight: 600;
}

a {
    color: var(--acento);
    text-underline-offset: .15em;
}

a:hover {
    color: var(--acento-vivo);
}

/* Foco visível SEMPRE. O outline padrão do navegador some sob o CSS do Bootstrap em vários
   componentes; declarar aqui garante que navegar por teclado continue possível. */
:focus-visible {
    outline: 2px solid var(--acento-vivo);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

/* ---------- Rótulo técnico: a caixa alta pequena que nomeia todo dado ---------- */
.rotulo {
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--txt-fraco);
}

/* ---------- Dado técnico: código de SKU, NCM, número de duplicata ---------- */
.dado {
    font-family: var(--fonte-dado);
    font-size: .9em;
    letter-spacing: -.01em;
}

/* ---------- Números tabulares ----------
   A régua do sistema. Toda coluna numérica alinha na vírgula; sem isto os dígitos têm largura
   diferente e a coluna "dança" de linha em linha, que é erro clássico de tabela financeira. */
.num,
.tabular,
table td.text-end,
table th.text-end,
.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- A escala de medição: o motivo gráfico da marca ----------
   Traço-régua com marcações. Abre seção e sublinha o logotipo. É desenhado em gradiente, sem
   imagem nem requisição: repete a cada 8px, com uma marca maior a cada 40px. */
.regua {
    height: 7px;
    color: var(--cobre-claro);
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to right, currentColor 1px, transparent 1px);
    background-size: 40px 7px, 8px 4px;
    background-position: 0 0, 0 bottom;
    background-repeat: repeat-x;
    opacity: .35;
}

/* Régua como abertura de seção: fio cheio com as marcações abaixo. */
.secao-titulo {
    display: flex;
    align-items: baseline;
    gap: var(--e-3);
    margin-bottom: var(--e-3);
}

.secao-titulo h2,
.secao-titulo h3 {
    margin: 0;
    font-size: var(--t-lg);
}

.secao-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda);
}

/* =============================================================================================
   MARCA DA LOJA
   O logotipo da empresa é serifado, em verde-petróleo, com tratamento metálico. Não há arquivo
   dele no projeto (só o monograma do favicon), então a assinatura aqui é TIPOGRÁFICA — serifada para
   ecoar o logo, com a régua de medição abaixo. Quando o .svg do logo entrar em wwwroot/img/,
   troca-se o conteúdo de .marca-tipografica por um <img> e nada mais no projeto muda.
   ============================================================================================= */

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    text-decoration: none;
    color: inherit;
}

.marca svg { display: block; }

.marca-tipografica {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}

.marca-tipografica .nome {
    font-family: var(--fonte-marca);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .11em;
    /* A serifada em caixa alta com entreletra aberta pede um respiro à direita: sem isto a última
       letra encosta no que vier depois e a assinatura fica torta sob ela. */
    padding-right: .11em;
    text-transform: uppercase;
    color: currentColor;
}

/* O ponto do "i" da marca vira a marcação de cota — é o detalhe que amarra o logotipo ao motivo
   gráfico do sistema. */
.marca-tipografica .nome em {
    font-style: normal;
    color: var(--cobre-claro);
}

.marca-tipografica .assinatura {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--txt-claro-fraco);
    white-space: nowrap;
}

.marca-tipografica.escura .assinatura { color: var(--txt-fraco); }

/* =============================================================================================
   MATERIALIDADE
   Superfícies de metal desenhadas em CSS. Sem imagem, sem requisição, sem tocar na CSP — e sem
   fingir cromado: o inox real é fosco e frio, não espelhado.
   ============================================================================================= */

/* Chapa: superfície escovada com um reflexo correndo na diagonal. */
.chapa {
    position: relative;
    background: var(--marca-petroleo-900);
    isolation: isolate;
    overflow: hidden;
}

.chapa::before,
.chapa::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.chapa::before { background-image: var(--escovado); }
.chapa::after { background-image: var(--reflexo); }

/* Aresta de chapa empilhada: as lâminas vistas de canto. Desenhada com sombra de caixa
   repetida, o que custa zero requisição e escala com o container. */
.aresta {
    height: 4px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .22) 0,
        rgba(255, 255, 255, .05) 40%,
        rgba(0, 0, 0, .25) 100%);
    border-radius: 1px;
}

/* Cota: a marca de medição com as duas setas. Usada para rotular um dado técnico de verdade,
   nunca como enfeite ao lado de número inventado. */
.cota {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cobre);
}

.cota::before,
.cota::after {
    content: "";
    height: 1px;
    width: 1.25rem;
    background: currentColor;
    opacity: .55;
}

.cota.aberta::before { display: none; }

/* Sobre superfície escura o cobre fechado some (2,4:1). A variante clara mantém a mesma família
   de cor e passa folgado no AA. */
.chapa .cota,
.hero .cota,
.secao.escura .cota,
.chamada-b2b .cota,
.autenticacao-painel .cota {
    color: var(--cobre-claro);
}

/* ---------- Quebra de linha ----------
   `balance` distribui as linhas de um título para nenhuma ficar com uma palavra sozinha;
   `pretty` faz o mesmo só com a última linha do parágrafo, que é onde a órfã aparece. Onde o
   navegador não conhece, nada acontece — a composição só deixa de melhorar. */
h1, h2, h3, h4, h5, h6,
.cartao-nome,
.hero h1 {
    text-wrap: balance;
}

p, dd, li, figcaption {
    text-wrap: pretty;
}

/* =============================================================================================
   COMPONENTES — ajustes sobre o Bootstrap
   O projeto usa Bootstrap 5 sem bundler; em vez de reescrever tudo, o sistema reveste os
   componentes que aparecem em toda tela.
   ============================================================================================= */

.btn {
    --bs-btn-border-radius: var(--raio);
    --bs-btn-font-weight: 500;
    letter-spacing: .005em;
    transition: background-color var(--transicao), border-color var(--transicao),
                color var(--transicao);
}

.btn:focus-visible {
    box-shadow: var(--foco);
}

.btn-primary {
    --bs-btn-bg: var(--acento);
    --bs-btn-border-color: var(--acento);
    --bs-btn-hover-bg: var(--acento-vivo);
    --bs-btn-hover-border-color: var(--acento-vivo);
    --bs-btn-active-bg: var(--acento-escuro);
    --bs-btn-active-border-color: var(--acento-escuro);
    --bs-btn-disabled-bg: var(--g-400);
    --bs-btn-disabled-border-color: var(--g-400);
}

/* O contorno primário ficava no azul de fábrica do Bootstrap: além de destoar do sistema, o
   #0d6efd sobre branco dá 4,23:1 e reprova no AA. Passa a usar o petróleo da marca. */
.btn-outline-primary {
    --bs-btn-color: var(--acento);
    --bs-btn-border-color: var(--acento);
    --bs-btn-hover-bg: var(--acento);
    --bs-btn-hover-border-color: var(--acento);
    --bs-btn-hover-color: var(--aco-000);
    --bs-btn-active-bg: var(--acento-escuro);
    --bs-btn-active-border-color: var(--acento-escuro);
}

.btn-link {
    --bs-btn-color: var(--acento);
    --bs-btn-hover-color: var(--acento-escuro);
}

.btn-outline-dark {
    --bs-btn-color: var(--txt);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-bg: var(--g-900);
    --bs-btn-hover-border-color: var(--g-900);
}

.btn-outline-secondary {
    --bs-btn-color: var(--txt);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-bg: var(--g-100);
    --bs-btn-hover-border-color: var(--borda-forte);
    --bs-btn-hover-color: var(--txt);
}

.btn-danger {
    --bs-btn-bg: var(--erro);
    --bs-btn-border-color: var(--erro);
}

.btn-success {
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
}

.btn-dark {
    --bs-btn-bg: var(--g-800);
    --bs-btn-border-color: var(--g-800);
}

/* ---------- Campos ---------- */

/* Caixas e rádios nativos (tabela de variações, filtros do catálogo) vinham no azul do sistema
   operacional — a única cor da tela que não era da marca. `accent-color` resolve sem trocar a
   marcação nem perder o controle nativo, que é o mais acessível. */
input[type="checkbox"],
input[type="radio"],
progress,
.form-check-input {
    accent-color: var(--acento);
}

.form-control,
.form-select {
    border-color: var(--borda-forte);
    border-radius: var(--raio);
    color: var(--txt);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--acento-vivo);
    box-shadow: var(--foco);
}

.form-control::placeholder {
    color: var(--g-400);
}

/* Campo numérico é dado: alinhado à direita e tabular, sempre. */
.form-control[type="number"] {
    font-variant-numeric: tabular-nums;
}

.form-label {
    font-weight: 500;
    color: var(--txt-suave);
    margin-bottom: var(--e-1);
}

.form-text {
    color: var(--txt-fraco);
}

.input-group-text {
    background: var(--g-100);
    border-color: var(--borda-forte);
    color: var(--txt-suave);
    font-size: var(--t-sm);
}

/* ---------- Cartões ---------- */
.card {
    --bs-card-border-color: var(--borda);
    --bs-card-border-radius: var(--raio);
    --bs-card-inner-border-radius: var(--raio);
    background: var(--sup-cartao);
}

.card-header {
    background: var(--g-050);
    border-bottom-color: var(--borda);
    font-weight: 600;
}

.card-footer {
    background: var(--g-050);
    border-top-color: var(--borda);
}

/* ---------- Tabelas: a espinha dorsal da retaguarda ---------- */
.table {
    --bs-table-border-color: var(--borda);
    color: var(--txt);
}

.table > thead th {
    background: var(--g-100);
    color: var(--txt-suave);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom-color: var(--borda-forte);
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-color: var(--g-100);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--g-050);
}

/* ---------- Tabela que é filha direta do cartão ----------
   A tabela ocupa a largura inteira do cartão, e o padding de célula do Bootstrap é bem menor do
   que o do cartão: a primeira coluna encostava na borda enquanto o cabeçalho logo acima respirava
   1rem. Os dois ficam um debaixo do outro, então o desalinho salta aos olhos.

   A regra vale só para a borda: as colunas do meio mantêm o respiro compacto, que é o que permite
   caber tabela densa em 1366px. */
.card > .table > :not(caption) > * > *:first-child,
.card > .table-responsive > .table > :not(caption) > * > *:first-child {
    padding-left: var(--e-4);
}

.card > .table > :not(caption) > * > *:last-child,
.card > .table-responsive > .table > :not(caption) > * > *:last-child {
    padding-right: var(--e-4);
}

/* ---------- Pastilhas de estado ----------
   Sobrescreve as do Bootstrap para a cor carregar significado, e não moda. */
.badge {
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: .03em;
    border-radius: var(--raio-sm);
    padding: .3em .55em;
}

.text-bg-success { background: var(--ok-fraco) !important; color: var(--ok) !important; }
.text-bg-warning { background: var(--atencao-fraco) !important; color: var(--atencao) !important; }
.text-bg-danger  { background: var(--erro-fraco) !important;   color: var(--erro) !important; }
.text-bg-info    { background: var(--info-fraco) !important;   color: var(--info) !important; }
.text-bg-primary { background: var(--acento-fraco) !important; color: var(--acento) !important; }
.text-bg-secondary { background: var(--g-100) !important; color: var(--txt-suave) !important; }
.text-bg-light   { background: var(--g-050) !important; color: var(--txt-suave) !important; }

/* ---------- Alertas ---------- */
.alert {
    border-radius: var(--raio);
    border-width: 1px;
    border-left-width: 3px;
}

.alert-success { background: var(--ok-fraco); border-color: var(--ok); color: #105936; }
.alert-warning { background: var(--atencao-fraco); border-color: var(--atencao); color: #7a4d07; }
.alert-danger  { background: var(--erro-fraco); border-color: var(--erro); color: #7d1d1d; }
.alert-info    { background: var(--info-fraco); border-color: var(--info); color: #1d4c65; }
.alert-light   { background: var(--g-050); border-color: var(--borda); color: var(--txt-suave); }

/* ---------- Estado vazio ----------
   Componente, e não texto solto: o projeto tem muitos (catálogo sem resultado, lista vazia,
   fornecedor sem material, remessa sem coleta), e tratá-los soltos os deixa desiguais. */
.vazio {
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--g-050);
    padding: var(--e-6) var(--e-5);
    text-align: center;
    color: var(--txt-suave);
}

.vazio .titulo {
    font-weight: 600;
    color: var(--txt);
    margin-bottom: var(--e-1);
}

.vazio p {
    margin: 0 auto;
    max-width: 34rem;
    font-size: var(--t-sm);
}

/* ---------- Utilitários do sistema ---------- */
.texto-suave { color: var(--txt-suave) !important; }
.texto-fraco { color: var(--txt-fraco) !important; }

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

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

code {
    font-family: var(--fonte-dado);
    color: var(--acento-escuro);
    background: var(--acento-fraco);
    padding: .08em .3em;
    border-radius: var(--raio-sm);
    font-size: .88em;
}