/* Design system da AyoAyo — fonte única.
 *
 * Antes estas regras viviam duplicadas em templates/hub.html e
 * ayo_read/templates/index.html, e o README pedia "ao mudar num, replique
 * no outro". Só entra aqui o que era idêntico nos dois arquivos; o CSS
 * específico de cada página continua no bloco {% block estilo %} dela.
 *
 * Contraste medido contra WCAG 2.2: corpo em AAA, demais em AA.
 */

:root {
  --tinta: #e9efec;
  --texto-medio: #98a9a2;
  --texto-fraco: #93a49d;
  --papel: #0e1512;
  --cartao: #16201c;
  --destaque: #10ac84;
  --destaque-claro: #1dd1a1;
  --destaque2: #00d2d3;
  --linha: #24352f;
  --linha-forte: #5f7f74;
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "JetBrains Mono", "Courier New", monospace;
  /* Três larguras de página, e só três (ADR-037). Antes cada template
   * escrevia a sua (420, 440, 480, 540, 560, 860, 880, 940, 1080, 1180 px), e
   * o módulo novo esquecia um pedaço — foi assim que a barra do exportador
   * desmontou. Formulário: entrar, convite, senha. Estreita: envio e escolha.
   * Larga: hub, empresas, resultado, tabelas, painéis. */
  --largura-formulario: 440px;
  --largura-estreita: 560px;
  --largura-larga: 1080px;
  --aviso: #f0b45e;
  /* As outras cores de situação e a sombra dura, que antes apareciam como hex
   * solto em cada regra (ADR-070). Situação nunca vai só na cor: a palavra
   * vem junto. --info é o ciano do degradê da marca. */
  --erro: #ff6b6b;
  --info: var(--destaque2);
  --sombra: #060b09;
  --sombra-dura: 8px 8px 0 var(--sombra);
  /* O espaço entre a borda da janela e o conteúdo. Cada página usa no padding
   * do body, e a barra do topo o desfaz para ir de ponta a ponta. Página que
   * aperta o respiro no celular muda a variável, não o padding. */
  --respiro: 24px;
}

* { box-sizing: border-box; }

::selection { background: var(--destaque); color: #06231b; }

b, strong { font-weight: 600; }

/* Link sem classe nenhuma nasce na cor do tema, e não no azul do navegador:
 * rgb(0, 0, 238) sobre o cartão dava 1,8:1 (WCAG 1.4.3 pede 4,5:1). Quem tem
 * cor própria (cartão do hub, botão da barra) continua com a sua. */
a { color: var(--destaque-claro); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }

/* Número de dinheiro não parte ao meio: "R$ 11.79" numa linha e "0,35" na
 * outra se lê como outro valor. E alinha coluna com coluna. */
.brl { white-space: nowrap; font-variant-numeric: tabular-nums; }

html { scrollbar-width: thin; scrollbar-color: var(--linha-forte) var(--papel); }

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: var(--papel); }

::-webkit-scrollbar-thumb { background: var(--linha); border: 2px solid var(--papel); }

::-webkit-scrollbar-thumb:hover { background: var(--linha-forte); }

.selo {
    font-family: var(--fonte-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--destaque); margin-bottom: 10px;
  }

.selo::before {
    content: ""; display: inline-block; width: 18px; height: 1px;
    background: var(--destaque); margin-right: 9px; vertical-align: 4px;
  }

p.sub { margin: 0 0 28px; color: var(--texto-medio); font-size: 15px; }

.rodape { margin-top: 22px; font-size: 12px; color: var(--texto-fraco); font-family: var(--fonte-mono); }

.autor { margin-top: 10px; font-size: 13px; font-family: var(--fonte-mono); }

.autor a { color: var(--destaque); text-decoration: none; border-bottom: 1px solid var(--linha); }

.autor a:hover { border-color: var(--destaque); }

::view-transition-group(cartao) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }

::view-transition-old(cartao), ::view-transition-new(cartao) {
    height: 100%; width: 100%; object-fit: cover;
  }

::view-transition-old(cartao) { animation: vtSome .2s ease both; }

::view-transition-new(cartao) { animation: vtSurge .3s ease .12s both; }

@keyframes vtSome  { to   { opacity: 0; } }

@keyframes vtSurge { from { opacity: 0; } }

::view-transition-old(root) { animation: vtSaiRoot .26s ease both; }

::view-transition-new(root) { animation: vtEntraRoot .4s ease both; }

@keyframes vtSaiRoot   { to   { opacity: 0; transform: translateY(-10px); } }

@keyframes vtEntraRoot { from { opacity: 0; transform: translateY(12px); } }

/* Ícones -------------------------------------------------------------------
 * `currentColor` no SVG e `vertical-align` aqui: o ícone acompanha a cor e a
 * linha de base do texto ao lado, inclusive no hover e no foco. Sem o
 * alinhamento, cada ícone senta uns 3 px abaixo da palavra.
 */
.icone { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }

/* Esconde do olho, NAO do leitor de tela. É a mesma técnica do campo de
 * arquivo dos subprojetos, e pelo mesmo motivo: `display: none` tira o
 * elemento da árvore de acessibilidade. Num botão que ficou só com ícone — e
 * ícone é `aria-hidden` — isso deixaria o botão SEM NOME nenhum para quem usa
 * leitor de tela (WCAG 4.1.2). */
.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }

.ilustra { display: block; color: var(--destaque); }

