/* Layout da aplicação.
   Tudo sai de token semântico do Sistema btime. Cor primitiva citada aqui
   (--or-pink-500 e afins) quebra o tema claro, então não existe nenhuma. */

/* Base ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--or-bg-canvas);
  color: var(--or-text);
  font-family: var(--or-font-sans);
  font-size: var(--or-text-md);
  line-height: var(--or-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Componentes do sistema definem display, o que vence o [hidden] do
   navegador. O .or-menu fica de fora: ele usa [hidden] com transição. */
[hidden]:not(.or-menu) {
  display: none !important;
}

.cr-num {
  font-family: var(--or-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--or-ls-mono);
}

.cr-rotulo {
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
  font-weight: var(--or-weight-semibold);
  letter-spacing: var(--or-ls-label);
  text-transform: uppercase;
}

/* Marca ==================================================================== */

.cr-marca {
  display: flex;
  align-items: center;
  gap: var(--or-space-3);
}

.cr-marca__sinal {
  display: grid;
  place-items: center;
  inline-size: var(--or-size-control-sm);
  block-size: var(--or-size-control-sm);
  border-radius: var(--or-radius-sm);
  background: var(--or-gradient-brand);
  color: var(--or-text-on-fill);
  font-weight: var(--or-weight-extra);
}

.cr-marca__texto {
  display: grid;
  line-height: var(--or-lh-tight);
}

.cr-marca__texto strong {
  font-size: var(--or-text-md);
  font-weight: var(--or-weight-bold);
}

.cr-marca__texto span {
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
}

/* Entrada ================================================================== */

.cr-entrar {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  padding: var(--or-space-6);
}

.cr-entrar .or-card {
  inline-size: min(100%, var(--or-modal-sm));
}

.cr-entrar .or-body-sm {
  margin-block: var(--or-space-5) 0;
}

.cr-entrar form {
  display: grid;
  gap: var(--or-space-4);
  margin-block-start: var(--or-space-6);
}

/* Esqueleto da aplicação =================================================== */

.cr-app {
  display: grid;
  grid-template-columns: 17rem 1fr;
  min-block-size: 100vh;
}

.cr-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--or-space-6);
  padding: var(--or-space-5) var(--or-space-4);
  background: var(--or-bg-surface);
  border-inline-end: var(--or-border-hairline) solid var(--or-border-subtle);
  position: sticky;
  top: 0;
  block-size: 100vh;
  overflow-y: auto;
}

.cr-nav {
  display: grid;
  gap: var(--or-space-1);
  flex: 1;
  /* Sem isto a grade estica os grupos para ocupar a altura do menu. */
  align-content: start;
}

.cr-nav__grupo {
  margin: var(--or-space-4) 0 var(--or-space-1) var(--or-space-3);
  color: var(--or-text-subtle);
  font-size: var(--or-text-2xs);
  font-weight: var(--or-weight-semibold);
  letter-spacing: var(--or-ls-label);
  text-transform: uppercase;
}

.cr-nav__grupo:first-child {
  margin-block-start: 0;
}

.cr-nav__item {
  display: flex;
  align-items: center;
  gap: var(--or-space-3);
  inline-size: 100%;
  min-block-size: var(--or-size-touch);
  padding-inline: var(--or-space-3);
  border: 0;
  border-radius: var(--or-radius-sm);
  background: none;
  color: var(--or-text-muted);
  font: inherit;
  font-size: var(--or-text-sm);
  font-weight: var(--or-weight-medium);
  text-align: start;
  cursor: pointer;
  transition: background var(--or-dur-fast) var(--or-ease-out),
    color var(--or-dur-fast) var(--or-ease-out);
}

.cr-nav__item:hover {
  background: var(--or-bg-subtle);
  color: var(--or-text);
}

/* O item corrente não se distingue só pela cor: ganha peso e uma barra. */
.cr-nav__item[aria-current="page"] {
  background: var(--or-brand-soft);
  color: var(--or-text);
  font-weight: var(--or-weight-semibold);
  box-shadow: inset var(--or-border-thick) 0 0 0 var(--or-brand);
}

.cr-nav__icone {
  inline-size: var(--or-size-icon-md);
  text-align: center;
  color: var(--or-text-subtle);
}

.cr-nav__item[aria-current="page"] .cr-nav__icone {
  color: var(--or-brand);
}

.cr-nav__selo {
  margin-inline-start: auto;
  min-inline-size: var(--or-space-5);
  padding-inline: var(--or-space-2);
  border-radius: var(--or-radius-full);
  background: var(--or-danger-fill);
  color: var(--or-text-on-fill);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-2xs);
  line-height: var(--or-space-5);
  text-align: center;
}

