/* 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 > .bi { font-size: 1.2rem; line-height: 1; }
.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. */
/* Sem JS, todos os formulários ficam à mostra e o título separa cada um;
   com JS, o cartão escolhido já diz qual é — o título só repetiria. (Antes
   o título tinha `d-block` do Bootstrap, cujo !important vencia esta regra
   e o deixava sempre visível.) */
.titulo-opcao { display: block; }
.escolha.com-js .titulo-opcao { display: none; }
/* Sem JS, os botões de escolha não fazem nada: todos os formulários ficam à mostra. */
.escolha:not(.com-js) [data-escolha-select] { 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); }

/* Acordeão sem JS: o corpo extra dentro de um cartão-escolha (ex: o meio de
   pagamento dentro de "Cobrança própria") só abre quando o rádio do próprio
   cartão está marcado — mesmo `:has()` do checkmark acima. max-height (não
   height/grid-rows) porque o conteúdo tem altura variável (erro de validação
   pode aparecer) e um valor fixo alto sobra sem esticar a transição visível. */
.cartao-escolha-corpo {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .2s ease, opacity .15s ease;
}
.cartao-escolha:has(:checked) .cartao-escolha-corpo {
  max-height: 12rem;
  opacity: 1;
}

/* ==== Agenda (docs/arquivo/PLANO_AGENDA.md) ==================================== */
/* Tudo em cima de --mj-acento, para funcionar nos cinco temas e no escuro.
   Estados: pendente = cor viva; concluído = fosco, riscado e com ícone
   (nunca só cor); atrasado = classe própria, cor ainda em aberto (seção 12). */
.text-mj-acento { color: var(--mj-acento) !important; }

/* HTMX: o indicador só aparece durante o pedido. */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
#agenda-conteudo.htmx-request { cursor: progress; }

