/* Check Cartório — componentes de UI */

/* ── Botões ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--fonte-tam-base);
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--raio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario {
  background: var(--azul-700);
  color: var(--branco);
}
.btn-primario:hover:not(:disabled) { background: var(--azul-900); }

.btn-secundario {
  background: var(--branco);
  color: var(--azul-700);
  border-color: var(--cinza-300);
}
.btn-secundario:hover:not(:disabled) { background: var(--azul-100); }

.btn-perigo {
  background: var(--branco);
  color: var(--vermelho);
  border-color: var(--vermelho);
}
.btn-perigo:hover:not(:disabled) { background: var(--vermelho); color: var(--branco); }

.btn-perigo-solido {
  background: var(--vermelho);
  color: var(--branco);
  border-color: var(--vermelho);
}
.btn-perigo-solido:hover:not(:disabled) { background: color-mix(in srgb, var(--vermelho) 85%, black); }

.btn-texto {
  background: transparent;
  color: var(--azul-700);
  padding: var(--esp-1) var(--esp-2);
}
.btn-texto:hover:not(:disabled) { text-decoration: underline; }

.btn-sm { padding: var(--esp-1) var(--esp-2); font-size: var(--fonte-tam-sm); }
.btn-lg { padding: var(--esp-3) var(--esp-4); font-size: var(--fonte-tam-lg); }

.link-arquivo {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--azul-700);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.link-arquivo:hover { text-decoration: underline; }

/* ── Botão-ícone (ações de linha nas listagens) ──────────────
   Só ícone + aria-label/title — nunca a única pista visual de estado
   (o estado em si já vem de um badge/texto ao lado, isso é só a ação). */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--raio);
  border: 1px solid var(--cinza-300);
  background: var(--branco);
  color: var(--cinza-600);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-icone:hover:not(:disabled) { background: var(--azul-100); color: var(--azul-700); border-color: var(--azul-700); }
.btn-icone:disabled { opacity: .4; cursor: not-allowed; }
.btn-icone--perigo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--vermelho) 12%, white);
  color: var(--vermelho);
  border-color: var(--vermelho);
}
.btn-icone--primario { color: var(--azul-700); border-color: var(--azul-700); }
/* Marcador "pedido de revogação da vítima" (MPU) — coração preenchido
   quando marcado, para diferenciar de uma ação comum. */
.btn-icone--coracao-marcado { color: var(--vermelho); border-color: var(--vermelho); }
.btn-icone--coracao-marcado svg { fill: currentColor; }

/* Marcador "Intimado(a)" (MPU, no form de réu/vítima) — círculo, preenchido
   de verde com o ícone da carta quando ativado. */
.btn-icone--intimado { border-radius: 999px; flex-shrink: 0; }
.btn-icone--intimado-marcado { background: var(--verde); border-color: var(--verde); color: #fff; }

/* Réu(s)/Vítima(s) na listagem do MPU: um nome por linha (nunca vírgula) —
   quem está intimado leva o mesmo ícone de carta, com um pulso leve pra
   chamar atenção. */
.mpu-lista-pessoas-linha { display: flex; align-items: center; gap: 4px; }
.mpu-lista-pessoas-linha + .mpu-lista-pessoas-linha { margin-top: 2px; }
.mpu-intimado-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  animation: mpu-intimado-pulso 1.6s ease-in-out infinite;
}
@keyframes mpu-intimado-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ── Formulário: input, select, textarea ────────────────────── */

.campo { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-3); }

.campo label {
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  color: var(--cinza-900);
}

.campo .obrigatorio { color: var(--vermelho); }

.campo .ajuda { font-size: var(--fonte-tam-sm); color: var(--cinza-600); }
.campo .erro { font-size: var(--fonte-tam-sm); color: var(--vermelho); }

.input, .select, textarea.input {
  font-family: inherit;
  font-size: var(--fonte-tam-base);
  color: var(--cinza-900);
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: var(--esp-2);
  width: 100%;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--azul-700);
  outline: none;
  box-shadow: 0 0 0 3px var(--azul-100);
}
.input[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--vermelho);
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cinza-600) 50%),
                     linear-gradient(135deg, var(--cinza-600) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--esp-5);
}

textarea.input { min-height: 96px; resize: vertical; }

/* ── Tabela ──────────────────────────────────────────────── */

.tabela-wrap {
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  overflow-x: auto;
}

.tabela { font-size: var(--fonte-tam-base); }

.tabela thead th {
  text-align: left;
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  color: var(--cinza-600);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: var(--esp-2) var(--esp-3);
  background: var(--cinza-050);
  border-bottom: 1px solid var(--cinza-300);
  white-space: nowrap;
}

.tabela tbody td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--cinza-300);
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--azul-100); }

/* ── Tabela filtrável (components/tabela-filtravel.js): busca global +
   filtro de múltipla escolha por coluna — usada em Visualização de acervo,
   Processos Suspensos e Marcar Audiência ── */
.tf-multiselect { position: relative; }
.tf-multiselect-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  cursor: pointer;
  font-size: var(--fonte-tam-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  background: var(--branco);
}
.tf-multiselect-botao--ativo { border-color: var(--azul-700); color: var(--azul-900); font-weight: 600; }
.tf-multiselect-painel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-width: 280px;
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.tf-multiselect-opcoes { max-height: 240px; overflow-y: auto; padding: var(--esp-1); }
.tf-multiselect-opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 4px var(--esp-2);
  border-radius: var(--raio);
  font-weight: 400;
  text-transform: none;
  cursor: pointer;
}
.tf-multiselect-opcao:hover { background: var(--cinza-050); }
.tf-multiselect-opcao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-multiselect-rodape {
  border-top: 1px solid var(--cinza-300);
  padding: var(--esp-1) var(--esp-2);
  display: flex;
  justify-content: flex-end;
}

