/* ============================================================================
   SGCP — Componentes reutilizáveis: Modal (foco preso) e Toast (aria-live).
   ============================================================================ */

/* ---- Modal ---- */
.sgcp-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: padding var(--dur-3) var(--ease);
  animation: sgcp-modal-overlay-in var(--dur-2) var(--ease);
}

.sgcp-modal-overlay[hidden] {
  display: none;
}

/* Classe transitória aplicada por modal_controller.js#fechar() — a troca de
   `hidden` só acontece DEPOIS da animação (animationend, com um
   setTimeout de segurança pro caso de prefers-reduced-motion desligar a
   animação via tokens.css e animationend nunca disparar). */
.sgcp-modal-overlay--saindo {
  animation: sgcp-modal-overlay-out var(--dur-2) var(--ease) forwards;
}

.sgcp-modal-overlay--saindo .sgcp-modal {
  animation: sgcp-modal-out var(--dur-2) var(--ease) forwards;
}

.sgcp-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow: auto;
  animation: sgcp-modal-in var(--dur-2) var(--ease);
  /* Anima o toggle "tela cheia" (prop `expandivel`, ver .sgcp-modal--maximizado
     mais abaixo) — largura/altura/raio de borda mudam suavemente em vez de
     saltar de um tamanho pro outro. */
  transition: width var(--dur-3) var(--ease), height var(--dur-3) var(--ease),
    max-width var(--dur-3) var(--ease), max-height var(--dur-3) var(--ease),
    border-radius var(--dur-3) var(--ease);
}

.sgcp-modal:focus-visible {
  outline: none;
}

.sgcp-modal__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 0;
}

.sgcp-modal__titulo {
  font: 600 17px var(--font);
  margin: 0;
  flex: 1;
}

.sgcp-modal__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sgcp-modal__contagem {
  flex: none;
  font: 600 11.5px var(--font);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-full);
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}

.sgcp-modal__fechar {
  flex: none;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--r-sm);
}

.sgcp-modal__fechar:hover {
  color: var(--text-1);
  background: var(--hover-bg);
}

.sgcp-modal__fechar:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.sgcp-modal__expandir {
  flex: none;
  display: inline-flex;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
}

/* O atributo `hidden` sozinho não é suficiente pros dois ícones (expandir/
   restaurar) dentro do botão — mesmo gotcha de sempre neste projeto (ver
   `.sgcp-kanban-modal__grid[hidden]`, `.sgcp-busca__limpar[hidden]` etc.):
   sem esta regra explícita os dois SVGs ficam visíveis ao mesmo tempo. */
.sgcp-modal__expandir svg[hidden] {
  display: none;
}

.sgcp-modal__expandir:hover {
  color: var(--text-1);
  background: var(--hover-bg);
}

.sgcp-modal__expandir:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.sgcp-modal__corpo {
  padding: 14px 20px 20px;
}

/* Alternância de tamanho (prop `expandivel` de <twig:Modal>) — !important
   necessário para sobrepor tanto o `style="width:…"` inline por instância
   quanto qualquer largura/altura fixa específica de uma tela (ex.:
   processos.css, modal "Detalhe do processo"). */
.sgcp-modal-overlay--maximizado {
  padding: 0 !important;
}

.sgcp-modal--maximizado {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}

/* ---- Toast ---- */
.sgcp-toasts {
  position: fixed;
  right: 24px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 48px);
}

.sgcp-toast {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-bg);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 12px 14px;
  animation: sgcp-toast-in var(--dur-3) var(--ease);
}

.sgcp-toast__icone {
  flex: none;
  margin-top: 1px;
}

.sgcp-toast__texto {
  flex: 1;
}

.sgcp-toast__titulo {
  font: 600 13px var(--font);
  color: var(--text-1);
}

.sgcp-toast__mensagem {
  font: 400 12.5px/1.45 var(--font);
  color: var(--text-2);
  margin-top: 2px;
}

.sgcp-toast__fechar {
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  font: 600 14px var(--font);
  padding: 0;
  line-height: 1;
}

.sgcp-toast__fechar:hover {
  color: var(--text-1);
}

/* Pílulas de seleção única (ex.: "Mudar situação") — <input type="radio"> nativo
   escondido, estilizado via o <span> irmão; mantém semântica/teclado de radio
   sem precisar de JS para alternar o estado selecionado. */
