/**
 * FOLHA-DE-ESTILO.css — PROJETOS JURÍDICOS (DESIGN-PADRÃO-PJ)
 * Registros oficiais consolidados com as alterações estritas solicitadas pelo usuário.
 * 
 * ==========================================================================
 * REGRA DE OURO DOS PLACEHOLDERS E MÁSCARAS:
 * NUNCA utilizar números ou letras nos placeholders.
 * Utilizar estritamente os espaços vazios e pontuações das máscaras oficiais:
 * - CEP: __.___-__             (padrão 00.000-00)
 * - CPF: ___.___.___-__         (padrão 000.000.000-00)
 * - CNPJ: __.__.___/____-__     (padrão 00.000.000/0000-00)
 * - Telefone: (__) _ ____-____ (padrão (00) 0 0000-0000)
 * - E-mail: ____@____.___       (sempre com @ e domínio com ponto)
 * - Financeiro: R$ __.___,__    (padrão R$ 000.000,00 - com vírgula e centavos obrigatórios)
 * - Percentual: __%             (padrão [00%] - números inteiros com %)
 * ==========================================================================
 * 
 * PADRONIZAÇÃO REGISTRADA:
 * 1. FORMULÁRIOS:
 *    - Altura: 26px | Borda: 1.2px solid | Raio: 8px | Fonte: 12px (peso 450)
 *    - Padding interno: 2px 5px (laterais aumentadas em 1px) | Margem antes e depois: 6px
 *    - Rótulo SEMPRE acima do campo (12.5px peso 500) e campo abaixo.
 *    - UF: alinhado à esquerda e campo com largura reduzida (~40px).
 *    - Checkbox/Radio sem label próprio: 'Marque a(s) opção(ões):'
 * 2. BOTÕES DE TEXTO:
 *    - Altura: 26px | Borda: 1.5px solid | Raio: 14px | Fonte: 12.4px (500) | Padding: 3px 7px
 *    - Fundo com 60% de opacidade | Hover/Foco: borda 2px e peso 550 | SEM ícones misturados.
 * 3. BOTÕES COM ÍCONE CIRCULARES:
 *    - Dimensão: 26px circular (radius 50%) ou mini-ícone 24px em tabelas | Borda: 1.5px solid
 *    - Fundo: 60% de opacidade | Hover/Foco: borda 2px.
 * 4. TABELAS:
 *    - Cabeçalho: 22px Navy (70% opacidade), texto marfim 11px uppercase centralizado
 *    - Sem borda superior (0px) e sem bordas laterais (0px na esquerda e direita da linha do cabeçalho)
 *    - Células: 27px altura, alinhamento vertical e horizontal centralizado
 *    - Demais linhas horizontais (1px solid #e2e8f0) e bordas laterais no corpo permanecem
 *    - Sem radius externo (0px) | Sem linha final (rodapé removido).
 * 5. CARDS (TIPOS A, B, C e C-DERIVADO):
 *    - Card Tipo A (Quadrado): 140x140px (aspect-ratio: 1/1) | 14px radius | 1.3px borda | padding 6px 8px
 *      Linha 1 (Topo): Título (70% centralizado V/H) + Chip (30% centralizado V/H, radius 12px, borda 1.5px, fonte 10.5px peso 480)
 *      Linha 2 (Centro): Ícone 36x36px centralizado
 *      Linha 3 (Base): Botões circulares 28px com borda 1.5px (+ e ?) centralizados.
 *    - Card Tipo B (Central de Acesso): 14px radius | 1.5px borda (hover 2px) | Coluna 1: 40%, Coluna 2: 60%
 *      Apenas nome do app em 14px uppercase (+1.6px letter-spacing), sem subtexto.
 *    - Card Tipo C (Processos Ativos): 14px radius | Coluna 1: Abrir detalhes (30x30px centralizado)
 *      Coluna 2: NUP normal (13px 550 letter-spacing -0.2px sem monospace) + copy / tipo / chip (11.5px 500 radius 12px) + mov
 *      Coluna 3: Cliente (Polo Ativo/Passivo 500) | Coluna 4: Adverso (Polo Passivo/Ativo 500)
 *      Coluna 5: Vara / Cidade / Tribunal | Coluna 6: Arquivar e Excluir.
 *    - Card Tipo C Derivado (Prazos): Coluna 1: 30x30px | Coluna 2: NUP / Tribunal•Tipo / Cliente
 *      Coluna 3: Descrição | Coluna 4: Data / dias restantes | Coluna 5: Editar, Concluir, Excluir.
 * 6. MODAIS:
 *    - Borda: 2px solid | Radius: 14px | Padding: 6px 8px | Gap: 4px | Sem linhas internas
 *    - Espaço de 6px acima do rodapé e 6px abaixo do cabeçalho
 *    - Título em UPPERCASE, font-weight 500, letter-spacing 1.1px, alinhamento vertical centralizado/middle | Padding top reduzido.
 */