/* Linha expansível (opção `expandir` de criarTabelaFiltravel) — usada em
   Marcar Audiência pra preencher os dados de prescrição sem sair da linha. */
.tf-linha-expandida { background: var(--cinza-050); }
.tf-linha-expandida td { padding: var(--esp-3); }
.tf-linha-expandida:hover { background: var(--cinza-050); }

.tabela-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3);
  flex-wrap: wrap;
}

.tabela-paginacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-top: 1px solid var(--cinza-300);
}

/* Abaixo de 720px: tabela vira lista de cards (seção 9) */
@media (max-width: 720px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tbody tr {
    margin: var(--esp-2);
    border: 1px solid var(--cinza-300);
    border-radius: var(--raio);
  }
  .tabela tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-2);
    border-bottom: 1px solid var(--cinza-050);
  }
  .tabela tbody td::before {
    content: attr(data-rotulo);
    font-weight: 600;
    color: var(--cinza-600);
  }
}

/* ── Modal ───────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 44, 76, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--esp-5) var(--esp-3);
  overflow-y: auto;
  z-index: 1000;
}

.modal {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  width: 100%;
  max-width: 640px;
}

/* "Minhas Anotações" precisa de mais espaço (post-its em grade) — 90%x90%
   da tela, com o corpo virando o único scroll (não a grade por dentro). */
.modal--anotacoes {
  width: 90vw;
  max-width: 90vw;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.modal--anotacoes .modal-corpo { flex: 1; min-height: 0; overflow-y: auto; }
.modal--anotacoes .anotacoes-grid { max-height: none; }

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cinza-300);
}

.modal-cabecalho h2 { margin: 0; font-size: var(--fonte-tam-lg); }

.modal-fechar {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--cinza-600);
  padding: var(--esp-1);
}

.modal-corpo { padding: var(--esp-4); }

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--cinza-300);
}

/* ── Badge de prazo (EM DIA / A VENCER / VENCIDO / SEM REAVALIAÇÃO) ── */

.badge-prazo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  padding: 2px var(--esp-2);
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* A situação nunca depende só da cor: ícone + texto (seção 9, acessibilidade) */
.badge-prazo::before { content: ""; }

.badge-prazo--vencido {
  color: var(--vermelho);
  background: color-mix(in srgb, var(--vermelho) 12%, white);
  border-color: color-mix(in srgb, var(--vermelho) 35%, white);
}
.badge-prazo--vencido::before { content: "🔴"; }

.badge-prazo--prescricao-virtual {
  color: var(--lilas);
  background: color-mix(in srgb, var(--lilas) 12%, white);
  border-color: color-mix(in srgb, var(--lilas) 35%, white);
}
.badge-prazo--prescricao-virtual::before { content: "🟣"; }

.badge-prazo--prescricao-parcial {
  color: var(--azul-700);
  background: color-mix(in srgb, var(--azul-700) 12%, white);
  border-color: color-mix(in srgb, var(--azul-700) 35%, white);
}
.badge-prazo--prescricao-parcial::before { content: "🔵"; }

.badge-prazo--a-vencer {
  color: var(--ambar);
  background: color-mix(in srgb, var(--ambar) 12%, white);
  border-color: color-mix(in srgb, var(--ambar) 35%, white);
}
.badge-prazo--a-vencer::before { content: "🟡"; }

.badge-prazo--em-dia {
  color: var(--verde);
  background: color-mix(in srgb, var(--verde) 12%, white);
  border-color: color-mix(in srgb, var(--verde) 35%, white);
}
.badge-prazo--em-dia::before { content: "🟢"; }

.badge-prazo--sem-reavaliacao,
.badge-prazo--nao-se-aplica {
  color: var(--cinza-600);
  background: var(--cinza-050);
  border-color: var(--cinza-300);
}
.badge-prazo--sem-reavaliacao::before,
.badge-prazo--nao-se-aplica::before { content: "⚪"; }

/* ── Toast ───────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: var(--esp-4);
  right: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  z-index: 2000;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  background: var(--cinza-900);
  color: var(--branco);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  font-size: var(--fonte-tam-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.toast--sucesso { background: var(--verde); }
.toast--erro { background: var(--vermelho); }
.toast--aviso { background: var(--ambar); }

/* ── Layout do shell (sidebar, topbar, conteúdo) ────────────── */

.app-shell {
  display: grid;
  grid-template-columns: var(--largura-sidebar) 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar banner"
    "sidebar conteudo";
  min-height: 100vh;
  transition: grid-template-columns .2s ease;
}
.app-shell:has(.sidebar--recolhida) {
  grid-template-columns: 68px 1fr;
}

/* Banner global de modo somente leitura (tenant inadimplente/suspenso,
   seção 7.2 do PRD) — fica fora de #conteudo de propósito: o router limpa
   #conteudo a cada troca de rota, e o aviso precisa sobreviver a isso. */
.banner-somente-leitura {
  grid-area: banner;
  background: var(--ambar);
  color: var(--cinza-900);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background: var(--branco);
  color: var(--cinza-900);
  border-right: 1px solid var(--cinza-300);
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  transition: width .2s ease;
}

.sidebar-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2);
  margin-bottom: var(--esp-3);
}

/* flex-shrink:0 é essencial aqui: overflow:hidden desliga a proteção de
   tamanho mínimo automático do flexbox, então sem isso o navegador espreme
   a logo (perde a proporção) pra caber ao lado do botão de recolher. */