.cr-lateral__rodape {
  display: flex;
  align-items: center;
  gap: var(--or-space-3);
  padding-block-start: var(--or-space-4);
  border-block-start: var(--or-border-hairline) solid var(--or-border-subtle);
}

.cr-avatar {
  display: grid;
  place-items: center;
  inline-size: var(--or-size-control-sm);
  block-size: var(--or-size-control-sm);
  border-radius: var(--or-radius-full);
  background: var(--or-accent-fill);
  color: var(--or-text-on-fill);
  font-size: var(--or-text-xs);
  font-weight: var(--or-weight-bold);
}

.cr-lateral__quem {
  display: grid;
  min-inline-size: 0;
  line-height: var(--or-lh-tight);
}

.cr-lateral__quem strong {
  font-size: var(--or-text-sm);
  font-weight: var(--or-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-lateral__quem span {
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
}

/* Topo ===================================================================== */

.cr-principal {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.cr-topo {
  display: flex;
  align-items: center;
  gap: var(--or-space-4);
  padding: var(--or-space-4) var(--or-space-6);
  background: var(--or-bg-surface);
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--or-z-sticky);
}

.cr-topo__menu {
  display: none;
}

.cr-topo__titulo {
  flex: 1;
  min-inline-size: 0;
}

.cr-topo__titulo p {
  margin: var(--or-space-1) 0 0;
}

.cr-topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--or-space-2);
}

.cr-busca {
  position: relative;
  display: block;
  inline-size: min(22rem, 40vw);
}

.cr-busca__icone {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--or-space-3);
  translate: 0 -50%;
  color: var(--or-text-subtle);
  pointer-events: none;
}

.cr-busca .or-input {
  padding-inline-start: var(--or-space-8);
}

.cr-conteudo {
  padding: var(--or-space-6);
  display: grid;
  gap: var(--or-space-6);
  align-content: start;
}

/* Blocos comuns ============================================================ */

.cr-secao {
  display: grid;
  gap: var(--or-space-4);
}

.cr-secao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--or-space-3);
}

.cr-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--or-space-4);
}

.cr-cartao {
  display: grid;
  gap: var(--or-space-2);
  padding: var(--or-space-5);
  background: var(--or-bg-surface);
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: var(--or-radius-lg);
}

.cr-cartao__valor {
  font-size: var(--or-text-3xl);
  font-weight: var(--or-weight-bold);
  letter-spacing: var(--or-ls-display);
  line-height: var(--or-lh-tight);
}

/* Valor em dinheiro é mais largo que contagem: cartão mais largo, número menor. */
.cr-cartoes--dinheiro {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.cr-cartoes--dinheiro .cr-cartao__valor {
  font-size: var(--or-text-2xl);
  white-space: nowrap;
}

.cr-cartao__rotulo {
  color: var(--or-text-muted);
  font-size: var(--or-text-sm);
}

.cr-esqueleto {
  display: grid;
  gap: var(--or-space-3);
}

/* Fila ===================================================================== */

.cr-tabela-wrap {
  background: var(--or-bg-surface);
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: var(--or-radius-lg);
  overflow-x: auto;
}

.cr-tabela {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--or-text-sm);
}

.cr-tabela th,
.cr-tabela td {
  padding: var(--or-space-3) var(--or-space-4);
  text-align: start;
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
}