/* Barra do topo ------------------------------------------------------------
 * Aparece em toda tela com sessão ou sem (_barra.html). Antes dela, /empresas
 * não tinha link em lugar nenhum — só se chegava digitando a URL.
 *
 * 25/09/2026: a barra vai de ponta a ponta da janela, como barra de site
 * (referência: Wise), e o conteúdo dela se alinha à largura larga da página.
 * Antes ela tinha a largura do cartão de cada tela (560 px no AYO_READ, 1080
 * no hub), e por isso mudava de tamanho e de forma de uma página para outra.
 *
 * De ponta a ponta sem mexer na estrutura das páginas: o body de cada uma tem
 * `padding: var(--respiro)`, e a barra desfaz esse respiro com margem
 * negativa do mesmo tamanho. A página que muda o respiro no celular muda a
 * variável, e a barra acompanha sozinha.
 */
/* A largura mora AQUI, e não em cada página. A barra é um container de
 * `inline-size` (mais abaixo), e container assim não mede o próprio conteúdo:
 * sem largura dada, num body flex em coluna, ela encolhe até o padding — foi o
 * exportador em 22/09 (42 x 200 px) e o hub em 25/09, com o CSS velho no cache
 * do navegador. Largura explícita funciona no body em bloco e no flex. */
.barra {
    width: calc(100% + 2 * var(--respiro));
    margin: calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 30px;
    flex: 0 0 auto;
    background: var(--cartao); border-bottom: 1px solid var(--linha);
    /* Acima do conteúdo: o menu aberto desce sobre a página, e o cartão do
     * hub ganha `transform` no hover — o que o poria por cima do menu. */
    position: relative; z-index: 30;
  }

.barra-miolo {
    /* Mesma borda esquerda e direita do conteúdo das páginas largas. */
    max-width: calc(var(--largura-larga) + 2 * var(--respiro));
    margin: 0 auto; padding: 11px var(--respiro); min-height: 64px;
    display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  }

.barra .marca {
    font-family: var(--fonte-titulo); font-weight: 700; font-size: 21px;
    color: var(--tinta); text-decoration: none; letter-spacing: -.02em;
    padding-block: 4px;
  }

.barra .marca .alt { color: var(--destaque); }

.barra .marca:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }

/* Os menus Fiscal e Contábil --------------------------------------------- */
/* margin-right: auto empurra o resto (empresa e botões) para a direita. */
.barra-areas { display: flex; align-items: center; gap: 2px; margin-right: auto; }

.area-menu { position: relative; }

.area-menu > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 10px; min-height: 38px;
    font-family: var(--fonte-corpo); font-size: 14.5px; font-weight: 500;
    color: var(--tinta);
  }

.area-menu > summary::-webkit-details-marker { display: none; }

.area-menu > summary .icone { color: var(--texto-medio); transition: transform .18s ease; }

.area-menu > summary:hover,
.area-menu[open] > summary { color: var(--destaque-claro); }

.area-menu[open] > summary { background: rgba(16, 172, 132, .10); }

.area-menu[open] > summary .icone { transform: rotate(180deg); color: var(--destaque-claro); }

.area-menu > summary:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

/* A área da página em que se está: fio embaixo, como a aba ativa. */
.area-menu.atual > summary { color: var(--destaque-claro); box-shadow: inset 0 -2px 0 var(--destaque); }

.area-lista {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 1;
    min-width: 280px; margin: 0; padding: 6px 0; list-style: none;
    background: var(--papel); border: 1px solid var(--linha-forte);
    box-shadow: 8px 8px 0 var(--sombra);
  }

.area-lista a {
    display: grid; gap: 2px; padding: 10px 16px 10px 14px;
    border-left: 3px solid transparent;
    color: var(--tinta); text-decoration: none;
  }

.area-lista a:hover { background: rgba(16, 172, 132, .10); border-left-color: var(--destaque); color: var(--tinta); }

.area-lista a:focus-visible { outline: 3px solid var(--destaque); outline-offset: -3px; }

.area-lista a[aria-current="page"] { border-left-color: var(--destaque); background: rgba(16, 172, 132, .06); }

.area-lista a[aria-current="page"] .item-rotulo { color: var(--destaque-claro); }

.item-rotulo {
    display: flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600;
  }

.item-cadeado { display: inline-flex; color: var(--texto-medio); }

.item-selo {
    font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--texto-fraco);
  }

@media (prefers-reduced-motion: reduce) {
  .area-menu > summary .icone { transition: none; }
}

/* Empresa ativa e conta -------------------------------------------------- */
.barra-empresa { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.barra-rotulo {
    font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--texto-medio);
  }

.barra-valor {
    display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
    font-size: 14px; font-weight: 600; color: var(--tinta);
  }

/* As reticências ficam no <span> do nome, e não no .barra-valor: num
 * container flex o texto vira item anônimo e `text-overflow` não se aplica a
 * ele — o nome longo era cortado seco no celular. */
.barra-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-valor .icone { flex: 0 0 auto; }

.barra-pendente {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px; color: var(--destaque); text-decoration: none;
    border-bottom: 1px dashed var(--destaque); padding-block: 4px;
  }

.barra-acoes { display: flex; align-items: center; gap: 10px; }

.barra-acoes form { margin: 0; }

.barra-quem {
    font-family: var(--fonte-mono); font-size: 12px; color: var(--texto-medio);
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

/* padding-block de 8px: a auditoria mediu a.hub-link em 63 x 18,8 e reprovou
 * pelo WCAG 2.5.8, que pede 24 x 24. Aqui o alvo nasce com 34 de altura. */
.botao-barra {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; cursor: pointer;
    font-family: var(--fonte-corpo); font-size: 13px; font-weight: 500;
    color: var(--texto-medio); background: none;
    border: 1px solid var(--linha-forte); text-decoration: none;
    /* Blindagem: as páginas dos subprojetos têm regra global `button {
     * margin-top: 24px; width: 100%; background: gradiente }` para o botão
     * de enviar. Sem isto o Sair (que é <button>) herdava a margem e descia
     * 24 px em relação ao botão ao lado, e ganhava o gradiente no hover. */
    margin: 0; width: auto; letter-spacing: normal; line-height: 1.2;
  }

.botao-barra:hover { color: var(--destaque); border-color: var(--destaque); background: none; }

.botao-barra:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }

/* "Sair da empresa", ao lado do nome da empresa ativa (ADR-050). Miúdo porque
 * é ação secundária — e com `min-height: 24px` porque o alvo de toque não
 * desce disso (WCAG 2.5.8), que é o mesmo motivo do padding de 8px acima.
 * A borda é a fina: um segundo botão com a borda forte do Sair competia com
 * ele, e a saída que derruba a sessão é a que tem de pesar mais. */
.botao-barra.miudo {
    padding: 4px 8px; min-height: 24px; gap: 5px;
    font-size: 11.5px; border-color: var(--linha);
    /* Nunca quebra em duas linhas: medido a 820 px, "Sair da empresa" virava
     * duas linhas e engolia o nome da empresa, que ficava em "Cliente …".
     * Quem encolhe é o nome, que tem reticências para isso. */
    white-space: nowrap; flex: 0 0 auto;
  }

/* O <form> do botão vive dentro da caixa do nome, e as páginas dos
 * subprojetos têm `form { margin: ... }` global — a mesma blindagem da
 * .barra-acoes, pelo mesmo motivo. */
.barra-empresa form { margin: 0; }

/* O Entrar é botão cheio: sem sessão, é a única ação da barra. Texto escuro
 * sobre o esmeralda dá 5,7:1 (WCAG 1.4.3 pede 4,5:1); sobre o verde claro do
 * hover, mais ainda. */
.botao-barra.destaque {
    padding: 9px 16px; font-size: 14px; font-weight: 600;
    color: #06231b; background: var(--destaque); border-color: var(--destaque);
  }

.botao-barra.destaque:hover { color: #06231b; background: var(--destaque-claro); border-color: var(--destaque-claro); }

/* A pergunta vai à própria barra (container query), não à janela: foi assim
 * que ela parou de quebrar em duas linhas quando tinha a largura do cartão.
 * De ponta a ponta, a largura dela é a da janela — a regra continua valendo e
 * não depende de quem a chama. */
.barra { container: barra / inline-size; }

/* Até 1000 px o nome de quem entrou sai (continua no title do Sair) e o Sair
 * vira só ícone: com os menus Fiscal e Contábil, tudo por extenso não cabe. */
@container barra (max-width: 1000px) {
  .barra-quem { display: none; }
  /* Base zero: a empresa ocupa o que sobra e o nome longo ganha reticências,
   * em vez de empurrar os botões para uma segunda linha. Encostada à direita,
   * perto dos botões dela, e não colada no menu Contábil. */
  .barra-empresa { flex: 1 1 0; align-items: flex-end; text-align: right; }
  /* Só o Sair vira ícone. "Empresas e pessoas" fica escrito: é a porta que
   * quem chega por convite precisa enxergar, e um ícone de setas não diz isso. */
  .barra-acoes form .botao-barra span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .barra-acoes form .botao-barra { padding: 8px 10px; position: relative; }
  /* O "Sair da empresa" vira só ícone pelo mesmo motivo, e por um a mais:
   * medido a 820 px, com o rótulo escrito o nome da empresa caía para
   * "Client…" — e é justamente o nome que esta barra existe para mostrar.
   * Duas empresas com o mesmo começo ficariam indistinguíveis, que é o
   * acidente que a ADR-050 quer evitar. O título do botão continua dizendo
   * de onde se sai. */
  .barra-empresa form .botao-barra span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .barra-empresa form .botao-barra { padding: 4px 7px; position: relative; }
}

/* Até 760 px a empresa ativa desce para uma segunda linha, com a linha
 * inteira para o nome: medido a 620 px, dividindo a linha com os menus e os
 * botões, ela ficava com 20 px — "EMPRESA ATIVA" em duas linhas e o nome
 * reduzido à primeira letra. Marca, menus e botões ficam na primeira. */
@container barra (max-width: 760px) {
  .barra-miolo { column-gap: 14px; }
  .barra-empresa { order: 3; flex-basis: 100%; align-items: flex-start; text-align: left; }
  /* Com a linha inteira para a empresa, o rótulo do botão volta: aqui ele não
   * disputa espaço com o nome. */
  .barra-empresa form .botao-barra span {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none;
  }
  .barra-empresa form .botao-barra { padding: 4px 8px; }
}

/* Celular. O menu aberto ocupa a largura da barra, em vez de sair pela
 * direita da tela a partir do botão Contábil. */
@media (max-width: 560px) {
  .barra-miolo { gap: 8px 10px; padding-block: 8px; min-height: 56px; }
  .barra .marca { font-size: 19px; }
  .barra-areas { gap: 0; }
  .area-menu { position: static; }
  .area-menu > summary { padding: 9px 7px; font-size: 14px; gap: 3px; }
  .area-lista { left: 0; right: 0; top: 100%; min-width: 0; box-shadow: 0 8px 0 var(--sombra); }
  /* Os botões da conta ficam só com o ícone. O rótulo sai da tela mas continua
   * no nome acessível do botão. O Entrar mantém o texto: é a única ação e
   * cabe. */
  .barra-acoes .botao-barra:not(.destaque) span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .barra-acoes .botao-barra:not(.destaque) { padding: 8px 10px; position: relative; }
  .botao-barra.destaque { padding: 8px 12px; }
}

/* Telefone pequeno: medido a 360 px, marca + menus + os dois botões pediam
 * 328 px numa linha de 312, e os botões desciam para uma terceira linha. A
 * barra aperta o próprio respiro (o conteúdo da página fica como está: 8 px
 * de desalinho custam menos que uma linha a mais de barra). */
@media (max-width: 400px) {
  .barra-miolo { padding-inline: 16px; gap: 8px; }
  .barra .marca { font-size: 18px; }
  .area-menu > summary { padding-inline: 5px; gap: 2px; }
  .barra-acoes { gap: 6px; }
}

/* A barra é a mesma em toda página: na troca de página (View Transitions)
 * ela fica parada enquanto o conteúdo muda. */
.barra { view-transition-name: barra; }

/* Selo com o projeto-mãe de um submódulo (ADR-033): "AYO_READ › ...". */
.selo a.mae { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.selo a.mae:hover { color: var(--destaque-claro); }

/* ---- Saidas.txt do Domínio (ADR-031) --------------------------------------
 * Painel compartilhado pelo ayo_read e pelo ayo_read_es; o comportamento está
 * em /estatico/js/dominio.js. Só usa as variáveis do tema, então cada
 * subprojeto o pinta com as próprias cores. */
.dominio { margin-top: 18px; padding: 18px 16px; border: 1px solid var(--linha-forte); background: var(--papel); }
.dominio[hidden] { display: none; }
.dominio h3 { margin: 0 0 6px; font-size: 16px; font-family: var(--fonte-corpo); }
.dominio p { font-size: 13.5px; color: var(--texto-medio); margin: 6px 0; }
.dominio label.campo { display: block; font-size: 13px; margin: 12px 0 4px; }
.dominio select, .dominio input[type=text] {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 14px;
  color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha-forte);
}
.dominio select:focus, .dominio input[type=text]:focus { outline: 3px solid var(--destaque); outline-offset: 1px; }
.dominio .tabela-cfop { overflow-x: auto; margin-top: 10px; }
.dominio table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dominio th, .dominio td { padding: 6px 6px; border-bottom: 1px solid var(--linha); text-align: left; }
.dominio th { font-weight: normal; color: var(--texto-medio); font-family: var(--fonte-mono); font-size: 11.5px; text-transform: uppercase; }
.dominio td.n { font-family: var(--fonte-mono); white-space: nowrap; }
.dominio td input[type=text] { width: 7.5em; padding: 6px 8px; font-family: var(--fonte-mono); }
.dominio td input[aria-invalid=true] { border-color: var(--erro); }
.dominio .marcar { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; margin-top: 12px; }
.dominio .marcar input { margin-top: 3px; }
.dominio .erro-dominio { color: var(--erro); font-size: 14px; margin-top: 10px; min-height: 1em; }
.dominio ul.avisos-dominio { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--aviso); }
.dominio ul.avisos-dominio li { margin: 4px 0; }
.dominio .obs { border-top: 1px solid var(--linha); margin-top: 14px; padding-top: 10px; font-size: 12.5px; }
.dominio .obs a { color: var(--destaque-claro); }