.sidebar .marca { overflow: hidden; line-height: 0; flex-shrink: 0; }
.sidebar .marca img { height: 26px; width: auto; display: block; }

.sidebar-recolher {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cinza-600);
  font-size: 16px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: var(--raio);
}
.sidebar-recolher:hover { background: var(--cinza-050); color: var(--azul-700); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--raio);
  color: var(--cinza-600);
  text-decoration: none;
  font-size: var(--fonte-tam-base);
  white-space: nowrap;
}
.sidebar-link-icone { display: flex; flex-shrink: 0; width: 20px; }
.sidebar-link:hover { background: var(--cinza-050); color: var(--azul-700); text-decoration: none; }
.sidebar-link.ativo { background: var(--azul-100); color: var(--azul-700); font-weight: 600; }

.sidebar--recolhida { width: 68px; }
.sidebar--recolhida .sidebar-cabecalho { justify-content: center; padding: var(--esp-2) 0; }
.sidebar--recolhida .marca { display: none; }
.sidebar--recolhida .sidebar-link { justify-content: center; }
.sidebar--recolhida .sidebar-link-texto { display: none; }
.sidebar--recolhida .sidebar-badge { display: none; }

.sidebar-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}

.topbar {
  grid-area: topbar;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-2) var(--esp-4);
  gap: var(--esp-3);
}
/* Os dois grupos do topbar (unidade / usuário+ações) precisam poder
   encolher — sem min-width:0 um flex item nunca fica menor que seu
   conteúdo, e o texto longo (nome da unidade, nome do usuário) força
   scroll horizontal na tela toda em vez de truncar (seção 9). */
.topbar > div { min-width: 0; }
#nome-unidade, #usuario-logado {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.topbar-unidade-contadores {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .topbar { padding: var(--esp-2) var(--esp-3); gap: var(--esp-2); }
  #nome-unidade { max-width: 30vw; }
  #usuario-logado { display: none; }
  .topbar-unidade-contadores { display: none; }
}

.conteudo {
  grid-area: conteudo;
  padding: var(--esp-4);
  overflow-y: auto;
}

.menu-toggle { display: none; }

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "conteudo";
  }
  .sidebar {
    position: fixed;
    inset: 0 25% 0 0;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra);
  }
  .sidebar.aberta { transform: translateX(0); }
  .menu-toggle {
    display: inline-flex;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--azul-900);
  }
  /* Sidebar retrátil é recurso de desktop — no drawer mobile ela sempre
     abre por completo (ícone + texto), o toggle some. */
  .sidebar-recolher { display: none; }
  .sidebar--recolhida { width: auto; }
  .sidebar--recolhida .marca { display: block; }
  .sidebar--recolhida .sidebar-link-texto { display: inline; }
}

/* ── Cartão de página ────────────────────────────────────── */

.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  box-shadow: var(--sombra);
  border-radius: var(--raio);
  padding: var(--esp-4);
}

.placeholder-modulo {
  color: var(--cinza-600);
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
  padding: var(--esp-5);
  text-align: center;
}

/* ── Impressão seletiva (ofícios e futuros relatórios) ──────
   #area-impressao fica fora do fluxo normal; window.print() só deve
   mostrar o que estiver dentro dela (papel timbrado), nunca o chrome
   da aplicação (sidebar, topbar, modal). */

#area-impressao { display: none; }

@media print {
  body * { visibility: hidden; }
  #area-impressao, #area-impressao * { visibility: visible; }
  #area-impressao {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
  }
}

.papel-timbrado {
  font-family: Georgia, 'Times New Roman', serif;
  color: #000;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.papel-timbrado .cabecalho-timbre {
  text-align: center;
  border-bottom: 2px solid #000;
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.papel-timbrado .cabecalho-timbre h1 {
  font-size: 16px;
  margin: 0;
  color: #000;
}

.papel-timbrado .numero-oficio {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: var(--esp-4);
}

.papel-timbrado .corpo-oficio {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 13px;
  min-height: 200px;
}

.papel-timbrado .assinatura {
  margin-top: 64px;
  text-align: center;
}

.papel-timbrado .assinatura .linha {
  border-top: 1px solid #000;
  width: 260px;
  margin: 0 auto var(--esp-1);
}

/* ── Kanban (seção 8.8) ──────────────────────────────────── */

.kanban-quadro {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--esp-3);
  align-items: start;
  overflow-x: auto;
}

@media (max-width: 900px) {
  /* !important necessário: kanban.js define grid-template-columns via
     style inline (número de colunas é dinâmico), que sem isso venceria
     esta regra e travaria o quadro em várias colunas com scroll horizontal
     mesmo no celular (seção 9). */
  .kanban-quadro { grid-template-columns: 1fr !important; }
}

.kanban-coluna {
  background: var(--cinza-050);
  border-radius: var(--raio);
  padding: var(--esp-2);
  min-height: 120px;
}

/* Cores discretas por etapa (seção 8.8) — só um tom de fundo, sem borda. */
.kanban-coluna--a_fazer { background: color-mix(in srgb, var(--cinza-600) 6%, white); }
.kanban-coluna--em_andamento { background: color-mix(in srgb, var(--azul-700) 6%, white); }
.kanban-coluna--concluida { background: color-mix(in srgb, var(--verde) 6%, white); }

.kanban-coluna-cabecalho {
  padding: var(--esp-1) var(--esp-2);
  margin-bottom: var(--esp-2);
}

.kanban-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 40px;
  border-radius: var(--raio);
  transition: background-color .1s ease;
}