.cr-tabela th {
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
  font-weight: var(--or-weight-semibold);
  letter-spacing: var(--or-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.cr-tabela tbody tr {
  cursor: pointer;
  transition: background var(--or-dur-fast) var(--or-ease-out);
}

.cr-tabela tbody tr:hover,
.cr-tabela tbody tr:focus-within {
  background: var(--or-bg-subtle);
}

/* Tabela de preços em janela ------------------------------------------------
 * A janela é larga o bastante para a tabela caber inteira. Só o corpo rola, na
 * vertical, com o título e o cabeçalho das colunas sempre à vista; a barra de
 * rolagem fica na borda da janela, não dentro do cartão.
 */
.cr-modal-tabela {
  /* Centraliza na área de conteúdo, à direita do menu lateral (17rem). */
  inset-inline: 17rem 0;
  margin-inline: auto;
  inline-size: min(100% - 17rem - var(--or-space-8), 64rem);
  max-inline-size: 64rem;
  max-block-size: min(100% - var(--or-space-8), 90vh);
  overflow: hidden;
}

@media (max-width: 48rem) {
  .cr-modal-tabela {
    inset-inline: 0;
    inline-size: min(100% - var(--or-space-8), 64rem);
  }
}

.cr-modal-tabela[open] {
  display: flex;
  flex-direction: column;
}

.cr-modal-tabela .or-modal__body {
  flex: 1;
  min-block-size: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.cr-modal-tabela .cr-tabela-wrap {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.cr-modal-tabela .or-modal__head {
  padding-block-end: var(--or-space-4);
}

.cr-modal-tabela .cr-tabela th {
  position: sticky;
  inset-block-start: 0;
  background: var(--or-bg-raised);
}

.cr-modal-tabela .cr-tabela th:first-child,
.cr-modal-tabela .cr-tabela td:first-child {
  padding-inline-start: var(--or-space-6);
}

.cr-modal-tabela .cr-tabela th:last-child,
.cr-modal-tabela .cr-tabela td:last-child {
  padding-inline-end: var(--or-space-6);
  white-space: nowrap;
}

/* Tabela só de leitura: sem cursor de clique nem destaque ao passar o mouse. */
.cr-tabela--estatica tbody tr {
  cursor: default;
}

.cr-tabela--estatica tbody tr:hover {
  background: none;
}

/* Tipo com divergência não se anuncia só pela cor: ganha barra e peso. */
.cr-tabela--estatica tr[data-com-divergencia] td:first-child {
  box-shadow: inset var(--or-border-thick) 0 0 0 var(--or-danger);
}

.cr-ajuda {
  max-inline-size: var(--or-measure);
  margin: 0;
}

.cr-filtro-ativo {
  display: inline-flex;
  align-items: center;
  gap: var(--or-space-2);
  font-size: var(--or-text-sm);
  color: var(--or-text-muted);
}

.cr-tabela tbody tr:last-child td {
  border-block-end: 0;
}

.cr-tabela [data-num] {
  text-align: end;
  font-family: var(--or-font-mono);
  font-variant-numeric: tabular-nums;
}

.cr-processo {
  display: grid;
  gap: var(--or-space-1);
}

.cr-processo__id {
  font-family: var(--or-font-mono);
  font-weight: var(--or-weight-semibold);
}

.cr-processo__ref {
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
}

/* Assunto do e-mail: limitado a duas linhas, o inteiro fica na dica. */
.cr-email__assunto {
  display: -webkit-box;
  max-inline-size: 15rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

/* Cartão de proposta: o conteúdo começa no alto e o botão fica sempre no pé,
   na mesma linha em todos os cartões, seja qual for o tamanho do texto. */
.cr-cartao--proposta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--or-space-2);
  min-inline-size: 0;
}

.cr-cartao--proposta p {
  margin: 0;
}

.cr-cartao--proposta .cr-cartao__acoes {
  margin-block-start: auto;
  padding-block-start: var(--or-space-3);
}

.cr-cartao--proposta .cr-cartao__acoes .or-btn {
  inline-size: 100%;
  white-space: normal;
}

.cr-cartao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--or-space-2);
}

.cr-filtros {
  justify-content: flex-start;
  gap: var(--or-space-4);
}

/* Conferência do processo ================================================== */

.cr-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--or-space-4);
}

.cr-cabecalho__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-space-2) var(--or-space-3);
  margin-block-start: var(--or-space-2);
  color: var(--or-text-subtle);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
}

.cr-cabecalho__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-space-2);
}

.cr-paineis {
  display: grid;
  /* minmax(0, 1fr): sem isso, texto comprido sem quebra alarga a coluna e a grade
     passa da borda, cortando o Resultado. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(14rem, 18rem);
  background: var(--or-bg-surface);
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: var(--or-radius-lg);
  overflow: hidden;
}

.cr-paineis__topo {
  display: grid;
  align-content: start;
  gap: var(--or-space-1);
  padding: var(--or-space-4);
  background: var(--or-bg-raised);
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
  font-size: var(--or-text-sm);
  font-weight: var(--or-weight-semibold);
}

.cr-paineis__titulo {
  display: flex;
  align-items: center;
  gap: var(--or-space-3);
}

/* Do que o bloco trata: documento, processo e datas, ou a tabela de preço. */
.cr-paineis__acao {
  margin: var(--or-space-2) 0 0;
}

.cr-paineis__ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--or-space-1) var(--or-space-2);
  margin: 0;
  color: var(--or-text-subtle);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
  font-weight: var(--or-weight-regular);
}

.cr-linha {
  display: contents;
}

.cr-celula {
  min-inline-size: 0;
  padding: var(--or-space-4);
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
  overflow-wrap: anywhere;
}

.cr-celula--proposta {
  background: var(--or-bg-raised);
  color: var(--or-text-muted);
}

.cr-celula--veredito {
  display: grid;
  gap: var(--or-space-1);
  align-content: center;
  justify-items: start;
}

