/* Complementos da versão Rails ao style.css original (cgh.css).
   Só o que a troca de JS para formulários/links do servidor exigiu. */

/* button_to gera um <form>; mantém botões lado a lado como antes. */
form.button_to { display: inline; margin: 0; }
.acoes-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acoes-inline form { display: inline; }
/* Botão da próxima etapa da pendência (Conferência): observação em cima do botão. */
.acoes-pendencia { display: flex; flex-direction: column; gap: 6px; max-width: 170px; }
.acoes-pendencia input[type="text"] { width: 100%; min-width: 0; }
/* Tabela larga rola dentro do cartão, sem criar rolagem na página. */
.tabela-rolagem { overflow-x: auto; }

/* Links com aparência de botão (cabeçalho e ações). */
a.btn-secundario, a.btn-excel, a.btn-primario {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

.tag-status-modulo {
  margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; color: var(--cgh-ink); background: var(--cgh-fire-amber);
  padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}

/* Alerta de nova nota em tempo real (antes montado via JS inline). */
.alerta-tempo-real {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  color: #fff; padding: 15px 25px; border-radius: 8px; font-weight: bold; font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); animation: pulse 1s infinite alternate;
  background: #17a2b8;
}
.alerta-tempo-real.prioridade { background: #dc3545; }
.alerta-tempo-real small { font-weight: normal; }
.alerta-tempo-real .selo-prioridade { background: yellow; color: black; padding: 2px 5px; border-radius: 3px; }

/* Mensagem de erro de validação dentro de formulários. */
.erros-form { margin: 10px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--virtual-red-light); border: 1px solid var(--virtual-red); color: var(--text-main); }
.erros-form ul { margin: 6px 0 0 18px; }

.vazio { text-align: center; color: var(--text-muted); }
.texto-mudo { color: var(--text-muted); }
.paginacao { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.paginacao a, .paginacao span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--cgh-line); text-decoration: none; color: var(--text-main); }
.paginacao .atual { background: var(--virtual-blue-light); color: var(--accent-text); font-weight: 700; }

.sem-acesso { max-width: 560px; margin: 40px auto; text-align: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px; }
.kpi .kpi-rotulo { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi .kpi-valor { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin-top: 4px; }

.barra-horizontal { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.barra-horizontal .rotulo { width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-horizontal .trilho { flex: 1; background: var(--cgh-ink-softer); border-radius: 6px; height: 14px; overflow: hidden; }
.barra-horizontal .preenchimento { background: var(--cgh-green); height: 100%; border-radius: 6px; }
.barra-horizontal .valor { width: 70px; text-align: right; font-family: var(--font-mono); }

details.linha-detalhe summary { cursor: pointer; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
.badge-verde { background: var(--verde-bg); border-color: var(--verde-border); color: var(--verde-text); }
.badge-amarelo { background: var(--amarelo-bg); border-color: var(--amarelo-border); color: var(--amarelo-text); }
.badge-vermelho { background: var(--vermelho-bg); border-color: var(--vermelho-border); color: var(--vermelho-text); }
.badge-laranja { background: var(--laranja-bg); border-color: var(--laranja-border); color: var(--laranja-text); }
.badge-azul { background: var(--azul-bg); border-color: var(--azul-border); color: var(--azul-text); }
.badge-roxo { background: var(--roxo-bg); border-color: var(--roxo-border); color: var(--roxo-text); }
.badge-cinza { background: var(--cgh-ink-softer); border-color: var(--cgh-line); color: var(--text-muted); }