/* ---------------------------------------------------------------------------
   MCont — interface

   Duas ideias guiam o visual:

   1. A tela e uma ferramenta de trabalho, usada horas por dia. Densidade alta,
      tipografia tabular nos numeros, nenhuma animacao que atrase leitura.
   2. Situacao fiscal se le de relance. Cancelado, denegado e resumo tem cor
      propria e sempre a mesma, em qualquer tela.
   --------------------------------------------------------------------------- */

/* Cores, sombras, raios, fontes e medidas vem de `tokens.css`, gerado a
   partir do design system por `scripts/aplicar_tokens.py` e carregado antes
   deste arquivo. A paleta clara e a escura (`:root[data-tema="escuro"]`)
   estao la, escritas uma vez. Nada de cor nova aqui: ela entra no design
   system e chega por la. */

/* Fontes da identidade MCont (direcao D, Monograma): Inter no corpo e na
   grade, Sora no nome e nos titulos. Servidas daqui, nao do Google: o sistema
   roda em rede de escritorio e em VPS, e uma tela que espera um CDN externo
   para pintar o texto e a primeira coisa a quebrar quando a rede oscila.
   So os recortes latin e latin-ext (portugues inteiro cabe neles); licenca
   SIL OFL 1.1, em `fontes/OFL-*.txt`. `swap`: o texto aparece na fonte do
   sistema e troca quando a fonte chega, em vez de ficar invisivel. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fontes/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fontes/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fontes/sora-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fontes/sora-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); }

/* --- estrutura ----------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--largura-lateral) 1fr; min-height: 100vh; }

.lateral {
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid var(--borda);
}
.marca .simbolo { width: 30px; height: 30px; flex: none; }
.marca strong {
  display: block;
  font-family: var(--font-titulo);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.marca span { display: block; color: var(--texto-3); font-size: 11px; margin-top: 1px; }

/* O monograma: o C em laranja de marca, o M na cor do texto. As duas cores
   vem de token, entao o simbolo acompanha o tema sem segunda copia. */
.simbolo { display: block; overflow: visible; }
.simbolo .arco { fill: none; stroke: var(--marca); stroke-width: 6; stroke-linecap: round; }
.simbolo .letra {
  fill: none;
  stroke: var(--texto);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu { padding: 8px; flex: 1; overflow-y: auto; }
.menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--raio);
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 500;
}
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a[aria-current="page"] { background: var(--acento-fraco); color: var(--acento); }
.menu .icone { width: 16px; text-align: center; opacity: .85; }

.rodape-lateral {
  border-top: 1px solid var(--borda);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--texto-2);
}
.rodape-lateral .papel {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.acoes-rodape {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 10px;
}
/* O botao de tema mostra o estado por extenso, e nao so um icone: um sol
   sozinho nao diz se e "esta claro" ou "clique para clarear". */
.botao.tema { justify-content: flex-start; font-size: 12px; }

.conteudo { min-width: 0; display: flex; flex-direction: column; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
}
.topo h1 { margin: 0; font-family: var(--font-titulo); font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.topo .sub { color: var(--texto-2); font-size: 12.5px; margin-top: 1px; }

.corpo { padding: 18px 20px 32px; flex: 1; min-width: 0; }

/* --- controles ----------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}
.botao:hover:not(:disabled) { background: var(--superficie-2); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.botao.primario:hover:not(:disabled) { filter: brightness(1.08); }
.botao.perigo { color: var(--erro); border-color: var(--erro); }
.botao.pequeno { padding: 4px 9px; font-size: 12.5px; }

/* Acao secundaria com cara de link, mas com `<button>` por baixo: teclado,
   leitor de tela e foco continuam funcionando, o que um `<a href="#">` perde. */
.botao.link, button.link {
  background: none;
  border: none;
  color: var(--acento);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px 0 0;
  text-decoration: underline;
}
button.link:hover { filter: brightness(1.15); }

/* QR do segundo fator. Fundo branco sempre, inclusive no tema escuro: leitor
   de QR espera modulos escuros sobre claro, e um QR invertido falha em boa
   parte dos aplicativos. */
.qr-mfa {
  display: flex;
  justify-content: center;
  background: #fff;
  padding: 10px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  margin: 4px 0 10px;
}
.qr-mfa img { display: block; }

.passos { margin: 4px 0 12px; padding-left: 20px; color: var(--texto-2); font-size: 12.5px; }
.passos li { margin-bottom: 5px; }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 11.5px; color: var(--texto-2); font-weight: 600; }
.campo input, .campo select {
  padding: 7px 9px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  min-width: 0;
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 14px;
}
.filtros .obrigatorio label::after { content: " *"; color: var(--erro); }

/* --- cartoes e metricas -------------------------------------------------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.cartao .rotulo { font-size: 11.5px; color: var(--texto-2); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.cartao .valor { font-size: 22px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.cartao .nota { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.cartao.atencao { border-color: var(--alerta); background: var(--alerta-fraco); }
.cartao.ruim { border-color: var(--erro); background: var(--erro-fraco); }
/* "bom" e para trabalho acontecendo, nao para ausencia de problema: no painel
   de fila, "executando: 3" e boa noticia e "executando: 0" e apenas silencio. */
.cartao.bom { border-color: var(--ok); background: var(--ok-fraco); }

/* --- tabela e rolagem virtual ------------------------------------------- */
.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.barra-selecao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--acento-fraco);
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}