/* O selo quebra de linha em vez de passar da coluna: "Falta dado no documento"
   é mais largo que o espaço do resultado. */
.cr-celula--veredito .or-badge {
  max-inline-size: 100%;
  white-space: normal;
  text-align: start;
}

.cr-servico__nome {
  font-size: var(--or-text-sm);
  font-weight: var(--or-weight-semibold);
}

.cr-servico__valor {
  margin-block-start: var(--or-space-1);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-lg);
  font-variant-numeric: tabular-nums;
}

.cr-servico__base,
.cr-servico__nota {
  margin: var(--or-space-1) 0 0;
  color: var(--or-text-subtle);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
}

.cr-servico__nota {
  font-family: var(--or-font-sans);
  line-height: var(--or-lh-ui);
}

/* Divergência não se anuncia só pela cor: ganha barra grossa e palavra. */
.cr-linha[data-divergente] .cr-celula {
  background: var(--or-danger-soft);
}

.cr-linha[data-divergente] .cr-celula:first-child {
  box-shadow: inset var(--or-border-thick) 0 0 0 var(--or-danger);
}

/* Avisos =================================================================== */

.cr-avisos {
  position: fixed;
  inset-block-end: var(--or-space-6);
  inset-inline-end: var(--or-space-6);
  z-index: var(--or-z-toast);
  display: grid;
  gap: var(--or-space-2);
  max-inline-size: min(24rem, calc(100vw - var(--or-space-12)));
}

.cr-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--or-space-3);
  padding: var(--or-space-4);
  background: var(--or-bg-raised);
  border: var(--or-border-hairline) solid var(--or-border-default);
  border-radius: var(--or-radius-md);
  box-shadow: var(--or-shadow-3);
  font-size: var(--or-text-sm);
  animation: cr-entrada var(--or-dur-normal) var(--or-ease-out);
}

.cr-aviso[data-tom="danger"] {
  border-color: var(--or-danger);
}

.cr-aviso[data-tom="success"] {
  border-color: var(--or-success);
}

@keyframes cr-entrada {
  from {
    opacity: 0;
    translate: 0 var(--or-space-2);
  }
}

/* Estreito ================================================================= */

@media (max-width: 64rem) {
  .cr-paineis {
    grid-template-columns: 1fr;
  }

  .cr-paineis__topo:not(:first-child) {
    display: none;
  }

  .cr-celula--proposta::before,
  .cr-celula--veredito::before {
    content: attr(data-rotulo);
    display: block;
    margin-block-end: var(--or-space-1);
    color: var(--or-text-subtle);
    font-size: var(--or-text-2xs);
    font-weight: var(--or-weight-semibold);
    letter-spacing: var(--or-ls-label);
    text-transform: uppercase;
  }

  .cr-celula {
    border-block-end: 0;
  }

  .cr-linha .cr-celula--veredito {
    border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
    padding-block-end: var(--or-space-5);
  }
}

@media (max-width: 48rem) {
  .cr-app {
    grid-template-columns: 1fr;
  }

  .cr-lateral {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(17rem, 85vw);
    z-index: var(--or-z-overlay);
    translate: -100% 0;
    transition: translate var(--or-dur-normal) var(--or-ease-out);
  }

  .cr-lateral[data-aberta="true"] {
    translate: 0 0;
    box-shadow: var(--or-shadow-4);
  }

  .cr-topo__menu {
    display: inline-flex;
  }

  .cr-conteudo {
    padding: var(--or-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-nav__item,
  .cr-tabela tbody tr,
  .cr-lateral,
  .cr-aviso {
    transition: none;
    animation: none;
  }
}

/* Busca do topo ============================================================ */

/* Parece um campo, mas é um botão: abre a paleta, que é onde se digita. */
button.cr-busca {
  display: flex;
  align-items: center;
  gap: var(--or-space-2);
  inline-size: min(24rem, 40vw);
  min-block-size: var(--or-size-control-md);
  padding-inline: var(--or-space-3);
  border: var(--or-border-hairline) solid var(--or-border-default);
  border-radius: var(--or-radius-full);
  background: var(--or-bg-canvas);
  color: var(--or-text-subtle);
  font: inherit;
  font-size: var(--or-text-sm);
  text-align: start;
  cursor: text;
  transition: border-color var(--or-dur-fast) var(--or-ease-out);
}

button.cr-busca:hover {
  border-color: var(--or-border-strong);
}

button.cr-busca .cr-busca__icone {
  position: static;
  translate: none;
}

.cr-busca__texto {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

kbd,
.cr-busca__atalho {
  padding: 0 var(--or-space-2);
  border: var(--or-border-hairline) solid var(--or-border-default);
  border-radius: var(--or-radius-xs);
  background: var(--or-bg-surface);
  color: var(--or-text-subtle);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-2xs);
  line-height: var(--or-space-5);
}

/* Paleta de busca ========================================================== */

.cr-paleta {
  inline-size: min(40rem, calc(100vw - var(--or-space-8)));
  margin-block-start: 12vh;
  padding: 0;
  border: var(--or-border-hairline) solid var(--or-border-default);
  border-radius: var(--or-radius-xl);
  background: var(--or-bg-surface);
  color: var(--or-text);
  box-shadow: var(--or-shadow-4);
}

.cr-paleta::backdrop {
  background: var(--or-overlay-scrim);
}

.cr-paleta__campo {
  display: flex;
  align-items: center;
  gap: var(--or-space-3);
  padding: var(--or-space-4) var(--or-space-5);
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
  color: var(--or-text-subtle);
}

.cr-paleta__campo input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--or-text);
  font: inherit;
  font-size: var(--or-text-lg);
  outline: none;
}