:root {
  /* Paleta Canônica Institucional */
  --pj-navy: #031a35;
  --pj-navy-light: #062b56;
  --pj-navy-gradient: linear-gradient(155deg, rgba(6,30,88,.92), rgba(9,53,88,.85));
  --pj-cyan: #2fc9f2;
  --pj-cyan-hover: #1bb7df;
  --pj-cyan-ring: rgba(47, 201, 242, 0.25);
  --pj-ivory: #f6f3ec;
  --pj-ivory-dark: #eee8de;
  --pj-surface: #ffffff;
  --pj-border: #dce5ee;
  --pj-border-strong: #b9c7cd;
  --pj-text-main: #061b39;
  --pj-text-muted: #64748b;
  --pj-placeholder: #94a3b8;

  /* Semântica */
  --pj-danger: #d93838;
  --pj-danger-bg: rgba(254, 226, 226, 0.60);
  --pj-danger-border: #fca5a5;
  --pj-success: #16a34a;
  --pj-success-bg: rgba(220, 252, 231, 0.60);
  --pj-success-border: #86efac;

  /* Medidas de Formulário */
  --pj-input-height: 26px;
  --pj-input-border-width: 1.2px;
  --pj-input-radius: 8px;
  --pj-input-font-size: 12px;
  --pj-input-font-weight: 450;
  --pj-input-padding: 2px 5px; /* Aumentado 1px nas laterais */
  --pj-label-font-size: 12.5px;
  --pj-label-font-weight: 500;
  --pj-form-spacing-y: 6px;

  /* Medidas de Botões de Texto */
  --pj-btn-text-height: 26px;
  --pj-btn-text-border-width: 1.5px;
  --pj-btn-text-radius: 14px;
  --pj-btn-text-font-size: 12.4px;
  --pj-btn-text-font-weight: 500;
  --pj-btn-text-letter-spacing: -0.1px;
  --pj-btn-text-padding: 3px 7px;
  --pj-btn-text-gap: 6px;

  /* Cores com 60% de Opacidade */
  --pj-btn-bg-primary: rgba(3, 26, 53, 0.60);
  --pj-btn-bg-secondary: rgba(255, 255, 255, 0.60);
  --pj-btn-bg-accent: rgba(47, 201, 242, 0.60);
  --pj-btn-bg-danger: rgba(217, 56, 56, 0.60);

  /* Medidas de Botões com Ícone */
  --pj-btn-icon-size: 26px;
  --pj-btn-icon-radius: 50%;

  /* Medidas de Tabela */
  --pj-table-row-height: 27px; /* 27px de altura */
  --pj-table-header-height: 22px; /* 22px de altura */
  --pj-table-header-bg: rgba(3, 26, 53, 0.70);
  --pj-table-padding: 2px 4px;
  --pj-table-border: 1.5px solid var(--pj-border-strong);
  --pj-table-radius: 0px; /* Sem radius externo */
  --pj-table-footer-height: 12px;

  /* Tipografia do Servidor */
  --font-stack: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

/* ==========================================================================
   1. FORMULÁRIO E CAMPOS DE ENTRADA (RÓTULO SEMPRE ACIMA / PADDING 2px 5px)
   ========================================================================== */

.pj-form-container {
  margin-top: var(--pj-form-spacing-y);
  margin-bottom: var(--pj-form-spacing-y);
  box-sizing: border-box;
}

.pj-form-group {
  display: flex;
  flex-direction: column; /* RÓTULO ACIMA E CAMPO ABAIXO SEMPRE */
  gap: 2px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pj-form-label {
  display: block;
  font-family: var(--font-stack);
  font-size: var(--pj-label-font-size);
  font-weight: var(--pj-label-font-weight);
  color: var(--pj-text-main);
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: left;
}

.pj-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--pj-input-height);
  padding: var(--pj-input-padding);
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--pj-input-font-size);
  font-weight: var(--pj-input-font-weight);
  letter-spacing: 0px;
  color: var(--pj-text-main);
  background: var(--pj-surface);
  border: var(--pj-input-border-width) solid var(--pj-border-strong);
  border-radius: var(--pj-input-radius);
  outline: none;
  text-align: left; /* ALINHADO SEMPRE À ESQUERDA */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  vertical-align: middle;
}