.kanban-lista--sobre {
  background: var(--azul-100);
  outline: 2px dashed var(--azul-700);
}

.kanban-card {
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-left: 4px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: var(--esp-2);
  box-shadow: var(--sombra);
  cursor: grab;
}

.kanban-card--arrastando { opacity: .5; }

/* Sem permissão pra mover (não é criador/responsável/admin) — o card
   continua clicável (visualização), só não é arrastável. */
.kanban-card--sem-permissao { cursor: default; }

/* Situação do prazo nunca depende só da cor — o texto/badge dentro do card
   já traz "Vencido"/"A vencer" (seção 9); a borda é reforço visual. */
.kanban-card--vencido { border-left-color: var(--vermelho); }
.kanban-card--a_vencer { border-left-color: var(--ambar); }

/* Destaque de prioridade urgente (seção 8.8) — tarja no topo do card, além
   do badge de prioridade já existente no conteúdo. */
.kanban-card--urgente {
  background: color-mix(in srgb, var(--vermelho) 6%, var(--branco));
  border-color: color-mix(in srgb, var(--vermelho) 40%, var(--cinza-300));
}
.kanban-card--urgente::before {
  content: "URGENTE";
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--vermelho);
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: var(--esp-1);
}

.kanban-card-icone-editar {
  font-size: 13px;
  opacity: .55;
  flex-shrink: 0;
}
.kanban-card:hover .kanban-card-icone-editar { opacity: 1; }

/* ── Badge de prioridade (tarefas) ───────────────────────── */

.badge-prioridade {
  display: inline-flex;
  align-items: center;
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  padding: 2px var(--esp-2);
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-prioridade--baixa { background: var(--cinza-050); color: var(--cinza-600); border-color: var(--cinza-300); }
.badge-prioridade--media { background: var(--azul-100); color: var(--azul-700); }
.badge-prioridade--alta { background: color-mix(in srgb, var(--ambar) 12%, white); color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 35%, white); }
.badge-prioridade--urgente { background: color-mix(in srgb, var(--vermelho) 12%, white); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 35%, white); }

/* ── Badge de status (afastamentos) ─────────────────────── */

.badge-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  padding: 2px var(--esp-2);
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-status--solicitado { background: var(--azul-100); color: var(--azul-700); }
.badge-status--deferido { background: color-mix(in srgb, var(--verde) 12%, white); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 35%, white); }
.badge-status--indeferido { background: color-mix(in srgb, var(--vermelho) 12%, white); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 35%, white); }
.badge-status--cancelado { background: var(--cinza-050); color: var(--cinza-600); border-color: var(--cinza-300); }
.badge-status--dias-amarelo { background: color-mix(in srgb, var(--amarelo) 12%, white); color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 35%, white); }
.badge-status--dias-laranja { background: color-mix(in srgb, var(--ambar) 12%, white); color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 35%, white); }

/* ── Calendário da unidade (afastamentos) ───────────────── */

.calendario-mensal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--cinza-300);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  overflow: hidden;
}
.calendario-dia-semana {
  background: var(--cinza-050);
  padding: var(--esp-1) var(--esp-2);
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  color: var(--cinza-600);
  text-align: center;
}
.calendario-dia {
  background: #fff;
  min-height: 90px;
  padding: var(--esp-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calendario-dia--fora-do-mes { background: var(--cinza-050); color: var(--cinza-600); }
.calendario-dia-numero { font-size: var(--fonte-tam-sm); font-weight: 600; }

/* Feriado no calendário: o quadro do dia inteiro fica na cor do tipo (nunca
   há mais de um feriado no mesmo dia) — o nome quebra linha livremente sem
   alterar a largura da célula, que já é fixa pelo grid de 7 colunas. */
.calendario-dia--feriado, .calendario-dia--feriado .calendario-dia-numero { color: #fff; }
.calendario-dia-feriado-nome {
  font-size: 11px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}
.calendario-afastamento {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendario-afastamento--ferias { background: var(--verde); }
.calendario-afastamento--folga { background: var(--azul-700); }
.calendario-afastamento--folga_eleitoral { background: var(--amarelo); }
.calendario-afastamento--licenca_premio { background: var(--lilas); }

/* Feriados: cor vem inline (5 tipos, definida em JS) — só o formato do chip
   fica aqui, igual ao .calendario-afastamento. */
.calendario-feriado {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendario-legenda {
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}
.calendario-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fonte-tam-sm);
  color: var(--cinza-600);
}
.calendario-legenda-cor {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ── Calendário anual (visão compacta de 12 meses) ────────── */

.calendario-ano {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-3);
}
@media (max-width: 900px) {
  .calendario-ano { grid-template-columns: repeat(2, 1fr); }
}
.calendario-ano-mes {
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: var(--esp-2);
}
.calendario-ano-mes-titulo {
  font-weight: 600;
  font-size: var(--fonte-tam-sm);
  margin-bottom: var(--esp-1);
  text-align: center;
}
.calendario-ano-mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.calendario-ano-dia-semana {
  font-size: 10px;
  color: var(--cinza-600);
  text-align: center;
}
.calendario-ano-dia {
  font-size: 10px;
  text-align: center;
  padding: 2px 0;
  border-radius: 3px;
}
.calendario-ano-dia--fora-do-mes { color: var(--cinza-300); }

/* ── Dashboard (F8) ──────────────────────────────────────── */

.dashboard-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}
.dashboard-cabecalho h1 { margin-bottom: 2px; }

/* Avisos do admin ainda não vistos — caixa destacável logo abaixo do
   cabeçalho (nome + data), substitui o antigo popup pós-login. */
.dashboard-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.dashboard-avisos:empty { display: none; margin: 0; }
.aviso-destaque {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  background: var(--azul-100);
  border-left: 4px solid var(--azul-700);
  border-radius: var(--raio);
  padding: var(--esp-3);
}
.aviso-destaque-icone { color: var(--azul-700); flex-shrink: 0; display: flex; align-items: center; margin-top: 2px; }
.aviso-destaque-corpo { flex: 1; min-width: 0; }
.aviso-destaque-corpo strong { display: block; margin-bottom: 2px; color: var(--azul-900); }
.aviso-destaque-corpo p { margin: 0; color: var(--cinza-900); white-space: pre-wrap; }
.aviso-destaque-fechar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cinza-600);
  flex-shrink: 0;
  padding: 2px;
  display: flex;
}
.aviso-destaque-fechar:hover { color: var(--azul-900); }