.rolagem { overflow: auto; position: relative; }

table.grade { width: 100%; border-collapse: separate; border-spacing: 0; }
table.grade thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  padding: 8px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
table.grade td {
  padding: 0 10px;
  height: var(--altura-linha);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Variante para tabelas curtas e NAO virtualizadas (o painel de
   sincronizacao). A altura fixa e o `nowrap` acima existem para a rolagem
   virtual da lista de documentos, onde toda linha tem de medir exatamente
   --altura-linha. No painel isso obrigava o motivo da falha a caber numa linha
   so, e o texto empurrava a coluna de acoes para fora da tela. Aqui a linha
   pode crescer; nao aplicar esta classe na lista de documentos. */
table.grade.alturalivre td {
  height: auto;
  padding: 8px 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}
table.grade.alturalivre td.mono,
table.grade.alturalivre td.num { white-space: nowrap; }

table.grade tbody tr:hover td { background: var(--superficie-2); }
table.grade tbody tr.selecionada td { background: var(--acento-fraco); }
table.grade .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grade .mono { font-family: var(--mono); font-size: 12px; }
table.grade .clicavel { cursor: pointer; }
table.grade col.estreita { width: 34px; }

/* Espacadores da rolagem virtual: so as linhas visiveis existem no DOM. */
tr.espacador td { padding: 0; border: 0; height: 0; }

/* --- selo de situacao ---------------------------------------------------- */
.selo {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--raio-pilula);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* O texto do selo e o valor cru do enum, em minuscula: "autorizado",
   "resumo", "sefaz". Sobe so a primeira letra.

   `text-transform: capitalize` seria o reflexo, e esta errado aqui: ele sobe a
   inicial de **cada palavra**, e o hifen conta como separador — "nf-e" sairia
   "Nf-E", e "so resumo" viraria "So Resumo". `::first-letter` faz exatamente o
   que foi pedido e nada alem disso. */
.selo::first-letter,
.rodape-lateral .papel::first-letter { text-transform: uppercase; }
.selo.autorizado   { background: var(--ok-fraco);     color: var(--ok); }
.selo.cancelado    { background: var(--erro-fraco);   color: var(--erro); }
.selo.denegado     { background: var(--erro-fraco);   color: var(--erro); }
.selo.inutilizado  { background: var(--neutro-fraco); color: var(--texto-2); }
.selo.desconhecido { background: var(--neutro-fraco); color: var(--texto-2); }
.selo.resumo       { background: var(--alerta-fraco); color: var(--alerta); }
.selo.completo     { background: var(--neutro-fraco); color: var(--texto-2); }
.selo.sefaz        { background: var(--acento-fraco); color: var(--acento); }
.selo.upload       { background: var(--neutro-fraco); color: var(--texto-2); }
/* Situacao de assinatura (carteira do provedor). "Em teste" e neutro de
   proposito: nao e um problema, e pintar de amarelo faria todo cliente novo
   parecer um alerta na primeira semana. */
.selo.ativa        { background: var(--ok-fraco);     color: var(--ok); }
.selo.teste        { background: var(--acento-fraco); color: var(--acento); }
.selo.suspensa     { background: var(--erro-fraco);   color: var(--erro); }
.selo.encerrada    { background: var(--neutro-fraco); color: var(--texto-2); }

/* Celula de tabela que precisa chamar atencao — atraso de pagamento, cota
   estourada. Cor sozinha nao carrega o significado: o texto da celula ja diz
   "3 meses · desde 04/2026", e a cor so apressa a leitura. */
td.ruim    { color: var(--erro); font-weight: 600; }
td.atencao { color: var(--alerta); }

/* Filtros rapidos: uma fileira de botoes que escolhe um recorte. O estado
   ligado tambem vai em `aria-pressed`, entao quem usa leitor de tela nao
   depende do fundo. */
.filtros-rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros-rapidos .botao.ativo {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}

/* --- abas ---------------------------------------------------------------- */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
.abas button {
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--texto-2);
  font-weight: 500;
}
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }

/* --- pares rotulo/valor -------------------------------------------------- */
.pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 22px; }
.par .rotulo { font-size: 11.5px; color: var(--texto-2); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.par .valor { margin-top: 1px; word-break: break-word; }
.par .valor.mono { font-family: var(--mono); font-size: 12.5px; }

pre.xml {
  margin: 0;
  padding: 13px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  max-height: 62vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- login --------------------------------------------------------------- */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.caixa-login {
  width: 100%;
  max-width: var(--largura-login);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-caixa);
  box-shadow: var(--sombra);
  padding: 26px;
}
.caixa-login .identidade { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.caixa-login .simbolo { width: 40px; height: 40px; flex: none; }
.caixa-login h1 { margin: 0; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; letter-spacing: -.7px; }
.caixa-login .sub { color: var(--texto-2); font-size: 13px; margin-bottom: 20px; }
.caixa-login .campo { margin-bottom: 13px; }
.caixa-login .botao { width: 100%; justify-content: center; margin-top: 6px; }
.caixa-login .dica {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-3);
  line-height: 1.6;
}

.qr { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: var(--raio); }
.codigos-recuperacao {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px;
  background: var(--superficie-2);
  border-radius: var(--raio);
  margin: 10px 0;
}

/* --- avisos e estados ---------------------------------------------------- */
.aviso {
  padding: 10px 13px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  margin-bottom: 12px;
  font-size: 13px;
}
/* O X do aviso: discreto ate o ponteiro chegar perto. Ele nao pode competir
   com o texto do proprio aviso, que e o que importa ali. */
.fechar-aviso {
  border: 0; background: none; cursor: pointer; color: inherit;
  opacity: .5; font-size: 18px; line-height: 1; padding: 0 2px; border-radius: var(--raio-pequeno);
}
.fechar-aviso:hover, .fechar-aviso:focus-visible { opacity: 1; background: rgba(127, 127, 127, .15); }

.aviso.erro   { border-color: var(--erro);   background: var(--erro-fraco);   color: var(--erro); }
.aviso.ok     { border-color: var(--ok);     background: var(--ok-fraco);     color: var(--ok); }
.aviso.atencao{ border-color: var(--alerta); background: var(--alerta-fraco); color: var(--alerta); }

.vazio { padding: 44px 20px; text-align: center; color: var(--texto-3); }
.vazio .titulo { font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }

.carregando { padding: 40px; text-align: center; color: var(--texto-3); }

.barra-progresso { height: 6px; background: var(--superficie-2); border-radius: var(--raio-pilula); overflow: hidden; }
.barra-progresso > div { height: 100%; background: var(--acento); transition: width .3s; }

.modal-fundo {
  position: fixed;
  inset: 0;
  background: var(--veu-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: var(--z-modal);
}
.modal {
  background: var(--superficie);
  border-radius: var(--raio-caixa);
  box-shadow: var(--sombra-modal);
  width: 100%;
  max-width: var(--largura-modal);
  max-height: 88vh;
  overflow: auto;
  padding: 22px;
}
.modal.largo { max-width: 860px; }

/* Tributos do item: linha subordinada, dentro da mesma tabela. O recuo e o
   fundo dizem "isto pertence a linha de cima" sem precisar de titulo. */
/* O gatilho que abre os tributos do item. Coluna estreita, sem moldura: ele
   e uma seta, nao um botao de acao. */
.gatilho-tributos {
  border: 0; background: none; cursor: pointer; color: var(--texto-2);
  font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: var(--raio-pequeno);
}
.gatilho-tributos:hover, .gatilho-tributos:focus-visible {
  background: rgba(127, 127, 127, .15); color: var(--texto);
}

.tributos-do-item > td { background: var(--fundo-2, rgba(127, 127, 127, .05)); }
.tributos-do-item table.grade { font-size: 12px; }
.tributos-do-item table.grade th { text-transform: none; letter-spacing: 0; }
.modal h2 { margin: 0 0 14px; font-family: var(--font-titulo); font-size: 17px; letter-spacing: -.3px; }

/* Campo que nao se edita tem de parecer que nao se edita. O CNPJ na gaveta e
   somente leitura, e com a aparencia de campo normal o usuario tentava digitar
   nele. */
input[readonly], textarea[readonly] {
  background: var(--superficie-2);
  color: var(--texto-2);
  cursor: default;
}

/* --- Gaveta (painel lateral em etapas) -----------------------------------
   Usada pelo cadastro/edicao de empresa. Gaveta e nao modal porque o conteudo
   e longo e de altura variavel: um modal centralizado de 5 etapas ou estoura a
   tela ou obriga a rolar o fundo junto. */
.gaveta-fundo {
  position: fixed;
  inset: 0;
  background: var(--veu-gaveta);
  z-index: var(--z-gaveta);
  display: flex;
  justify-content: flex-end;
}
.gaveta {
  background: var(--fundo);
  width: 100%;
  max-width: var(--largura-gaveta);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-gaveta);
}
.gaveta-cabecalho {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 16px 20px 0;
}
.gaveta-cabecalho .titulo { display: flex; align-items: flex-start; gap: 10px; }
.gaveta-cabecalho h2 { margin: 0; font-family: var(--font-titulo); font-size: 17px; letter-spacing: -.3px; }
.gaveta-cabecalho .sub { color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
.gaveta-fechar {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--texto-2);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--raio);
}
.gaveta-fechar:hover { background: var(--superficie-2); color: var(--texto); }