.pj-input:focus {
  border-color: var(--pj-cyan);
  box-shadow: 0 0 0 2px var(--pj-cyan-ring);
}

/* Placeholder discreto - NUNCA conter números ou letras */
.pj-input::placeholder {
  color: var(--pj-placeholder);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* UF com largura reduzida (metade) e alinhado à esquerda */
.pj-input.pj-input-uf {
  width: 44px;
  max-width: 44px;
  text-align: left;
}

/* Grid Proporcional Otimizado */
.pj-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.pj-col-uf         { grid-column: span 1; width: 44px; }
.pj-col-num        { grid-column: span 2; }
.pj-col-cep        { grid-column: span 2; }
.pj-col-data       { grid-column: span 2; }
.pj-col-percent    { grid-column: span 2; }
.pj-col-cpf        { grid-column: span 3; }
.pj-col-cnpj       { grid-column: span 3; }
.pj-col-tel        { grid-column: span 3; }
.pj-col-financeiro { grid-column: span 3; }
.pj-col-email      { grid-column: span 4; }
.pj-col-cidade     { grid-column: span 4; }
.pj-col-rua        { grid-column: span 6; }
.pj-col-nome       { grid-column: span 6; }

/* Checkbox e Radio com Rótulo Padrão */
.pj-choice-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pj-choice-label-fallback {
  font-size: 12px;
  font-weight: 500;
  color: var(--pj-text-main);
}

.pj-choice-options {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pj-choice-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  cursor: pointer;
}

/* ==========================================================================
   2. BOTÕES DE TEXTO (26px / 1.5px / 14px / 60% OPACIDADE / SEM ÍCONE)
   ========================================================================== */

.pj-btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pj-btn-text-height);
  padding: var(--pj-btn-text-padding);
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--pj-btn-text-font-size);
  font-weight: var(--pj-btn-text-font-weight);
  letter-spacing: var(--pj-btn-text-letter-spacing);
  line-height: 1;
  border-radius: var(--pj-btn-text-radius);
  border: var(--pj-btn-text-border-width) solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  vertical-align: middle;
  gap: var(--pj-btn-text-gap);
  transition: all 0.15s ease-in-out;
}

.pj-btn-text:hover,
.pj-btn-text:focus-visible {
  border-width: 2px;
  font-weight: 550;
  outline: none;
}

.pj-btn-text.pj-primary {
  background: var(--pj-btn-bg-primary);
  color: var(--pj-ivory);
  border-color: var(--pj-navy);
}
.pj-btn-text.pj-primary:hover {
  background: rgba(6, 43, 86, 0.75);
  border-color: var(--pj-cyan);
}

.pj-btn-text.pj-secondary {
  background: var(--pj-btn-bg-secondary);
  color: var(--pj-navy);
  border-color: var(--pj-border-strong);
}
.pj-btn-text.pj-secondary:hover {
  background: rgba(241, 245, 249, 0.85);
  border-color: var(--pj-navy);
}

.pj-btn-text.pj-accent {
  background: var(--pj-btn-bg-accent);
  color: var(--pj-navy);
  border-color: var(--pj-cyan);
}
.pj-btn-text.pj-accent:hover {
  background: rgba(27, 183, 223, 0.80);
  border-color: var(--pj-navy);
}

.pj-btn-text.pj-danger {
  background: var(--pj-btn-bg-danger);
  color: #ffffff;
  border-color: var(--pj-danger);
}
.pj-btn-text.pj-danger:hover {
  background: rgba(217, 56, 56, 0.85);
  border-color: #991b1b;
}

/* ==========================================================================
   3. BOTÕES COM ÍCONE CIRCULARES (26px / 1.5px / 50% / 60% OPACIDADE)
   ========================================================================== */