/* "Minhas Anotações": texto clicável (não um botão cheio) acima do
   quadro de quantidades, alinhado à direita do cabeçalho. */
.dashboard-anotacoes-atalho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: var(--esp-1) 0;
  color: var(--azul-700);
  font-size: var(--fonte-tam-base);
  font-weight: 600;
  cursor: pointer;
}
.dashboard-anotacoes-atalho:hover { color: var(--azul-900); text-decoration: underline; }

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--esp-3);
}
.dashboard-card {
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: var(--esp-3);
}
.dashboard-card-icone {
  line-height: 1;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-icone, var(--azul-100));
  border: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.dashboard-card-icone:hover { transform: scale(1.08); filter: brightness(0.95); }
.dashboard-card-icone:focus-visible { outline: 2px solid var(--azul-700); outline-offset: 2px; }
.dashboard-card-valor { font-size: 40px; font-weight: 700; color: var(--azul-900); line-height: 1.1; }
.dashboard-card-valor-meu { font-size: 20px; font-weight: 600; color: var(--cinza-600); line-height: 1.1; }
.dashboard-card-rotulo {
  font-size: var(--fonte-tam-sm);
  color: var(--cinza-600);
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .dashboard-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Minhas Anotações (bloco de notas particular, modal da dashboard) ── */

.anotacoes-modal { min-width: 0; }
.anotacoes-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
  margin-bottom: var(--esp-3);
}
.anotacoes-form textarea { flex: 1 1 100%; resize: vertical; }
.anotacoes-form button[type="submit"] { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }

.anotacoes-form-alerta-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fonte-tam-sm);
  color: var(--cinza-600);
  cursor: pointer;
  white-space: nowrap;
  margin-top: var(--esp-1);
}
.anotacoes-form-alerta-data { max-width: 200px; margin-top: var(--esp-1); }
.anotacoes-form-alerta-data:disabled { opacity: .5; }

.anotacoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--esp-3);
  max-height: 50vh;
  overflow-y: auto;
  padding: 2px;
}
.anotacoes-vazio { color: var(--cinza-600); font-size: var(--fonte-tam-sm); grid-column: 1 / -1; }

.anotacao-card {
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 130px;
}
.anotacao-card-acoes { display: flex; justify-content: flex-end; gap: 4px; }
.anotacao-card-acao {
  background: rgba(255, 255, 255, .6);
  border: none;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cinza-900);
  cursor: pointer;
  flex-shrink: 0;
}
.anotacao-card-acao:hover { background: rgba(255, 255, 255, .9); }
.anotacao-card-texto {
  flex: 1;
  font-size: var(--fonte-tam-sm);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}
.anotacao-card-data { font-size: 11px; color: var(--cinza-600); }
.anotacao-card-edicao { width: 100%; resize: vertical; }

.anotacao-card-alerta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}
.anotacao-card-alerta--pendente { background: color-mix(in srgb, var(--vermelho) 18%, white); color: var(--vermelho); }
.anotacao-card-alerta--agendado { background: color-mix(in srgb, var(--azul-700) 14%, white); color: var(--azul-700); }

/* ── Notificações (sino no topbar) ─────────────────────────── */

.notificacoes-lista { display: flex; flex-direction: column; gap: var(--esp-2); max-height: 60vh; overflow-y: auto; }
.notificacao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  background: color-mix(in srgb, var(--vermelho) 6%, white);
  border: 1px solid color-mix(in srgb, var(--vermelho) 25%, white);
  border-radius: var(--raio);
}
.notificacao-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notificacao-item-texto { margin: 0; font-size: var(--fonte-tam-sm); white-space: pre-wrap; overflow-wrap: break-word; }

/* ── Ranking gamificado (movimentação de processos prioritários) ── */