.etapas { display: flex; gap: 4px; margin: 16px 0 0; overflow-x: auto; }
.etapa {
  flex: 1;
  min-width: 96px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 4px 10px;
  cursor: pointer;
  color: var(--texto-3);
  font-size: 11.5px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.etapa .bolha {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--borda-forte);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.etapa:hover:not(:disabled) { color: var(--texto-2); }
.etapa[aria-current="step"] { color: var(--acento); border-bottom-color: var(--acento); }
.etapa[aria-current="step"] .bolha {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
}
.etapa.completa .bolha { border-color: var(--ok); background: var(--ok-fraco); color: var(--ok); }
.etapa.completa { color: var(--ok); }
.etapa:disabled { cursor: not-allowed; opacity: .5; }

.gaveta-corpo { flex: 1; overflow: auto; padding: 18px 20px; }
.gaveta-rodape {
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.gaveta-rodape .espaco { flex: 1; }

.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 14px;
}
.bloco > h3 { margin: 0 0 4px; font-size: 13.5px; }
.bloco > .ajuda { color: var(--texto-2); font-size: 12.5px; margin: 0 0 12px; }
.bloco.perigo { border-color: var(--erro); }
.bloco.perigo > h3 { color: var(--erro); }

.linha-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-campos > .campo { flex: 1; min-width: 130px; }

/* Interruptor: um checkbox com cara de chave, como no painel de referencia.
   O <input> continua sendo o controle real — teclado e leitor de tela seguem
   funcionando, e o rotulo clica nele. */
.chave { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave .trilho {
  flex: none;
  width: 38px;
  height: 21px;
  border-radius: 11px;
  background: var(--borda-forte);
  position: relative;
  transition: background .15s;
  margin-top: 1px;
}
.chave .trilho::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.chave input:checked + .trilho { background: var(--acento); }
.chave input:checked + .trilho::after { transform: translateX(17px); }
.chave input:focus-visible + .trilho { outline: 2px solid var(--acento); outline-offset: 2px; }
.chave .texto { font-size: 13px; }
.chave .texto .nota { color: var(--texto-2); font-size: 12px; margin-top: 2px; }

@media (max-width: 720px) {
  .gaveta { max-width: 100%; }
}

.dropzone {
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: 34px 20px;
  text-align: center;
  color: var(--texto-2);
  background: var(--superficie);
  cursor: pointer;
}
.dropzone.sobre { border-color: var(--acento); background: var(--acento-fraco); }

/* --- menu de contexto ------------------------------------------------------ */
.menu-contexto {
  position: fixed;
  z-index: var(--z-gaveta);
  min-width: 208px;
  padding: 4px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-menu);
}
.menu-contexto .titulo {
  padding: 6px 10px 7px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borda);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-3);
  letter-spacing: .4px;
  /* Sem `text-transform: uppercase`, que e o reflexo para um cabecalho de
     menu: aqui o texto e o nome do documento, e maiuscula forcada transforma
     "NF-e" em "NF-E" — o mesmo defeito que a tabela tinha e que foi corrigido. */
}
.menu-contexto button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.menu-contexto button:hover:not(:disabled),
.menu-contexto button:focus-visible {
  background: var(--acento-fraco);
  color: var(--acento);
  outline: none;
}
/* Item desligado fica visivel, e nao some: sumir mudaria a altura do menu de
   um documento para outro, e o usuario perderia a posicao do item que quer. */