/* ---- Resultado dos leitores (AYO_READ e AYO_READ_ES) — ADR-037 -------------
 * A conclusão vem primeiro: o que foi lido, se houve problema e os arquivos
 * prontos. O painel (categorias, UFs, maiores) desce inteiro, sem perder nada.
 * Antes, "Baixar planilha" ficava a 2.418 px de uma página de 2.801. */
.resultado-topo { display: grid; gap: 14px; margin: 0 0 24px; padding-bottom: 22px;
                  border-bottom: 1px solid var(--linha); }
.resultado-estado { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.resultado-estado strong { font-size: 17px; }
.resultado-estado .detalhe { font-family: var(--fonte-mono); font-size: 12.5px; color: var(--texto-medio); }
.resultado-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
/* Dois níveis de classe de propósito: as páginas dos leitores têm `button {
 * margin-top: 24px; width: 100% }` e `button.secundario { margin-top: 10px }`,
 * que desalinhavam o primário dos outros dois. */
.resultado-topo .resultado-acoes > button { margin: 0; width: auto; flex: 1 1 190px; }

/* Os avisos da leitura na própria tela, e não só na aba da planilha. Aberto
 * por padrão: "o dígito verificador da chave não confere" é o que o contador
 * precisa ler ANTES de baixar. */
/* A empresa do lote (ADR-068): um palpite informado, e por isso com cara de
 * aviso e não de resultado — o selo "não confirmada" é o que não pode sumir. */
.empresa-lote { border: 1px solid var(--linha-forte); border-left: 3px solid var(--destaque);
                padding: 10px 14px; margin: 10px 0 0; font-size: 13.5px; }
.empresa-lote p { margin: 0; }
.empresa-lote .empresa-lote-selo { font-family: var(--fonte-mono); font-size: 11.5px;
                                   color: var(--aviso); white-space: nowrap; }
.empresa-lote .empresa-lote-trocar { display: flex; flex-wrap: wrap; align-items: center;
                                     gap: 8px; margin: 8px 0 0; font-size: 12.5px;
                                     color: var(--texto-medio); }
.empresa-lote select { max-width: 100%; margin: 0; width: auto; }
.empresa-lote-aviso { color: var(--aviso); }
.avisos-leitura { border: 1px solid rgba(240, 180, 94, .55); background: rgba(240, 180, 94, .07);
                  border-left: 3px solid var(--aviso); padding: 12px 14px; }
.avisos-leitura > summary { cursor: pointer; font-weight: 600; color: var(--aviso); }
.avisos-leitura ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 9px;
                     font-size: 13.5px; }
