/* =====================================================================================
   EFICÁCIA CRM — mod-bo-parametros.css · Backoffice ▸ Parâmetros

   MOBILE-FIRST, e aqui não é uma palavra de ordem: as regras base desenham o telemóvel
   — cada parâmetro é um cartão em coluna, com o campo à largura toda — e só a partir dos
   720px o texto e o controlo se põem lado a lado. O caminho contrário (desenhar o
   computador e depois «arrumar» em `max-width`) obriga a desfazer regras em vez de as
   acrescentar, e é assim que se ganham violações de toque sem dar por isso.

   TRÊS DECISÕES QUE VALE A PENA EXPLICAR:

   1. O CAMPO TEM 44px DE ALTURA EM TODA A PARTE, não só em ecrãs de toque. Um `<input
      type=number>` traz setas de incremento minúsculas e um alvo de ~28px; aqui muda-se
      um número que decide quando é que a empresa é avisada de que um contrato termina.
      Não é sítio para um alvo apertado.

   2. A BARRA DE «GUARDAR» É PEGAJOSA NO FUNDO. A aba tem sete parâmetros com nota longa
      e passa facilmente os 2000px de altura: um botão no fim da página obriga a rolar
      até baixo depois de mudar o primeiro campo. Colada, está sempre à distância de um
      toque — e só ganha cor quando há mesmo alguma coisa por guardar, para não parecer
      um botão activo que não faz nada.

   3. AS SETAS DO `type=number` FICAM. Chegou a tentar-se escondê-las (`appearance: none`)
      por serem feias; num campo de «45 dias» são a maneira mais rápida de afinar um valor
      no telemóvel sem abrir o teclado. Feio e útil ganha a bonito e inútil.

   As cores vêm todas de variáveis com fallback, como no resto da casa — este ficheiro não
   introduz nenhum valor de paleta novo. Uma nota sobre um detalhe: os vizinhos usam
   `var(--surface-2, …)`, que NÃO existe em ds-tokens.css — cai sempre no fallback claro e
   por isso não acompanha o tema escuro. Aqui usa-se `--surface-sunken`, que existe nos dois
   temas. Copiar o nome errado por consistência era propagar o defeito.
   ===================================================================================== */

.bop-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* 12px E NÃO 11px. Os vizinhos (.pm-fixa, .bo-estado) usam 11px nestes selos e a
   auditoria responsiva marca-os: 11px é abaixo do mínimo legível em telemóvel, e um selo
   que diz «alterado» é precisamente o que tem de ser lido de relance. Os 11px só voltam a
   partir dos 720px, onde o ecrã está a 60cm dos olhos e não a 30. */
.bop-grupo-conta {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-sunken, #f1f5f9);
    color: var(--ink-500, #6b7280);
    font-size: 12px;
    font-weight: var(--fw-medium, 500);
}

/* ---- o cartão de um parâmetro ---------------------------------------------------- */

.bop-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
}

.bop-item-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.bop-nome {
    font-weight: var(--fw-semibold, 600);
    font-size: 14px;
    color: var(--ink-900, #111827);
    cursor: pointer;
}

.bop-nota {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-500, #6b7280);
}

.bop-nota--aviso {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 6px 8px;
    border-radius: var(--r-sm, 8px);
    background: var(--surface-sunken, #f1f5f9);
    color: var(--ink-700, #374151);
}

.bop-nota--aviso code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

/* ---- o selo de estado ------------------------------------------------------------ */

.bop-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-sunken, #f1f5f9);
    color: var(--ink-500, #6b7280);
    font-size: 12px;
    font-weight: var(--fw-medium, 500);
    white-space: nowrap;
}

.bop-selo--alt {
    background: var(--brand-50, #fef2f2);
    color: var(--brand-700, #b91c1c);
}

.bop-selo--env {
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
}

/* ---- o controlo ------------------------------------------------------------------ */

.bop-item-ctrl {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bop-campo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bop-input {
    /* 44px SEMPRE. Ver o cabeçalho: isto não é um campo de pesquisa. */
    min-height: var(--ds-touch, 44px);
    /* Largura suficiente para 6 dígitos mais as setas; em telemóvel estica com o `flex`
       da .bop-campo, mas nunca fica mais estreito do que isto. */
    min-width: 7.5rem;
    flex: 1 1 auto;
    max-width: 12rem;
    font-variant-numeric: tabular-nums;
}

.bop-input.is-invalido {
    border-color: var(--danger-500, #ef4444);
    background: var(--danger-50, #fef2f2);
}

.bop-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.bop-unidade {
    font-size: 12px;
    color: var(--ink-500, #6b7280);
    white-space: nowrap;
}

.bop-ajuda {
    margin: 0;
    font-size: 12px;
    color: var(--ink-500, #6b7280);
}

.bop-ajuda strong {
    color: var(--ink-700, #374151);
    font-variant-numeric: tabular-nums;
}

.bop-erro {
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-medium, 500);
    color: var(--danger-600, #dc2626);
}

.bop-repor {
    align-self: flex-start;
    min-height: var(--ds-touch, 44px);
}

.bop-repor:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- a barra de guardar ---------------------------------------------------------- */

.bop-barra {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .06));
}

.bop-barra.is-activa {
    border-color: var(--brand-600, #DA0A0D);
}

.bop-barra-txt {
    font-size: 12px;
    color: var(--ink-500, #6b7280);
}

.bop-barra .ds-btn {
    min-height: var(--ds-touch, 44px);
    flex: 1 1 auto;
}

/* ---- a partir do tablet: texto e controlo lado a lado ---------------------------- */

@media (min-width: 720px) {

    .bop-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .bop-item-txt {
        /* A base cresce; o `min-width: 0` é o que impede uma nota longa de empurrar o
           controlo para fora do cartão — sem ele, o conteúdo de um item flex nunca
           encolhe abaixo do seu tamanho intrínseco. */
        flex: 1 1 auto;
        min-width: 0;
    }

    .bop-item-ctrl {
        flex: 0 0 auto;
        width: 15rem;
        align-items: flex-start;
    }

    .bop-barra .ds-btn {
        flex: 0 0 auto;
    }

    /* Aqui os 11px voltam — ver a nota no topo do .bop-grupo-conta. */
    .bop-grupo-conta,
    .bop-selo {
        font-size: 11px;
    }
}

/* Em ecrãs largos o cartão respira mais, mas a coluna do controlo não cresce: um campo
   de seis dígitos com 400px de largura é espaço desperdiçado e fica longe do rótulo. */
@media (min-width: 1200px) {

    .bop-item {
        padding: 16px 18px;
    }
}