/*
 * Componentes: o vocabulário que as 40 telas reaproveitam.
 *
 * Regra que guia tudo aqui: a cor só aparece quando significa alguma coisa —
 * situação, atraso, dinheiro recebido. O resto é papel branco sobre fundo
 * neutro frio, com a linha de 1px fazendo a separação.
 */
@layer componentes {

  /* ---------------------------------------------------------------- casca */

  .app {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    align-items: start;
  }

  .app__conteudo { min-width: 0; padding-bottom: var(--e-7); }

  .pagina {
    /* Acima de ~1400px a tabela deixa de ganhar em legibilidade e passa a
       afastar a coluna de dinheiro do nome do produto. */
    max-width: 1440px;
    padding: var(--e-5) 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  /* No sistema interno a barra lateral de 236px ocupa a esquerda, então o
     limite de 1440px se lê como margem. O portal não tem barra: sem isto, o
     conteúdo fica encostado à esquerda com um vazio grande à direita em tela
     larga. */
  .pagina--centrada { margin-inline: auto; }

  /* Pareado com .pagina--centrada: centralizar só o conteúdo deixaria o
     título na borda esquerda e o cartão 300px adiante. Cabeçalho e página
     compartilham a medida, senão a tela tem dois alinhamentos. */
  .topo--centrado { max-width: 1440px; margin-inline: auto; width: 100%; }

  /* ------------------------------------------------------- barra lateral */

  .barra {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    background: var(--cor-barra);
    color: #cfd6dc;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .marca { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
  .marca__sinal { width: 22px; height: 22px; border-radius: var(--r-2); background: var(--cor-acao); flex: none; }
  .marca__nome { font-size: 14px; font-weight: var(--peso-forte); color: var(--cor-texto); }
  .marca__nome span { font-weight: var(--peso-normal); color: var(--cor-texto-3); }
  /* Sobre a barra escura e sobre a vitrine do login. */
  .marca--invertida .marca__nome { color: #fff; }
  .marca--invertida .marca__nome span { color: var(--cor-barra-fraco); }

  .seletor-empresa {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
    width: 100%; text-align: left;
    padding: 9px 10px;
    background: var(--cor-barra-alt);
    border: var(--borda) solid #2b3237;
    border-radius: var(--r-3);
    color: #e7ecf0;
    text-decoration: none;
  }
  .seletor-empresa:hover { background: #232a2f; color: #fff; text-decoration: none; }
  .seletor-empresa__dados { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .seletor-empresa__rotulo { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-barra-fraco); }
  .seletor-empresa__nome { font-size: var(--t-12); font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seletor-empresa__acao { font-size: 11px; color: var(--cor-barra-fraco); flex: none; }

  .menu { display: flex; flex-direction: column; gap: 2px; list-style: none; }

  /* Rótulo de grupo. Catorze itens numa lista plana obrigam a ler todos para
     achar um; o rótulo dá ao olho onde parar. Não é link nem foco de teclado —
     é legenda, e quem navega por teclado passa direto para o próximo item. */
  .menu__grupo {
    padding: var(--e-4) 12px 5px;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cor-barra-fraco);
  }
  .menu__grupo:first-child { padding-top: 6px; }
  .menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: var(--t-13);
    color: var(--cor-barra-texto);
    text-decoration: none;
  }
  .menu__item:hover { background: var(--cor-barra-alt); color: #fff; text-decoration: none; }
  .menu__item[aria-current="page"] { background: var(--cor-barra-ativo); color: #fff; font-weight: 650; }
  .menu__ponto { width: 6px; height: 6px; border-radius: 2px; flex: none; background: #3a4248; }
  .menu__item[aria-current="page"] .menu__ponto { background: var(--cor-acao); }
  .menu__rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* A única parte rolável da barra. `min-height: 0` é o que faz funcionar:
     item de flex nasce com `min-height: auto` e se recusa a encolher abaixo
     do próprio conteúdo, então sem esta linha o menu simplesmente transborda
     os 100vh da barra — e transbordar aqui é pior que em qualquer outro
     lugar, porque a barra tem altura FIXA: nada no documento reivindica o
     espaço abaixo dela, e a página não rola para revelá-lo. Medido antes da
     correção, num piso de desktop de 768px: o botão Sair terminava 270px
     abaixo da dobra, inalcançável.

     Marca e seletor de empresa ficam presos no topo; o rodapé, no fim. Só a
     lista de itens rola — que é o que cresce quando alguém acrescenta uma
     tela ao menu. Guarda: spec/system/barra_lateral_baixa_spec.rb. */
  .barra__navegacao {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    /* A barra de rolagem do sistema é clara, e clara sobre #14181b é um risco
       branco atravessando o menu. `scrollbar-color` pinta polegar e trilho; o
       trilho é a própria barra, então ele desaparece e só o polegar aparece,
       na mesma linha que já separa o rodapé. `thin` é o que existe de mais
       estreito no padrão — as pseudo-classes -webkit- dariam controle de
       pixel, mas o Chrome as IGNORA quando estas duas estão declaradas, e
       manter as duas formas seria manter uma que não age. */
    scrollbar-width: thin;
    scrollbar-color: var(--cor-barra-linha) var(--cor-barra);
  }

  .barra__rodape {
    margin-top: auto;
    display: flex; flex-direction: column; gap: var(--e-2);
    padding-top: 14px;
    border-top: var(--borda) solid var(--cor-barra-linha);
  }
  .barra__link { font-size: var(--t-12); color: #9aa7b2; text-decoration: none; }
  .barra__link:hover { color: #fff; text-decoration: none; }
  .barra__usuario { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
  .barra__usuario span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .barra__nome { font-size: var(--t-12); color: #e7ecf0; font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra__papel { font-size: 11px; color: var(--cor-barra-fraco); }
  .barra__sair { border: none; background: none; padding: 0; margin: 0; cursor: pointer; font-size: 12px; color: #9aa7b2; }
  .barra__sair:hover { color: #fff; text-decoration: underline; }

  /* Portal: só a cor muda; a estrutura é a da barra interna. */
  .barra--portal { background: var(--cor-portal-barra); }
  .barra--portal .menu__item:hover { background: var(--cor-portal-alt); }
  .barra--portal .menu__item[aria-current="page"] { background: var(--cor-portal-ativo); }
  .barra--portal .menu__item[aria-current="page"] .menu__ponto { background: #fff; }
  .barra--portal .barra__rodape { border-top-color: var(--cor-portal-alt); }

  .ajuda-portal {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--e-3); border-radius: var(--r-3);
    background: var(--cor-portal-alt); color: #e7ecf0; font-size: 12px;
  }
  .ajuda-portal__titulo { font-weight: var(--peso-forte); font-size: 13px; }
  .ajuda-portal__link { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }

  .sino { position: relative; }
  .sino summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
  .sino summary::-webkit-details-marker { display: none; }
  .sino__contagem { min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--cor-erro); color: #fff;
                    font-size: 11px; font-weight: var(--peso-forte); text-align: center; }
  .sino__lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: min(320px, calc(100vw - 32px));
                 padding: var(--e-1); background: var(--cor-papel); border: var(--borda) solid var(--cor-linha);
                 border-radius: var(--r-3); box-shadow: var(--sombra-2); }
  .sino__lista ul { list-style: none; }
  .sino__item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-2);
                color: var(--cor-texto); text-decoration: none; font-size: 12.5px; }
  .sino__item:hover { background: var(--cor-linha-suave); text-decoration: none; }
  .sino__item span { color: var(--cor-texto-3); font-size: 11.5px; }
  .sino__item--novo .sino__item { background: var(--cor-info-bg); }
  .sino__vazio { padding: var(--e-2) var(--e-3); font-size: 12.5px; }
  .sino__marcar { padding: var(--e-2) var(--e-3); }

  .seletor-cliente { position: relative; }
  .seletor-cliente summary { list-style: none; cursor: pointer; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seletor-cliente summary::-webkit-details-marker { display: none; }
  .seletor-cliente summary::after { content: "▾"; margin-left: var(--e-2); }
  .seletor-cliente__lista {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
    min-width: 240px; max-width: min(360px, calc(100vw - 32px));
    list-style: none; padding: var(--e-1);
    background: var(--cor-papel);
    border: var(--borda) solid var(--cor-linha);
    border-radius: var(--r-3);
    box-shadow: var(--sombra-2);
  }
  .seletor-cliente__item { display: block; padding: 8px 10px; border-radius: var(--r-2); color: var(--cor-texto); text-decoration: none; overflow-wrap: anywhere; }
  .seletor-cliente__item:hover { background: var(--cor-linha-suave); text-decoration: none; }
  .seletor-cliente__item[aria-current="true"] { font-weight: var(--peso-forte); }

  /* Foto do produto, ou as iniciais quando não há foto. contain, e não
     cover: foto de produto cortada esconde justamente o rótulo. */
  .foto-produto {
    display: flex; align-items: center; justify-content: center;
    object-fit: contain;
    background: #f4f6f8;
    border-radius: var(--r-3);
    color: #4a5560; font-weight: var(--peso-forte);
  }
  .foto-produto--cartao { width: 100%; height: 120px; font-size: 22px; }
  .foto-produto--mini { width: 36px; height: 36px; font-size: 11px; }
  .produto-miniatura { width: 48px; }
  /* Rótulo que só o leitor de tela lê: a coluna de foto não tem texto. */
  .so-leitor {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .foto-produto--ficha { width: 160px; height: 160px; margin-bottom: var(--e-4); font-size: 32px; }

  /* --------------------------------------------------------------- topo */

  .topo {
    position: sticky; top: 0; z-index: 5;
    background: rgb(255 255 255 / .95);
    backdrop-filter: blur(6px);
    border-bottom: var(--borda) solid var(--cor-linha);
    padding: var(--e-4) 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
  }
  .topo__titulos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .topo__trilha { font-size: 11.5px; color: var(--cor-texto-3); letter-spacing: .02em; }
  .topo__titulo { font-size: var(--t-19); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topo__acoes { display: flex; align-items: center; gap: 10px; flex: none; }

  /* -------------------------------------------------------------- cartão */

  .cartao {
    background: var(--cor-papel);
    border: var(--borda) solid var(--cor-linha);
    border-radius: var(--r-4);
    overflow: hidden;
  }
  .cartao--relevo { box-shadow: var(--sombra-1); }
  /* Formulário e detalhe: linha de leitura, não largura de tabela. */
  .cartao--limitado { max-width: 1080px; }
  .cartao__cabeca {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px var(--e-4);
    border-bottom: var(--borda) solid var(--cor-linha);
    flex-wrap: wrap;
  }
  .cartao__corpo { padding: var(--e-4) 18px; display: flex; flex-direction: column; gap: var(--e-4); }
  .cartao__rodape {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: 11px var(--e-4);
    background: var(--cor-papel-alt);
    border-top: var(--borda) solid var(--cor-linha);
    font-size: var(--t-12);
    color: var(--cor-texto-2);
    flex-wrap: wrap;
  }

  /* ----------------------------------------------------------- indicador */

  .indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--e-3);
  }
  .indicador {
    background: var(--cor-papel);
    border: var(--borda) solid var(--cor-linha);
    border-radius: var(--r-4);
    padding: var(--e-4) var(--e-4) 14px;
    display: flex; flex-direction: column; gap: var(--e-2);
    box-shadow: var(--sombra-1);
  }
  /* Etiqueta em versalete: rótulo de indicador, contador de cabeçalho de
     cartão, qualquer coisa que acompanha um número sem competir com ele. */
  .etiqueta { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--cor-texto-2); }
  .etiqueta--erro { color: var(--cor-erro-forte); }

  .indicador__rotulo { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--cor-texto-2); }
  .indicador__valor { font-size: var(--t-26); font-weight: var(--peso-forte); letter-spacing: -.02em; }
  .indicador__dica { font-size: 12px; color: var(--cor-texto-3); }
  .indicador__link { font-size: 12px; font-weight: var(--peso-medio); }
  .indicador--erro    { border-color: var(--cor-erro-ln); }
  .indicador--erro    .indicador__rotulo { color: var(--cor-erro-forte); }
  .indicador--erro    .indicador__valor  { color: var(--cor-erro); }
  .indicador--atencao .indicador__valor  { color: var(--cor-atencao); }
  .indicador--sucesso .indicador__valor  { color: var(--cor-sucesso); }

  /* -------------------------------------------------------------- tabela */

  /* A tabela nunca alarga a página: quem rola é a caixa, não o body. */
  .tabela-rolagem { overflow-x: auto; }

  .tabela { width: 100%; border-collapse: collapse; }
  .tabela th {
    text-align: left;
    font-size: var(--t-11);
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cor-texto-2);
    padding: 9px var(--e-4);
    border-bottom: var(--borda) solid var(--cor-linha);
    white-space: nowrap;
  }
  .tabela td {
    padding: var(--linha-altura) var(--e-4);
    border-bottom: var(--borda) solid var(--cor-linha-suave);
    font-size: 13px;
  }
  .tabela tbody tr:hover { background: #f6f8fa; }
  .tabela tbody tr:last-child td { border-bottom: none; }

  .tabela .num, .tabela th.num { text-align: right; white-space: nowrap; }
  /* Célula numérica de duas linhas (o saldo com o reservado embaixo).
     .lista-resumo__texto empilha em coluna, e flex ignora text-align: sem
     isto o número ficaria colado à esquerda numa coluna alinhada à
     direita. */
  .tabela .num .lista-resumo__texto { align-items: flex-end; }
  .tabela .forte { font-weight: var(--peso-medio); }
  .tabela .fraco { color: var(--cor-texto-2); }
  .tabela .corta { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabela .nao-quebra { white-space: nowrap; }

  /* Cabeçalho ordenável: a seta indica a direção que já está aplicada. */
  .ordenar { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
  .ordenar:hover { color: var(--cor-acao); text-decoration: none; }
  .ordenar__seta { font-size: 10px; color: var(--cor-texto-3); }
  .ordenar--ativa { color: var(--cor-acao); }
  .ordenar--ativa .ordenar__seta { color: var(--cor-acao); }

  /* ---------------------------------------------------------------- selo */

  /* Cada situação tem glifo próprio: a distinção sobrevive a impressão
     monocromática e a daltonismo, não só à cor de fundo. */
  .selo {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 650;
    padding: 3px var(--e-2);
    border-radius: var(--r-1);
    white-space: nowrap;
    background: #f0f2f4; color: #414a52; border: var(--borda) solid var(--cor-campo-linha-suave);
  }
  .selo__marca { font-size: 10px; line-height: 1; }
  .selo--neutro  { background: #f0f2f4; color: #414a52; border-color: var(--cor-campo-linha-suave); }
  .selo--info    { background: var(--cor-info-bg); color: var(--cor-info-fg); border-color: var(--cor-info-ln); }
  .selo--sucesso { background: var(--cor-sucesso-bg); color: #0d5c37; border-color: var(--cor-sucesso-ln); }
  .selo--atencao { background: var(--cor-atencao-bg); color: #7a4700; border-color: var(--cor-atencao-ln); }
  .selo--erro    { background: var(--cor-erro-bg); color: var(--cor-erro-forte); border-color: var(--cor-erro-ln); }
  .selo--apagado { background: #f4f5f6; color: #8a939b; border-color: var(--cor-linha); }

  /* -------------------------------------------------------------- botões */

  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 15px;
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-2);
    background: var(--cor-papel);
    color: var(--cor-texto);
    font-size: var(--t-13);
    font-weight: var(--peso-medio);
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
  }
  .botao:hover { background: #f2f4f6; color: var(--cor-texto); text-decoration: none; }
  .botao:focus-visible { box-shadow: var(--anel-foco); }

  .botao--primario {
    background: var(--cor-acao);
    border-color: transparent;
    color: #fff;
    font-weight: 650;
  }
  .botao--primario:hover { background: var(--cor-acao-forte); color: #fff; }

  .botao--destrutivo { border-color: #e5b4ae; color: var(--cor-erro); font-weight: 650; }
  .botao--destrutivo:hover { background: var(--cor-erro-bg); color: var(--cor-erro); }

  .botao--pequeno { padding: 5px 10px; font-size: var(--t-12); }

  .botao[disabled], .botao--inativo {
    background: #f4f6f8; border-color: var(--cor-linha); color: #a3acb4;
    cursor: not-allowed;
  }

  /* button_to gera um <form>; sem isto ele quebraria a linha de ações. */
  .botao-form { display: inline; }

  .acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
  .acoes--rodape { padding-top: var(--e-1); }
  .acoes__direita { margin-left: auto; }

  /* ---------------------------------------------------------- formulário */

  /* O formulário empilha bloco de erros, grupos e ações com um respiro só. */
  .formulario { display: flex; flex-direction: column; gap: var(--e-4); }

  /* Formulário de uma linha só — select e botão lado a lado, como a troca de
     vendedor na triagem do pedido. */
  .formulario--linha { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--e-2); }

  .grupo { border: none; margin: 0; padding: 0; min-width: 0; }
  .grupo + .grupo { border-top: var(--borda) solid var(--cor-linha-suave); padding-top: var(--e-4); }
  .grupo__titulo {
    font-size: var(--t-11); font-weight: 650; letter-spacing: .04em;
    text-transform: uppercase; color: var(--cor-texto-2);
    padding: 0 0 10px;
  }

  .campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--e-3) 14px;
    min-width: 0;
  }

  .campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .campo--largo { grid-column: 1 / -1; }
  .campo--duplo { grid-column: span 2; }
  /* Numa grade de coluna única, `span 2` criaria uma coluna implícita e o
     campo vazaria do cartão. */
  @media (max-width: 620px) { .campo--duplo { grid-column: auto; } }

  .campo label,
  .campo__rotulo {
    font-size: var(--t-11); font-weight: 650; letter-spacing: .04em;
    text-transform: uppercase; color: var(--cor-texto-2);
  }
  .campo__obrigatorio { color: var(--cor-erro); }
  .campo__ajuda { font-size: 11.5px; color: var(--cor-texto-3); line-height: 1.45; }
  .campo__erro  { font-size: 11.5px; color: var(--cor-erro); }

  .campo input[type="text"],
  .campo input[type="email"],
  .campo input[type="password"],
  .campo input[type="search"],
  .campo input[type="number"],
  .campo input[type="date"],
  .campo input[type="tel"],
  .campo input[type="file"],
  .campo select,
  .campo textarea {
    width: 100%;
    padding: 8px 10px;
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-2);
    background: var(--cor-papel);
    color: var(--cor-texto);
    font-size: var(--t-13);
    outline: none;
  }
  .campo textarea { resize: vertical; min-height: 62px; }

  .campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--cor-acao);
    box-shadow: var(--anel-foco);
  }

  /* Campo recusado pelo servidor: borda, fundo e a mensagem por campo. */
  .campo--invalido input,
  .campo--invalido select,
  .campo--invalido textarea { border-color: #d9534f; background: #fffafa; }

  /* Caixa de marcação foge da coluna: rótulo à direita, na mesma linha. */
  .campo--marcacao { flex-direction: row; align-items: center; gap: var(--e-2); }
  .campo--marcacao input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cor-acao); margin: 0; }
  .campo--marcacao label { text-transform: none; letter-spacing: 0; font-size: var(--t-13); font-weight: var(--peso-medio); color: var(--cor-texto); }

  /* Campo monetário: o R$ é moldura, não conteúdo digitável. */
  .moeda {
    display: flex; align-items: center;
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--cor-papel);
  }
  .moeda__unidade {
    padding: 8px 9px;
    background: #f4f6f8; color: var(--cor-texto-2);
    font-size: var(--t-12);
    border-right: var(--borda) solid var(--cor-linha);
  }
  .moeda input[type="text"],
  .moeda input[type="number"] {
    flex: 1; min-width: 0;
    border: none; border-radius: 0;
    padding: 8px 10px;
    font-size: var(--t-13);
    text-align: right;
    background: transparent;
    outline: none;
  }
  .moeda:focus-within { border-color: var(--cor-acao); box-shadow: var(--anel-foco); }
  .moeda input:focus { box-shadow: none; border-color: transparent; }
  .campo--invalido .moeda { border-color: #d9534f; background: #fffafa; }
  .campo--invalido .moeda__unidade { background: var(--cor-erro-bg); color: var(--cor-erro-forte); border-right-color: var(--cor-erro-ln); }

  /* Previsão do preço negociado: a conta que o formulário mostra enquanto se
     digita. Fica discreta de propósito — é referência para decidir, não o
     resultado da tela; o resultado é a listagem depois de salvar. */
  .previsao {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
    margin: 0 0 var(--e-3);
    padding: var(--e-2) var(--e-3);
    background: #f4f6f8;
    border-radius: var(--r-2);
    font-size: var(--t-13);
  }
  .previsao__rotulo {
    font-size: var(--t-12); color: var(--cor-texto-3);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .previsao__tabela { color: var(--cor-texto-2); }
  .previsao__seta   { color: var(--cor-texto-3); }
  .previsao__final  { color: var(--cor-texto); font-weight: var(--peso-forte); }

  /* ------------------------------------------------------------ mensagens */

  .aviso {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    border: var(--borda) solid var(--cor-linha);
    border-left: 3px solid var(--cor-texto-2);
    border-radius: var(--r-3);
    font-size: 13px;
    line-height: 1.5;
  }
  .aviso--sucesso { background: var(--cor-sucesso-bg); border-color: var(--cor-sucesso-ln); border-left-color: var(--cor-sucesso); color: #0d5c37; }
  .aviso--erro    { background: var(--cor-erro-bg);    border-color: var(--cor-erro-ln);    border-left-color: var(--cor-erro);    color: #5f2420; }
  .aviso--atencao { background: var(--cor-atencao-bg); border-color: var(--cor-atencao-ln); border-left-color: var(--cor-atencao); color: #7a4700; }
  .aviso--info    { background: var(--cor-info-bg);    border-color: var(--cor-info-ln);    border-left-color: var(--cor-acao);    color: var(--cor-info-fg); }
  .aviso__titulo  { font-weight: var(--peso-forte); flex: none; }

  .avisos { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) 28px 0; }

  /* Fora do tenant não há coluna de conteúdo para ancorar a mensagem: ela
     flutua sobre a tela cheia do login e do seletor de empresa. */
  .avisos--flutuante {
    position: fixed;
    top: var(--e-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(520px, calc(100% - 32px));
    padding: 0;
  }
  .avisos--flutuante .aviso { box-shadow: var(--sombra-2); }

  /* Bloco de erros de validação no topo do formulário (422). */
  .erros {
    padding: var(--e-3) 14px;
    background: var(--cor-erro-bg);
    border: var(--borda) solid var(--cor-erro-ln);
    border-left: 3px solid var(--cor-erro);
    border-radius: var(--r-3);
  }
  .erros__titulo { margin: 0 0 6px; font-size: 13px; font-weight: var(--peso-forte); color: var(--cor-erro-forte); }
  .erros__lista { margin: 0; padding-left: 18px; font-size: 13px; color: #5f2420; line-height: 1.6; }

  .lista-marcada { margin: 0; padding-left: 18px; font-size: 13px; color: var(--cor-texto-2); line-height: 1.7; }
  .lista-marcada li { list-style: disc; }

  /* --------------------------------------------------------- estado vazio */

  .vazio {
    padding: 36px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
  }
  .vazio__marca { width: 38px; height: 38px; border-radius: var(--r-4); background: #f0f2f4; border: var(--borda) solid var(--cor-linha); }
  .vazio__titulo { font-size: 14px; font-weight: 650; }
  .vazio__texto { font-size: var(--t-12); color: var(--cor-texto-3); line-height: 1.5; max-width: 34ch; }

  /* -------------------------------------------------- filtros e paginação */

  .filtros {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-bottom: var(--borda) solid var(--cor-linha);
    flex-wrap: wrap;
  }
  .filtros form { display: contents; }
  .filtros input[type="search"], .filtros select {
    padding: 8px 11px;
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-2);
    background: var(--cor-papel);
    font-size: 13px;
    outline: none;
  }
  .filtros input[type="search"] { flex: 1; min-width: 200px; max-width: 340px; }
  .filtros input:focus, .filtros select:focus { border-color: var(--cor-acao); box-shadow: var(--anel-foco); }

  /* Kaminari gera nav.pagination com spans .page/.first/.prev/.next/.gap. */
  .pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pagination a, .pagination .current {
    display: inline-block;
    padding: 4px 9px;
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-1);
    background: var(--cor-papel);
    font-size: var(--t-12);
    color: var(--cor-texto);
    text-decoration: none;
  }
  .pagination a:hover { border-color: var(--cor-acao); color: var(--cor-acao); text-decoration: none; }
  .pagination .current { background: var(--cor-acao); border-color: transparent; color: #fff; font-weight: 650; }
  .pagination .gap { padding: 4px 2px; color: var(--cor-texto-3); border: none; background: none; }

  /* ------------------------------------------------------------- detalhe */

  .detalhe {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 20px;
  }
  .detalhe > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .detalhe dt { font-size: var(--t-11); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--cor-texto-2); }
  .detalhe dd { margin: 0; font-size: var(--t-13); overflow-wrap: anywhere; }
  .detalhe dd:empty::before { content: "—"; color: var(--cor-texto-3); }

  /* ------------------------------------------------------- duas colunas */

  .duas-colunas {
    display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
  }
  .duas-colunas__principal { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--e-4); }
  .duas-colunas__lado { flex: 0 1 300px; min-width: 264px; display: flex; flex-direction: column; gap: var(--e-3); }

  /* -------------------------------------------------------------- resumo */

  /* Totais de um documento: linhas rótulo/valor e um total destacado.
     Aparece na venda (formulário e detalhe) e no título a receber — e é a
     mesma leitura nos três, então é componente, não estilo de tela. */

  .resumo { display: flex; flex-direction: column; gap: 9px; }
  .resumo__linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--t-13); }
  .resumo__rotulo { color: var(--cor-texto-2); }
  .resumo__valor { font-weight: 600; white-space: nowrap; }

  /* O total encerra a conta: separado por linha, e grande o bastante para
     ser o que a pessoa lê primeiro ao conferir antes de salvar. */
  .resumo__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding-top: 10px;
    border-top: var(--borda) solid var(--cor-linha);
  }
  .resumo__total .resumo__rotulo {
    font-size: var(--t-12); font-weight: 650; letter-spacing: .04em;
    text-transform: uppercase;
  }
  .resumo__total .resumo__valor { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
  .resumo__nota { margin: 0; font-size: var(--t-11); color: var(--cor-texto-3); line-height: 1.5; }

  /* Campo dentro de linha de resumo (desconto, frete) — rótulo à esquerda e
     controle estreito à direita, para o valor digitado cair na mesma coluna
     dos totais que só são exibidos. */
  .campo--resumo {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  }
  .campo--resumo label { font-size: var(--t-13); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--cor-texto-2); }
  .campo--resumo .moeda { width: 118px; flex: none; }
  .campo--resumo :is(input, .moeda input) { text-align: right; }
  .campo--resumo .campo__erro { flex-basis: 100%; text-align: right; }

  /* O resumo acompanha a rolagem: numa venda com muitos itens, o total
     precisa continuar visível enquanto se edita o fim da lista. */
  .duas-colunas__lado--fixo { position: sticky; top: 86px; }

  /* --------------------------------------------------- tabela editável */

  /* Itens e parcelas são digitados na própria linha. Os controles herdam a
     aparência de .campo, mas sem rótulo acima — o cabeçalho da coluna já é
     o rótulo, e repeti-lo em cada linha seria ruído. */

  .tabela--editavel td { padding: 6px 12px; }
  .tabela--editavel :is(input, select) {
    width: 100%; box-sizing: border-box;
    padding: 7px 9px;
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-1);
    background: var(--cor-papel);
    color: var(--cor-texto);
    font-size: var(--t-13);
  }
  .tabela--editavel :is(input, select):focus-visible {
    outline: none;
    border-color: var(--cor-acao);
    box-shadow: var(--anel-foco);
  }

  /* Autocompletar (FormularioBuilder#autocompletar). A lista é position:
     fixed, posicionada pelo controller a partir do campo: dentro da tabela de
     itens, que rola, uma lista absoluta seria cortada na borda. */
  .autocompletar { position: relative; min-width: 0; }
  .autocompletar input[type="search"]::-webkit-search-cancel-button { display: none; }
  .autocompletar__lista {
    position: fixed; z-index: 50;
    max-height: 264px; overflow-y: auto;
    margin: 0; padding: 4px 0; list-style: none;
    background: var(--cor-papel);
    border: var(--borda) solid var(--cor-campo-linha);
    border-radius: var(--r-2);
    box-shadow: var(--sombra-2);
  }
  .autocompletar__lista [role="option"] {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 10px; cursor: pointer; font-size: var(--t-13);
  }
  .autocompletar__lista [role="option"]:hover,
  .autocompletar__lista [aria-selected="true"] { background: var(--cor-info-bg); }
  .autocompletar__detalhe { color: var(--cor-texto-3); white-space: nowrap; }
  .autocompletar__vazio { padding: 7px 10px; color: var(--cor-texto-3); font-size: var(--t-13); }
  .tabela--editavel td.num :is(input, select) { text-align: right; }

  /* Remover a linha é ação destrutiva de baixa cerimônia: pequena, neutra em
     repouso, vermelha só ao apontar. */
  .tabela__remover {
    width: 26px; height: 26px;
    border: var(--borda) solid var(--cor-linha);
    border-radius: var(--r-1);
    background: var(--cor-papel);
    color: var(--cor-texto-3);
    font-size: 14px; line-height: 1;
    cursor: pointer;
  }
  .tabela__remover:hover {
    border-color: var(--cor-erro-ln); color: var(--cor-erro); background: var(--cor-erro-bg);
  }

  /* ------------------------------------------------------- gaveta da barra */

  /* No desktop a gaveta não existe como caixa: `display: contents` faz o
     invólucro sumir da árvore de layout, e marca, seletor, menu e rodapé
     voltam a ser filhos diretos de .barra — exatamente o que eram antes de
     a gaveta existir. Assim o colapso do mobile não custa nada aqui. */
  .barra__gatilho, .barra__alternar { display: none; }
  .barra__topo { display: contents; }
  .barra__gaveta { display: contents; }

  .barra__hamburguer, .barra__hamburguer::before, .barra__hamburguer::after {
    display: block; width: 18px; height: 2px; border-radius: 1px;
    background: currentColor;
  }
  .barra__hamburguer { position: relative; }
  .barra__hamburguer::before, .barra__hamburguer::after { content: ""; position: absolute; left: 0; }
  .barra__hamburguer::before { top: -6px; }
  .barra__hamburguer::after { top: 6px; }

  /* ------------------------------------------------------------ estreito */

  /* 1366×768 é o piso de desktop. Abaixo de 900px a barra deixa de ser coluna
     lateral e vira cabeçalho com gaveta: são onze itens de menu, e uma faixa
     horizontal rolável obrigava a arrastar para achar metade deles.

     A gaveta empurra o conteúdo para baixo em vez de sobrepor. Sobreposição
     pediria travar a rolagem do corpo, e travar rolagem sem JavaScript não
     se faz de forma confiável. */
  @media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); }

    /* Estática, não sticky: a gaveta fica no fluxo, então uma barra grudada
       no topo levaria a gaveta aberta junto e cobriria quase a tela toda
       durante a rolagem. */
    .barra {
      position: static;
      height: auto;
      gap: 0;
      padding: var(--e-3) var(--e-4);
    }

    .barra__topo {
      display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    }
    .marca { flex: none; padding: 0; }

    /* A caixa fica no fluxo, invisível mas focalizável: `display: none` a
       tiraria da ordem de tabulação e o menu deixaria de abrir pelo teclado. */
    .barra__gatilho {
      display: block; position: absolute;
      width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
      overflow: hidden; clip-path: inset(50%);
    }

    .barra__alternar {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 12px;
      border: var(--borda) solid var(--cor-barra-linha);
      border-radius: var(--r-2);
      color: #cfd6dc;
      font-size: var(--t-13); font-weight: 650;
      cursor: pointer;
      user-select: none;
    }
    .barra__alternar:hover { background: var(--cor-barra-alt); color: #fff; }
    .barra__gatilho:focus-visible + .barra__topo .barra__alternar {
      outline: none; box-shadow: var(--anel-foco); border-color: var(--cor-acao);
    }

    /* Aberta, a marca do ícone vira um X — o rótulo continua dizendo "Menu",
       então o estado precisa aparecer em algum lugar. */
    .barra__gatilho:checked + .barra__topo .barra__hamburguer { background: transparent; }
    .barra__gatilho:checked + .barra__topo .barra__hamburguer::before { top: 0; transform: rotate(45deg); }
    .barra__gatilho:checked + .barra__topo .barra__hamburguer::after { top: 0; transform: rotate(-45deg); }

    /* Sem max-height nem overflow próprio: a gaveta está no fluxo, então a
       própria página rola. Uma área de rolagem dentro de outra deixa duas
       barras concorrendo e a de dentro cobre o texto na borda. */
    .barra__gaveta { display: none; }
    .barra__gatilho:checked ~ .barra__gaveta {
      display: flex; flex-direction: column; gap: var(--e-3);
      margin-top: var(--e-3);
      padding-top: var(--e-3);
      border-top: var(--borda) solid var(--cor-barra-linha);
    }

    .seletor-empresa { width: auto; }
    .barra__rodape { margin-top: 0; }

    .topo, .pagina, .avisos { padding-left: var(--e-4); padding-right: var(--e-4); }
    .topo { position: static; }
  }

  @media (max-width: 560px) {
    .topo { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
    /* Com o topo em coluna, as ações ficam à esquerda: os painéis do sino e
       do seletor de cliente, ancorados à direita do botão, sairiam pela
       borda esquerda. Ancorados nas ações, ocupam a largura delas. */
    .topo__acoes { position: relative; flex-wrap: wrap; }
    .sino, .seletor-cliente { position: static; }
    .sino__lista, .seletor-cliente__lista { left: 0; right: auto; width: 100%; max-width: none; }
    /* `align-items: flex-start` dimensiona os filhos pelo CONTEÚDO, e sem esta
       linha a largura do cabeçalho passa a ser a largura do texto do título:
       nome de cliente comprido empurra a caixa para fora da viewport, e a
       reticência de `.topo__titulos h1` nunca entra, porque reticência só age
       sobre caixa limitada. O `min-width: 0` de `.topo__titulos` resolve o
       caso de linha, em que o item ENCOLHE; não resolve este, em que ele
       CRESCE. Mesma razão da linha de `.topo__acoes`, logo abaixo. */
    .topo__titulos { width: 100%; }
    .topo__acoes { width: 100%; }
    .cartao__corpo { padding: var(--e-3) 14px; }
  }
}