.menu-contexto button:disabled { opacity: .45; cursor: not-allowed; }
.menu-contexto button.perigo { color: var(--erro); }
.menu-contexto .icone { width: 16px; text-align: center; opacity: .8; }

/* --- etiquetas ------------------------------------------------------------- */
.linha-etiqueta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  cursor: pointer;
}
.linha-etiqueta:hover { background: var(--superficie-2); }
.marca-etiqueta {
  width: 10px;
  height: 10px;
  border-radius: var(--raio-marca);
  flex: none;
}
.criar-etiqueta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}
.criar-etiqueta input {
  flex: 1;
  padding: 6px 9px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  min-width: 0;
}
.acoes-modal {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* --- graficos do painel ---------------------------------------------------
   Marcas finas, eixo recessivo, nenhum numero escrito em cima de toda barra:
   a leitura exata mora na tabela ao lado, e a barra responde "qual a forma".
   -------------------------------------------------------------------------- */

.titulo-grafico {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
  margin-bottom: 6px;
}

.grafico { width: 100%; height: auto; display: block; overflow: visible; }
/* A barra e o dado; a linha de zero e so referencia. */
.grafico .eixo { stroke: var(--borda); stroke-width: 1; }
.grafico .rotulo-eixo { fill: var(--texto-3); font-size: 10.5px; font-family: var(--fonte); }
.grafico rect { transition: opacity .08s linear; }
.grafico:hover rect { opacity: .55; }
.grafico rect:hover { opacity: 1; }

/* Barra empilhada horizontal. O respiro de 2px entre fatias e o que separa
   duas cores vizinhas sem depender de as distinguir. */
.barra-composta {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: var(--raio-marca);
  overflow: hidden;
  background: var(--neutro-fraco);
}
.barra-composta > span { display: block; height: 100%; min-width: 2px; }

/* O quadradinho de cor ao lado do nome escrito: e ele que faz a identidade
   nao ser "so a cor" — some a cor, sobra a linha da tabela com o nome. */
.marca-serie {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .grafico rect { transition: none; }
}

/* --- usuarios --------------------------------------------------------------- */
/* Acesso desativado continua na lista (a trilha de auditoria cita a pessoa),
   mas recua visualmente para nao competir com quem esta ativo. */
table.grade tr.inativa td { color: var(--texto-3); }
.lista-marcacao {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: 8px; padding: 4px;
}
.item-marcacao {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.item-marcacao:hover { background: var(--neutro-fraco); }
.item-marcacao .mono { font-family: var(--mono); font-size: 11.5px; }
details.painel > summary { cursor: pointer; font-weight: 600; }

@media (max-width: 860px) {
  /* `min-width: 0` nos dois: sem isso o menu em linha nao encolhe, estica a
     barra lateral e a pagina inteira passa a rolar na horizontal em vez de o
     menu rolar dentro de si. O defeito ficou visivel ao entrar o setimo item
     de menu — com seis ainda caberia, e a falha esperava a proxima tela. */
  .app { grid-template-columns: 1fr; }
  .app > * { min-width: 0; }
  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    min-width: 0;
  }
  /* Em faixa, o subtitulo da marca disputava largura com o menu e o
     empurrava para fora da tela; fica so o simbolo e o nome. */
  .marca { border: 0; flex: none; }
  .marca span { display: none; }
  .menu { display: flex; gap: 4px; min-width: 0; }
  .rodape-lateral { border: 0; white-space: nowrap; }
}

/* --- tela Inicio ------------------------------------------------------------
   A primeira tela ao entrar. Densidade um pouco menor que o resto do sistema
   de proposito: aqui se le de relance o que esta ruim, e a lista densa mora
   em Documentos e Sincronizacao. As cores sao as de situacao (ok, alerta,
   erro) e significam o mesmo que em qualquer outra tela; o acento so marca
   acao e posicao. */

.inicio, .inicio-pilha { display: flex; flex-direction: column; gap: 14px; }
.inicio .bloco { margin-bottom: 0; }

/* Ponto de legenda: cor da situacao com o nome escrito ao lado, sempre. */
.ponto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--raio-pilula);
  background: var(--borda-forte);
  flex: none;
}
.ponto.ok { background: var(--ok); }
.ponto.alerta { background: var(--alerta); }
.ponto.erro { background: var(--erro); }
.ponto.neutro { background: var(--borda-forte); }