.avisos-leitura li { overflow-wrap: anywhere; }
.avisos-leitura .arq { display: block; font-family: var(--fonte-mono); font-size: 11.5px;
                       color: var(--texto-medio); }
.avisos-leitura .resto { margin: 8px 0 0; font-size: 12.5px; color: var(--texto-medio); }

/* Uma linha por tipo de documento, no lugar dos treze cartões de mesmo peso.
 * Grade, e não tabela: a 390 px o valor desce para baixo do nome em vez de
 * empurrar a página para o lado. */
.por-tipo { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.tipo-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px;
              padding: 11px 2px; border-bottom: 1px solid var(--linha); align-items: baseline; }
.tipo-nome { font-weight: 600; font-size: 15px; }
.tipo-nome .qtd { font-weight: 400; color: var(--texto-medio); font-size: 13.5px; margin-left: 6px; }
.tipo-valor { font-family: var(--fonte-mono); font-size: 16px; text-align: right; }
.tipo-det { grid-column: 1 / -1; font-size: 13px; color: var(--texto-medio); }
.tipo-det .brl { color: var(--tinta); }
.resultado-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--texto-medio); }

/* Tabela do painel: rola dentro da própria caixa, nunca a página. */
.rolo { overflow-x: auto; max-width: 100%; }

/* Cancelamentos no painel dos leitores (ADR-040): a nota com a chave embaixo,
 * e o vínculo em cor — o que não achou a nota no envio é o que pede
 * conferência, por isso no amarelo dos avisos. */
/* A linha inteira do painel, que é grade de duas colunas a partir de 700 px:
 * na meia coluna, a chave de 44 dígitos quebrava em quatro linhas. */
.cancelamentos { grid-column: 1 / -1; }
.cancelamentos .canc-resumo { margin: 0 0 8px; font-size: 13px; color: var(--texto-medio); }
.cancelamentos .canc-nota { display: block; font-weight: 600; }
.cancelamentos .canc-chave { display: block; font-family: var(--fonte-mono); font-size: 11px;
                             color: var(--texto-medio); overflow-wrap: anywhere; }
.cancelamentos .canc-just { display: block; font-size: 11.5px; color: var(--texto-medio); }
.cancelamentos .canc-data { white-space: nowrap; font-family: var(--fonte-mono); }
.reinf { grid-column: 1 / -1; }
.reinf .reinf-resumo { margin: 0 0 8px; font-size: 13px; color: var(--texto-medio); }
.reinf .reinf-linha { display: block; font-weight: 600; }
.reinf .reinf-sub { display: block; font-family: var(--fonte-mono); font-size: 11px;
  color: var(--texto-medio); }
.reinf .reinf-ev { font-family: var(--fonte-mono); font-weight: 600; white-space: nowrap; }
.reinf .reinf-cnr { display: block; font-size: 11.5px; color: var(--texto-medio); }
.reinf .reinf-ret { display: block; white-space: nowrap; }
.reinf .reinf-falta { display: block; font-size: 11.5px; color: var(--aviso); }
.reinf .reinf-alerta { display: block; font-size: 11.5px; color: var(--texto-medio); margin-bottom: 3px; }
.cancelamentos .canc-ok { color: var(--destaque-claro); }
.cancelamentos .canc-falta { color: var(--aviso); }

/* ---- A casca dos leitores: tela inteira com lateral (ADR-045) ----------- */
/* O leitor deixou de ser um cartão no meio da tela. A lateral continua a barra
   do topo — mesmo fundo, encostada nela — e o conteúdo ocupa o resto.
   `min-width: 0` na coluna do conteúdo não é enfeite: sem ele, uma tabela
   larga estica a coluna da grade e a página inteira rola de lado. */
.leitor-tela {
    display: grid; grid-template-columns: 224px minmax(0, 1fr);
    align-items: start; gap: 0;
    /* Desfaz o respiro do body e os 30 px de margem que a barra do topo deixa
       embaixo dela: a lateral tem de ENCOSTAR na barra e na borda da janela,
       senão vira um bloco flutuando, e não a continuação da barra. */
    width: calc(100% + 2 * var(--respiro));
    margin: -30px calc(-1 * var(--respiro)) calc(-1 * var(--respiro));
  }
.leitor-conteudo { min-width: 0; padding: 0 var(--respiro) 40px; }
/* Dentro da casca o cartão não tem mais largura própria: quem manda é a
   coluna. As três larguras da ADR-037 seguem valendo nas telas de sempre. */
/* Dentro da casca o cartão deixa de ser cartão: vira a PÁGINA. Quem tem
   moldura agora é cada informação (ADR-046) — antes tudo dividia o mesmo
   retângulo e só um título com linha embaixo separava um assunto do outro. */
.leitor-tela .cartao { max-width: none; width: 100%; margin: 0; box-shadow: none;
                       border: 0; background: transparent;
                       padding: 26px var(--respiro) 40px;
                       min-height: calc(100vh - 65px); }

/* ---- Cada informação no seu cartão (ADR-046) ---------------------------- */
/* Um degrau acima do fundo: fundo de cartão, borda fina, canto reto (o do
   site, ADR-070) e uma sombra curta. A sombra é curta de propósito — a sombra
   dura, repetida em quinze blocos, viraria um padrão listrado. Ela fica só
   com os cartões de número, mais abaixo. */
.leitor-tela .secao-blocos > *,
.leitor-tela .resultado-topo,
.leitor-tela .tipo-linha,
.leitor-tela .imposto-topo,
.leitor-tela .imposto-vista > .rolo {
    background: var(--cartao); border: 1px solid var(--linha); border-radius: 0;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(233, 239, 236, .04);
  }
/* O h3 é o título DO cartão: começa colado no topo e perde a linha, que agora
   é a borda. */
