/* ==========================================================================
   O campo Xenios

   O controle de formulário do sistema: caixa de texto, seleção, área de texto,
   rótulo e marcador. Um lugar só — mude aqui e mudam os 289 campos das 22 telas.

   ── Por que este arquivo passou a existir (2026-09-09) ──────────────────
   O campo já era Xenios na tela, mas a definição estava escrita TRÊS vezes,
   cada uma presa a um container diferente:

     cadastros.css   `.cad-premium .form-control, …`        20 telas
     check-in.css    `.occ-checkin-drawer .form-control`     a gaveta do check-in
     estadia.css     `.occ-input, .occ-select, .occ-textarea`  a ficha de estadia

   As três declaravam os mesmos valores. Medido no navegador em `/estadia/1039`,
   onde duas delas convivem: campos COM `.occ-input` e campos sem renderizavam
   idênticos — 40px de altura, raio 10px, borda `--occ-line`, fundo
   `--occ-surface-2`. A terceira cópia ainda punha `!important` em cada linha,
   porque precisava vencer o vendor a partir de um arquivo de tela.

   A causa era o escopo, não o gosto: quem escrevia uma tela nova fora de
   `.cad-premium` não tinha campo nenhum, e resolvia copiando. `.cad-premium`
   quer dizer "cadastro" — mas `/reservas`, `/lançamentos` e `/borderô` também
   carregam a classe, só para herdar o campo. O nome mentia havia tempo.

   Sem escopo, a cópia deixa de ser necessária: tela nova ganha o campo por
   existir. Ver [[cadastros.css]] para o que continua sendo de cadastro — a
   ficha em duas colunas (`.cad-field`), a linha de filtros com input nu e o
   select2, que são construções daquelas telas e não do campo.

   ── O que NÃO mora aqui ─────────────────────────────────────────────────
   O estado de erro: `form-validacao.css`, que carrega depois e vence por
   especificidade (`.is-invalid .form-control:focus`). O campo não sabe que
   errou; quem sabe é a validação.
   ========================================================================== */

.form-label {
    color: var(--occ-ink-soft);
}

/* A caixa. Fundo um degrau acima da superfície, borda de um fio e o raio
   pequeno do sistema — o mesmo do chip e do botão, para o formulário não ler
   como um bloco de peças de origens diferentes. */
.form-control,
.form-select,
textarea.form-control,
select.form-select {
    background-color: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm);
    color: var(--occ-ink);
    transition: border-color var(--occ-dur) var(--occ-ease),
                box-shadow var(--occ-dur) var(--occ-ease),
                background-color var(--occ-dur) var(--occ-ease);
}

/* `opacity: 1` porque o navegador aplica a sua própria transparência ao
   placeholder, e sobre o grafite escuro o texto sumiria. */
.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--occ-ink-faint);
    opacity: 1;
}

/* Foco: o campo sobe para a superfície (fica mais claro que o repouso) e ganha
   o anel teal. Sem `!important` — até 2026-09-09 o `overrides.css` declarava
   este mesmo foco com `!important` global, e era só o que obrigava o
   `form-validacao.css` a repetir `!important` para conseguir pintar de vermelho
   o campo reprovado. Retirado o de cá, o de lá vence por especificidade. */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
select.form-select:focus {
    background-color: var(--occ-surface);
    border-color: var(--occ-accent);
    box-shadow: 0 0 0 3px var(--occ-accent-soft);
    outline: none;
}

/* Desabilitado: o campo afunda um tom e o texto perde o contraste cheio.
   Continua legível, mas não convida. O tom vem de `--occ-field-off`, que é
   declarado por tema — no claro afundar significa ESCURECER, e a superfície da
   página lá é branca; derivar dela inverteria o sinal (ver tokens.css).

   Isto NÃO existia até 2026-09-09, e o motivo é instrutivo. O Bootstrap tem
   `.form-control:disabled` (dois níveis de especificidade). A definição antiga
   do campo era `.cad-premium .form-control` — também dois níveis, e carregada
   depois. Empate de especificidade decidido por ordem de arquivo: a regra do
   cadastro vencia a do vendor, e campo desabilitado ficava com a mesma cara de
   campo editável. Medido em /reservas: 15 dos 55 campos são `disabled`, e os 55
   eram indistinguíveis.

   Sem o escopo, o `:disabled` do vendor voltou a aparecer — no cinza frio do
   Limitless, que briga com o grafite quente. Daí esta regra: o estado passa a
   ser dito, e dito na paleta do sistema. */