/* Faixa dos sete dias: rola na horizontal no celular, com alvo de 44px+. */
.agenda-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(4.25rem, 1fr));
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .25rem;
}
.agenda-dia-card {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: 5.25rem; padding: .5rem .25rem;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  background: var(--bs-secondary-bg); color: var(--bs-body-color);
  text-decoration: none; scroll-snap-align: center;
  transition: border-color .15s, background-color .15s, transform .1s;
}
.agenda-dia-card:hover { border-color: var(--mj-acento); color: var(--bs-body-color); }
.agenda-dia-card:active { transform: scale(.98); }
.agenda-dia-card:focus-visible { outline: 3px solid rgba(var(--mj-acento-rgb), .45); outline-offset: 2px; }
.agenda-dia-card__semana { font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color); }
.agenda-dia-card__numero { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.agenda-dia-card__contadores { display: flex; gap: .4rem; font-size: .75rem; color: var(--bs-secondary-color); min-height: 1.1rem; }
.agenda-dia-card__contadores .bi { margin-right: .1rem; }
.agenda-dia-card__prazo { color: var(--mj-acento); font-weight: 600; }
/* Hoje: número em círculo, como no Google Calendar. */
.agenda-dia-card--hoje .agenda-dia-card__numero {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; border: 2px solid var(--mj-acento); color: var(--mj-acento);
}
/* Selecionado: cartão preenchido. */
.agenda-dia-card--selecionado,
.agenda-dia-card--selecionado:hover { background: var(--mj-acento); border-color: var(--mj-acento); color: #fff; }
.agenda-dia-card--selecionado .agenda-dia-card__semana,
.agenda-dia-card--selecionado .agenda-dia-card__contadores,
.agenda-dia-card--selecionado .agenda-dia-card__prazo { color: rgba(255, 255, 255, .9); }
.agenda-dia-card--selecionado.agenda-dia-card--hoje .agenda-dia-card__numero { border-color: #fff; color: #fff; }

/* Itens do card do dia. */
.agenda-lista { display: flex; flex-direction: column; gap: .35rem; }
.agenda-item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .7rem; border-radius: var(--bs-border-radius-sm);
  border-left: 3px solid var(--mj-acento); background: rgba(var(--mj-acento-rgb), .06);
}
.agenda-item--tarefa { border-left-color: rgba(var(--mj-acento-rgb), .55); }
.agenda-item__icone { color: var(--mj-acento); font-size: 1.05rem; line-height: 1.35; }
.agenda-item__corpo { flex: 1; min-width: 0; }
.agenda-item__titulo { font-weight: 600; color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
.agenda-item__titulo:hover { color: var(--mj-acento); text-decoration: underline; }
.agenda-item__meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .8rem; color: var(--bs-secondary-color); }
.agenda-item__vence { font-weight: 600; color: var(--mj-acento); }
.agenda-item__lado { display: flex; align-items: center; gap: .35rem; }
.agenda-avatar {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: rgba(var(--mj-acento-rgb), .15); color: var(--mj-acento); font-size: .8rem; font-weight: 700;
}
/* Concluído: fosco e riscado, mas com contraste suficiente para ler. */
.agenda-item--concluido { background: var(--bs-tertiary-bg); border-left-color: var(--bs-border-color); opacity: .75; }
.agenda-item--concluido .agenda-item__titulo { text-decoration: line-through; font-weight: 500; color: var(--bs-secondary-color); }
.agenda-item--concluido .agenda-item__icone { color: var(--bs-secondary-color); }
/* .agenda-item--atrasado e .agenda-item--atrasado-texto: por enquanto sem
   estilo próprio (igual a pendente) — a cor está em aberto
   (docs/arquivo/PLANO_AGENDA.md, 12). Definir aqui não mexe em template nem view. */

@media (max-width: 575.98px) {
  .agenda-semana { grid-template-columns: repeat(7, 4.25rem); }
  .agenda-item { padding: .6rem; }
}

/* Botão de concluir do item: mostra o ícone do tipo; ao passar o mouse ou
   focar, vira um "check" — deixa claro que clicar conclui. Alvo de 44px. */
.agenda-item__check {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.55rem -.4rem -.55rem -.6rem;
  border: 0; background: none; border-radius: 50%; color: var(--mj-acento); font-size: 1.15rem;
}
.agenda-item__check > .bi:last-child { display: none; }
.agenda-item__check:hover, .agenda-item__check:focus-visible { background: rgba(var(--mj-acento-rgb), .12); }
.agenda-item__check:hover > .bi:first-child, .agenda-item__check:focus-visible > .bi:first-child { display: none; }
.agenda-item__check:hover > .bi:last-child, .agenda-item__check:focus-visible > .bi:last-child { display: inline; }
.agenda-item__menu { min-width: 2.25rem; min-height: 2.25rem; }
.agenda-avisos { z-index: 1090; }
/* Formulário enxuto: "Mais detalhes" recolhido. */
.form-detalhes > summary { cursor: pointer; color: var(--mj-acento); font-weight: 600; margin-bottom: .75rem; }

/* Vencido esperando ciente: fica à vista até alguém tratar. A cor do
   "atrasado" em geral segue em aberto (docs/arquivo/PLANO_AGENDA.md, 12); aqui usa o
   vermelho do Bootstrap, discreto, só para este bloco. */
.agenda-vencidos-titulo { color: var(--bs-danger-text-emphasis); }
.agenda-item--vencido { border-left-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.agenda-item--vencido .agenda-item__icone, .agenda-item--vencido .agenda-item__vence { color: var(--bs-danger-text-emphasis); }

/* ---- Agenda: visualização Mensal (docs/arquivo/PLANO_AGENDA.md, 5) ---- */
.agenda-dia-card__feriado { font-size: .7rem; color: var(--bs-secondary-color); }
.agenda-dia-card--selecionado .agenda-dia-card__feriado { color: rgba(255, 255, 255, .9); }

.agenda-mes { overflow: hidden; }
.agenda-mes__cabecalho, .agenda-mes__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-mes__cabecalho > div {
  padding: .4rem; text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
}
.agenda-mes__semana { row-gap: 2px; border-bottom: 1px solid var(--bs-border-color); min-height: 6.5rem; }
.agenda-mes__semana:last-child { border-bottom: 0; }

/* Fundo de cada dia: ocupa todas as linhas da semana e é o alvo do clique. */
.agenda-mes__celula { border-right: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg); transition: background-color .12s; }
a.agenda-mes__celula:nth-of-type(7) { border-right: 0; }
.agenda-mes__celula:hover { background: rgba(var(--mj-acento-rgb), .05); }
.agenda-mes__celula:focus-visible { outline: 3px solid rgba(var(--mj-acento-rgb), .45); outline-offset: -3px; }
.agenda-mes__celula--fora { background: var(--bs-tertiary-bg); }
.agenda-mes__celula--feriado { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(var(--mj-acento-rgb), .04) 8px 16px); }
.agenda-mes__celula--selecionada { box-shadow: inset 0 0 0 2px rgba(var(--mj-acento-rgb), .35); }
/* Números, faixas e tarefas ficam por cima do fundo, sem roubar o clique
   onde não há nada — só os próprios links recebem o ponteiro. */
.agenda-mes__numero, .agenda-faixa, .agenda-mes__tarefas { position: relative; z-index: 1; }
.agenda-mes__numero, .agenda-mes__tarefas { pointer-events: none; }
.agenda-mes__tarefas a, .agenda-mes__feriado { pointer-events: auto; }
.agenda-mes__numero { display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem 0; font-size: .82rem; min-width: 0; }
.agenda-mes__numero-dia { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: 1rem; font-weight: 600; }
.agenda-mes__celula--fora + .agenda-mes__numero, .agenda-mes__numero:has(+ .agenda-mes__celula--fora) { opacity: .55; }
.agenda-mes__feriado { font-size: .68rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hoje: número em círculo preenchido, como no Google Calendar. */
.agenda-mes__celula--hoje + .agenda-mes__numero .agenda-mes__numero-dia { background: var(--mj-acento); color: #fff; }

/* Faixa de prazo: atravessa os dias; quebra na virada de semana. */
.agenda-faixa {
  display: flex; align-items: center; gap: .3rem; margin: 0 .25rem; padding: 0 .45rem; min-width: 0;
  border-radius: .4rem; font-size: .75rem; font-weight: 600; line-height: 1.5rem; text-decoration: none;
  background: var(--mj-acento); color: #fff; white-space: nowrap;
}
.agenda-faixa:hover { filter: brightness(1.08); color: #fff; }
.agenda-faixa:focus-visible { outline: 3px solid rgba(var(--mj-acento-rgb), .45); outline-offset: 1px; }
.agenda-faixa__titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agenda-faixa__fim { font-size: .7rem; opacity: .9; }
/* Continuação: sem canto arredondado e colada na borda do lado que segue. */
.agenda-faixa--continua-antes { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.agenda-faixa--continua-depois { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Tipos: variação da cor do tema (audiência/evento/compromisso mais claros). */
.agenda-faixa--audiencia.agenda-faixa--pendente { background: var(--mj-acento-forte); }
.agenda-faixa--evento.agenda-faixa--pendente,
.agenda-faixa--outro.agenda-faixa--pendente { background: rgba(var(--mj-acento-rgb), .78); }
/* Concluída: clara e fosca; perdida e vencida: vermelho (vencida é viva,
   pede ação; perdida já teve ciente, fica fosca). */
.agenda-faixa--concluida { background: rgba(var(--mj-acento-rgb), .14); color: var(--bs-secondary-color); font-weight: 500; }
.agenda-faixa--concluida .agenda-faixa__titulo { text-decoration: line-through; }
.agenda-faixa--concluida:hover { color: var(--bs-body-color); }
.agenda-faixa--vencida { background: var(--bs-danger); }
.agenda-faixa--perdida { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); font-weight: 500; }
.agenda-faixa--perdida:hover { color: var(--bs-danger-text-emphasis); }

/* Tarefas dentro do dia. */
.agenda-mes__tarefas { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: .1rem .25rem .35rem; min-width: 0; }
.agenda-mes__tarefa, .agenda-mes__mais {
  display: flex; align-items: center; gap: .25rem; padding: 0 .3rem; border-radius: .3rem;
  font-size: .74rem; line-height: 1.35rem; text-decoration: none; color: var(--bs-body-color); min-width: 0;
}
.agenda-mes__tarefa:hover { background: rgba(var(--mj-acento-rgb), .08); }
.agenda-mes__tarefa .bi { color: var(--mj-acento); font-size: .72rem; }
.agenda-mes__tarefa-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-mes__hora { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.agenda-mes__tarefa--pendente { font-weight: 600; }
.agenda-mes__tarefa--concluida { color: var(--bs-secondary-color); opacity: .75; }
.agenda-mes__tarefa--concluida .agenda-mes__tarefa-titulo { text-decoration: line-through; }
.agenda-mes__tarefa--concluida .bi { color: var(--bs-secondary-color); }
.agenda-mes__mais { color: var(--mj-acento); font-weight: 600; }

.agenda-legenda__amostra { display: inline-block; width: 1.4rem; height: .6rem; margin-right: .35rem; border-radius: .2rem; vertical-align: middle; }
.agenda-legenda .agenda-faixa--pendente { background: var(--mj-acento); }

/* Celular: em pé só Semanal, deitado só Mensal (docs/arquivo/PLANO_AGENDA.md, 3.3). O
   seletor some; a troca é feita pelo agenda.js ao girar o aparelho. */
@media (max-width: 767.98px) {
  .agenda-seletor-visao { display: none !important; }
  .agenda-mes__semana { min-height: 4.5rem; }
  .agenda-mes__tarefa-titulo, .agenda-mes__hora { display: none; }
  .agenda-faixa { font-size: .68rem; padding: 0 .3rem; }
}

/* ---- Agenda: impressão / PDF (docs/arquivo/PLANO_AGENDA.md, 6) ---- */
.agenda-impressao__cabecalho {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--mj-acento);
}
.agenda-impressao__dia { break-inside: avoid; margin-bottom: 1.25rem; }
.agenda-impressao__titulo-dia { margin-bottom: .4rem; padding-bottom: .2rem; border-bottom: 1px solid var(--bs-border-color); }
.agenda-impressao__tabela { font-size: .82rem; }
.agenda-impressao__tabela .col-hora { width: 5.5rem; }
.agenda-impressao__feito td { color: var(--bs-secondary-color); }
.agenda-impressao__feito strong { text-decoration: line-through; font-weight: 500; }
.agenda-impressao__vencido td { color: var(--bs-danger-text-emphasis); }
.agenda-impressao__rodape { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
@media print {
  body:has(.agenda-impressao) nav,
  body:has(.agenda-impressao) footer,
  .agenda-impressao .nao-imprime,
  .agenda-avisos { display: none !important; }
  body:has(.agenda-impressao) main { padding: 0 !important; max-width: none !important; }
  body:has(.agenda-impressao) { background: #fff !important; }
  .agenda-impressao { color: #000; }
  .agenda-impressao__tabela thead { display: table-header-group; }
}

/* Ajuda de atalhos (tecla ?). */
.agenda-atalhos kbd { min-width: 1.8rem; display: inline-block; text-align: center; }

/* ---- Agenda: engajamento (docs/arquivo/PLANO_AGENDA.md, 8.6.4 e 8.6.5) ---- */
.agenda-progresso .progress { height: .4rem; background: rgba(var(--mj-acento-rgb), .12); }
.agenda-progresso .progress-bar { background: var(--mj-acento); }
.agenda-dia-feito {
  padding: .5rem .75rem; border-radius: var(--bs-border-radius-sm);
  background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-weight: 600;
}
.agenda-guia { border-color: rgba(var(--mj-acento-rgb), .35); background: rgba(var(--mj-acento-rgb), .04); }
.agenda-guia__passo { display: flex; gap: .6rem; align-items: flex-start; height: 100%; padding: .6rem; border-radius: var(--bs-border-radius-sm); background: var(--bs-secondary-bg); }
.agenda-guia__passo > .bi { color: var(--mj-acento); font-size: 1.2rem; line-height: 1.2; }
.agenda-guia__passo--feito { opacity: .65; }
.agenda-guia__passo--feito .fw-semibold { text-decoration: line-through; }
.agenda-guia__passo--feito > .bi { color: var(--bs-success); }
/* Painel inicial: hoje e amanhã. */
.agenda-painel__dia {
  display: flex; align-items: baseline; gap: .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--bs-border-color); color: var(--bs-body-color); text-decoration: none;
}
.agenda-painel__dia:hover { color: var(--mj-acento); }
.agenda-compacto { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; font-size: .88rem; min-width: 0; }
.agenda-compacto > .bi { color: var(--mj-acento); }
.agenda-compacto__hora { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.agenda-compacto__titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-compacto--feito { color: var(--bs-secondary-color); }
.agenda-compacto--feito .agenda-compacto__titulo { text-decoration: line-through; }
.agenda-compacto--feito > .bi { color: var(--bs-secondary-color); }

/* Modal do dia: o conteúdo chega dentro de #modal-dia-corpo e o formulário
   envolve corpo e rodapé. O modo "scrollable" do Bootstrap espera
   cabeçalho/corpo/rodapé como filhos diretos do .modal-content — sem
   repassar o flex por essas camadas, o rodapé (Salvar) ficava cortado
   abaixo da borda num formulário longo. Assim só o corpo rola e o rodapé
   fica sempre à vista. */
#modal-dia-corpo,
#modal-dia-corpo > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#modal-dia-corpo .modal-body { overflow-y: auto; }

/* Caixa de marcar sempre à vista; ícone do tipo junto do título. */
.agenda-item__check > .bi:first-child { color: rgba(var(--mj-acento-rgb), .7); }
.agenda-item__tipo { color: var(--mj-acento); margin-right: .3rem; }
.agenda-item--concluido .agenda-item__tipo { color: var(--bs-secondary-color); }

/* ---- Componentes de formulário (nasceram no prazo da Agenda; ver docs/arquivo/PLANO_REPAGINACAO.md, 4) ---- */
.mj-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; }
.mj-opcao {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .65rem .4rem; margin: 0;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-secondary-bg);
  font-size: .85rem; text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s;
}
.mj-opcao > .bi { font-size: 1.35rem; color: var(--mj-acento); }
.mj-opcao:hover { border-color: var(--mj-acento); }
.btn-check:checked + .mj-opcao { border-color: var(--mj-acento); background: rgba(var(--mj-acento-rgb), .1); font-weight: 600; box-shadow: inset 0 0 0 1px var(--mj-acento); }
.btn-check:focus-visible + .mj-opcao { outline: 3px solid rgba(var(--mj-acento-rgb), .45); outline-offset: 2px; }
.mj-bloco { padding: .9rem 1rem .25rem; border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); }
.mj-bloco__titulo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); margin-bottom: .6rem; }
/* Data-limite é o resultado da conta: destaque. */
.prazo-data-limite .form-label { font-weight: 700; color: var(--mj-acento); }
.prazo-data-limite .form-control { border-color: var(--mj-acento); font-weight: 600; }
.mj-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--bs-secondary-bg); }
.mj-lateral h2 { margin-bottom: .4rem; }
.mj-lateral--destaque { border-color: rgba(var(--mj-acento-rgb), .4); background: rgba(var(--mj-acento-rgb), .05); }
@media (max-width: 575.98px) {
  .mj-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No celular os botões ficam presos no rodapé da tela, sempre à mão. */
  .mj-acoes { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); }
}