.ranking-quadro h2 { font-size: var(--fonte-tam-base); margin: 0 0 var(--esp-3); }
.ranking-abas { display: flex; gap: var(--esp-1); margin-bottom: var(--esp-3); }
.ranking-aba {
  background: none;
  border: 1px solid var(--cinza-300);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--fonte);
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  color: var(--cinza-600);
  cursor: pointer;
}
.ranking-aba:hover { color: var(--azul-900); }
.ranking-aba.ativo { color: white; background: var(--azul-700); border-color: var(--azul-700); }
.ranking-item {
  display: grid;
  grid-template-columns: 32px auto 1fr auto;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-2);
  border-radius: var(--raio);
  border-bottom: 1px solid var(--cinza-050);
}
.ranking-item:last-child { border-bottom: none; }
.ranking-item--podio-1 { background: color-mix(in srgb, #ffd700 14%, white); }
.ranking-item--podio-2 { background: color-mix(in srgb, #c0c0c0 16%, white); }
.ranking-item--podio-3 { background: color-mix(in srgb, #cd7f32 12%, white); }
.ranking-posicao { font-size: 18px; text-align: center; font-weight: 700; color: var(--cinza-600); }
.ranking-item--podio .ranking-posicao { font-size: 22px; }
.ranking-avatar { display: flex; }
.ranking-info { min-width: 0; }
.ranking-nome {
  font-weight: 600;
  font-size: var(--fonte-tam-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-barra { background: var(--cinza-050); border-radius: 999px; height: 8px; margin-top: 4px; overflow: hidden; }
.ranking-barra-preenchimento { height: 100%; border-radius: 999px; background: var(--azul-700); transition: width .3s ease; }
.ranking-item--podio-1 .ranking-barra-preenchimento { background: #d4af00; }
.ranking-item--podio-2 .ranking-barra-preenchimento { background: #939393; }
.ranking-item--podio-3 .ranking-barra-preenchimento { background: #b06a26; }
.ranking-valor { font-weight: 700; color: var(--azul-900); font-size: var(--fonte-tam-lg); min-width: 28px; text-align: right; }

.dashboard-paineis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--esp-3);
}
.dashboard-painel h2 { font-size: var(--fonte-tam-base); margin: 0 0 var(--esp-2); }
.dashboard-painel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cinza-050);
}
.dashboard-painel-item:last-child { border-bottom: none; }
.dashboard-painel-vazio { color: var(--cinza-600); font-size: var(--fonte-tam-sm); }

/* Limita a caixa a ~10 registros visíveis; acima disso, rola dentro da
   própria caixa em vez de esconder itens ou esticar o layout da página. */
.dashboard-painel-lista { max-height: 540px; overflow-y: auto; padding-right: var(--esp-1); }

.dashboard-grid-principal {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--esp-3);
  align-items: start;
}
@media (max-width: 900px) {
  .dashboard-grid-principal { grid-template-columns: 1fr; }
}
.dashboard-coluna-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.dashboard-alerta-100dias {
  border: 1px solid color-mix(in srgb, var(--vermelho) 35%, white);
  border-left: 4px solid var(--vermelho);
  background: color-mix(in srgb, var(--vermelho) 6%, white);
}
.dashboard-alerta-100dias h2 { font-size: var(--fonte-tam-base); margin: 0 0 var(--esp-2); color: var(--vermelho); }
.dashboard-alerta-100dias #dash-alerta-100dias-lista { max-height: 320px; overflow-y: auto; padding-right: var(--esp-1); }

.dashboard-alerta-80dias {
  border: 1px solid color-mix(in srgb, var(--ambar) 40%, white);
  border-left: 4px solid var(--ambar);
  background: color-mix(in srgb, var(--ambar) 10%, white);
}
.dashboard-alerta-80dias h2 { font-size: var(--fonte-tam-base); margin: 0 0 var(--esp-2); color: var(--ambar); }
.dashboard-alerta-80dias #dash-alerta-80dias-lista { max-height: 320px; overflow-y: auto; padding-right: var(--esp-1); }

/* Cada registro numa única linha: processo, classe, assunto, responsável
   e a badge de dias, todos lado a lado — só quebra em telas muito estreitas. */
.dashboard-alerta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ambar) 20%, white);
}
.dashboard-alerta-linha:last-child { border-bottom: none; }
.dashboard-alerta-linha .badge-prazo { margin-left: auto; }

.dashboard-linha-alertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
  align-items: start;
}
@media (max-width: 900px) {
  .dashboard-linha-alertas { grid-template-columns: 1fr; }
}

.dashboard-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--esp-3);
}

/* ── Gráfico de barras (CSS puro, sem lib externa) ────────── */

.grafico-barras-titulo { font-size: var(--fonte-tam-base); margin: 0 0 var(--esp-3); }
.grafico-barras-linha {
  display: grid;
  grid-template-columns: 130px 1fr 32px;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}