.cr-paleta__resultados {
  max-block-size: min(28rem, 60vh);
  overflow-y: auto;
  padding: var(--or-space-2) var(--or-space-3) var(--or-space-3);
}

.cr-paleta__resultados ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-paleta__grupo {
  margin: var(--or-space-3) var(--or-space-2) var(--or-space-1);
  color: var(--or-text-subtle);
  font-size: var(--or-text-2xs);
  font-weight: var(--or-weight-semibold);
  letter-spacing: var(--or-ls-label);
  text-transform: uppercase;
}

.cr-paleta__item {
  display: flex;
  align-items: center;
  gap: var(--or-space-3);
  min-block-size: var(--or-size-touch);
  padding: var(--or-space-2) var(--or-space-3);
  border: var(--or-border-hairline) solid transparent;
  border-radius: var(--or-radius-md);
  cursor: pointer;
}

/* O item ativo não se distingue só pela cor: ganha borda. */
.cr-paleta__item[aria-selected="true"] {
  border-color: var(--or-brand);
  background: var(--or-brand-soft);
}

.cr-paleta__icone {
  display: grid;
  place-items: center;
  inline-size: var(--or-size-control-sm);
  block-size: var(--or-size-control-sm);
  border-radius: var(--or-radius-sm);
  background: var(--or-bg-subtle);
  color: var(--or-text-muted);
}

.cr-paleta__titulo {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--or-text-sm);
  font-weight: var(--or-weight-medium);
}

.cr-paleta__detalhe {
  color: var(--or-text-subtle);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
  white-space: nowrap;
}

.cr-paleta__vazio {
  margin: 0;
  padding: var(--or-space-6) var(--or-space-4);
  color: var(--or-text-muted);
  font-size: var(--or-text-sm);
  text-align: center;
  list-style: none;
}

.cr-paleta__rodape {
  margin: 0;
  padding: var(--or-space-3) var(--or-space-5);
  border-block-start: var(--or-border-hairline) solid var(--or-border-subtle);
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
}

/* Notificações ============================================================= */

.cr-notificacoes-wrap {
  position: relative;
}

.cr-contador {
  position: absolute;
  inset-block-start: var(--or-space-1);
  inset-inline-end: var(--or-space-1);
  min-inline-size: var(--or-space-4);
  padding-inline: var(--or-space-1);
  border-radius: var(--or-radius-full);
  background: var(--or-danger-fill);
  color: var(--or-text-on-fill);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-2xs);
  line-height: var(--or-space-4);
  text-align: center;
}

.cr-notificacoes {
  position: absolute;
  inset-block-start: calc(100% + var(--or-space-2));
  inset-inline-end: 0;
  z-index: var(--or-z-dropdown);
  inline-size: min(24rem, calc(100vw - var(--or-space-8)));
  border: var(--or-border-hairline) solid var(--or-border-default);
  border-radius: var(--or-radius-lg);
  background: var(--or-bg-surface);
  box-shadow: var(--or-shadow-3);
  animation: cr-entrada var(--or-dur-normal) var(--or-ease-out);
}

.cr-notificacoes__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--or-space-2);
  padding: var(--or-space-3) var(--or-space-4);
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
}

.cr-notificacoes__lista {
  max-block-size: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--or-space-2);
  list-style: none;
}

