/* Padrão visual Elo
 *
 * Redefine só os tokens semânticos do Sistema btime (tokens.css fica intacto,
 * como foi extraído) e os do menu lateral, com as cores da marca da Elo
 * Soluções Logísticas: azul-marinho #0B1C43 e os azuis da logo (#0E5785,
 * #9DD1E8). Títulos em Barlow, a fonte do site da Elo; corpo em Inter.
 * Carregado depois de app.css. Contraste dos textos do menu acima de 6:1.
 */

/* Escuro (padrão) */
:root {
  --or-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cr-font-titulo: "Barlow", "Inter", ui-sans-serif, system-ui, sans-serif;

  --or-bg-canvas: #060D1F;
  --or-bg-surface: #0C1730;
  --or-bg-raised: #112042;
  --or-bg-subtle: #17284F;
  --or-bg-sunken: #050B1A;
  --or-border-subtle: #1B2A4E;
  --or-border-default: #2A3C66;
  --or-border-strong: #3D5285;
  --or-text: #EEF2F8;
  --or-text-muted: #95A3BE;
  --or-text-subtle: #8293B0;
  --or-text-disabled: #4A5B80;
  --or-text-on-bright: #05173F;

  --or-brand: #7CC4E8;
  --or-brand-vivid: #9DD1E8;
  --or-brand-hover: #A9DAF0;
  --or-brand-fill: #1F78B4;
  --or-brand-fill-hover: #2B85C2;
  --or-brand-fill-active: #18669B;
  --or-brand-soft: rgba(124, 196, 232, 0.12);
  --or-brand-ring: rgba(124, 196, 232, 0.35);
  --or-accent: #9DD1E8;
  --or-accent-fill: #0E5785;
  --or-accent-fill-hover: #0B4A72;
  --or-accent-soft: rgba(157, 209, 232, 0.14);
  --or-focus: #7CC4E8;

  --or-overlay-scrim: rgba(3, 8, 20, 0.72);
  --or-glass: rgba(12, 23, 48, 0.72);
  --or-glow-brand: 0 0 24px rgba(124, 196, 232, 0.3);
  --or-gradient-brand: linear-gradient(135deg, #0E5785, #5FB0DD);
  --or-gradient-nebula: linear-gradient(90deg, #0B1C43, #0E5785, #5FB0DD);
  --or-gradient-surface: linear-gradient(160deg, rgba(23, 40, 79, 0.9), rgba(12, 23, 48, 0.6));

  --cr-menu-fundo: #10203F;
  --cr-menu-borda: #1B2A4E;
  --cr-menu-texto: #EEF2F8;
  --cr-menu-mudo: #A9B6CC;
  --cr-menu-rotulo: #93A3BF;
  --cr-menu-marca: #7CC4E8;
  --cr-menu-realce: rgba(255, 255, 255, 0.07);
  --cr-menu-ativo: rgba(124, 196, 232, 0.18);
}

/* Claro */
[data-theme="light"] {
  --or-bg-canvas: #F3F5F9;
  --or-bg-surface: #FFFFFF;
  --or-bg-raised: #FFFFFF;
  --or-bg-subtle: #E7EBF2;
  --or-bg-sunken: #E7EBF2;
  --or-border-subtle: #E2E7EF;
  --or-border-default: #C9D1DE;
  --or-border-strong: #56627A;
  --or-text: #0B1C43;
  --or-text-muted: #56627A;
  --or-text-subtle: #6B7790;
  --or-text-disabled: #A3ADBF;

  --or-brand: #0E5785;
  --or-brand-vivid: #1F78B4;
  --or-brand-hover: #0B4A72;
  --or-brand-fill: #0E5785;
  --or-brand-fill-hover: #0B4A72;
  --or-brand-fill-active: #083C5D;
  --or-brand-soft: rgba(14, 87, 133, 0.08);
  --or-brand-ring: rgba(14, 87, 133, 0.3);
  --or-accent: #0B1C43;
  --or-accent-fill: #0E5785;
  --or-accent-fill-hover: #0B4A72;
  --or-accent-soft: rgba(11, 28, 67, 0.08);
  --or-focus: #0E5785;

  --or-overlay-scrim: rgba(11, 28, 67, 0.45);
  --or-glass: rgba(243, 245, 249, 0.8);
  --or-glow-brand: 0 0 24px rgba(14, 87, 133, 0.22);
  --or-shadow-2: 0 1px 2px rgba(11, 28, 67, 0.06), 0 8px 24px -12px rgba(11, 28, 67, 0.18);

  --cr-menu-fundo: #0B1C43;
  --cr-menu-borda: #1A2C57;
  --cr-menu-texto: #F1F5FA;
  --cr-menu-mudo: #B6C2D6;
  --cr-menu-rotulo: #9AAACB;
  --cr-menu-marca: #7CC4E8;
  --cr-menu-realce: rgba(255, 255, 255, 0.06);
  --cr-menu-ativo: rgba(124, 196, 232, 0.22);
}

h1, h2, h3,
.or-h1, .or-h2, .or-h3, .or-display {
  font-family: var(--cr-font-titulo);
  letter-spacing: -0.005em;
}

/* Marca: logo da Elo e o nome do sistema com "powered by btime" embaixo. */
.cr-marca__logo {
  display: block;
  block-size: 1.75rem;
  inline-size: auto;
  flex: none;
}
.cr-marca__divisa {
  inline-size: 1px;
  block-size: 1.75rem;
  flex: none;
  background: var(--or-border-subtle);
}
.cr-marca__texto .cr-marca__por {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  font-size: 0.625rem;
  line-height: 1;
}
/* O logo da btime na mesma cor do "powered by". A palavra "btime" ocupa só o
   miolo da imagem (o símbolo vai de ponta a ponta), por isso a imagem é maior
   que o texto: assim a palavra fica da altura dele e centrada. */
.cr-marca__texto .cr-marca__btime {
  display: inline-block;
  block-size: 0.875rem;
  aspect-ratio: 513 / 178;
  background: currentColor;
  -webkit-mask: url("img/logo-btime.png") left center / contain no-repeat;
  mask: url("img/logo-btime.png") left center / contain no-repeat;
}

/* ===========================================================================
 * Modelo do Envio de Cobranças
 *
 * Mesmas medidas do painel de Cobranças, sem mudar a posição de nada: menu
 * lateral claro no tema claro (escuro no escuro) com 15rem, itens de cantos
 * arredondados que, selecionados, ganham fundo azul-claro e texto azul; título
 * da tela em 1,5rem; cartões com cantos de 1rem e sombra leve; tabelas com
 * cabeçalho em faixa; botões e campos de cantos 0,5rem e 40px de altura.
 * =========================================================================== */

:root {
  --or-radius-control: 0.5rem;
  --or-size-control-md: 2.5rem;
  --cr-sombra-cartao: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px -4px rgb(0 0 0 / 0.4);
  --cr-faixa-tabela: rgba(23, 40, 79, 0.5);
  --cr-linha-tabela: rgba(27, 42, 78, 0.7);
  --cr-realce-linha: rgba(23, 40, 79, 0.4);
}
[data-theme="light"] {
  --cr-sombra-cartao: 0 1px 2px rgb(11 28 67 / 0.05), 0 4px 16px -4px rgb(11 28 67 / 0.08);
  --cr-faixa-tabela: rgba(231, 235, 242, 0.5);
  --cr-linha-tabela: rgba(226, 231, 239, 0.7);
  --cr-realce-linha: rgba(231, 235, 242, 0.4);
}

/* Ícones de traço (mesmo desenho dos ícones do Cobranças) */
.cr-ico {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
}
.or-btn--icon .cr-ico { inline-size: 1.125rem; block-size: 1.125rem; }

/* Menu lateral -------------------------------------------------------------- */
.cr-app { grid-template-columns: 15rem 1fr; }

.cr-lateral {
  --cr-menu-fundo: #0C1730;
  --cr-menu-borda: #1B2A4E;
  --cr-menu-texto: #EEF2F8;
  --cr-menu-mudo: rgba(238, 242, 248, 0.75);
  --cr-menu-rotulo: rgba(149, 163, 190, 0.8);
  --cr-menu-marca: #7CC4E8;
  --cr-menu-realce: #17284F;
  --cr-menu-ativo: rgba(124, 196, 232, 0.12);
  gap: 0;
  padding: 1.5rem 0 0;
}
[data-theme="light"] .cr-lateral {
  --cr-menu-fundo: #FFFFFF;
  --cr-menu-borda: #E2E7EF;
  --cr-menu-texto: #0B1C43;
  --cr-menu-mudo: rgba(11, 28, 67, 0.75);
  --cr-menu-rotulo: rgba(86, 98, 122, 0.8);
  --cr-menu-marca: #0E5785;
  --cr-menu-realce: #E7EBF2;
  --cr-menu-ativo: #EAF3F9;
}

.cr-lateral > .cr-marca { padding: 0 1.25rem 1.25rem; }
.cr-marca__logo--clara { display: none; }
[data-theme="light"] .cr-lateral .cr-marca__logo--clara { display: block; }
[data-theme="light"] .cr-lateral .cr-marca__logo--escura { display: none; }

.cr-nav { gap: 0.25rem; padding: 0 0.75rem; }

.cr-nav__grupo {
  margin: 1rem 0 0.25rem;
  padding: 0 0.5rem 0.25rem;
  color: var(--cr-menu-rotulo);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cr-nav__item {
  gap: 0.75rem;
  min-block-size: 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--cr-menu-mudo);
  font-size: 0.875rem;
  font-weight: 400;
}
.cr-nav__item:hover { background: var(--cr-menu-realce); color: var(--cr-menu-texto); }

.cr-nav__item[aria-current="page"] {
  background: var(--cr-menu-ativo);
  color: var(--cr-menu-marca);
  font-weight: 500;
  box-shadow: none;
}

.cr-nav__icone {
  display: inline-flex;
  inline-size: auto;
  color: var(--cr-menu-rotulo);
}
.cr-nav__item:hover .cr-nav__icone { color: var(--cr-menu-texto); }
.cr-nav__item[aria-current="page"] .cr-nav__icone { color: var(--cr-menu-marca); }

.cr-nav__selo { font-family: inherit; font-weight: 600; }

.cr-lateral__rodape {
  gap: 0.625rem;
  margin-block-start: 0.75rem;
  padding: 0.75rem;
}
.cr-avatar {
  inline-size: 2rem;
  block-size: 2rem;
  background: var(--elo-gradiente, linear-gradient(135deg, #0E5785, #5FB0DD));
  color: #FFFFFF;
  font-weight: 600;
}
.cr-lateral__quem strong { font-size: 0.875rem; font-weight: 500; }
.cr-lateral__quem span { font-size: 0.6875rem; color: var(--cr-menu-rotulo); }

/* Topo: título da tela como o do Cobranças, sobre o fundo da página ---------- */
.cr-topo {
  padding: 2rem 2rem 0.25rem;
  background: var(--or-bg-canvas);
  border-block-end: 0;
}
.cr-topo .or-h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cr-topo__titulo p {
  margin-block-start: 0.25rem;
  color: var(--or-text-muted);
  font-size: 0.875rem;
}
.cr-busca__icone { display: inline-flex; }
.cr-busca__icone .cr-ico { inline-size: 1rem; block-size: 1rem; }

.cr-conteudo { padding: 1.25rem 2rem 2rem; gap: 1.25rem; }

/* Cartões e blocos ----------------------------------------------------------- */
.cr-cartao,
.cr-tabela-wrap,
.cr-paineis,
.cr-conteudo .or-card {
  border-radius: 1rem;
  border-color: var(--or-border-subtle);
  box-shadow: var(--cr-sombra-cartao);
}
.cr-cartao__rotulo { font-size: 0.8125rem; }

/* Tabelas -------------------------------------------------------------------- */
.cr-tabela thead { background: var(--cr-faixa-tabela); }
.cr-tabela th {
  block-size: 2.5rem;
  padding-block: 0;
  color: var(--or-text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
}
.cr-tabela th,
.cr-tabela td { border-block-end-color: var(--cr-linha-tabela); }
.cr-tabela tbody tr:last-child td { border-block-end: 0; }
.cr-tabela tbody tr:hover,
.cr-tabela tbody tr:focus-within { background: var(--cr-realce-linha); }

/* Botões --------------------------------------------------------------------- */
.or-btn { font-weight: 500; }

/* A janela da tabela de preços se centra à direita do menu, agora com 15rem. */
.cr-modal-tabela {
  inset-inline: 15rem 0;
  inline-size: min(100% - 15rem - var(--or-space-8), 64rem);
}
@media (max-width: 48rem) {
  .cr-app { grid-template-columns: 1fr; }
  .cr-modal-tabela { inset-inline: 0; inline-size: min(100% - var(--or-space-8), 64rem); }
}

/* Ajustes finos do modelo do Cobranças -------------------------------------- */

/* Marca no menu de 15rem: tamanho compacto, como no menu do Cobranças. */
.cr-lateral .cr-marca { gap: 0.625rem; }
.cr-lateral .cr-marca__logo,
.cr-lateral .cr-marca__divisa { block-size: 1.5rem; }
.cr-lateral .cr-marca__texto strong { font-size: 0.875rem; font-weight: 600; }
.cr-lateral .cr-marca__texto .cr-marca__por { font-size: 0.59375rem; }
.cr-lateral .cr-marca__texto .cr-marca__btime { block-size: 0.84375rem; }

/* Rótulo do item numa linha só; o que não couber termina em reticências. */
.cr-nav__item { white-space: nowrap; }
.cr-nav__item > :not(.cr-nav__icone):not(.cr-nav__selo) { overflow: hidden; text-overflow: ellipsis; }

/* A área de conteúdo recebe foco ao trocar de tela (tabindex -1, para leitor de tela); não é um controle, então não desenha borda. */
.cr-conteudo:focus { outline: none; }

/* Títulos de seção no tamanho dos do Cobranças. */
.cr-conteudo .or-h4 { font-size: 1rem; font-weight: 600; }

/* Valores em Inter com algarismos de mesma largura, como no Cobranças. */
.cr-num,
.cr-tabela [data-num],
.or-badge--mono {
  font-family: var(--or-font-sans);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.or-badge--mono { border-radius: 9999px; }

/* Abas de filtro: caixa de cantos 0,75rem e opção marcada preenchida em azul. */
.or-seg {
  padding: 0.25rem;
  background: var(--or-bg-surface);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(11 28 67 / 0.05);
}
.or-seg__opt span {
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.or-seg__opt input:checked + span {
  background: var(--or-brand-fill);
  color: var(--or-text-on-fill);
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(11 28 67 / 0.12);
}

/* Busca com os mesmos cantos dos campos. */
button.cr-busca { border-radius: 0.5rem; background: var(--or-bg-surface); }

/* Troca de sistema (trocar-sistema.js) ---------------------------------------
   Botão acima do usuário, como no Cobranças: a borda do rodapé passa a ficar
   acima do botão. */
.cr-lateral__trocar {
  margin-block-start: 0.75rem;
  padding: 0.75rem 0.75rem 0;
  border-block-start: var(--or-border-hairline) solid var(--cr-menu-borda);
}
.cr-lateral__trocar:has(> [hidden]) { display: none; }
.cr-lateral__trocar + .cr-lateral__rodape { margin-block-start: 0.25rem; padding-block-start: 0.25rem; border-block-start: 0; }

.cr-trocar { width: min(100% - var(--or-space-8), 28rem); border-radius: 1rem; }
.cr-trocar .or-modal__title { font-size: 1.125rem; font-weight: 600; }
.cr-trocar__sub { margin: 0.25rem 0 0; color: var(--or-text-muted); font-size: 0.875rem; }
.cr-trocar .or-modal__body { padding-block-end: var(--or-space-6); }
.cr-trocar__lista { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cr-trocar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: var(--or-border-hairline) solid var(--or-border-subtle);
  border-radius: 0.75rem;
  background: var(--or-bg-surface);
  color: var(--or-text);
  text-decoration: none;
  transition: background var(--or-dur-fast) var(--or-ease-out), border-color var(--or-dur-fast) var(--or-ease-out);
}
.cr-trocar__item:hover { background: var(--cr-realce-linha); border-color: var(--or-brand-ring); }
.cr-trocar__item:focus-visible { outline: var(--or-border-thick) solid var(--or-focus); outline-offset: 2px; }
.cr-trocar__item > .cr-ico { inline-size: 1rem; block-size: 1rem; color: var(--or-text-muted); transition: transform var(--or-dur-fast) var(--or-ease-out); }
.cr-trocar__item:hover > .cr-ico { transform: translateX(2px); }
.cr-trocar__icone {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border-radius: 0.5rem;
  background: var(--or-brand-soft);
  color: var(--or-brand);
}
.cr-trocar__icone .cr-ico { inline-size: 1.25rem; block-size: 1.25rem; }
.cr-trocar__texto { display: grid; flex: 1; min-inline-size: 0; }
.cr-trocar__texto strong { font-size: 0.875rem; font-weight: 500; }
.cr-trocar__texto span { color: var(--or-text-muted); font-size: 0.75rem; }