/* A cara do Mordomo, escrita como variável do Bootstrap.
   O Bootstrap cru é barulhento demais para um produto jurídico: etiqueta em
   amarelo forte, linha grossa embaixo do cabeçalho da tabela, link azul que
   ignora a paleta do escritório. Aqui a base é reafinada uma vez, e os
   templates seguem usando só classe utilitária. */

/* ---- As três paletas do escritório ----
   Cada uma carrega quatro coisas, não só a cor de destaque: a barra de topo, o
   fundo da página, a superfície suave (cabeçalho de tabela, cabeçalho de
   cartão) e o realce. Só o destaque não dava para perceber que o tema mudou,
   porque destaque aparece em link e botão, e o resto da tela seguia igual.

   Os seletores de modo escuro são presos ao :root de propósito: a barra de topo
   declara data-bs-theme="dark" para o Bootstrap pintar o menu e o botão de
   sanduíche, e sem o :root essa declaração sequestraria a paleta inteira. */
:root,
[data-tema='petroleo'] {
  --mj-acento: #1f5c8b; --mj-acento-rgb: 31, 92, 139; --mj-acento-forte: #17466a;
  --mj-barra: #123a52; --mj-fundo: #f3f7fa; --mj-suave: #edf3f8;
}
[data-tema='grafite'] {
  --mj-acento: #414750; --mj-acento-rgb: 65, 71, 80; --mj-acento-forte: #2e333a;
  --mj-barra: #2b3038; --mj-fundo: #f5f5f6; --mj-suave: #eef0f2;
}
[data-tema='bordo'] {
  --mj-acento: #7b2231; --mj-acento-rgb: 123, 34, 49; --mj-acento-forte: #5d1926;
  --mj-barra: #4d1520; --mj-fundo: #faf6f6; --mj-suave: #f6eced;
}

:root[data-bs-theme='dark'],
:root[data-bs-theme='dark'][data-tema='petroleo'] {
  --mj-acento: #6db3e2; --mj-acento-rgb: 109, 179, 226; --mj-acento-forte: #8cc6ec;
  --mj-barra: #0e2734; --mj-fundo: #121820; --mj-suave: #1b2531;
}
:root[data-bs-theme='dark'][data-tema='grafite'] {
  --mj-acento: #a8b2c0; --mj-acento-rgb: 168, 178, 192; --mj-acento-forte: #c2cad5;
  --mj-barra: #1c2026; --mj-fundo: #16181b; --mj-suave: #222630;
}
:root[data-bs-theme='dark'][data-tema='bordo'] {
  --mj-acento: #e39aa6; --mj-acento-rgb: 227, 154, 166; --mj-acento-forte: #eeb6bf;
  --mj-barra: #2e1116; --mj-fundo: #1a1416; --mj-suave: #2a1e21;
}

/* ---- Base: papel claro, linhas discretas, cantos macios ---- */
:root {
  --bs-body-bg: var(--mj-fundo);
  --bs-body-color: #1a1f2b;
  --bs-emphasis-color: #10141d;
  --bs-secondary-color: #5b6478;
  --bs-secondary-bg: #fff;
  --bs-tertiary-bg: var(--mj-suave);
  --bs-border-color: #e1e5eb;
  --bs-border-color-translucent: #e1e5eb;
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .75rem;
  --bs-primary: var(--mj-acento);
  --bs-primary-rgb: var(--mj-acento-rgb);
  --bs-link-color: var(--mj-acento);
  --bs-link-color-rgb: var(--mj-acento-rgb);
  --bs-link-hover-color: var(--mj-acento-forte);
  --bs-link-hover-color-rgb: var(--mj-acento-rgb);
}
:root[data-bs-theme='dark'] {
  --bs-body-color: #e8eaef;
  --bs-emphasis-color: #f4f6fa;
  --bs-secondary-color: #9aa3b4;
  --bs-secondary-bg: #1b1f29;
  --bs-border-color: #2b3140;
  --bs-border-color-translucent: #2b3140;
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.021em; }

/* ---- Cartão: é ele que segura quase tudo, tabela inclusive ---- */
.card {
  --bs-card-bg: var(--bs-secondary-bg);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-cap-bg: var(--mj-suave);
  /* Sem isto a tabela de dentro passa reta pelo canto arredondado do cartão,
     e sobra aquele bico quadrado saindo da borda. */
  overflow: hidden;
}
.card-header { border-bottom-color: var(--bs-border-color); }

