/* ==========================================================================
   Botões

   Geometria é a mesma para todas as variantes: altura --control-h, raio
   --radius-control, fonte --fs-sm. VARIANTE MUDA COR, NUNCA GEOMETRIA.
   ========================================================================== */

.btn {
    height: var(--control-h);
    padding: 0 var(--space-4);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover { background: var(--color-body-tertiary); }

/* O contorno de foco não é herdado do :focus-visible global porque o botão
   preenchido precisa de offset próprio para não sumir contra o próprio fundo. */
.btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Primária — 600 e não 500: branco sobre o verde de identidade dá 3.99:1 e
   reprova em AA. O 600 sobe para 5.75:1 mantendo a mesma família de cor. */
.btn--primary {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
    font-weight: var(--fw-semibold);
}

.btn--primary:hover {
    border-color: var(--color-primary-700);
    background: var(--color-primary-700);
}

.btn--outline {
    border-color: var(--color-border-strong);
    background: var(--color-body);
    color: var(--color-text);
}

.btn--outline:hover { background: var(--color-body-secondary); }

.btn--danger {
    border-color: var(--color-danger-text);
    background: var(--color-danger-text);
    color: var(--color-text-inverse);
    font-weight: var(--fw-semibold);
}

.btn--danger:hover { background: var(--color-danger-strong); border-color: var(--color-danger-strong); }

/* Mantida por compatibilidade: a altura do sistema é única. */
.btn--sm { height: var(--control-h); font-size: var(--fs-sm); }

.btn--block { width: 100%; }

.btn[disabled],
.btn.is-disabled { opacity: .55; pointer-events: none; }

/* ==========================================================================
   Ação textual
   ========================================================================== */

.link-btn {
    border: 0;
    padding: 0;
    border-radius: var(--radius-control);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-link);
}

.link-btn:hover { text-decoration: underline; }

.link-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Botão de ícone

   Ícone sozinho não tem rótulo acessível: aria-label é obrigatório na view.
   ========================================================================== */

.icon-btn {
    width: var(--control-h);
    height: var(--control-h);
    display: grid;
    place-items: center;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover { background: var(--color-body-tertiary); color: var(--color-title); }

.icon-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.icon-btn--framed {
    flex: 0 0 auto;
    border-color: var(--color-border-strong);
    background: var(--color-body);
    color: var(--color-text);
}

/* Densidade de tabela, lista e card. */
.icon-btn--compact { width: var(--control-h-compact); height: var(--control-h-compact); }
/* Redondo. Reservado para atalho de contato ao lado de um nome — ligar, mandar
   e-mail. A forma separa "falar com esta pessoa" de "agir neste registro", que
   é o que os botões quadrados do resto do portal fazem. */
.icon-btn--round { border-radius: var(--radius-full); }

/* Botão que troca de ícone conforme o estado — abrir/fechar busca.
   Os dois glifos vivem no HTML e o CSS decide qual aparece, como já faz
   o botão de menu da barra lateral. Trocar por JS obrigaria o script a
   conhecer o mapa de ícones do Lucide. */
.icon-btn__glyph--close { display: none; }
.icon-btn.is-active .icon-btn__glyph--open { display: none; }
.icon-btn.is-active .icon-btn__glyph--close { display: block; }
.icon-btn.is-active { border-color: var(--color-border-strong); background: var(--color-body-tertiary); color: var(--color-title); }

/* Botão de ícone emoldurado para contexto denso — linha de tabela, galeria de
   fotos e item de lista. É uma VARIANTE explícita, não um override por
   descendência: assim o botão continua morando só neste arquivo e o CSS da
   tabela não precisa saber estilizar botão. */
.icon-btn--dense {
    display: inline-grid;
    width: var(--control-h-compact);
    height: var(--control-h-compact);
    flex: 0 0 var(--control-h-compact);
    place-items: center;
    padding: 0;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-body);
    color: var(--color-text);
    font-weight: var(--fw-medium);
}

.icon-btn--dense:hover {
    border-color: var(--color-primary-600);
    background: var(--color-body-secondary);
    color: var(--color-primary-700);
}

.icon-btn--dense.menu__danger {
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

.icon-btn--dense.menu__danger:hover {
    border-color: var(--color-danger-text);
    background: var(--color-danger-surface);
    color: var(--color-danger-text);
}

/* ==========================================================================
   Alternador segmentado (data-segment)
   ========================================================================== */

/* O trilho fecha em --control-h: o botão usa a altura compacta e o padding do
   trilho completa os 40px. Com --control-h no botão o segmento somava 48px e
   era o único controle mais alto que a busca e os selects ao lado — a fileira
   inteira ficava desalinhada. */
.segment {
    display: flex;
    gap: 2px;
    padding: var(--space-1);
    border-radius: var(--radius-control);
    background: var(--color-body-tertiary);
}

.segment__btn {
    width: var(--control-h-compact);
    height: var(--control-h-compact);
    display: grid;
    place-items: center;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.segment__btn:hover { color: var(--color-title); }

.segment__btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: calc(var(--focus-offset) * -1);
}

.segment__btn.is-active {
    border-color: var(--color-border-strong);
    background: var(--color-body);
    color: var(--color-title);
}

/* Variante com rótulo, para quando não há ícone que separe as vistas.

   O botão quadrado do alternador padrão existe para ícone; com texto dentro,
   "Concluídas" era espremido nos 32px de largura fixa. Aqui a largura sai do
   conteúdo e o trilho continua fechando na mesma altura de controle. */
.segment--text { align-self: flex-start; }

.segment--text .segment__btn {
    width: auto;
    padding: 0 var(--space-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

/* ==========================================================================
   Paginação

   .pager é a nossa; .pagination_* é a saída do coffeecode/paginator.
   Mesma aparência para as duas — o usuário não deve notar a diferença.
   ========================================================================== */

.pager,
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.pager__btn,
.pagination_item {
    height: var(--control-h-compact);
    min-width: var(--control-h-compact);
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-body);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pager__btn:hover,
.pagination_item:hover { background: var(--color-body-secondary); }

.pager__btn:focus-visible,
.pagination_item:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.pager__btn.is-active,
.pagination_active {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
    font-weight: var(--fw-semibold);
}

.pager__btn[disabled],
.pager__btn.is-disabled { color: var(--color-text-tertiary); pointer-events: none; }

@media print {
    .pager,
    .pagination { display: none !important; }
}