/* Menu ⋮ do item: "Remarcar…" abre as opções dentro do próprio menu. */
.agenda-remarcar { border-left: 2px solid rgba(var(--mj-acento-rgb), .3); margin-left: 1.1rem; }
.agenda-item__menu + .dropdown-menu { min-width: 15rem; }
/* Bloco "Quando": rótulo curto à esquerda de cada linha (Início / ↓ / Fim). */
.prazo-quando__linha { display: flex; gap: .75rem; align-items: flex-start; }
.prazo-quando__rotulo {
  flex: 0 0 3rem; padding-top: 2.1rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; color: var(--bs-secondary-color);
}
.prazo-quando__rotulo--fim { color: var(--mj-acento); }
.prazo-quando__contagem { margin: -.5rem 0 .75rem; }
.prazo-quando__contagem .prazo-quando__rotulo { padding-top: .25rem; text-align: center; color: rgba(var(--mj-acento-rgb), .6); }
.prazo-quando__dias { width: 5rem; }
/* Tarefa: contagem de dias recolhida dentro do bloco "Quando". */
.tarefa-contagem > summary { cursor: pointer; color: var(--mj-acento); font-weight: 600; }


/* ==== Componentes comuns (docs/arquivo/PLANO_REPAGINACAO.md, seção 4) ==========
   Generalizam o que nasceu na Agenda. Tudo em cima de --mj-acento, para
   valer nos cinco temas e no modo escuro. */