.leitor-tela .secao-blocos > * > h3:first-child {
    margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linha);
  }
.leitor-tela .secao-blocos { gap: 16px 18px; }
.leitor-tela .secao-titulo { border-bottom: 0; padding-bottom: 4px; }

/* A conclusão da leitura é um cartão como os outros; a linha que a separava do
   painel some junto. */
.leitor-tela .resultado-topo { border-bottom: 1px solid var(--linha); margin-bottom: 22px; }

/* Os tipos de documento viram uma FILEIRA de cartões, um por tipo, em vez de
   linhas empilhadas com divisória. É a informação de maior peso da tela: cada
   uma pede o seu retângulo. */
.leitor-tela .por-tipo { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                         gap: 14px; border-top: 0; margin-bottom: 22px; }
.leitor-tela .tipo-linha { border-bottom: 0; align-content: start; }

/* A tabela de imposto: a faixa de totais num cartão, a tabela em outro. */
.leitor-tela .imposto-topo { margin-bottom: 16px; }
.leitor-tela .imposto-vista > .rolo { padding: 4px 6px; }
.leitor-tela .imposto-tabela th { top: 4px; }

/* O AYO_PAPYROS entra na mesma casca (ADR-047). Os contêineres dele têm outros
   nomes — o cartão numérico é `.card`, a tabela é `.tabela-rolo`, e a escolha
   de entrada é `.opcao` —, então a regra do cartão os alcança por aqui. */
.leitor-tela .card,
.leitor-tela .opcao,
.leitor-tela .tabela-rolo {
    background: var(--cartao); border: 1px solid var(--linha); border-radius: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(233, 239, 236, .04);
  }
/* A tabela rola dentro do cartão, e não a página. */
.leitor-tela .tabela-rolo { overflow: auto; }
/* Cartão desabilitado (o caminho que pede empresa) não se levanta: elevação é
   promessa de clique. */
.leitor-tela .opcao.inativa { box-shadow: none; background: var(--papel); }

/* ---- Cartões de número (ADR-070) ---------------------------------------- */
/* O número de maior peso da tela — um por tipo de documento, os totais do
   extrato — ganha a assinatura do site: sombra dura e faixa à esquerda. São
   poucos por tela, então não listram. A faixa do Papyros acompanha o sentido
   do dinheiro, que o número já diz por extenso no rótulo ("Entradas",
   "Saídas"): a cor confirma, não informa sozinha. */
.leitor-tela .tipo-linha,
.leitor-tela .card {
    border-left: 3px solid var(--destaque); box-shadow: var(--sombra-dura);
  }
.leitor-tela .card:has(.num.entra) { border-left-color: var(--destaque-claro); }
.leitor-tela .card:has(.num.sai) { border-left-color: var(--erro); }

/* O bloco que ocupa a linha inteira continua ocupando — o cartão é dele. */
.leitor-tela .cancelamentos, .leitor-tela .ncm-grafico, .leitor-tela .reinf { grid-column: 1 / -1; }

.leitor-lateral { position: sticky; top: 0; align-self: stretch;
                  background: var(--cartao); border-right: 1px solid var(--linha);
                  min-height: 100vh; padding: 18px 0; }
.leitor-lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral-item {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
    padding: 11px 18px; background: none; border: 0; border-left: 3px solid transparent;
    color: var(--texto-medio); font-family: var(--fonte-corpo); font-size: 14px;
    text-align: left; cursor: pointer;
  }
.lateral-item:hover:not(:disabled) { color: var(--tinta); background: rgba(16, 172, 132, .07); }
.lateral-item:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
.lateral-item[aria-current="page"] { color: var(--tinta); font-weight: 600;
                                     border-left-color: var(--destaque); background: rgba(16, 172, 132, .12); }
/* Desabilitado continua legível: 2,9:1 some no monitor de quem está com o
   sol na tela, e o item vira um borrão sem explicação. */
.lateral-item:disabled { cursor: not-allowed; color: var(--texto-fraco); opacity: .75; }
.lateral-rotulo { flex: 1 1 auto; }
.lateral-tag { flex: 0 0 auto; font-family: var(--fonte-mono); font-size: 10px;
               text-transform: uppercase; letter-spacing: .5px; color: var(--texto-fraco);
               border: 1px solid var(--linha-forte); border-radius: 999px; padding: 1px 6px; }

/* No celular a lateral vira uma faixa de itens acima do conteúdo: uma coluna
   de 224 px ao lado de 390 px de tela não deixa espaço para o conteúdo. */
@media (max-width: 860px) {
  .leitor-tela { grid-template-columns: minmax(0, 1fr); }
  .leitor-lateral { position: static; min-height: 0; padding: 0;
                    border-right: 0; border-bottom: 1px solid var(--linha); }
  .leitor-lateral ul { display: flex; overflow-x: auto; }
  .lateral-item { width: auto; white-space: nowrap; border-left: 0;
                  border-bottom: 3px solid transparent; padding: 12px 14px; }
  .lateral-item[aria-current="page"] { border-left-color: transparent;
                                       border-bottom-color: var(--destaque); }
  .leitor-conteudo { padding: 0 0 32px; }
}

/* ---- Imposto por item (ADR-045) ---------------------------------------- */
.imposto-topo { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline;
                margin: 0 0 14px; }
.imposto-tot { font-size: 13px; color: var(--texto-medio); }
.imposto-tot b { color: var(--tinta); font-family: var(--fonte-mono); font-weight: 600; }
.imposto-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imposto-tabela th { text-align: left; font-weight: normal; color: var(--texto-medio);
                     font-family: var(--fonte-mono); font-size: 10.5px;
                     text-transform: uppercase; letter-spacing: 1.4px;
                     padding: 6px 8px; border-bottom: 1px solid var(--linha-forte);
                     position: sticky; top: 0; background: var(--cartao); }