.sgcp-pill-radio {
  display: inline-flex;
  cursor: pointer;
}

.sgcp-pill-radio span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font: 600 12.5px var(--font);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sgcp-pill-radio input:checked + span {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-soft-text);
}

.sgcp-pill-radio input:focus-visible + span {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* Toggle liga/desliga (ex.: preferências de notificação) — mesma técnica:
   <input type="checkbox"> nativo escondido, trilho + bolinha via o <span>
   irmão, sem JS para refletir o estado. */
.sgcp-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.sgcp-switch span {
  display: inline-block;
  width: 38px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  transition: background var(--dur-2) var(--ease);
  position: relative;
}

.sgcp-switch span::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: left var(--dur-2) var(--ease);
}

.sgcp-switch input:checked + span {
  background: var(--brand-bg);
}

.sgcp-switch input:checked + span::before {
  left: 18px;
}

.sgcp-switch input:disabled + span {
  opacity: .5;
  cursor: not-allowed;
}

.sgcp-switch input:focus-visible + span {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* ---- Busca global ---- */
.sgcp-busca-overlay {
  position: fixed;
  inset: 0;
  z-index: 1350;
  background: var(--overlay);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 76px 16px 24px;
  box-sizing: border-box;
  animation: sgcp-fade var(--dur-2) var(--ease);
}

.sgcp-busca-overlay[hidden] {
  display: none;
}

.sgcp-busca {
  width: 100%;
  max-width: 684px;
  max-height: calc(100vh - 130px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sgcp-modal-in var(--dur-2) var(--ease);
}

.sgcp-busca:focus-visible {
  outline: none;
}

.sgcp-busca__campo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}

.sgcp-busca__input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-1);
  font: 400 15.5px var(--font);
  min-width: 0;
}

.sgcp-busca__input:focus {
  outline: none;
}

.sgcp-busca__limpar {
  flex: none;
  border: none;
  background: var(--surface-2);
  color: var(--text-3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font: 600 14px var(--font);
  line-height: 1;
}

.sgcp-busca__limpar:hover {
  background: var(--surface-3);
  color: var(--text-1);
}

.sgcp-busca__limpar[hidden] {
  display: none;
}

.sgcp-busca__fechar {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-3);
  font: 600 10px var(--mono);
  padding: 2px 6px;
  cursor: pointer;
}

.sgcp-busca__facetas {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}

.sgcp-busca__facetas[hidden] {
  display: none;
}

.sgcp-busca__faceta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font: 600 11.5px var(--font);
  cursor: pointer;
}

.sgcp-busca__faceta-contagem {
  font: 600 10px var(--font);
  background: var(--surface-2);
  border-radius: var(--r-full);
  padding: 0 6px;
  min-width: 8px;
  text-align: center;
}

.sgcp-busca__faceta--ativa {
  border-color: var(--brand-bg);
  background: var(--brand-bg);
  color: var(--on-brand);
}

.sgcp-busca__faceta--ativa .sgcp-busca__faceta-contagem {
  background: rgb(255 255 255 / 22%);
}

.sgcp-busca__resultados {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 6px 0;
}

.sgcp-busca__grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 5px;
}

.sgcp-busca__grupo-titulo-rotulo {
  font: 600 10.5px var(--font);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.sgcp-busca__grupo-titulo-contagem {
  font: 400 10.5px var(--font);
  color: var(--text-3);
  white-space: nowrap;
}

.sgcp-busca__grupo-titulo-linha {
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: .6;
}

.sgcp-busca__ver-todos {
  font: 600 10.5px var(--font);
  color: var(--brand-text);
  white-space: nowrap;
  text-decoration: none;
}

.sgcp-busca__ver-todos:hover,
.sgcp-busca__ver-todos:focus-visible {
  text-decoration: underline;
}

.sgcp-busca__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  background: none;
  color: var(--text-1);
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}