/* Caminho de volta (templates/componentes/_caminho.html). */
.mj-caminho { font-size: .875rem; margin-bottom: .5rem; }
.mj-caminho a { text-decoration: none; }
.mj-caminho a:hover { text-decoration: underline; }
.mj-caminho__separador { color: var(--bs-secondary-color); margin: 0 .35rem; }

/* Cabeçalho de página: ícone + título + situação à esquerda, ações à direita. */
.mj-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.mj-cabecalho__titulo { display: flex; align-items: center; gap: .6rem; margin: 0 auto 0 0; min-width: 0; }
.mj-cabecalho__titulo > .bi { color: var(--mj-acento); flex-shrink: 0; }
.mj-cabecalho__titulo > span { overflow-wrap: anywhere; }
.mj-cabecalho__sub { flex-basis: 100%; margin: -.35rem 0 0; color: var(--bs-secondary-color); }
.mj-cabecalho__acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Estado vazio que ensina (templates/componentes/_vazio.html). */
.mj-vazio { text-align: center; padding: 2rem 1rem; color: var(--bs-secondary-color); }
.mj-vazio > .bi { display: block; font-size: 2.25rem; color: var(--mj-acento); margin-bottom: .5rem; }
.mj-vazio__texto { max-width: 32rem; margin: 0 auto .75rem; }