.imposto-tabela td { padding: 7px 8px; border-bottom: 1px solid var(--linha);
                     vertical-align: top; }
.imposto-tabela .v { text-align: right; font-family: var(--fonte-mono); white-space: nowrap; }
/* CFOP e CST não quebram: no celular o "00 · 01 · 01" virava três linhas
   empilhadas e a linha do item crescia para o triplo da altura. A tabela rola
   de lado dentro da caixa (.rolo), que é o jeito do projeto para tabela larga. */
.imposto-tabela td:nth-child(2), .imposto-tabela td:nth-child(3) { white-space: nowrap; }
.imposto-tabela { min-width: 760px; }
.imposto-tabela tfoot td { border-top: 1px solid var(--linha-forte); border-bottom: 0;
                           font-weight: 600; color: var(--tinta); }
.imposto-item { display: block; max-width: 280px; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.imposto-sub { display: block; font-family: var(--fonte-mono); font-size: 10.5px;
               color: var(--texto-medio); }
/* Campo que o documento não declarou fica vazio, não zero: zero é uma
   declaração, e um DANFE de PDF não declara base nem CST por item. */
.imposto-vazio { color: var(--texto-fraco); }

/* ---- NCM mais vendidos: barras e rosca (ADR-044) ------------------------ */
/* Ocupa a linha inteira da grade da seção: são dois gráficos lado a lado, e
   em meia coluna a legenda da rosca cairia embaixo das barras. */
.ncm-grafico { grid-column: 1 / -1; }
.ncm-corpo { display: grid; gap: 18px; align-items: start; }
@media (min-width: 700px) {
  .ncm-corpo { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
}

/* Uma barra por NCM: código e descrição, o trilho, o valor. O trilho é o
   fundo do cartão para a barra não flutuar sobre nada. */
.ncm-barra { display: grid; grid-template-columns: minmax(0, 190px) 1fr auto;
             gap: 10px; align-items: center; margin: 7px 0; }
.ncm-quem { min-width: 0; }
.ncm-cod { display: block; font-family: var(--fonte-mono); font-size: 12px; color: var(--tinta); }
.ncm-desc { display: block; font-size: 11.5px; color: var(--texto-medio);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncm-trilho { background: var(--papel); border-radius: 5px; height: 10px; min-width: 40px; }
/* Ponta arredondada de 4 px, ancorada na base — a barra nasce no zero e a
   curva fica só na ponta que carrega o dado. */
.ncm-preench { background: var(--destaque); height: 100%; min-width: 3px;
               border-radius: 0 4px 4px 0; }
.ncm-val { text-align: right; white-space: nowrap; }
.ncm-pct { display: block; font-family: var(--fonte-mono); font-size: 11px;
           color: var(--texto-medio); }

/* No celular, a barra não cabe ao lado do nome: sobravam 40 px de trilho, que
   não dá para comparar nada. O nome fica em cima com o valor à direita, e a
   barra ocupa a linha inteira embaixo — mesmo arranjo que as categorias usam. */
@media (max-width: 640px) {
  .ncm-barra { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; margin: 12px 0; }
  .ncm-quem { grid-column: 1; grid-row: 1; }
  .ncm-val { grid-column: 2; grid-row: 1; }
  .ncm-trilho { grid-column: 1 / -1; grid-row: 2; }
  /* Duas linhas, não uma nem oito: o texto da TIPI para um subitem tem 40
     palavras, e solto ele empurra o gráfico para fora da tela. */
  .ncm-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
              -webkit-box-orient: vertical; overflow: hidden; }
}

/* A rosca e a legenda. O total no meio é o número que o gráfico resume. */
.ncm-parte { display: grid; gap: 10px; justify-items: center; }
.ncm-rosca-caixa { position: relative; width: 168px; height: 168px; }
.ncm-rosca { width: 100%; height: 100%; display: block; }
.ncm-centro { position: absolute; inset: 0; display: grid; align-content: center;
              justify-items: center; pointer-events: none; text-align: center; }
.ncm-centro-val { font-family: var(--fonte-mono); font-size: 14px; color: var(--tinta); }
.ncm-centro-rot { font-size: 11px; color: var(--texto-medio); }
.ncm-legenda { list-style: none; margin: 0; padding: 0; width: 100%; }
.ncm-legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr);
                  gap: 8px; align-items: start; margin: 7px 0; }
.ncm-ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; }
.ncm-leg-txt { min-width: 0; }

/* ---- Barra com rótulo largo (ADR-046) ----------------------------------- */
/* A `.barra-uf` nasceu para sigla de UF: 34 px de rótulo. Os blocos que o
   `leitor.js` compartilha — entradas e saídas, tipos de nota, origem dos
   produtos — têm rótulo por extenso e usam a variante `.origem`.
   As regras viviam só no template do AYO_READ; o AYO_READ_ES, que usa o MESMO
   leitor.js, desenhava "Entradas" no talhe de 34 px e o rótulo saía cortado.
   Regra de classe que o JS compartilhado aplica mora no núcleo — é a mesma
   lição da ADR-037, agora do lado do CSS. */
.barra-uf.origem { grid-template-columns: 116px 1fr auto; }
.barra-uf.origem .uf { white-space: normal; font-size: 12px; line-height: 1.25;
                       font-family: var(--fonte-corpo); }
.origem-nota { margin: 6px 0 0; font-size: 12px; color: var(--texto-medio); }
@media (max-width: 480px) {
  .barra-uf.origem .val { white-space: normal; text-align: right; }
}