.sgcp-busca__item-icone {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sgcp-busca__item-corpo {
  min-width: 0;
  flex: 1;
}

.sgcp-busca__item-cabecalho {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sgcp-busca__item-rotulo {
  font: 600 13.5px var(--font);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgcp-busca__item-detalhe {
  display: block;
  font: 400 12px var(--font);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgcp-busca__badge-sigilo,
.sgcp-busca__badge-contexto {
  flex: none;
  font: 600 9.5px var(--font);
  border-radius: var(--r-full);
  padding: 1px 6px;
}

.sgcp-busca__badge-sigilo {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.sgcp-busca__badge-contexto {
  background: var(--sem-crit-bg);
  color: var(--sem-crit-fg);
}

.sgcp-busca__item-meta {
  flex: none;
  max-width: 180px;
  font: 400 11px var(--font);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.sgcp-busca__item-faceta {
  flex: none;
  font: 600 9.5px var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px 8px;
}

.sgcp-busca__item mark {
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  border-radius: 3px;
  padding: 0 1px;
  font-weight: 600;
}

.sgcp-busca__item:hover,
.sgcp-busca__item--ativo {
  background: var(--hover-bg);
}

.sgcp-busca__vazio {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--border-strong);
}

.sgcp-busca__vazio-titulo {
  font: 600 14.5px var(--font);
  color: var(--text-1);
}

.sgcp-busca__vazio-subtitulo {
  font: 400 12.5px/1.5 var(--font);
  color: var(--text-3);
  max-width: 340px;
}

.sgcp-busca__dica {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.sgcp-busca__tecla-dica {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 11px var(--font);
  color: var(--text-3);
}

.sgcp-busca__tecla {
  font: 600 10px var(--mono);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--surface);
}

.sgcp-busca__dica-dinamica {
  margin-left: auto;
  font: 400 11px var(--font);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ---- Toast: acento por tipo ---- */
.sgcp-toast--sucesso { border-left-color: var(--success); }
.sgcp-toast--sucesso .sgcp-toast__icone { color: var(--success); }
.sgcp-toast--erro { border-left-color: var(--danger); }
.sgcp-toast--erro .sgcp-toast__icone { color: var(--danger); }
.sgcp-toast--info { border-left-color: var(--info); }
.sgcp-toast--info .sgcp-toast__icone { color: var(--info); }

/* ---- BadgeSituacao ---- */
.sgcp-badge-situacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sgcp-badge-situacao__valor {
  font: 600 11.5px var(--font);
  border-radius: var(--r-sm);
  padding: 2px 9px;
}

.sgcp-badge-situacao__valor--brand { background: var(--brand-soft); color: var(--brand-soft-text); }
.sgcp-badge-situacao__valor--info { background: var(--info-soft); color: var(--info-text); }
.sgcp-badge-situacao__valor--destaque { background: var(--sec-soft); color: var(--sec-text); }
.sgcp-badge-situacao__valor--neutro { background: var(--surface-2); color: var(--text-2); }
.sgcp-badge-situacao__valor--alerta { background: var(--warning-soft); color: var(--warning-text); }
.sgcp-badge-situacao__valor--sucesso { background: var(--success-soft); color: var(--success-text); }
.sgcp-badge-situacao__valor--neutro-fraco { background: var(--surface-2); color: var(--text-3); }
.sgcp-badge-situacao__valor--perigo { background: var(--danger-soft); color: var(--danger-text); }

.sgcp-badge-situacao__vencido {
  font: 600 10.5px var(--font);
  background: var(--danger);
  color: var(--on-brand);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

/* ---- ChipPrioridade ---- */
.sgcp-chip-prioridade {
  font: 600 11.5px var(--font);
  border-radius: var(--r-full);
  padding: 2px 10px;
  white-space: nowrap;
}

.sgcp-chip-prioridade--urgente { background: var(--danger-soft); color: var(--danger-text); }
.sgcp-chip-prioridade--alta { background: var(--warning-soft); color: var(--warning-text); }
.sgcp-chip-prioridade--normal { background: var(--info-soft); color: var(--info-text); }
.sgcp-chip-prioridade--baixa { background: var(--surface-2); color: var(--text-2); }

/* ---- Semáforo ---- */
.sgcp-semaforo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: 3px 10px;
  font: 600 12px var(--font);
  white-space: nowrap;
}

.sgcp-semaforo__icone {
  flex: none;
}

.sgcp-semaforo--critico { background: var(--sem-crit-bg); color: var(--sem-crit-fg); border-color: var(--sem-crit-bd); }
.sgcp-semaforo--critico .sgcp-semaforo__traco { stroke: var(--sem-crit-dot); }
.sgcp-semaforo--atencao { background: var(--sem-aten-bg); color: var(--sem-aten-fg); border-color: var(--sem-aten-bd); }
.sgcp-semaforo--atencao .sgcp-semaforo__traco { stroke: var(--sem-aten-dot); }
.sgcp-semaforo--monitorar { background: var(--sem-mon-bg); color: var(--sem-mon-fg); border-color: var(--sem-mon-bd); }
.sgcp-semaforo--monitorar .sgcp-semaforo__traco { stroke: var(--sem-mon-dot); }
.sgcp-semaforo--confortavel { background: var(--sem-conf-bg); color: var(--sem-conf-fg); border-color: var(--sem-conf-bd); }
.sgcp-semaforo--confortavel .sgcp-semaforo__traco { stroke: var(--sem-conf-dot); }
.sgcp-semaforo--suspenso { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.sgcp-semaforo--suspenso .sgcp-semaforo__traco { stroke: var(--border-strong); }

.sgcp-semaforo__vencido {
  color: var(--danger-text);
  font-weight: 700;
}

.sgcp-semaforo__dias {
  font-weight: 400;
  opacity: .85;
}

/* ---- Régua de alertas (marcos D-x) ---- */
.sgcp-regua {
  position: relative;
  height: 44px;
  margin: 0 10px;
}

.sgcp-regua__trilho {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-3);
}

.sgcp-regua__preenchimento {
  position: absolute;
  left: 0;
  top: 6px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--brand-bg);
}

.sgcp-regua__marco {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sgcp-regua__marco-ponto {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}

.sgcp-regua__marco-ponto--atingido {
  border-color: var(--brand-bg);
  background: var(--brand-bg);
}

.sgcp-regua__marco-rotulo {
  font: 600 10px var(--mono);
  color: var(--text-3);
  white-space: nowrap;
}

.sgcp-regua__marco-rotulo--atingido {
  color: var(--text-1);
}

/* ---- DuasDatas ---- */
.sgcp-duasdatas--compacta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sgcp-duasdatas__data-calendario {
  font: 400 12px var(--font);
  color: var(--text-3);
}

.sgcp-duasdatas__seta {
  color: var(--text-3);
}

.sgcp-duasdatas__data-efetivo {
  font: 600 12px var(--font);
  color: var(--text-1);
}

.sgcp-duasdatas__data-efetivo--delta {
  color: var(--brand-text);
}

.sgcp-duasdatas__delta {
  font: 600 10.5px var(--font);
  background: var(--warning-soft);
  color: var(--warning-text);
  border-radius: var(--r-full);
  padding: 1px 7px;
}

.sgcp-duasdatas {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.sgcp-duasdatas__coluna {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.sgcp-duasdatas__coluna--efetivo {
  border: 1.5px solid var(--brand-bg);
  background: var(--brand-soft);
}

.sgcp-duasdatas__rotulo {
  font: 600 10px var(--font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.sgcp-duasdatas__coluna--efetivo .sgcp-duasdatas__rotulo {
  color: var(--brand-soft-text);
}

.sgcp-duasdatas__valor {
  font: 700 19px/1.3 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.sgcp-duasdatas__coluna--efetivo .sgcp-duasdatas__valor {
  color: var(--brand-soft-text);
}

.sgcp-duasdatas__nota {
  font: 400 10.5px var(--font);
  color: var(--text-3);
}

.sgcp-duasdatas__coluna--efetivo .sgcp-duasdatas__nota {
  color: var(--brand-soft-text);
  opacity: .85;
}

.sgcp-duasdatas__meio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.sgcp-duasdatas__delta-badge {
  font: 600 11px var(--font);
  background: var(--warning-soft);
  color: var(--warning-text);
  border-radius: var(--r-full);
  padding: 2px 8px;
  white-space: nowrap;
}

.sgcp-duasdatas__seta-grande {
  color: var(--text-3);
}

/* Sem isto, `.sgcp-duasdatas` (`1fr auto 1fr`) força a coluna "Prazo" do
   detalhe de processo (DBH-RESP-003) a precisar de ~370-410px mesmo depois
   de `.sgcp-processo-resumo` colapsar para 1 coluna em mobile — os 2 cartões
   de data (calendário/efetivo) não têm `min-width:auto` neutralizado, então
   o grid nunca encolhe abaixo do conteúdo somado dos 2 cartões + seta.
   Mesmo breakpoint já convencionado em dashboard.css/ausencias.css/
   admin.css/auth.css (`@media (max-width: 900px)`). Só a variante não-
   compacta (usada em processos/_detalhe_conteudo.html.twig) é afetada — a
   variante `--compacta` (radar/index.html.twig, mesa) é markup diferente. */
@media (max-width: 900px) {
  .sgcp-duasdatas {
    grid-template-columns: 1fr;
  }

  .sgcp-duasdatas__meio {
    flex-direction: row;
    justify-content: center;
  }
}

/* ---- EstadoVazio ---- */
.sgcp-estado-vazio {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.sgcp-estado-vazio__icone {
  color: var(--border-strong);
}

.sgcp-estado-vazio__titulo {
  font: 600 14px var(--font);
}

.sgcp-estado-vazio__mensagem {
  font: 400 12.5px var(--font);
  color: var(--text-3);
  max-width: 360px;
}

/* ---- EstadoErro ---- */
.sgcp-estado-erro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.sgcp-estado-erro__icone {
  color: var(--danger);
}

.sgcp-estado-erro__titulo {
  font: 600 14px var(--font);
}

.sgcp-estado-erro__mensagem {
  font: 400 12.5px var(--font);
  color: var(--text-3);
  max-width: 360px;
}

.sgcp-estado-erro__acao {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-1);
  font: 600 12.5px var(--font);
  cursor: pointer;
  text-decoration: none;
  margin-top: 4px;
}

.sgcp-estado-erro__acao:hover {
  background: var(--hover-bg);
}

/* ---- TabelaPaginada ---- */
.sgcp-tabela-paginada__scroll {
  overflow-x: auto;
}

.sgcp-tabela-paginada__tabela {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px var(--font);
}

.sgcp-tabela-paginada__cabecalho-linha {
  background: var(--surface-2);
}

.sgcp-tabela-paginada__th {
  padding: 9px 12px;
  text-align: left;
  font: 600 11.5px var(--font);
  color: var(--text-2);
  white-space: nowrap;
}

.sgcp-tabela-paginada__rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  font: 400 12px var(--font);
  color: var(--text-3);
}

.sgcp-tabela-paginada__paginacao {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.sgcp-tabela-paginada__pagina {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  font: 600 12px var(--font);
}

.sgcp-tabela-paginada__pagina:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 1px;
}

.sgcp-tabela-paginada__pagina--seta {
  color: var(--text-3);
}

.sgcp-tabela-paginada__pagina--seta:hover {
  background: var(--hover-bg);
}

.sgcp-tabela-paginada__pagina--numero {
  color: var(--text-2);
}

.sgcp-tabela-paginada__pagina--numero:hover {
  border-color: var(--brand-text);
}

.sgcp-tabela-paginada__pagina--ativa {
  border: none;
  background: var(--brand-bg);
  color: var(--on-brand);
}

.sgcp-tabela-paginada__pagina--desabilitada {
  pointer-events: none;
  opacity: .5;
}

/* ---- Select — hover global (IMPEDIMENTO.txt item 4): uma única regra por
   tag em vez de repetir em cada classe *__select* espalhada pelas telas, para
   que qualquer <select> do app — presente ou futuro — sempre responda ao
   hover com as cores do projeto em vez do destaque nativo do navegador. ---- */
select:not(:disabled):hover {
  background: var(--hover-bg);
}

/* ---- Inputs nativos de data/hora (<input type="date"/"time">): sem isto o
   navegador ignora o tema do app e sempre desenha o seletor/relógio nativo
   claro e com acento azul do sistema, mesmo no dark mode — mesmo padrão do
   protótipo (App.dc.html, campos de horário: `color-scheme`+`accent-color`
   ligados ao tema atual, aqui via [data-theme] em vez de variável de template). ---- */
input[type="date"],
input[type="time"] {
  color-scheme: light;
  accent-color: var(--brand-bg);
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] {
  color-scheme: dark;
}

/* ============================================================================
   Date picker (IMPEDIMENTO.txt item 4) — porta de claude-design/js/datepicker.js
   (ver assets/controllers/datepicker_controller.js). Campo de texto mascarado
   DD/MM/AAAA + calendário flutuante, 100% var(--*) (acompanha tema automático).
   ============================================================================ */
/* Adicionada via JS ao PAI existente do <input> (nunca um wrapper novo — ver
   nota grande em datepicker_controller.js#_montarDom sobre por que reparentar
   o próprio input causaria um loop de connect/disconnect no Stimulus). Cada
   template que usa este controller já tem um <label>/<span> dedicado a um
   único campo como pai imediato do input, então isto nunca afeta outro
   conteúdo. display:block é reforço defensivo — na prática todo pai usado
   aqui já é filho direto de um container `display: grid` (blockificado
   independente do display próprio, ver .sgcp-campo-grid-2/.sgcp-agenda__modal-grid/
   .sgcp-kanban-modal__grid/.sgcp-processo-form__grade). */
.sgcp-datepicker__campo {
  position: relative;
  display: block;
}

/* Espaço para o botão do calendário (.sgcp-datepicker__botao). Precisa de
   !important: assets/app.js importa componentes.css antes de paginas.css/
   processos.css/admin.css/agenda.css, cujas classes de campo (.sgcp-campo__input,
   .sgcp-processo-form__input, .sgcp-admin-calendario__input-numerico…) definem
   um padding-right menor e ganhariam da cascata por ordem de carregamento —
   mesmo padrão de sobreposição documentado em processos.css:1114. */
.sgcp-datepicker__input {
  padding-right: 34px !important;
}

.sgcp-datepicker__botao {
  position: absolute;
  right: 6px;
  /* `top` é calculado em JS (datepicker_controller.js#_posicionarBotao) a
     partir da posição real do input, não fixo aqui — o pai deste botão
     costuma ser mais alto que o input (rótulo do campo acima dele), então
     um `top: 50%` puro CSS centralizaria no bloco inteiro, não no input. */
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sgcp-datepicker__botao:hover {
  background: var(--hover-bg);
  color: var(--brand-text);
}

.sgcp-datepicker__botao:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 1px;
}

/* position: fixed (não absolute, ao contrário de .sgcp-dropdown__painel):
   estes campos vivem dentro de modais com overflow:auto (.sgcp-modal), que
   cortariam um popover absolute assim que ultrapassasse a altura do modal.
   Posição calculada em JS (getBoundingClientRect), z acima de --z-modal. */
.sgcp-datepicker__popover {
  position: fixed;
  z-index: var(--z-tip);
  width: 284px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 12px;
  font: 400 13px var(--font);
  color: var(--text-1);
  user-select: none;
}

.sgcp-datepicker__popover[hidden] {
  display: none;
}

.sgcp-datepicker__cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sgcp-datepicker__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-1) var(--ease);
}

.sgcp-datepicker__nav:hover {
  background: var(--hover-bg);
}

.sgcp-datepicker__titulo {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  font: 600 13.5px var(--font);
  color: var(--text-1);
  text-transform: capitalize;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  height: 30px;
  transition: background var(--dur-1) var(--ease);
}

.sgcp-datepicker__titulo:hover {
  background: var(--hover-bg);
}

.sgcp-datepicker__semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.sgcp-datepicker__semana-dia {
  text-align: center;
  font: 600 10.5px var(--font);
  color: var(--text-3);
  padding: 4px 0;
}

.sgcp-datepicker__grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.sgcp-datepicker__dia {
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  font: 400 12.5px var(--font);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sgcp-datepicker__dia:hover {
  background: var(--hover-bg);
}

.sgcp-datepicker__dia--fora {
  color: var(--text-3);
  opacity: .5;
}

.sgcp-datepicker__dia--hoje {
  border-color: var(--brand-border);
  color: var(--brand-text);
  font-weight: 600;
}

.sgcp-datepicker__dia--selecionado,
.sgcp-datepicker__dia--selecionado:hover {
  background: var(--brand-bg);
  color: var(--on-brand);
  font-weight: 600;
}

.sgcp-datepicker__mes-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 2px 0 4px;
}

.sgcp-datepicker__mes {
  height: 40px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  font: 600 12.5px var(--font);
  text-transform: capitalize;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sgcp-datepicker__mes:hover {
  background: var(--hover-bg);
}

.sgcp-datepicker__mes--atual {
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.sgcp-datepicker__mes--selecionado,
.sgcp-datepicker__mes--selecionado:hover {
  background: var(--brand-bg);
  color: var(--on-brand);
}

.sgcp-datepicker__rodape {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sgcp-datepicker__rodape-btn {
  flex: 1;
  height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: 600 12px var(--font);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.sgcp-datepicker__rodape-btn:hover {
  background: var(--hover-bg);
}

.sgcp-datepicker__rodape-btn--hoje {
  color: var(--brand-text);
}

.sgcp-datepicker__rodape-btn--limpar {
  color: var(--text-2);
}