/* Barra de filtros de lista. */
.mj-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.mj-filtros .form-select, .mj-filtros .form-control { width: auto; min-width: 10rem; }
.mj-filtros .mj-filtros__busca { flex: 1 1 14rem; }
@media (max-width: 575.98px) {
  .mj-filtros .form-select, .mj-filtros .form-control { flex: 1 1 100%; }
}

/* Ações de linha em lista: ícones e menu ⋮ (popper fixo, como na Agenda). */
.mj-acoes-linha { display: flex; gap: .25rem; justify-content: flex-end; align-items: center; }
.mj-acoes-linha .btn { min-width: 2.25rem; min-height: 2.25rem; }
.mj-menu-linha { min-width: 2.25rem; min-height: 2.25rem; }
.mj-menu-linha + .dropdown-menu { min-width: 13rem; }

/* Lista de dados (rótulo à esquerda, valor à direita) em painéis e detalhes. */
.mj-dados { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
.mj-dados dt { font-weight: 500; color: var(--bs-secondary-color); }
.mj-dados dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Anexo de arquivo (templates/componentes/_campo_arquivo.html) ---- */
.mj-arquivo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .25rem; }
.mj-arquivo__atual {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; min-width: 0;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); font-size: .9rem;
}
.mj-arquivo__atual > .bi { color: var(--mj-acento); }
.mj-arquivo__atual-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Área: o <input> real fica invisível por cima dela — clicar e soltar
   arquivo funcionam mesmo sem JS. */