.grafico-barras-rotulo {
  font-size: var(--fonte-tam-sm);
  color: var(--cinza-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grafico-barras-trilho {
  background: var(--cinza-050);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}
.grafico-barras-barra {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}
.grafico-barras-valor {
  font-size: var(--fonte-tam-sm);
  font-weight: 600;
  text-align: right;
  color: var(--cinza-900);
}

/* ── Gráfico de pizza (CSS/SVG puro, paleta discreta) ────────── */

.grafico-pizza-titulo { font-size: var(--fonte-tam-sm); font-weight: 600; margin: 0 0 var(--esp-2); color: var(--cinza-600); }
.grafico-pizza-corpo { display: flex; align-items: center; gap: var(--esp-3); }
.grafico-pizza-corpo svg { flex-shrink: 0; }
.grafico-pizza-corpo--grande { flex-direction: column; align-items: center; }
.grafico-pizza-svg--grande {
  width: 100%;
  max-width: 320px;
  height: auto;
  flex-shrink: 1;
}
.grafico-pizza-fatia { cursor: pointer; transition: opacity .15s ease; }
.grafico-pizza-fatia:hover { opacity: .82; }
.grafico-pizza-percentual {
  font-size: 5px;
  font-weight: 700;
  fill: var(--branco);
  pointer-events: none;
}
.grafico-pizza-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.grafico-pizza-legenda li {
  display: flex; align-items: center; gap: var(--esp-1);
  font-size: var(--fonte-tam-sm); padding: 2px 0;
}
.grafico-pizza-legenda--compacta { width: 100%; flex: none; }
.grafico-pizza-legenda--compacta li { font-size: 10px; padding: 1px 0; }
.grafico-pizza-legenda--compacta .grafico-pizza-marcador { width: 6px; height: 6px; }
.grafico-pizza-marcador { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.grafico-pizza-legenda-rotulo {
  color: var(--cinza-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.grafico-pizza-legenda-valor { color: var(--cinza-900); font-weight: 600; white-space: nowrap; }

.reus-graficos-quadro { margin-bottom: var(--esp-3); }

.reus-graficos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

.dashboard-feriados-quadro h2 { font-size: var(--fonte-tam-base); margin: 0 0 var(--esp-2); }

/* Só na dashboard: esse quadro é o último card da página — sem essa folga,
 * ao rolar até o fim o conteúdo cai bem embaixo da barra flutuante de links
 * úteis (fixa no canto inferior direito), que sempre fica por cima. */
#dash-feriados-quadro { margin-bottom: calc(var(--esp-5) * 3); }

/* ── MPU: data do registro com observação sobreposta no hover ── */

.mpu-data-com-observacao {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--cinza-400);
}
.mpu-data-observacao-balao {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 100;
  bottom: calc(100% + var(--esp-1));
  left: 0;
  width: max-content;
  max-width: 280px;
  background: var(--cinza-900);
  color: var(--branco);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  font-size: var(--fonte-tam-sm);
  font-weight: 400;
  white-space: normal;
  pointer-events: none;
  transition: opacity .15s ease;
}
.mpu-data-com-observacao:hover .mpu-data-observacao-balao { visibility: visible; opacity: 1; }

/* ── Links úteis: miniatura (thumbnail) ─────────────────────── */

.link-util-thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--raio);
  background: var(--cinza-050);
  border: 1px solid var(--cinza-300);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--cinza-600);
}
.link-util-thumb img { width: 100%; height: 100%; object-fit: cover; }
.link-util-thumb--grande { width: 56px; height: 56px; }

/* ── Barra flutuante de acesso rápido (links úteis, dashboard) ── */

.barra-links-flutuante {
  position: fixed;
  right: var(--esp-4);
  bottom: calc(var(--esp-4) + var(--esp-5));
  z-index: 500;
  display: flex;
  align-items: flex-end;
  gap: var(--esp-2);
  max-width: calc(100vw - var(--esp-4) * 2);
}

.barra-links-toggle {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: var(--azul-700);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.barra-links-toggle:hover { background: var(--azul-900); }

.barra-links-itens {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
  max-width: 0;
  max-height: 68px;
  overflow: hidden;
  opacity: 0;
  padding: var(--esp-2);
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: 24px;
  box-shadow: var(--sombra);
  transition: max-width .2s ease, opacity .15s ease;
  pointer-events: none;
}
.barra-links-flutuante.expandida .barra-links-itens,
.barra-links-flutuante:hover .barra-links-itens {
  flex-wrap: wrap;
  max-width: calc(100vw - 96px);
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}

.barra-links-item {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--cinza-300);
  background: var(--cinza-050);
  color: var(--cinza-600);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
.barra-links-item:hover { border-color: var(--azul-700); }
.barra-links-item img { width: 100%; height: 100%; object-fit: cover; }

.barra-links-vazio {
  font-size: var(--fonte-tam-sm);
  color: var(--cinza-600);
  white-space: nowrap;
  padding: 0 var(--esp-2);
}

@media (max-width: 720px) {
  .barra-links-flutuante {
    right: var(--esp-3);
    bottom: calc(var(--esp-3) + var(--esp-5));
    max-width: calc(100vw - var(--esp-3) * 2);
  }
}

/* ── Avatar (foto de perfil ou iniciais) ─────────────────────── */

.avatar-img, .avatar-iniciais {
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-img { object-fit: cover; }
.avatar-iniciais {
  background: var(--azul-100);
  color: var(--azul-700);
  font-weight: 700;
}

/* ── Topbar: avatar clicável + ícone de mensagens ────────────── */

.topbar-avatar {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  line-height: 0;
}
.topbar-avatar:hover { outline: 2px solid var(--azul-100); }

.topbar-icone-mensagens, .topbar-icone-notificacoes {
  position: relative;
  border: 1px solid var(--cinza-300);
  background: var(--branco);
  color: var(--cinza-600);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.topbar-icone-mensagens:hover, .topbar-icone-notificacoes:hover { color: var(--azul-700); border-color: var(--azul-700); }

.mensagens-badge-topbar, .notificacoes-badge-topbar {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Chama a atenção pro sino/envelope enquanto houver algo novo não visto —
   um balanço breve que se repete a cada poucos segundos, com uma pausa
   entre uma badalada e outra (em vez de balançar sem parar, que cansa). */
@keyframes topbar-icone-chamar-atencao {
  0%, 65%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(-14deg); }
  71% { transform: rotate(11deg); }
  74% { transform: rotate(-8deg); }
  77% { transform: rotate(5deg); }
  80% { transform: rotate(0deg); }
}
.topbar-icone-mensagens.tem-novidade svg,
.topbar-icone-notificacoes.tem-novidade svg {
  transform-origin: 50% 0%;
  animation: topbar-icone-chamar-atencao 3.5s ease-in-out infinite;
}

.perfil-modal-resumo {
  background: var(--cinza-050);
  border-radius: var(--raio);
  padding: var(--esp-2) var(--esp-3);
}
.perfil-modal-resumo p { margin: 0 0 4px; }
.perfil-modal-resumo p:last-child { margin-bottom: 0; }

/* ── Painel de mensagens internas (layout 2 colunas, estilo WhatsApp) ── */

.modal--mensagens {
  width: 90vw;
  max-width: 1000px;
  height: 82vh;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.modal--mensagens .modal-corpo { flex: 1; min-height: 0; padding: 0; }

.mensagens-shell { display: flex; height: 100%; min-height: 0; }

.mensagens-coluna-lista {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--cinza-300);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mensagens-lista-topo {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  padding: var(--esp-3);
  border-bottom: 1px solid var(--cinza-300);
}
.mensagens-lista-topo .input { flex: 1; }

.mensagens-lista-contatos { flex: 1; overflow-y: auto; padding: var(--esp-1); }

.mensagens-contato-item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  text-align: left;
  padding: var(--esp-2);
  border: none;
  background: none;
  border-radius: var(--raio);
  cursor: pointer;
}
.mensagens-contato-item:hover { background: var(--cinza-050); }
.mensagens-contato-item--ativo { background: var(--azul-100); }
.mensagens-contato-info { flex: 1; min-width: 0; }
.mensagens-contato-info strong { display: block; }
.mensagens-contato-info p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mensagens-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--azul-700);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.mensagens-coluna-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mensagens-thread-vazio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  color: var(--cinza-600);
}

.mensagens-thread-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-bottom: 1px solid var(--cinza-300);
  flex-shrink: 0;
}

.mensagens-thread-lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  overflow-y: auto;
  padding: var(--esp-3);
  background: var(--cinza-050);
}

