/* ============================================================
   Estilos PROPRIOS do Orion Pagamentos.

   Existe separado de orion.css de proposito: ele e FORK do Orion (ver a tabela
   "Origem do codigo copiado" no CLAUDE.md), e cada linha nossa escrita la
   aumenta o custo de comparar com a origem no dia em que uma melhoria de la
   precisar vir para ca. Estilo que so este produto tem mora aqui.

   (orion-pages.css, o outro fork que existia aqui, foi removido na Etapa 12:
   eram regras de telas de ERP -- chat, financeiro, RH -- que este produto
   nunca teve, e nenhuma classe dele era usada em nenhuma pagina real.)

   Consome os tokens da camada 01-settings (--orion-*) e as variaveis de tema
   (--primary, --emerald, --rose, --text-muted, ...) que valem em [data-theme] --
   nunca cor fixa em hexadecimal, senao a tela quebra em 27 dos 28 temas.
   ============================================================ */

/* ---------- Utilitarios do painel ---------- */

/* `.note` e usado em 13 fragmentos de pages/*.html desde a Etapa 1, mas so
   existia em login.css -- que o painel NAO carrega. O texto secundario de todas
   essas telas vinha renderizando com o tamanho e a cor do corpo, sem nenhum
   sintoma de erro. Aqui fica a versao do painel: so a cor e o tamanho, sem o
   `margin-top`/`text-align:center` que a tela de login precisa e o painel nao. */
.note {
  color: var(--text-muted);
  font-size: var(--orion-fs-sm);
  line-height: 1.5;
}

/* ---------- Perfil ---------- */

.perfil-grupo + .perfil-grupo { margin-top: var(--orion-space-4); }

.perfil-grupo__titulo {
  color: var(--text-muted);
  font-size: var(--orion-fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.perfil-permissoes { list-style: none; margin: 0; padding: 0; }

/* Deliberadamente NAO e `.orion-badge`: aquilo e pill de rotulo curto (9px,
   negrito, letter-spacing). Aqui o texto e a descricao inteira da permissao --
   uma frase -- e frase em pill de 9px nao se le. */
.perfil-permissao {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  line-height: 1.45;
}

.perfil-permissao i { color: var(--emerald); font-size: var(--orion-fs-sm); }

.perfil-identidade__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--orion-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-border);
}

.perfil-identidade__linha:last-child { border-bottom: 0; }

/* ---------- Dashboard ---------- */

.dash-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--orion-space-4);
  margin-bottom: var(--orion-space-5);
}

.dash-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--orion-space-2);
  align-items: center;
}

.dash-filtro-grupo {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--orion-radius-pill);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}

.dash-chip {
  border: 0;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--orion-radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--orion-fs-base);
  font-weight: 600;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}

.dash-chip:hover { color: var(--text-main); }

.dash-chip[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
}

/* Sandbox precisa gritar: o numero na tela nao e dinheiro de verdade. */
.dash-chip--sandbox[aria-pressed="true"] {
  background: var(--orion-color-warning);
  color: #1a1205;
}

.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--orion-space-4);
}

.dash-card {
  padding: 18px 20px;
  border-radius: var(--orion-radius-md);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}

.dash-card__rotulo {
  display: block;
  color: var(--text-muted);
  font-size: var(--orion-fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.dash-card__valor {
  font-family: var(--orion-font-display);
  font-size: var(--orion-fs-xl);
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

.dash-card__nota {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--orion-fs-sm);
}

.dash-card--liquido { border-color: var(--emerald); }
.dash-card--liquido .dash-card__valor { color: var(--emerald); }
/* Liquido negativo (venda estornada com taxa retida) nao pode parecer lucro. */
.dash-card--liquido.is-negativo { border-color: var(--rose); }
.dash-card--liquido.is-negativo .dash-card__valor { color: var(--rose); }
.dash-card--saida .dash-card__valor { color: var(--rose); }

.dash-secao {
  margin-top: var(--orion-space-6);
}

.dash-secao__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--orion-space-3);
  margin-bottom: var(--orion-space-3);
}

.dash-secao__titulo h3 { margin: 0; }

.dash-grafico {
  padding: 18px 20px 10px;
  border-radius: var(--orion-radius-md);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  overflow-x: auto;
}

.dash-grafico svg { display: block; width: 100%; height: auto; }

.dash-grafico__barra { fill: var(--primary); }
.dash-grafico__barra--negativa { fill: var(--rose); }
.dash-grafico__eixo { stroke: var(--panel-border); stroke-width: 1; }
.dash-grafico__rotulo { fill: var(--text-muted); font-size: 10px; }

.dash-pendencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--orion-space-3);
}

.dash-pendencia {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--orion-radius-md);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

a.dash-pendencia:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.dash-pendencia__icone {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: var(--orion-radius-circle);
  background: var(--primary-glow);
  color: var(--primary);
}

.dash-pendencia.is-alerta .dash-pendencia__icone {
  background: var(--rose-glow);
  color: var(--rose);
}

.dash-pendencia__numero {
  font-family: var(--orion-font-display);
  font-size: var(--orion-fs-lg);
  font-weight: 700;
  line-height: 1.1;
}

.dash-pendencia__texto {
  display: block;
  color: var(--text-muted);
  font-size: var(--orion-fs-sm);
}

.dash-vendas { list-style: none; margin: 0; padding: 0; }

.dash-venda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--orion-space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--panel-border);
}

.dash-venda:last-child { border-bottom: 0; }

.dash-venda__quem { min-width: 0; }
.dash-venda__nome { display: block; font-weight: 600; }