.mj-arquivo__zona {
  position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; min-height: 4.5rem;
  border: 2px dashed rgba(var(--mj-acento-rgb), .35); border-radius: var(--bs-border-radius);
  background: rgba(var(--mj-acento-rgb), .03); transition: border-color .12s, background-color .12s;
}
.mj-arquivo__zona:hover, .mj-arquivo--arrastando .mj-arquivo__zona { border-color: var(--mj-acento); background: rgba(var(--mj-acento-rgb), .08); }
.mj-arquivo__zona:focus-within { outline: 3px solid rgba(var(--mj-acento-rgb), .45); outline-offset: 2px; }
.mj-arquivo__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mj-arquivo__icone { font-size: 1.9rem; color: var(--mj-acento); flex-shrink: 0; }
.mj-arquivo__texto { display: flex; flex-direction: column; min-width: 0; font-size: .92rem; }
.mj-arquivo__escolher { color: var(--mj-acento); }
.mj-arquivo__regras { font-size: .8rem; color: var(--bs-secondary-color); }
.mj-arquivo.is-invalid .mj-arquivo__zona, .mj-arquivo--erro .mj-arquivo__zona { border-color: var(--bs-danger); }
/* Lista do que foi escolhido. */
.mj-arquivo__lista { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.mj-arquivo__item {
  display: flex; align-items: center; gap: .65rem; padding: .4rem .5rem; min-width: 0;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); background: var(--bs-secondary-bg);
}
.mj-arquivo__miniatura {
  flex: 0 0 2.75rem; height: 2.75rem; display: grid; place-items: center; overflow: hidden;
  border-radius: .4rem; background: rgba(var(--mj-acento-rgb), .1); color: var(--mj-acento); font-size: 1.3rem;
}
.mj-arquivo__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.mj-arquivo__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mj-arquivo__nome { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-arquivo__tamanho { font-size: .75rem; color: var(--bs-secondary-color); }
.mj-arquivo__remover { min-width: 2.75rem; min-height: 2.75rem; }
/* Celular: a área vira botão grande; com câmera, os dois lado a lado. */
@media (max-width: 575.98px) {
  .mj-arquivo__zona { justify-content: center; text-align: center; min-height: 3.25rem; padding: .7rem; }
  .mj-arquivo__zona .mj-arquivo__icone { font-size: 1.4rem; }
  .mj-arquivo__texto { align-items: center; }
  .mj-arquivo--com-camera { display: grid; grid-template-columns: 1fr 1fr; }
  .mj-arquivo--com-camera > :not(.mj-arquivo__zona):not(.mj-arquivo__camera) { grid-column: 1 / -1; }
  .mj-arquivo--com-camera .mj-arquivo__camera .btn { height: 100%; min-height: 3.25rem; }
  .mj-arquivo--com-camera .mj-arquivo__regras { display: none; }
}

/* ==== Celular (docs/arquivo/PLANO_REPAGINACAO.md, seção 3.10) ====================
   Regras que valem para o sistema todo em tela pequena. */
@media (max-width: 575.98px) {
  /* 16px em campo de formulário: abaixo disso o iPhone dá zoom ao focar e
     a tela "pula". */
  .form-control, .form-select, .input-group-text { font-size: 16px; }
  /* Rodapé de ações sempre à mão, acima da barra do sistema do aparelho. */
  .mj-acoes {
    position: sticky; bottom: 0; z-index: 3;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
  }
  .mj-acoes .btn { flex: 1 1 auto; min-height: 2.75rem; }
  /* Cabeçalho: ações quebram para baixo e ocupam a largura. Padrão do
     projeto: no HTML a ação principal vem POR ÚLTIMO (no computador fica à
     direita, onde a leitura termina); no celular a ordem inverte e ela vai
     para o TOPO, a primeira que se vê e a mais perto do polegar. */
  .mj-cabecalho__acoes { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .mj-cabecalho__acoes > .dropdown > .btn { width: 100%; }
  .mj-cabecalho__acoes > .btn, .mj-cabecalho__acoes > form { flex: 1 1 auto; }
  .mj-cabecalho__acoes .btn { width: 100%; }
  /* Botões de opção com ícone: dois por linha. */
  .mj-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Painel lateral vem depois do formulário — sem sombra de "coluna". */
  .mj-lateral { box-shadow: none; }
  main { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
}

/* Tabela que vira lista de cartões no celular: cada <td> leva
   data-rotulo="…" e aparece como "rótulo: valor". Evita a rolagem lateral
   da tabela, que no celular esconde justamente a coluna de ação. */
@media (max-width: 575.98px) {
  .mj-tabela-cartoes thead { display: none; }
  .mj-tabela-cartoes, .mj-tabela-cartoes tbody, .mj-tabela-cartoes tr, .mj-tabela-cartoes td { display: block; width: 100%; }
  .mj-tabela-cartoes tr { padding: .6rem .75rem; border-bottom: 1px solid var(--bs-border-color); }
  .mj-tabela-cartoes td { border: 0; padding: .1rem 0; }
  .mj-tabela-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo) ": "; font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color);
  }
  .mj-tabela-cartoes td.text-end { text-align: left !important; padding-top: .4rem; }
}