.cr-aviso-item {
  display: flex;
  gap: var(--or-space-3);
  inline-size: 100%;
  padding: var(--or-space-3);
  border: 0;
  border-radius: var(--or-radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.cr-aviso-item:hover {
  background: var(--or-bg-subtle);
}

.cr-aviso-item[data-nova] {
  background: var(--or-brand-soft);
}

.cr-aviso-item__glifo {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--or-size-icon-lg);
  block-size: var(--or-size-icon-lg);
  border-radius: var(--or-radius-full);
  font-size: var(--or-text-xs);
  font-weight: var(--or-weight-bold);
}

.cr-aviso-item[data-tom="danger"] .cr-aviso-item__glifo {
  background: var(--or-danger-soft);
  color: var(--or-danger);
}

.cr-aviso-item[data-tom="warning"] .cr-aviso-item__glifo {
  background: var(--or-warning-soft);
  color: var(--or-warning);
}

.cr-aviso-item[data-tom="success"] .cr-aviso-item__glifo {
  background: var(--or-success-soft);
  color: var(--or-success);
}

.cr-aviso-item__texto {
  display: grid;
  gap: var(--or-space-1);
  font-size: var(--or-text-sm);
}

/* Clientes ================================================================= */

.cr-cartoes--largos {
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.cr-dados {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--or-space-3);
  margin: 0;
}

.cr-dados dt {
  color: var(--or-text-subtle);
  font-size: var(--or-text-xs);
}

.cr-dados dd {
  margin: 0;
  font-weight: var(--or-weight-semibold);
}

.cr-lista-docs {
  display: grid;
  gap: var(--or-space-2);
  margin: 0;
  padding: var(--or-space-3) 0 0;
  border-block-start: var(--or-border-hairline) solid var(--or-border-subtle);
  list-style: none;
}

.cr-lista-docs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--or-space-2) var(--or-space-3);
  font-size: var(--or-text-sm);
}

.cr-lista-docs li .cr-num {
  margin-inline-start: auto;
}

.cr-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--or-brand);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (max-width: 48rem) {
  button.cr-busca {
    inline-size: auto;
  }

  button.cr-busca .cr-busca__texto,
  button.cr-busca .cr-busca__atalho {
    display: none;
  }
}

/* Menu em contraste com a página ============================================
   Papel novo, então token novo, com valor nos dois temas (regra do Sistema
   btime). No claro o menu é escuro; no escuro, mais claro que o fundo.
   Contraste medido: texto 15,9:1 e 14,3:1; rótulo 7,2:1 e 6,2:1. */

:root {
  --cr-menu-fundo: var(--or-neutral-800);
  --cr-menu-borda: var(--or-neutral-700);
  --cr-menu-texto: var(--or-neutral-50);
  --cr-menu-mudo: var(--or-neutral-300);
  --cr-menu-rotulo: var(--or-neutral-400);
  --cr-menu-marca: var(--or-pink-300);
  --cr-menu-realce: rgba(255, 255, 255, 0.07);
  --cr-menu-ativo: rgba(238, 43, 140, 0.2);
}

[data-theme="light"] {
  --cr-menu-fundo: var(--or-neutral-900);
  --cr-menu-borda: var(--or-neutral-800);
  --cr-menu-texto: var(--or-neutral-100);
  --cr-menu-mudo: var(--or-neutral-300);
  --cr-menu-rotulo: var(--or-neutral-400);
  --cr-menu-marca: var(--or-pink-400);
  --cr-menu-realce: rgba(255, 255, 255, 0.06);
  --cr-menu-ativo: rgba(238, 43, 140, 0.24);
}

/* Dentro do menu, os papéis semânticos passam a valer os do menu: botão,
   texto e borda do sistema se ajustam sem nenhuma regra própria. */
.cr-lateral,
.cr-entrar__historia {
  --or-text: var(--cr-menu-texto);
  --or-text-muted: var(--cr-menu-mudo);
  --or-text-subtle: var(--cr-menu-rotulo);
  --or-bg-subtle: var(--cr-menu-realce);
  --or-border-subtle: var(--cr-menu-borda);
  --or-border-default: var(--cr-menu-borda);
  --or-brand: var(--cr-menu-marca);
  --or-brand-soft: var(--cr-menu-ativo);
  --or-focus: var(--cr-menu-marca);
  /* O menu é escuro nos dois temas: verde e vermelho usam as variantes feitas
     para fundo escuro, e o texto sobre eles é escuro. */
  --or-bg-surface: var(--cr-menu-realce);
  --or-success: var(--or-green-500);
  --or-danger: var(--or-red-300);
  --or-text-on-success: var(--or-neutral-1000);

  background: var(--cr-menu-fundo);
  color: var(--cr-menu-texto);
}

.cr-lateral {
  border-inline-end-color: var(--cr-menu-borda);
}