/* ---- Simples Nacional (ADR-054) ----------------------------------------- */
/* A vista do extrato do PGDAS-D. As barras são as mesmas `.barra-uf.origem` do
   resto do painel — e, como as de NCM (ADR-044), têm uma cor só: o comprimento
   já diz o tamanho. Duas variantes carregam significado, e NENHUMA depende de
   cor para ser lida: `.apurado` (o mês deste extrato, que também diz "apurado"
   no texto da barra) e `.estourado` (limite passado, com o percentual escrito
   ao lado). */
.simples-cabeca h3 { margin: 0 0 2px; }
.simples-cartoes { display: grid; gap: 12px; margin: 14px 0 18px;
                   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.simples-cartao { background: var(--cartao); border: 1px solid var(--linha);
                  border-left: 3px solid var(--destaque); box-shadow: var(--sombra-dura);
                  padding: 14px 16px;
                  display: flex; flex-direction: column; gap: 2px; }
.simples-num { font-family: var(--fonte-mono); font-size: 19px; color: var(--tinta); }
.simples-rot { font-size: 12px; color: var(--texto-medio); }
.simples-sub { margin: 2px 0 10px; font-size: 12px; color: var(--texto-medio); }

/* Uma grade só por bloco, com as linhas em `display: contents`: as três
   colunas (rótulo, trilho, valor) passam a ser as MESMAS para todas as barras
   do bloco. Linha a linha, o trilho é o `1fr` que sobra depois do valor — e
   quem tivesse valor mais longo ganhava trilho mais curto, desenhando o mês
   maior como menor. Comprimento de barra ao lado de outra tem de ter a mesma
   régua, ou o gráfico mente. */
.simples-barras { display: grid; grid-template-columns: 116px 1fr auto;
                  gap: 5px 8px; align-items: center; }
.simples-barras .barra-uf.origem { display: contents; }
/* O que não é barra (a descrição do anexo) atravessa as três colunas. */
.simples-barras > :not(.barra-uf) { grid-column: 1 / -1; margin: 0 0 6px; }
/* Em tela estreita o rótulo sobe para a linha dele: com rótulo, trilho e
   valor lado a lado em 342 px de largura útil, o trilho sobrava com 4 px e a
   barra deixava de ser barra. */
@media (max-width: 560px) {
  .simples-barras { grid-template-columns: 1fr auto; }
  .simples-barras .barra-uf.origem .uf { grid-column: 1 / -1; margin-top: 4px; }
  .simples-barras .barra-uf.origem .val { white-space: normal; text-align: right; }
}

.barra-uf.origem.apurado .preench { background: var(--destaque-claro); }
.barra-uf.origem.estourado .preench { background: var(--erro); }

/* A diferença entre o declarado e as notas, e os avisos do extrato. A cor
   acompanha uma PALAVRA ("confere", "diferença", "atenção"): quem não
   distingue as cores lê a mesma coisa. */
.simples-diferenca { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
                     margin: 10px 0 0; font-size: 13px; color: var(--tinta); }
.simples-marca { font-family: var(--fonte-mono); font-size: 10.5px;
                 letter-spacing: 1.4px; text-transform: uppercase;
                 padding: 2px 7px; border: 1px solid currentColor; }
.simples-diferenca.ok .simples-marca { color: var(--destaque); }
.simples-diferenca.falta .simples-marca,
.simples-diferenca.sobra .simples-marca { color: var(--aviso); }
.simples-diferenca.atencao .simples-marca { color: var(--aviso); }
.simples-comparacao { grid-column: 1 / -1; }

/* ---- Nome e detalhe numa célula do painel (ADR-043) --------------------- */
/* Produto e cliente aparecem como nome em cima e detalhe embaixo — NCM e
   código, CNPJ e tipos. Classes próprias, e não as do bloco de cancelamentos:
   aquelas estão sob `.cancelamentos`, e reaproveitá-las de fora deixava o
   detalhe colado no nome ("PARAFUSO M8NCM 7318.15.00"). */
.linha-nome { display: block; font-weight: 600; }
.linha-sub { display: block; font-family: var(--fonte-mono); font-size: 11px;
             color: var(--texto-medio); overflow-wrap: anywhere; }

/* ---- Campo de conta contábil que se digita (conta.js, ADR-038) ----------- */
.conta-campo { display: block; min-width: 0; }
.conta-campo input {
    width: 100%; min-width: 0; box-sizing: border-box; margin: 0;
    background: var(--papel); color: var(--tinta); border: 1px solid var(--linha);
    padding: 5px 8px; font-family: var(--fonte-corpo); font-size: 12.5px;
    text-overflow: ellipsis;
  }
.conta-campo input:focus { outline: 2px solid var(--destaque); outline-offset: 0; }
.conta-campo input.manual { border-color: var(--destaque); }
.conta-campo input::placeholder { color: var(--texto-fraco); }
.conta-lista {
    position: fixed; z-index: 50; margin: 0; padding: 4px 0; list-style: none;
    max-height: 260px; overflow-y: auto; box-sizing: border-box;
    background: var(--cartao); border: 1px solid var(--linha-forte);
    box-shadow: 6px 6px 0 var(--sombra); font-size: 13px; text-align: left; white-space: normal;
  }
.conta-lista li { padding: 6px 10px; cursor: pointer; color: var(--tinta); }
.conta-lista li .cod { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--destaque-claro); }
.conta-lista li[aria-selected="true"], .conta-lista li:hover { background: rgba(16, 172, 132, .18); }
.conta-lista li.vazio { color: var(--texto-medio); font-style: italic; }
.conta-lista li.nada { cursor: default; color: var(--texto-medio); font-size: 12px; }
.conta-lista li.nada:hover { background: none; }