/* Linha do tempo (detalhe do processo): lista vertical, boa também no celular. */
.mj-linha-tempo { list-style: none; margin: 0 0 1rem; padding: 0 0 0 1.1rem; border-left: 2px solid rgba(var(--mj-acento-rgb), .25); }
.mj-linha-tempo__item { position: relative; padding: .1rem 0 1rem .75rem; }
.mj-linha-tempo__item::before {
  content: ""; position: absolute; left: -1.55rem; top: .35rem; width: .8rem; height: .8rem;
  border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--mj-acento);
}
.mj-linha-tempo__item--urgente::before { border-color: var(--bs-danger); background: var(--bs-danger); }
.mj-linha-tempo__topo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.mj-linha-tempo__data { font-weight: 700; font-size: .85rem; color: var(--mj-acento); }
/* Tabela de edição (linhas de formset) em cartões: campos ocupam a largura. */
@media (max-width: 575.98px) {
  .mj-tabela-cartoes td > input:not([type="checkbox"]):not([type="hidden"]),
  .mj-tabela-cartoes td > select, .mj-tabela-cartoes td > textarea { width: 100%; }
}

/* ---- Seletor de cor (core/widgets.py, SeletorDeCor) ---- */
.mj-cores { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem .25rem; margin-bottom: .75rem; }
.mj-cor { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .3rem .1rem; border-radius: var(--bs-border-radius-sm); cursor: pointer; }
.mj-cor:hover { background: var(--bs-tertiary-bg); }
/* O radio fica invisível mas focável: é ele que dá teclado e leitor de tela. */
.mj-cor__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mj-cor__bolinha {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--cor); color: #fff; font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .12s, box-shadow .12s;
}
.mj-cor__bolinha--clara { color: #1a1f2b; }
.mj-cor__bolinha .bi { opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.mj-cor__nome { font-size: .75rem; color: var(--bs-secondary-color); text-align: center; line-height: 1.15; }
.mj-cor:hover .mj-cor__bolinha { transform: scale(1.07); }
/* Escolhida: anel em volta (na cor do fundo + na própria cor) e ✓ no meio. */
.mj-cor__input:checked + .mj-cor__bolinha { box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px var(--cor); }
.mj-cor__input:checked + .mj-cor__bolinha .bi { opacity: 1; transform: scale(1); }
.mj-cor__input:checked ~ .mj-cor__nome { color: var(--bs-body-color); font-weight: 600; }
.mj-cor__input:focus-visible + .mj-cor__bolinha { outline: 3px solid rgba(var(--mj-acento-rgb), .5); outline-offset: 5px; }
@media (max-width: 575.98px) {
  /* Celular: uma linha só, deslizando para o lado — ocupa a altura de uma
     bolinha em vez de três linhas. A largura de cada item deixa a última
     visível cortada ao meio (sinal de que tem mais), o snap para cada
     bolinha no lugar e as bordas esmaecem. A escolhida já abre centralizada
     (base.js). */
  .mj-cores {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 4.6rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scroll-padding-inline: 1.25rem; padding: .35rem 1rem .4rem; margin-inline: -1rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.75rem), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.75rem), transparent 100%);
  }
  .mj-cores::-webkit-scrollbar { display: none; }
  .mj-cor { scroll-snap-align: center; }
  .mj-cor__bolinha { width: 2.75rem; height: 2.75rem; }
}

