/* 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;
}
[data-tema='areia'] {
  --mj-acento: #8c6d3f; --mj-acento-rgb: 140, 109, 63; --mj-acento-forte: #6b5029;
  --mj-barra: #4a3820; --mj-fundo: #faf7f1; --mj-suave: #f5efe1;
}
[data-tema='musgo'] {
  --mj-acento: #4f6b47; --mj-acento-rgb: 79, 107, 71; --mj-acento-forte: #3a4f34;
  --mj-barra: #263420; --mj-fundo: #f5f7f3; --mj-suave: #eef2ea;
}

: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;
}
:root[data-bs-theme='dark'][data-tema='areia'] {
  --mj-acento: #d3b579; --mj-acento-rgb: 211, 181, 121; --mj-acento-forte: #e2c896;
  --mj-barra: #2c2114; --mj-fundo: #1c1712; --mj-suave: #241d15;
}
:root[data-bs-theme='dark'][data-tema='musgo'] {
  --mj-acento: #9dc08b; --mj-acento-rgb: 157, 192, 139; --mj-acento-forte: #b3cfa4;
  --mj-barra: #1b2417; --mj-fundo: #12160f; --mj-suave: #1c2318;
}

/* ---- 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);
  /* Regra única para toda listagem do sistema — o texto do corpo herdava o
     tamanho normal do documento, grande demais ao lado do cabeçalho, que já
     era pequeno (.78rem, abaixo). Mudar aqui vale para as 14 tabelas do
     sistema de uma vez, sem editar template por template. */
  font-size: .85rem;
}
/* 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;
}

/* ---- Contador de processos ativos, na barra ---- */
.contador-processos {
  color: rgba(255, 255, 255, .82);
  font-size: .85rem;
  white-space: nowrap;
}
.contador-processos:hover, .contador-processos:focus { color: #fff; }
.contador-processos .bolinha {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  display: inline-block;
}

/* ---- Í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;
  position: relative;
  overflow: hidden;
  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);
}
/* Marca de "selecionado" no canto — sem ela, a única diferença entre
   escolhido e não escolhido era a borda mais grossa, fácil de não notar
   numa grade de cinco cartões parecidos. */
.cartao-escolha-marca {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  line-height: 1;
  background: var(--mj-acento);
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .15s;
  z-index: 1;
}
.cartao-escolha:has(:checked) .cartao-escolha-marca { opacity: 1; transform: scale(1); }

/* ---- 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);
}