.mensagens-bolha-wrap { display: flex; align-items: flex-end; gap: 4px; }
.mensagens-bolha-wrap--propria { justify-content: flex-end; flex-direction: row-reverse; }

.mensagens-bolha {
  max-width: 65%;
  padding: var(--esp-2) var(--esp-2);
  border-radius: var(--raio);
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  font-size: var(--fonte-tam-sm);
}
.mensagens-bolha-texto { margin: 0; white-space: pre-wrap; word-break: break-word; }
.mensagens-bolha--propria {
  background: var(--azul-700);
  color: var(--branco);
  border-color: var(--azul-700);
}

.mensagens-bolha-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 10px;
  opacity: .8;
}
.mensagens-bolha-editado { font-style: italic; }
.mensagens-bolha-status { display: flex; align-items: center; color: var(--cinza-300); }
.mensagens-bolha--propria .mensagens-bolha-status { color: rgba(255,255,255,.65); }
.mensagens-bolha-status--lida { color: #34d3ff !important; }

.mensagens-bolha-acoes {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s ease;
}
.mensagens-bolha-wrap:hover .mensagens-bolha-acoes { opacity: 1; }
.mensagens-bolha-acao {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--cinza-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio);
}
.mensagens-bolha-acao:hover { background: var(--branco); color: var(--azul-900); }
.mensagens-bolha-excluir:hover { color: var(--vermelho); }

.mensagens-input-area {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-end;
  padding: var(--esp-3);
  border-top: 1px solid var(--cinza-300);
  flex-shrink: 0;
}
.mensagens-input-area textarea { resize: none; min-height: 38px; width: 100%; overflow-y: hidden; transition: height 0.1s ease; }

.mensagens-caixa-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mensagens-editando-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: 3px var(--esp-2);
  border-radius: var(--raio);
  background: var(--azul-100);
  color: var(--azul-900);
  font-size: 11px;
}
.mensagens-editando-aviso span { display: flex; align-items: center; gap: 4px; }
.mensagens-editando-aviso button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.mensagens-emoji-wrap { position: relative; flex-shrink: 0; }
.mensagens-emoji-painel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 220px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--esp-2);
}
.mensagens-emoji-opcao {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--raio);
}
.mensagens-emoji-opcao:hover { background: var(--cinza-050); }

@media (max-width: 720px) {
  .modal--mensagens { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .mensagens-coluna-lista { width: 100%; }
  .mensagens-shell:has(.mensagens-coluna-thread .mensagens-thread-cabecalho) .mensagens-coluna-lista { display: none; }
  .mensagens-coluna-thread:not(:has(.mensagens-thread-cabecalho)) { display: none; }
}

/* ── Popups pós-login (avisos, aniversário, alerta de afastamento) ── */

.popup-destaque {
  text-align: center;
  padding: var(--esp-2) 0;
}
.popup-destaque .popup-emoji { font-size: 48px; margin-bottom: var(--esp-2); }

.popup-podio { display: flex; align-items: flex-end; justify-content: center; gap: var(--esp-3); margin-top: var(--esp-3); }
.podio-coluna { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.podio-avatar { border-radius: 999px; border: 3px solid var(--cinza-300); padding: 2px; line-height: 0; }
.podio-avatar img, .podio-avatar .avatar-img { border-radius: 999px; object-fit: cover; }
.podio-coluna--1 .podio-avatar { border-color: #ffd700; }
.podio-coluna--2 .podio-avatar { border-color: #c0c0c0; }
.podio-coluna--3 .podio-avatar { border-color: #cd7f32; }
.podio-trofeu { font-size: 22px; }
.podio-nome {
  font-weight: 600;
  font-size: var(--fonte-tam-sm);
  max-width: 90px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podio-valor { font-size: var(--fonte-tam-sm); color: var(--cinza-600); }
.podio-degrau {
  width: 84px;
  border-radius: var(--raio) var(--raio) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 20px;
}
.podio-coluna--1 .podio-degrau { height: 70px; background: linear-gradient(180deg, #ffd700, #d4af00); }
.podio-coluna--2 .podio-degrau { height: 50px; background: linear-gradient(180deg, #c0c0c0, #939393); }
.podio-coluna--3 .podio-degrau { height: 35px; background: linear-gradient(180deg, #cd7f32, #b06a26); }
.popup-aviso-mensagem { white-space: pre-wrap; }