/* Faixa de boas-vindas */
.inicio-faixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-caixa);
  padding: 20px 22px;
}
.inicio-saudacao h2 {
  margin: 0 0 4px;
  font-family: var(--font-titulo);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
}
.inicio-saudacao p { margin: 0; color: var(--texto-2); }
.inicio-saudacao p.nota { margin-top: 6px; font-size: 12.5px; color: var(--texto-3); }
.inicio-saudacao .botao.link { padding: 0; font-size: 12.5px; }

.inicio-pendencias {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  padding: 12px 14px;
}
.inicio-pendencias-total { display: flex; align-items: center; gap: 10px; }
.inicio-pendencias-total strong {
  font-family: var(--font-titulo);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.inicio-pendencias-total span { display: flex; flex-direction: column; max-width: 170px; }
.inicio-pendencias-total b { font-size: 13.5px; }
.inicio-pendencias-total small { font-size: 11.5px; color: var(--texto-2); }
.inicio-pendencias-lista {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--borda);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 14px;
}
.inicio-pendencia {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 3px 4px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  font-size: 12.5px;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.inicio-pendencia:hover:not(:disabled) { background: var(--superficie-2); }
.inicio-pendencia:disabled { cursor: default; color: var(--texto-3); }
.inicio-pendencia .num { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.inicio-pendencias.tudo-certo { flex-direction: column; align-items: flex-start; gap: 2px; border-color: var(--ok); background: var(--ok-fraco); }
.inicio-pendencias.tudo-certo strong { color: var(--ok); }
.inicio-pendencias.tudo-certo span { font-size: 12.5px; color: var(--texto-2); }

/* Cartoes de numero */
.inicio-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cartao-inicio {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
a.cartao-inicio:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.cartao-inicio-titulo { font-weight: 600; font-size: 14px; }
.cartao-inicio-ajuda { font-size: 12px; color: var(--texto-2); }
.cartao-inicio-valor {
  margin: 10px 0 6px;
  font-family: var(--font-titulo);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cartao-inicio-valor small { font-family: var(--fonte); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--texto-2); }
.cartao-inicio-rodape { margin-top: auto; font-size: 12px; color: var(--texto-3); }
.cartao-inicio.ruim { border-color: var(--erro); background: var(--erro-fraco); }
.cartao-inicio.ruim .cartao-inicio-rodape { color: var(--erro); font-weight: 600; }
.variacao {
  margin-left: 8px;
  font-family: var(--fonte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texto-2);
  vertical-align: middle;
}

/* Colunas: certificados, cota e acoes */
.inicio-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: start;
}
.bloco-inicio > h3 { font-family: var(--font-titulo); font-size: 15px; letter-spacing: -.2px; }
.bloco-inicio > .ajuda { margin-bottom: 14px; }

.medidor-e-legenda { display: flex; flex-direction: column; gap: 12px; }
.medidor { position: relative; width: 100%; max-width: 240px; margin: 0 auto; }
.medidor svg { display: block; width: 100%; height: auto; }
.medidor .trilho, .medidor .fatia { fill: none; stroke-width: 18; }
.medidor .trilho { stroke: var(--superficie-2); }
.medidor .fatia.ok { stroke: var(--ok); }
.medidor .fatia.alerta { stroke: var(--alerta); }
.medidor .fatia.erro { stroke: var(--erro); }
.medidor .fatia.neutro { stroke: var(--borda-forte); }
.medidor-centro { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; }
.medidor-numero {
  font-family: var(--font-titulo);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.medidor-legenda { font-size: 12px; color: var(--texto-2); }

.legenda-medidor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.legenda-medidor li { display: grid; grid-template-columns: 12px 1fr auto 40px; align-items: center; gap: 8px; font-size: 13px; }
.legenda-medidor .num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.legenda-medidor .pct { color: var(--texto-3); font-size: 12px; font-weight: 400; }

.cota-inicio-numero { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cota-inicio-numero strong {
  font-family: var(--font-titulo);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.cota-inicio-numero span { color: var(--texto-2); font-size: 13px; }
.barra-progresso > span { display: block; height: 100%; background: var(--acento); transition: width .3s; }
.barra-progresso.alerta > span { background: var(--alerta); }
.barra-progresso.erro > span { background: var(--erro); }
.bloco-inicio .barra-progresso + .nota { margin: 8px 0 0; }
.subtitulo { margin: 16px 0 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); }
.lista-tipos { list-style: none; margin: 0; padding: 0; }
.lista-tipos li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.lista-tipos li:first-child { border-top: 0; }
.lista-tipos .num { font-weight: 700; font-variant-numeric: tabular-nums; }

.acoes-rapidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acao-rapida {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: inherit;
  text-decoration: none;
}
.acao-rapida:hover { border-color: var(--acento); background: var(--acento-fraco); }
.acao-rapida .icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--raio);
  background: var(--superficie-2);
  font-size: 16px;
}
.acao-rapida-texto { display: flex; flex-direction: column; min-width: 0; }
.acao-rapida-texto strong { font-size: 13.5px; }
.acao-rapida:hover .acao-rapida-texto strong { color: var(--acento); }
.acao-rapida-texto small { font-size: 12px; color: var(--texto-2); line-height: 1.35; }

/* Rotina fiscal */
.rotina-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rotina-cabecalho h3 { margin: 0 0 4px; font-family: var(--font-titulo); font-size: 15px; letter-spacing: -.2px; }
.rotina-cabecalho .ajuda { color: var(--texto-2); font-size: 12.5px; margin: 0; }
.rotina-busca { display: flex; gap: 12px; margin: 14px 0 12px; flex-wrap: wrap; }
.rotina-busca .campo-busca { flex: 1; min-width: 200px; max-width: 420px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; scroll-margin-top: 16px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--texto);
  font-size: 12.5px;
  cursor: pointer;
}
.chip:hover { background: var(--superficie-2); }
.chip .num { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.chip[aria-pressed="true"] .num { color: var(--sobre-acento); }
.rotina-contagem { margin: 10px 0 8px; font-size: 12px; }
.tabela-rotina td { vertical-align: top; }
.tabela-rotina .empresa-nome {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.tabela-rotina .mono { font-size: 11.5px; }
.tabela-rotina .motivo {
  max-width: 240px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--texto-2);
}
.tabela-rotina th.acoes, .tabela-rotina td.acoes { width: 1%; text-align: right; white-space: nowrap; }
.rotina-mais { display: flex; justify-content: center; padding: 12px 0 2px; }

/* Texto so para leitor de tela (cabecalho da coluna de acoes). */
.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;
}

@media (max-width: 1180px) {
  .inicio-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio-colunas > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .inicio-faixa { padding: 16px; }
  .inicio-pendencias-lista { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--borda); grid-template-columns: 1fr; width: 100%; }
  .inicio-pendencias { width: 100%; }
  .inicio-cartoes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cartao-inicio-valor { font-size: 24px; }
  .inicio-colunas { grid-template-columns: minmax(0, 1fr); }
  .acoes-rapidas { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .barra-progresso > span { transition: none; }
}