/* Indicadores (números do topo de resumos, ex.: Financeiro). */
.mj-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; }
.mj-indicador { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; }
.mj-indicador__rotulo { font-size: .78rem; color: var(--bs-secondary-color); }
.mj-indicador__valor { font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mj-indicador__nota { font-size: .75rem; color: var(--bs-secondary-color); }
.mj-indicador--perigo .mj-indicador__valor { color: var(--bs-danger-text-emphasis); }
a.mj-indicador:hover { border-color: var(--mj-acento); }
@media (max-width: 575.98px) { .mj-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Acordo: cada forma de remuneração com um filete à esquerda. */
.mj-remuneracao { border-left: 3px solid rgba(var(--mj-acento-rgb), .35); }

/* Lista de notificações. */
.mj-notificacao { display: flex; gap: .75rem; align-items: flex-start; }
.mj-notificacao__marca { color: var(--bs-secondary-color); font-size: 1.05rem; padding-top: .1rem; }
.mj-notificacao--nova { background: rgba(var(--mj-acento-rgb), .05); }
.mj-notificacao--nova .mj-notificacao__marca { color: var(--mj-acento); }
.mj-notificacao__corpo { min-width: 0; flex: 1; }
.mj-notificacao__titulo { text-decoration: none; color: var(--bs-body-color); }
.mj-notificacao--nova .mj-notificacao__titulo { font-weight: 600; }
.mj-notificacao__titulo:hover { color: var(--mj-acento); text-decoration: underline; }

/* Abas que rolam para o lado no celular, em vez de quebrar em várias linhas. */
@media (max-width: 767.98px) {
  .mj-abas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .mj-abas::-webkit-scrollbar { display: none; }
  .mj-abas .nav-link { white-space: nowrap; }
}