.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled,
select.form-select:disabled {
    background-color: var(--occ-field-off);
    border-color: var(--occ-line);
    color: var(--occ-ink-soft);
    cursor: not-allowed;
}

/* Somente leitura é outra coisa: o valor é para ser lido e copiado, não para
   ser mexido. Fundo de campo editável, texto atenuado — a diferença com o
   desabilitado é de propósito. */
.form-control[readonly],
textarea.form-control[readonly] {
    background-color: var(--occ-surface-2);
    color: var(--occ-ink-soft);
}

/* Marcador (caixa de seleção e interruptor) na cor da marca. */
.form-check-input:checked {
    background-color: var(--occ-accent);
    border-color: var(--occ-accent);
}

.form-check-input:focus {
    border-color: var(--occ-accent);
    box-shadow: 0 0 0 3px var(--occ-accent-soft);
}

/* Segredo que NÃO é credencial do sistema (a senha de consumo do hóspede): mascarado por CSS
   num campo de texto, e não com type="password". Para o gerenciador de senhas do navegador,
   type="password" ao lado de um campo de texto é "usuário + senha" — ele oferecia preencher o
   PIN do hóspede com a senha do operador, e salvar a ficha perguntava "Salvar senha?". */
.xn-mascarado {
    -webkit-text-security: disc;
}

/* Campo de dinheiro: o "R$" mora DENTRO da caixa (XWM-129, 08/10/2026). O input-group do
   Bootstrap desenhava o prefixo numa segunda caixa cinza, e a borda de foco e a de validado
   abraçavam só a metade do campo. Aqui o prefixo vira texto discreto sobre o próprio campo,
   e foco, validado e erro pintam a caixa inteira.

   Vale sozinho para todo campo com a máscara de moeda (`data-currency`) dentro de um
   `.input-group` com o `<span class="input-group-text">R$</span>` antes dele — tela nova não
   faz nada além disso. `.occ-input-group-addon` é o "R$" da ficha da Estadia, que usa campo
   numérico e não a máscara.

   `text-indent`, e não `padding-left`: o padding de todo campo de cadastro vem de uma regra do
   cadastros.css com 7 classes de especificidade, e brigar com ela pediria `!important`. O
   recuo só desloca o texto; a caixa continua do mesmo tamanho. */
.input-group:has(> .form-control[data-currency]),
.input-group:has(> .occ-input-group-addon) {
    position: relative;
    flex-wrap: nowrap;
}

.input-group:has(> .form-control[data-currency]) > .input-group-text,
.input-group:has(> .occ-input-group-addon) > .input-group-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    padding: 0 0 0 .75rem;
    background: transparent;
    border: 0;
    color: var(--occ-ink-faint);
    font-weight: 500;
    pointer-events: none;
}

.input-group:has(> .form-control[data-currency]) > .form-control,
.input-group:has(> .occ-input-group-addon) > .form-control {
    text-indent: 1.6rem;
}

/* O Bootstrap cola o campo no prefixo tirando o raio e a margem do lado esquerdo, num seletor de
   especificidade 0,7,0 (`.input-group > :not(:first-child):not(.dropdown-menu)…`). Com o prefixo
   dentro da caixa não há o que colar: o mesmo seletor, dentro do nosso escopo, devolve o canto. */
.input-group:has(> .form-control[data-currency]) > .form-control:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
.input-group:has(> .occ-input-group-addon) > .form-control:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
    border-radius: var(--occ-radius-sm);
}