.dash-venda__meta {
  display: block;
  color: var(--text-muted);
  font-size: var(--orion-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-venda__valor {
  font-family: var(--orion-font-display);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Manual (telas de ajuda) ----------

   Duas telas consomem estas regras: pages/manual.html (como vender) e
   pages/manual-tecnico.html (instalar e manter). Sao as unicas telas do painel
   que sao TEXTO CORRIDO e nao grade de dados, entao precisam de medida de linha
   e ritmo vertical proprios -- o resto do painel nunca teve paragrafo longo.

   Cor sempre por variavel de tema: um hexadecimal aqui quebraria a tela em 27
   dos 28 temas (ver o cabecalho deste arquivo). */

/* O BLOCO usa a largura toda do card -- indice, notas, tabelas e o fluxo de
   passos (manual-fluxo) sao layout, nao texto corrido, e ficam esticados e
   com sobra vazia se presos a uma medida de linha. So o PARAGRAFO/LISTA solto
   (filho direto de <section>, fora de nota/tabela/fluxo) recebe o limite de
   68ch abaixo -- e so ele que precisa de linha curta para ler bem. */
.manual { max-width: none; }
.manual > section > p,
.manual > section > ul {
  max-width: 68ch;
}

.manual h3 {
  font-family: var(--orion-font-display);
  font-size: var(--orion-fs-lg);
  margin: var(--orion-space-8) 0 var(--orion-space-3);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.manual > h3:first-child { margin-top: 0; }

/* Numero do passo. So a parte "como vender" e numerada, porque so ela e uma
   sequencia de verdade -- a de consulta e a tecnica nao sao. */
.manual__passo {
  font-family: var(--orion-font-mono);
  font-size: var(--orion-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  flex: none;
}

.manual h4 {
  font-size: var(--orion-fs-md);
  margin: var(--orion-space-6) 0 var(--orion-space-2);
}

.manual p { line-height: 1.65; margin: 0 0 var(--orion-space-4); }
.manual ul, .manual ol { line-height: 1.65; padding-left: 20px; margin: 0 0 var(--orion-space-4); }
.manual li { margin-bottom: 6px; }
.manual li::marker { color: var(--text-muted); }

.manual code {
  font-family: var(--orion-font-mono);
  font-size: .85em;
  background: rgba(127, 127, 127, .14);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.manual pre {
  background: rgba(127, 127, 127, .14);
  border: 1px solid var(--panel-border);
  border-radius: var(--orion-radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 var(--orion-space-4);
}
.manual pre code { background: none; border: 0; padding: 0; white-space: pre; }

/* Divisor de parte. Encoda estrutura: separa "vender" de "consultar". */
.manual__parte {
  border-top: 2px solid var(--panel-border);
  margin-top: var(--orion-space-8);
  padding-top: var(--orion-space-5);
}
.manual__parte-rotulo {
  font-family: var(--orion-font-mono);
  font-size: var(--orion-fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

/* Avisos. TRES niveis com significados diferentes, nao decoracao:
   .manual-nota--regra   comportamento do sistema que surpreende
   .manual-nota--cuidado erro que custa dinheiro ou nao tem desfazer
   .manual-nota--dica    atalho util */
.manual-nota {
  border-left: 3px solid var(--text-muted);
  background: rgba(127, 127, 127, .09);
  border-radius: 0 var(--orion-radius-sm) var(--orion-radius-sm) 0;
  padding: 12px 16px;
  margin: 0 0 var(--orion-space-4);
  font-size: var(--orion-fs-base);
}
.manual-nota p { margin: 0 0 8px; }
.manual-nota p:last-child { margin-bottom: 0; }

.manual-nota__tag {
  display: block;
  font-family: var(--orion-font-mono);
  font-size: var(--orion-fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.manual-nota--regra { border-left-color: var(--orion-color-warning); }
.manual-nota--regra .manual-nota__tag { color: var(--orion-color-warning); }
.manual-nota--cuidado { border-left-color: var(--rose); }
.manual-nota--cuidado .manual-nota__tag { color: var(--rose); }
.manual-nota--dica { border-left-color: var(--emerald); }
.manual-nota--dica .manual-nota__tag { color: var(--emerald); }

/* Fluxo da venda: cinco etapas lado a lado, quebrando no mobile. */
.manual-fluxo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--orion-space-5);
}
.manual-fluxo li {
  flex: 1 1 8.5rem;
  margin: 0;
  padding: 10px 12px;
  background: rgba(127, 127, 127, .09);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--orion-radius-sm) var(--orion-radius-sm);
  font-size: var(--orion-fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.manual-fluxo b {
  display: block;
  color: var(--text-main);
  font-size: var(--orion-fs-base);
  margin-bottom: 2px;
}

/* Tabelas de consulta. Rolam sozinhas para o painel nunca rolar de lado. */
.manual-tabela { overflow-x: auto; margin: 0 0 var(--orion-space-5); }
.manual-tabela table { border-collapse: collapse; width: 100%; font-size: var(--orion-fs-base); }
.manual-tabela th, .manual-tabela td {
  text-align: left;
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: top;
  line-height: 1.45;
}
.manual-tabela th {
  font-family: var(--orion-font-mono);
  font-size: var(--orion-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.manual-tabela td:first-child { font-weight: 600; white-space: nowrap; }
.manual-tabela .num { font-family: var(--orion-font-mono); font-variant-numeric: tabular-nums; }
.manual-tabela .sim { color: var(--emerald); font-weight: 700; }
.manual-tabela .nao { color: var(--text-muted); }

/* Indice do topo: leva para as ancoras da propria tela. */
.manual-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--orion-space-6);
}
.manual-indice a {
  font-size: var(--orion-fs-sm);
  padding: 5px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--orion-radius-pill);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.manual-indice a:hover, .manual-indice a:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
}

.manual section { scroll-margin-top: 90px; }