/* ---- Tabela: cabeçalho discreto, sem a barra grossa do padrão ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: rgba(var(--mj-acento-rgb), .045);
}
/* O Bootstrap desenha 2px de currentColor entre o thead e o corpo. */
.table > :not(:first-child) { border-top: 0; }
.table > thead > tr > th {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .045em;
  white-space: nowrap;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.card > .table-responsive > .table { margin-bottom: 0; }

/* ---- Etiqueta: cor de fundo suave e texto forte, não semáforo ---- */
.badge {
  font-weight: 600;
  font-size: .76rem;
  padding: .3em .6em;
  border-radius: 999px;
}
.text-bg-success {
  background-color: var(--bs-success-bg-subtle) !important;
  color: var(--bs-success-text-emphasis) !important;
}
.text-bg-warning {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: var(--bs-warning-text-emphasis) !important;
}
.text-bg-danger {
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}
.text-bg-secondary {
  background-color: var(--bs-secondary-bg-subtle) !important;
  color: var(--bs-secondary-color) !important;
}

/* ---- Aviso: faixa com barra lateral, como era antes ---- */
.alert {
  --bs-alert-border-color: var(--bs-border-color);
  border-left-width: 4px;
}
.alert-success { border-left-color: var(--bs-success-border-subtle); }
.alert-warning { border-left-color: var(--bs-warning-border-subtle); }
.alert-danger  { border-left-color: var(--bs-danger-border-subtle); }
.alert-info    { border-left-color: var(--mj-acento); }
.alert-heading { margin-bottom: .2rem; }

/* ---- Botões e campos na cor do escritório ---- */
.btn { --bs-btn-font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--mj-acento); --bs-btn-border-color: var(--mj-acento);
  --bs-btn-hover-bg: var(--mj-acento-forte); --bs-btn-hover-border-color: var(--mj-acento-forte);
  --bs-btn-active-bg: var(--mj-acento-forte); --bs-btn-active-border-color: var(--mj-acento-forte);
  --bs-btn-disabled-bg: var(--mj-acento); --bs-btn-disabled-border-color: var(--mj-acento);
}
.btn-outline-primary {
  --bs-btn-color: var(--mj-acento); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--mj-acento); --bs-btn-hover-border-color: var(--mj-acento);
  --bs-btn-active-bg: var(--mj-acento); --bs-btn-active-border-color: var(--mj-acento);
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color);
}
.form-control, .form-select {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mj-acento);
  box-shadow: 0 0 0 .2rem rgba(var(--mj-acento-rgb), .18);
}
.form-check-input:checked {
  background-color: var(--mj-acento);
  border-color: var(--mj-acento);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--mj-acento-rgb), .18); }
.form-label, .col-form-label { font-size: .88rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.form-text { font-size: .82rem; }
code { color: var(--mj-acento); }

/* ---- Barra de topo: é ela que dá a cor ao escritório ---- */
.navbar {
  --bs-navbar-padding-y: .6rem;
  --bs-navbar-color: rgba(255, 255, 255, .72);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  background: var(--mj-barra);
}
.navbar .nav-link { --bs-nav-link-font-size: .95rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .55); }
.navbar-brand { font-weight: 700; letter-spacing: -.02em; color: #fff; }
.navbar-brand:hover, .navbar-brand:focus { color: #fff; }
.navbar .btn-conta {
  --bs-btn-color: rgba(255, 255, 255, .9);
  --bs-btn-border-color: rgba(255, 255, 255, .3);
  --bs-btn-hover-color: var(--mj-barra);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--mj-barra);
  --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff;
}

/* ---- Ícones ----
   Herdam currentColor e o tamanho da fonte, então acompanham a paleta e o
   corpo de texto sem precisar de tamanho fixo em cada uso. */
.icone { width: 1.35rem; height: 1.35rem; display: block; }
.marca-contador {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--mj-acento);
  background: rgba(var(--mj-acento-rgb), .12);
}

/* ---- O e-mail como chegou: quebras importam e o texto é longo ---- */
.corpo-email {
  white-space: pre-wrap;
  max-height: 26rem;
  overflow: auto;
  font-size: .9rem;
}

/* ---- Escolha da forma de resolver ----
   A combo abre um formulário de cada vez. Sem JS nenhum bloco fica escondido, e
   o título de cada um separa os formulários: a tela fica mais longa, mas
   nenhuma saída some. */
.escolha.com-js .titulo-opcao { display: none; }
.escolha:not(.com-js) [data-opcao] + [data-opcao] {
  border-top: 1px dashed var(--bs-border-color);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* ---- Cartão que é um botão de escolha (paletas de cor) ---- */
.cartao-escolha { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cartao-escolha:hover { border-color: var(--mj-acento); }
.cartao-escolha:has(:checked) {
  border-color: var(--mj-acento);
  box-shadow: 0 0 0 3px rgba(var(--mj-acento-rgb), .16);
}

/* ---- Acompanhamento da confirmação de pagamento ---- */
.progresso-pagamento {
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  padding: 1rem;
  background: var(--bs-tertiary-bg);
}
.progresso-pagamento-etapas {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progresso-pagamento-etapas li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .7rem;
  align-items: start;
  color: var(--bs-secondary-color);
}
.progresso-pagamento-etapas li + li { position: relative; }
.progresso-pagamento-etapas li + li::before {
  position: absolute;
  top: -1rem;
  left: .94rem;
  width: 2px;
  height: .9rem;
  background: var(--bs-border-color);
  content: '';
}
.progresso-pagamento-marcador {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  font-weight: 700;
  background: var(--bs-body-bg);
}
.progresso-pagamento-etapas .concluida,
.progresso-pagamento-etapas .atual { color: var(--bs-body-color); }
.progresso-pagamento-etapas .concluida .progresso-pagamento-marcador {
  color: #fff;
  border-color: var(--mj-acento);
  background: var(--mj-acento);
}
.progresso-pagamento-etapas .concluida .progresso-pagamento-marcador::after { content: '✓'; }
.progresso-pagamento-etapas .concluida .progresso-pagamento-marcador { font-size: 0; }
.progresso-pagamento-etapas .concluida .progresso-pagamento-marcador::after { font-size: 1rem; }
.progresso-pagamento-etapas .atual .progresso-pagamento-marcador {
  color: #fff;
  border-color: var(--mj-acento);
  background: var(--mj-acento);
  box-shadow: 0 0 0 .25rem rgba(var(--mj-acento-rgb), .16);
}
.progresso-pagamento-etapas small { display: block; margin-top: .1rem; }
.progresso-pagamento-atualizacao {
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--bs-secondary-color);
}