.pj-btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pj-btn-icon-size);
  height: var(--pj-btn-icon-size);
  min-width: var(--pj-btn-icon-size);
  min-height: var(--pj-btn-icon-size);
  padding: 0;
  margin: 0;
  border: var(--pj-btn-text-border-width) solid var(--pj-border-strong);
  border-radius: var(--pj-btn-icon-radius);
  background: var(--pj-btn-bg-secondary);
  color: var(--pj-navy);
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
  transition: all 0.15s ease-in-out;
}

.pj-btn-icon-circle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.pj-btn-icon-circle:hover,
.pj-btn-icon-circle:focus-visible {
  border-width: 2px;
  border-color: var(--pj-navy);
  background: rgba(241, 245, 249, 0.85);
  outline: none;
}

.pj-btn-icon-circle.pj-primary {
  background: var(--pj-btn-bg-primary);
  color: var(--pj-ivory);
  border-color: var(--pj-navy);
}
.pj-btn-icon-circle.pj-primary:hover {
  background: rgba(6, 43, 86, 0.75);
  border-color: var(--pj-cyan);
}

.pj-btn-icon-circle.pj-secondary {
  background: var(--pj-btn-bg-secondary);
  color: var(--pj-navy);
  border-color: var(--pj-border-strong);
}

.pj-btn-icon-circle.pj-danger {
  background: var(--pj-btn-bg-danger);
  color: #ffffff;
  border-color: var(--pj-danger);
}

/* Mini-ícone para tabelas */
.pj-btn-icon-mini {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  border: 1.2px solid var(--pj-border-strong);
  background: var(--pj-btn-bg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.pj-btn-icon-mini:hover {
  border-width: 2px;
  border-color: var(--pj-navy);
}
.pj-btn-icon-mini svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   4. TABELAS (CABEÇALHO 22px SEM BORDAS LATERAIS/SUPERIOR / CÉLULAS 27px CENTRALIZADAS / SEM LINHA FINAL)
   ========================================================================== */

.pj-table-compact {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
  background: #ffffff;
  border: none !important; /* Sem borda envolvente no elemento table para não passar pelo cabeçalho */
  border-radius: 0px !important; /* Sem radius externo */
  overflow: hidden;
}

.pj-table-compact thead th {
  background: var(--pj-table-header-bg); /* Navy 70% opacidade */
  color: var(--pj-ivory);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  height: var(--pj-table-header-height); /* 22px */
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.04em;
  border: none !important; /* 0px na linha superior, esquerda e direita do cabeçalho */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.pj-table-compact tbody tr {
  height: var(--pj-table-row-height); /* 27px */
}

.pj-table-compact tbody tr:hover td {
  background: #f8fafc;
}

.pj-table-compact tbody td {
  height: var(--pj-table-row-height); /* 27px */
  padding: 2px 4px;
  font-size: 11.5px;
  text-align: center; /* Alinhamento horizontal centralizado */
  vertical-align: middle; /* Alinhamento vertical centralizado */
  border: 0;
  border-bottom: 1px solid #e2e8f0 !important; /* as demais linhas horizontais permanecem */
}

/* Bordas laterais e final somente no corpo da tabela (preservando o cabeçalho livre) */
.pj-table-compact tbody td:first-child {
  border-left: 1.5px solid var(--pj-border-strong) !important;
}

.pj-table-compact tbody td:last-child {
  border-right: 1.5px solid var(--pj-border-strong) !important;
}

.pj-table-compact tbody tr:last-child td {
  border-bottom: 1.5px solid var(--pj-border-strong) !important;
}

/* Linha final removida conforme instrução */
.pj-table-compact tfoot {
  display: none !important;
}

/* ==========================================================================
   5. CARDS (TIPOS A, B, C e C-DERIVADO)
   ========================================================================== */

/* 5.1 Card Tipo A (Quadrado Exato: 140x140px / 14px radius / 1.3px borda / padding 6px 8px) */
.pj-card-type-a {
  background: #ffffff;
  border: 1.3px solid var(--pj-border);
  border-radius: 14px;
  padding: 6px 8px;
  box-sizing: border-box;
  width: 140px;
  height: 140px;
  min-width: 140px;
  min-height: 140px;
  max-width: 140px;
  max-height: 140px;
  aspect-ratio: 1 / 1; /* QUADRADO EXATO */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease-in-out;
  overflow: hidden;
}

.pj-card-type-a:hover {
  border-color: var(--pj-cyan);
  box-shadow: 0 4px 12px rgba(3, 26, 53, 0.08);
}

/* Linha 1 (Topo): TITULO (70% centralizado V/H) + CHIP (30% centralizado V/H) */
.pj-card-type-a-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-height: 28px;
  box-sizing: border-box;
}

.pj-card-type-a-title-col {
  width: 70%;
  flex: 0 0 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-right: 2px;
  box-sizing: border-box;
}

.pj-card-type-a-title {
  font-family: var(--font-stack);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.1px;
  color: var(--pj-navy);
  margin: 0;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}

.pj-card-type-a-chip-col {
  width: 30%;
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Chip com radius 12px, borda 1.5px, fonte 10.5px, weight 480 */
.pj-card-type-a-chip {
  font-family: var(--font-stack);
  font-size: 10.5px;
  font-weight: 480; /* WEIGHT 480 */
  letter-spacing: -0.1px;
  padding: 1px 4px;
  border-radius: 12px; /* RADIUS 12px */
  border: 1.5px solid var(--pj-cyan); /* BORDA 1.5px */
  background: rgba(224, 242, 254, 0.45);
  color: #0369a1;
  white-space: nowrap;
  line-height: 1.2;
}

/* Linha 2 (Centro): Ícone 36px × 36px */
.pj-card-type-a-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pj-navy);
  margin: auto 0;
}

.pj-card-type-a-icon svg {
  width: 36px;
  height: 36px;
}

/* Linha 3 (Base): Botões Circulares de 28px com borda 1.5px (+ e ?) */
.pj-card-type-a-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.pj-btn-circle-28 {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--pj-border-strong);
  background: rgba(255, 255, 255, 0.60);
  color: var(--pj-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease-in-out;
  box-sizing: border-box;
}

.pj-btn-circle-28 svg {
  width: 14px;
  height: 14px;
  display: block;
}

.pj-btn-circle-28:hover {
  border-width: 2px;
  border-color: var(--pj-cyan);
  background: rgba(224, 242, 254, 0.60);
}

/* 5.2 Card Tipo B (Central de Acesso: Coluna 1 40% / Coluna 2 60% / Fonte 14px uppercase +1.6px) */
.pj-card-type-b {
  background: #ffffff;
  border: 1.5px solid var(--pj-border-strong);
  border-radius: 14px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 48px;
}

.pj-card-type-b:hover,
.pj-card-type-b:focus-visible {
  border-width: 2px;
  border-color: var(--pj-cyan);
  background: #fafcfe;
  outline: none;
}

.pj-card-type-b-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pj-navy);
}