/* Ilustrações ===============================================================
   O que o projeto faz, em desenho: o romaneio de um lado, a proposta do outro,
   e cada linha ligada, conferida e marcada. */

.cr-il {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.cr-il__folha {
  fill: var(--or-bg-surface);
  stroke: var(--or-border-default);
  stroke-width: 1;
}

.cr-il__cabeca {
  fill: var(--or-text-subtle);
  font-family: var(--or-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.cr-il__nome {
  fill: var(--or-text-muted);
  font-family: var(--or-font-sans);
  font-size: 10px;
}

.cr-il__valor {
  fill: var(--or-text);
  font-family: var(--or-font-mono);
  font-size: 10px;
  font-weight: 600;
}

.cr-il__linha {
  fill: var(--or-bg-subtle);
}

.cr-il__elo {
  fill: none;
  stroke: var(--or-success);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: cr-il-elo var(--cr-il-ciclo, 9s) var(--or-ease-out) infinite;
  animation-delay: calc(var(--i) * 0.9s + 0.6s);
}

.cr-il__elo--diverge {
  stroke: var(--or-danger);
  stroke-dasharray: 4 4;
  animation-name: cr-il-elo-tracejado;
}

.cr-il__selo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: cr-il-selo var(--cr-il-ciclo, 9s) var(--or-ease-spring) infinite;
  animation-delay: calc(var(--i) * 0.9s + 1.1s);
}

.cr-il__selo circle {
  fill: var(--or-success);
}

.cr-il__selo--diverge circle {
  fill: var(--or-danger);
}

.cr-il__selo text {
  fill: var(--or-text-on-success);
  font-family: var(--or-font-sans);
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

.cr-il__feixe {
  fill: var(--or-brand);
  opacity: 0.18;
  animation: cr-il-feixe 2.4s var(--or-ease-in-out) infinite alternate;
}

/* Carregando: versão compacta, que troca a espera por o que está acontecendo. */
.cr-carregando {
  display: grid;
  justify-items: center;
  gap: var(--or-space-3);
  padding: var(--or-space-6) 0 var(--or-space-2);
  color: var(--or-text-muted);
  font-size: var(--or-text-sm);
}

.cr-carregando .cr-il {
  inline-size: 11rem;
  --cr-il-ciclo: 3.6s;
}

.cr-carregando .cr-il__elo,
.cr-carregando .cr-il__selo {
  animation-delay: calc(var(--i) * 0.45s + 0.2s);
}

@keyframes cr-il-elo {
  0% {
    stroke-dashoffset: 90;
  }
  12%,
  82% {
    stroke-dashoffset: 0;
  }
  95%,
  100% {
    stroke-dashoffset: 90;
  }
}

@keyframes cr-il-elo-tracejado {
  0% {
    opacity: 0;
  }
  12%,
  82% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes cr-il-selo {
  0%,
  4% {
    opacity: 0;
    transform: scale(0.4);
  }
  12%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes cr-il-feixe {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--cr-il-curso, 84px));
  }
}

/* Abrindo a aplicação ======================================================= */

.cr-abrindo {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
}

/* Entrada, em duas metades ================================================== */

.cr-entrar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-block-size: 100vh;
  padding: 0;
  place-items: stretch;
}

.cr-entrar__historia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--or-space-6);
  padding: clamp(var(--or-space-8), 5vw, var(--or-space-16));
  overflow: hidden;
}

/* Um brilho da marca ao fundo, discreto: o destaque da tela é o desenho. */
.cr-entrar__historia::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  inline-size: 70%;
  aspect-ratio: 1;
  border-radius: var(--or-radius-full);
  background: radial-gradient(closest-side, var(--cr-menu-ativo), transparent);
  pointer-events: none;
}

.cr-entrar__historia > * {
  position: relative;
  animation: cr-subir var(--or-dur-reveal) var(--or-ease-out) both;
  animation-delay: calc(var(--ordem, 0) * 90ms);
}

.cr-entrar__sobre {
  margin: 0;
  color: var(--cr-menu-rotulo);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
  letter-spacing: var(--or-ls-label);
  text-transform: uppercase;
}

.cr-entrar__titulo {
  margin: 0;
  max-inline-size: 22ch;
  color: var(--cr-menu-texto);
  font-size: clamp(var(--or-text-2xl), 3vw, var(--or-text-4xl));
  font-weight: var(--or-weight-bold);
  letter-spacing: var(--or-ls-display);
  line-height: var(--or-lh-tight);
}

.cr-entrar__texto {
  margin: 0;
  max-inline-size: 52ch;
  color: var(--cr-menu-mudo);
  line-height: var(--or-lh-normal);
}

