/* =====================================================================================
   EFICÁCIA CRM — mod-backoffice.css

   Existe por causa de um defeito que a auditoria apanhou e eu não: o botão de Estado da
   tabela de utilizadores foi feito com `.ds-badge`, que é um SELO — serve para mostrar,
   não para tocar. Media 24,8px de altura contra os 44px mínimos, e falhava em todos os
   tamanhos de telemóvel: 56 violações críticas.

   O erro de raciocínio foi usar a aparência certa esquecendo a função: aquilo parece um
   selo, mas é um interruptor que desactiva a conta de uma pessoa. Um alvo de 25px para
   uma acção dessas é pedir para alguém lhe tocar sem querer.

   A correção mantém o aspeto de selo e dá-lhe o corpo de botão. Em ecrãs de toque leva
   os 44px inteiros; no computador, onde se usa rato, fica compacto — 44px de altura numa
   linha de tabela desarrumava a lista sem ninguém ganhar nada.
   ===================================================================================== */

.bo-estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.bo-estado--activo {
    background: var(--green-50, #ecfdf5);
    border-color: var(--green-200, #a7f3d0);
    color: var(--green-700, #047857);
}

.bo-estado--inactivo {
    background: var(--surface-2, #f1f5f9);
    border-color: var(--border, #e5e7eb);
    color: var(--ink-500, #6b7280);
}

.bo-estado:hover:not(:disabled) {
    border-color: var(--ink-300, #cbd5e1);
}

.bo-estado:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* O selo do Estado é um INTERRUPTOR, não uma etiqueta: em ecrãs de toque leva o alvo
   inteiro. A regra do desenho é 44px e não se negoceia — desactivar uma conta por
   engano é o tipo de erro que se descobre tarde. */
@media (max-width: 1024px) {

    .bo-estado {
        min-height: var(--ds-touch, 44px);
        padding-left: 16px;
        padding-right: 16px;
    }

    /* O seletor de função vive na mesma linha e tem o mesmo problema pela mesma razão. */
    .ds-table [data-bo-role] {
        min-height: var(--ds-touch, 44px);
    }
}