.pj-card-type-b-icon svg {
  width: 28px;
  height: 28px;
}

.pj-card-type-b-text {
  font-family: var(--font-stack);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: +1.6px;
  color: var(--pj-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5.3 Card Tipo C (Processos Ativos - 6 Colunas / Coluna 1: Abrir detalhes 30x30 / 3 Linhas) */
.pj-card-type-c {
  background: #ffffff;
  border: 1.4px solid var(--pj-border);
  border-radius: 14px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 38px 2.2fr 1.6fr 1.6fr 1.6fr 68px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  box-sizing: border-box;
  margin-bottom: 6px;
  transition: all 0.15s ease;
}

.pj-card-type-c:hover {
  border-color: var(--pj-cyan);
  background: #fafcfe;
}

/* Coluna 1: Ícone de Abrir Detalhes (30x30 centralizado) */
.pj-card-c-col-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pj-btn-open-detail {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 1.2px solid var(--pj-border-strong);
  background: rgba(255, 255, 255, 0.60);
  color: var(--pj-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.pj-btn-open-detail:hover {
  border-width: 2px;
  border-color: var(--pj-cyan);
  background: rgba(224, 242, 254, 0.60);
}

.pj-btn-open-detail svg {
  width: 16px;
  height: 16px;
}

/* Coluna 2: NUP + copy / Tipo / Chips */
.pj-card-c-col-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

/* Formatação normal do NUP: font-size 13px, weight 550, letter-spacing negativo, SEM monospace/code */
.pj-nup-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-stack);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.2px;
  color: var(--pj-navy);
}

.pj-nup-row span {
  font-family: var(--font-stack);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.2px;
  color: var(--pj-navy);
}

.pj-copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: var(--pj-text-muted);
}
.pj-copy-btn:hover { color: var(--pj-cyan); }
.pj-copy-btn svg { width: 13px; height: 13px; }

.pj-process-type {
  font-size: 11px;
  color: var(--pj-text-muted);
}

.pj-process-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #334155;
  margin-top: 1px;
}