.cr-entrar__palco {
  max-inline-size: 30rem;
  padding: var(--or-space-5);
  border: var(--or-border-hairline) solid var(--cr-menu-borda);
  border-radius: var(--or-radius-xl);
  background: var(--cr-menu-realce);
}

.cr-passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--or-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.cr-passos li {
  display: grid;
  gap: var(--or-space-1);
  font-size: var(--or-text-sm);
  color: var(--cr-menu-mudo);
  counter-increment: passo;
}

.cr-passos li::before {
  content: counter(passo, decimal-leading-zero);
  color: var(--cr-menu-marca);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
}

.cr-passos strong {
  color: var(--cr-menu-texto);
  font-weight: var(--or-weight-semibold);
}

.cr-entrar__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-space-2) var(--or-space-6);
  margin: auto 0 0;
  color: var(--cr-menu-rotulo);
  font-size: var(--or-text-xs);
}

.cr-entrar__numeros strong {
  color: var(--cr-menu-texto);
  font-family: var(--or-font-mono);
}

.cr-entrar__acesso {
  display: grid;
  place-items: center;
  padding: var(--or-space-8) var(--or-space-6);
  background: var(--or-bg-canvas);
}

.cr-entrar__acesso .or-card {
  inline-size: min(100%, var(--or-modal-sm));
  animation: cr-subir var(--or-dur-reveal) var(--or-ease-out) both;
  animation-delay: 240ms;
}

@keyframes cr-subir {
  from {
    opacity: 0;
    translate: 0 var(--or-space-4);
  }
}

/* Troca de tela: o conteúdo entra, em vez de aparecer de uma vez. */
.cr-conteudo > * {
  animation: cr-subir var(--or-dur-slow) var(--or-ease-out) both;
}

@media (max-width: 64rem) {
  .cr-entrar {
    grid-template-columns: 1fr;
  }

  /* Em tela estreita quem abre quer entrar: o acesso vem antes da explicação. */
  .cr-entrar__acesso {
    order: -1;
    padding-block: var(--or-space-6);
  }

  .cr-passos {
    grid-template-columns: 1fr;
  }

  .cr-entrar__numeros {
    margin-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-il__elo,
  .cr-il__selo,
  .cr-il__feixe,
  .cr-entrar__historia > *,
  .cr-entrar__acesso .or-card,
  .cr-conteudo > * {
    animation: none;
  }

  /* Sem movimento, o desenho aparece já conferido. */
  .cr-il__elo {
    stroke-dashoffset: 0;
  }

  .cr-il__selo {
    opacity: 1;
  }
}

/* Modelo do e-mail ========================================================== */

.cr-modelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--or-space-6);
  align-items: start;
}

.cr-modelo__form {
  display: grid;
  gap: var(--or-space-4);
}

.cr-modelo__acoes,
.cr-marcadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-space-2);
}

.cr-marcador {
  font-family: var(--or-font-mono);
}

.cr-modelo__previa {
  display: grid;
  gap: var(--or-space-2);
  position: sticky;
  inset-block-start: var(--or-space-4);
}

.cr-modelo__quadro {
  inline-size: 100%;
  block-size: 42rem;
  max-block-size: 75vh;
  background: #f3f3f7;
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: var(--or-radius-lg);
}

@media (max-width: 64rem) {
  .cr-modelo {
    grid-template-columns: 1fr;
  }

  .cr-modelo__previa {
    position: static;
  }
}

/* Informação em uma linha: estado de robôs e fontes, sem ocupar a tela. */
.cr-linha-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--or-space-2);
  margin: 0;
  color: var(--or-text-muted);
  font-size: var(--or-text-sm);
}

.cr-fontes {
  display: grid;
  /* As linhas dividem as mesmas colunas: nome, como funciona, estado. */
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  margin: 0;
  background: var(--or-bg-surface);
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: var(--or-radius-lg);
}

.cr-fontes > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--or-space-3);
  padding: var(--or-space-3) var(--or-space-4);
  border-block-end: var(--or-border-hairline) solid var(--or-border-subtle);
  font-size: var(--or-text-sm);
}

.cr-fontes > div:last-child {
  border-block-end: 0;
}

.cr-fontes dt {
  font-weight: var(--or-weight-semibold);
}

.cr-fontes dd {
  margin: 0;
  color: var(--or-text-muted);
}

.cr-email-previa {
  margin: 0;
  padding: var(--or-space-4);
  background: var(--or-bg-surface);
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: var(--or-radius-lg);
  font-family: var(--or-font-mono);
  font-size: var(--or-text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
  .cr-fontes {
    grid-template-columns: 1fr;
  }
}