/* Chip abaixo do NUP: font-size 11.5px, weight 500, radius 12px no contorno */
.pj-badge-chip-inline {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-stack);
  height: 18px;
  padding: 1px 7px;
  font-size: 11.5px;    /* 11.5px */
  font-weight: 500;     /* WEIGHT 500 */
  letter-spacing: -0.1px;
  border-radius: 12px;  /* RADIUS 12px */
  border: 1px solid var(--pj-border-strong);
  background: #f8fafc;
  color: #334155;
  line-height: 1.2;
}
.pj-badge-chip-inline.primary { border-color: var(--pj-cyan); color: #0369a1; background: rgba(224, 242, 254, 0.45); }
.pj-badge-chip-inline.success { border-color: #86efac; color: #15803d; background: rgba(220, 252, 231, 0.45); }
.pj-badge-chip-inline.warning { border-color: #fde047; color: #854d0e; background: rgba(254, 249, 195, 0.45); }
.pj-badge-chip-inline.danger  { border-color: #fca5a5; color: #b91c1c; background: rgba(224, 242, 254, 0.45); }

/* Colunas 3 e 4: Partes (Polo Ativo / Polo Passivo com font-weight 500) */
.pj-card-c-col-party {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.pj-party-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pj-navy);
}

.pj-party-pole {
  font-size: 11px;
  font-weight: 500; /* PESO 500 */
  color: var(--pj-text-muted);
}

/* Coluna 5: Vara, Cidade, Tribunal */
.pj-card-c-col-origin {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  line-height: 1.2;
  color: #334155;
}

/* Coluna 6: Ações Arquivar e Excluir */
.pj-card-c-col-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* 5.4 Card Tipo C Derivado (Prazos e Expedientes) */
.pj-card-type-c-prazos {
  background: #ffffff;
  border: 1.4px solid var(--pj-border);
  border-radius: 14px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 38px 2.2fr 2.5fr 1.6fr 95px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  box-sizing: border-box;
  margin-bottom: 6px;
  transition: all 0.15s ease;
}

.pj-card-type-c-prazos:hover {
  border-color: var(--pj-cyan);
  background: #fafcfe;
}

.pj-prazos-due-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.pj-due-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pj-navy);
}

.pj-due-countdown {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pj-danger);
}

/* ==========================================================================
   6. MODAIS (TÍTULO EM UPPERCASE COM LETTER-SPACING NEGATIVO)
   ========================================================================== */

.pj-modal-dialog {
  box-sizing: border-box;
  width: min(640px, calc(100vw - 32px));
  background: var(--pj-surface);
  border: 2px solid var(--pj-border-strong);
  border-radius: 14px;
  padding: 6px 8px;
  box-shadow: 0 10px 30px rgba(3, 26, 53, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pj-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 2px 4px; /* REDUZIDO PADDING TOP */
  margin-bottom: 6px;     /* Espaço de 6px abaixo do cabeçalho */
  border: none;           /* SEM LINHAS HORIZONTAIS INTERNAS */
}

/* Título em UPPERCASE, font-weight 500, letter-spacing 1.1px, alinhamento vertical middle */
.pj-modal-title {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 12.5px;
  font-weight: 500;       /* FONT WEIGHT: 500 */
  text-transform: uppercase;
  letter-spacing: 1.1px;  /* LETTER-SPACING: 1.1px */
  color: var(--pj-navy);
  display: inline-flex;
  align-items: center;    /* ALINHAMENTO VERTICAL CENTRALIZADO/MIDDLE */
  vertical-align: middle;
  line-height: 1.2;
}

.pj-modal-body {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.pj-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 2px 4px;
  margin-top: 6px;    /* Espaço de 6px acima do rodapé */
  border: none;       /* SEM LINHAS HORIZONTAIS INTERNAS */
}

/* Catálogos: mesma grade e cards centrais dos produtos. */
.pj-catalog-grid:is(.modules-grid,.document-catalog-cards){display:grid;grid-template-columns:repeat(auto-fill,140px);gap:12px;justify-content:start}
:is(.document-catalog,.modules-grid) .module-card-action span{display:none}
.document-catalog .document-model-icon{object-fit:contain;max-width:36px;max-height:36px}
.modules-grid .module-card p{font-size:10px;line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}