/* ==============================================================================
 *  # Cadastros — premium (Fase 0 — fundação)
 *
 *  Fundação reutilizável dos CRUDs (UH, PDV, Produto/Serviço, Forma Pgto, ...).
 *  Uso: adicionar a classe `.cad-premium` ao `.content` da view; os elementos
 *  Bootstrap/Limitless internos herdam o tratamento premium via tokens
 *  --occ-* / --st-*. O tema escuro vem dos próprios tokens (espelho em
 *  [data-color-theme="dark"], linhas 78-121) — blocos dark explícitos abaixo só
 *  onde há valor não-tokenizado.
 * ---------------------------------------------------------------------------- */

.cad-premium .page-title { color: var(--occ-ink); }

/* Fecha a fresta de 1px entre a base da navbar e o topo do page-header sticky.
   layout.css:50 declara `.page-header { position: sticky; top: 1px }` — valor de
   placeholder ("Ajuste conforme a altura do seu menu fixo"). O scrollport e o
   .content-inner, entao top:1px deixa a primeira linha de pixel do conteudo
   rolando a descoberto, entre a navbar (translucida) e o header da pagina.
   Medido: fresta de 1px em y=58 com o conteudo aparecendo por ela.
   E defeito do tema e vale para TODA tela com page-header sticky; corrigido aqui
   no escopo dos cadastros para nao mexer no arquivo compartilhado do Limitless. */
.cad-premium .page-header { top: 0; }

/* Card de superfície */
/* O .card do Bootstrap dentro do cadastro E o painel do sistema: app/superficie.css. */

.cad-premium .card-header {
    background: transparent;
    border-color: var(--occ-line);
    color: var(--occ-ink);
}

/* O skin de accordion foi REMOVIDO em 2026-08-06, ao fim da migracao das 12 telas de
   cadastro para a superficie continua. Era ele que pintava o `.accordion-button` aberto
   com `background: var(--occ-accent-soft)` de largura total — a faixa teal que fazia cada
   formulario ler como um modulo a parte. Nenhum template sob `.cad-premium` usa
   `.accordion` hoje (conferido por grep em templates/), entao a regra so guardava um
   estado que nao existe mais. */

/* Input NU da linha de filtros — o que sobrou aqui depois que o campo virou
   componente do sistema (app/campo.css).

   As 13 telas de cadastro filtram por uma linha de <input> e <select> SEM
   classe: 51 deles nos templates. São um construto destas telas, e não o campo
   do sistema — por isso continuam com escopo. Quem tem `.form-control` ou
   `.form-select` já é servido pelo campo.css e não precisa aparecer aqui. */
.cad-premium input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close):not(.form-control),
.cad-premium textarea:not(.form-control),
.cad-premium select:not(.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);
}

.cad-premium input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close):not(.form-control)::placeholder,
.cad-premium textarea:not(.form-control)::placeholder { color: var(--occ-ink-faint); opacity: 1; }

.cad-premium input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close):not(.form-control):focus,
.cad-premium textarea:not(.form-control):focus,
.cad-premium select:not(.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;
}

/* select2 — caixa de seleção (dentro do escopo) */
.cad-premium .select2-container--default .select2-selection--single {
    background-color: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm);
    height: auto;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.cad-premium .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--occ-ink);
    line-height: 1.5;
}

.cad-premium .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--occ-accent);
    box-shadow: 0 0 0 3px var(--occ-accent-soft);
}

/* select2 dropdown — o painel é anexado ao <body> (fora de .cad-premium); por isso
   o tema é global, mas 100% tokenizado, então acompanha claro/escuro sozinho. */
.select2-container--default .select2-dropdown {
    background: var(--occ-glass-bg);
    -webkit-backdrop-filter: var(--occ-glass-blur);
    backdrop-filter: var(--occ-glass-blur);
    border: 1px solid var(--occ-glass-bd);
    border-radius: var(--occ-radius-sm);
    box-shadow: var(--occ-shadow);
}

.select2-container--default .select2-results__option { color: var(--occ-ink); }

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--occ-accent-soft);
    color: var(--occ-accent);
}

/* O campo de busca do select2 vive em app/overrides.css, sozinho. A copia que
   estava aqui declarava fundo/borda/raio/cor sem !important e perdia todas para
   la — CSS que ninguem executava, e que fazia parecer que este arquivo mandava
   na aparencia do combo. */

/* Tabela premium — suaviza o look duro do .table-bordered */
.cad-premium .table {
    --bs-table-bg: transparent;
    color: var(--occ-ink);
    border-color: var(--occ-line);
}

.cad-premium .table > thead th {
    background: var(--occ-surface-2);
    color: var(--occ-ink-soft);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-color: var(--occ-line);
    vertical-align: middle;
}

.cad-premium .table > tbody td {
    border-color: var(--occ-line);
    color: var(--occ-ink);
    vertical-align: middle;
}

.cad-premium .table.table-bordered > :not(caption) > * > * { border-color: var(--occ-line); }

.cad-premium .table > tbody > tr { transition: background-color var(--occ-dur) var(--occ-ease); }
.cad-premium .table > tbody > tr:hover > * { background: var(--occ-surface-2); }

/* Linha de filtros (2º <tr> do thead) — campos compactos */
.cad-premium thead tr + tr td {
    background: var(--occ-surface);
    border-color: var(--occ-line);
}

.cad-premium thead tr + tr input,
.cad-premium thead tr + tr select,
.cad-premium thead tr + tr .form-select {
    width: 100%;
    padding: .3rem .5rem;
    font-size: .82rem;
}

/* Botões — remap por token (a classe Bootstrap permanece no HTML; o look vira premium).
   !important neutraliza as regras de utilitário do Bootstrap/Limitless (geradas com !important). */
.cad-premium .btn { transition: all var(--occ-dur) var(--occ-ease); }
.cad-premium .btn:focus-visible { outline: 2px solid var(--occ-accent); outline-offset: 2px; box-shadow: none; }

.cad-premium .btn-success {            /* ação primária (Salvar) */
    background: var(--occ-accent) !important;
    border-color: var(--occ-accent) !important;
    color: #fff !important;
}
.cad-premium .btn-success:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px var(--occ-accent);
}

.cad-premium .btn-danger {             /* ação destrutiva (Cancelar/Excluir) — ghost que preenche no hover */
    background: var(--occ-danger-soft) !important;
    border-color: transparent !important;
    color: var(--occ-danger-ink) !important;
}
.cad-premium .btn-danger:hover {
    background: var(--occ-danger) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.cad-premium .btn-light {              /* secundário neutro (Incluir/Novo) */
    background: var(--occ-surface-2) !important;
    border-color: var(--occ-line) !important;
    color: var(--occ-ink) !important;
}
.cad-premium .btn-light:hover {
    background: var(--occ-surface) !important;
    border-color: var(--occ-line-strong) !important;
    transform: translateY(-1px);
}

/* Dropdown de export — popover glass */
.cad-premium .dropdown-menu {
    background: var(--occ-glass-bg);
    -webkit-backdrop-filter: var(--occ-glass-blur);
    backdrop-filter: var(--occ-glass-blur);
    border: 1px solid var(--occ-glass-bd);
    border-radius: var(--occ-radius-sm);
    box-shadow: var(--occ-shadow);
    color: var(--occ-ink);
}

.cad-premium .dropdown-item {
    color: var(--occ-ink);
    border-radius: 8px;
    transition: background-color var(--occ-dur) var(--occ-ease), color var(--occ-dur) var(--occ-ease);
}
.cad-premium .dropdown-item:hover,
.cad-premium .dropdown-item:focus {
    background: var(--occ-accent-soft);
    color: var(--occ-accent);
}

.cad-premium .btn-outline-light {
    border-color: var(--occ-line) !important;
    color: var(--occ-ink-soft) !important;
}
.cad-premium .btn-outline-light:hover {
    background: var(--occ-surface-2) !important;
    border-color: var(--occ-line-strong) !important;
    color: var(--occ-ink) !important;
}

/* Flash messages (alert): o visual saiu daqui em 2026-09-18 e virou o padrão único de
   notificação, em notificacao.css (.alert.xn-alerta). Ficava preso a .cad-premium, então
   Dashboard e Reservas mostravam o alerta com a cara do Limitless. */

/* ==============================================================================
 *  # Formulario de cadastro 2026 — superficie continua (piloto: Cliente/Fornecedor)
 *
 *  Convive com o skin de accordion acima: as telas ainda nao migradas continuam
 *  usando `.accordion` (linhas 31-61). Nada foi apagado.
 *
 *  ESCOPO E CONTRATO: `.cad-premium` esta em 19 templates, incluindo telas
 *  operacionais (check-in, reservas, lancamentos, extrato...). Toda regra daqui
 *  para baixo exige `.cad-surface` ou `.cad-list` no seletor. Uma regra solta
 *  como `.cad-section {}` vazaria para essas telas.
 * ---------------------------------------------------------------------------- */

/* Opt-out do flex-collapse de overrides.css (`.content-inner > section`): formulario longo rola a
   pagina inteira em vez de ficar preso na altura da viewport com scroll interno.
   Mesma necessidade que levou Check-in e Lancamentos ao opt-out equivalente.
   (Este bloco nasceu para viabilizar uma barra de acoes sticky, que depois foi
   descartada; a justificativa que resta e a rolagem natural, e ela se sustenta.)
   NAO reusa `.occ-page-natural-scroll`: reservas.css:8 declara aquela classe com
   `overflow-y: auto` SEM escopo, o que criaria um scrollport interno na section
   e mudaria o referencial do position:sticky. Sao contratos diferentes.
   Especificidade (0,2,1) empata com `.content-inner > section` e vence por ordem
   de arquivo? NAO — cadastros.css (head.html:29) carrega ANTES de overrides.css
   (head.html:39). Por isso o seletor precisa ser MAIS especifico: a classe extra
   leva para (0,2,1) contra (0,1,1) do seletor de overrides.css. */
.content-inner > section.cad-scroll-host {
    display: block;
    flex: 1 0 auto;
    min-height: 0;
}
.content-inner > section.cad-scroll-host > .content {
    flex: initial;
    min-height: auto;
}

/* --- Coluna de leitura ------------------------------------------------------
   Trava a ficha em 960px e centraliza. OPT-IN: so as telas que pedirem a classe.

   Por que virou requisito e nao gosto: numa viewport de 1900px a ficha de 5 campos
   fica boiando no branco — foi a queixa que abriu esta rodada. E com as secoes em
   duas colunas (--split, abaixo) a largura livre daria colunas de ~900px para um
   input de 36px; largura demais nao e respiro, e desalinhamento entre rotulo e
   controle. 960px cabe as duas colunas com ~485px uteis cada.

   `margin-inline` e nao `margin: 0 auto`: nao zera as margens verticais que o
   .cad-list ja usa (--occ-space-5 de afastamento da ficha). */
.cad-premium .cad-column {
    max-width: 960px;
    margin-inline: auto;
}

/* --- Superficie ------------------------------------------------------------ */
/* Identidade da superficie em app/superficie.css. Aqui fica so o encaixe. */
.cad-premium .cad-surface {
    position: relative;
}

/* a formbar fica FORA do .cad-sections para sangrar ate a borda da superficie;
   o respiro mora no padding de cada .cad-section */

/* --- Barra de identidade do registro --------------------------------------- */
/* SO LEITURA: nenhum elemento focavel aqui dentro, para nao inserir controle
   antes do primeiro campo na ordem de tabulacao. O estado Ativo/Inativo NAO
   mora aqui — fica na secao Status, sem duplicar informacao. */
.cad-premium .cad-surface .cad-recordbar {
    display: flex;
    flex-wrap: wrap;    /* o aviso de registro do sistema (Forma de Pagamento) desce em tela estreita */
    align-items: baseline;
    gap: var(--occ-space-3);
    padding: var(--occ-space-4) var(--occ-space-6);
    background: var(--occ-surface-2);
    border-bottom: 1px solid var(--occ-line);
    border-radius: var(--occ-radius) var(--occ-radius) 0 0;
}
.cad-premium .cad-record-id {
    font-size: var(--occ-fs-md);
    font-weight: var(--occ-fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.cad-premium .cad-record-name {
    font-size: var(--occ-fs-sm);
    color: var(--occ-ink-soft);
    max-width: 44ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Secoes ---------------------------------------------------------------- */
/* Hierarquia por espacamento e peso, nunca por cor: nenhuma secao tem fundo. */
.cad-premium .cad-surface .cad-section {
    padding: var(--occ-space-6);
    border-top: 1px solid var(--occ-line);
}
.cad-premium .cad-sections > .cad-section:first-child { border-top: 0; }

/* --- Secoes em duas colunas (opt-in) ---------------------------------------
   `.cad-sections--split` divide as secoes em duas colunas a partir de 992px.
   Abaixo disso o modificador nao existe e o empilhamento padrao volta sozinho —
   e por isso que nao ha versao mobile para manter.

   OPT-IN e nao default das 13 telas: so vale onde a ficha e curta. PDV, Forma de
   Pagamento, UH e Produto/Servico tem secoes demais e viram duas colunas
   desequilibradas — uma com 8 campos, outra com um switch.

   Ordem de DOM = ordem de tabulacao, e ela NAO muda: as secoes continuam na mesma
   sequencia do documento, o grid so as posiciona lado a lado. O Tab segue
   abreviatura -> nome -> cor -> switches, como antes de existir a coluna.

   `stretch` (o default) e o que faz a divisoria correr a altura inteira; com
   `align-items: start` ela pararia no fim da coluna mais curta. */
@media (min-width: 992px) {
    /*  As divisorias sao o PROPRIO gap do grid, nao bordas nos filhos: um gap de 1px sobre
     *  um fundo cor de linha, com cada secao repintando --occ-surface por cima.
     *
     *  Por que assim, e nao border-left na coluna da direita: qualquer regra por posicao
     *  (nth-child) depende da PARIDADE dos filhos, e uma secao --full desloca essa paridade
     *  — com "Identificacao" larga em primeiro, a borda cairia na coluna errada. O gap nao
     *  sabe nem quer saber onde cada secao caiu: ele desenha a linha entre o que existe.
     *
     *  ⚠️ REGRA DE USO: nao deixar CELULA VAZIA na ultima linha. Com 3 secoes, a terceira
     *  precisa de --full; senao o fundo cor de linha aparece como um retangulo tingido no
     *  espaco que sobrou. Medido: 3 e 5 secoes deixam buraco, 2 e 4 nao. */
    .cad-premium .cad-sections--split {
        display: grid;
        grid-template-columns: 1.25fr 1fr;
        gap: 1px;
        background: var(--occ-line);
    }
    .cad-premium .cad-sections--split > .cad-section {
        border-top: 0;
        background: var(--occ-surface);
    }
    /*  A secao que ocupa a largura inteira. Serve a dois propositos ao mesmo tempo: dar ar
     *  a "Identificacao", que costuma ter os campos mais longos, e fechar o buraco da
     *  ultima linha quando o numero de secoes e impar. */
    .cad-premium .cad-sections--split > .cad-section--full { grid-column: 1 / -1; }
}

/* Grid e nao flex: com flex, o max-width de leitura do hint limita o flex base
   size, o item para de estourar a linha e nunca quebra — o hint cola no titulo. */
.cad-premium .cad-section-head {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--occ-space-1) var(--occ-space-3);
    margin-bottom: var(--occ-space-5);
}
.cad-premium .cad-section-title {
    grid-row: 1;
    margin: 0;
    font-size: var(--occ-fs-md);
    font-weight: var(--occ-fw-semibold);
    color: var(--occ-ink);
    letter-spacing: -.005em;
}
.cad-premium .cad-section-head .cad-count {
    grid-row: 1;
    justify-self: start;
    padding: 1px var(--occ-space-2);
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: 99px;
    font-size: var(--occ-fs-micro);
    font-weight: var(--occ-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--occ-ink-soft);
}
.cad-premium .cad-section-hint {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    max-width: 62ch;
    font-size: var(--occ-fs-sm);
    color: var(--occ-ink-soft);
}

/* --- Campos ---------------------------------------------------------------- */
/* O motor de grid continua sendo o .row/.col-* do Bootstrap: dois modelos de
   responsividade convivendo seria pior, e "largura comunica importancia" se
   resolve so retunando spans. Aqui so o ritmo vertical/horizontal. */
/* O respiro vertical vem de row-gap, NAO do --bs-gutter-y. O gutter do Bootstrap
   funciona por margin-top negativa na .row + margin-top positiva nos filhos, e
   aqui o tema anula essas margens: medido 0px de respiro entre duas .row.cad-fields
   consecutivas (Complemento -> Bairro no cartao de endereco ficava com 1px).
   row-gap age direto no flex container e nao depende dessa gambiarra. */
.cad-premium .cad-surface .row.cad-fields {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    row-gap: var(--occ-space-5);
}
.cad-premium .cad-surface .row.cad-fields + .row.cad-fields { margin-top: var(--occ-space-5); }

.cad-premium .cad-surface .cad-field { display: flex; flex-direction: column; min-width: 0; }

/* nomeia um padrao que ja existe 34x ad hoc no projeto (d-flex align-items-center
   gap-2 mb-1), 20 delas so nesta tela */
/*  O cabecalho do campo RESERVA duas linhas de rotulo. Historia em dois atos:
 *
 *  ATO 1 (2026-08-26): um rotulo que quebrava em duas linhas empurrava o proprio campo para
 *  baixo e ele saia do alinhamento dos vizinhos. Medido: 15px em Cliente/Fornecedor
 *  ("Taxa de Comissão (%)"), 13px em Produto/Servico e no grupo dele, 12px em PDV. A
 *  correcao foi `flex: 1 0 auto` no cabecalho: as colunas do Bootstrap ja esticam para a
 *  mesma altura, entao o cabecalho consumia a sobra, o rotulo colava na base e o campo
 *  comecava no mesmo y em todos.
 *
 *  ATO 2 (2026-08-28): aquilo esticava ate a altura da COLUNA, e a coluna cresce por
 *  QUALQUER motivo — inclusive por uma mensagem embaixo do campo. Bastava um aviso de digito
 *  verificador ou um erro de validacao para o vizinho ganhar 38px de cabecalho: rotulo e
 *  campo desciam so naquela linha e a tela parecia quebrada (relatado com print).
 *
 *  A saida e reservar DUAS linhas para todos os cabecalhos e tirar o crescimento. Rotulo de
 *  uma linha fica ancorado na base (align-items: flex-end), rotulo de duas ocupa a altura
 *  toda, os campos alinham sempre — e a mensagem cresce para baixo sem tocar em ninguem.
 *  Custa ~12px por linha de campos: o preco de um alinhamento que nao depende do conteudo.
 *
 *  Por que NAO alinhar a .row pela base: um campo em erro cresce para baixo e o controle
 *  dele subiria em relacao aos vizinhos -- trocaria um desalinho por outro, justamente no
 *  estado em que a pessoa mais precisa de clareza. */
.cad-premium .cad-field-head {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: var(--occ-space-2);
    margin-bottom: 6px;
    min-height: calc(2 * var(--occ-lh-tight) * var(--occ-fs-xs));
}
.cad-premium .cad-surface .form-label {
    margin: 0;
    font-size: var(--occ-fs-xs);
    font-weight: var(--occ-fw-medium);
    line-height: var(--occ-lh-tight);
    color: var(--occ-ink-soft);
    letter-spacing: var(--occ-ls-label);
}
/* Obrigatorio por CLASSE, nao por :has([required]): so edicao_razaoSocial tem o
   atributo no HTML. tipoPessoa, tipo e logradouro mostram "*" sem required, e
   taxaComissao e @NotNull sem "*" nem required — :has() reforcaria 1 rotulo so. */
.cad-premium .cad-surface .cad-field--req > .cad-field-head > .form-label,
.cad-premium .cad-surface .cad-field--req > .form-label {
    color: var(--occ-ink);
    font-weight: var(--occ-fw-semibold);
}

/* altura e raio dos controles. A forma do seletor REPETE a de cadastros.css:66-76
   — (0,5,1) com os quatro :not() — mais dois contextos, chegando a (0,7,1). Um
   seletor simples como `.cad-surface .form-control` (0,2,0) PERDE, e o raio
   valeria para <select> e nao para <input>, quebrando o alinhamento da linha. */
.cad-premium .cad-surface .cad-field .form-control,
.cad-premium .cad-surface .cad-field .form-select,
.cad-premium .cad-surface .cad-field input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close),
.cad-premium .cad-surface .cad-field select {
    height: var(--occ-field-h);
    padding: 0 var(--occ-space-3);
    border-radius: var(--occ-radius-xs);
    font-size: var(--occ-fs-base);
}
.cad-premium .cad-surface .cad-field input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }

/* select2 DENTRO do formulario — so metrica.
   custom.js:179 roda `$('.select2').select2()` na pagina inteira; o plugin ESCONDE o
   <select> original e insere um `.select2-container` proprio. As regras de altura e raio
   logo acima miram o <select>, entao nao alcancam esse container: em uh o combo de
   Categoria ficava 42px/raio 10px encostado num input de 36px/raio 8px.

   !important e OBRIGATORIO, pela MESMA razao do bloco de erro logo abaixo:
   overrides.css declara `.select2-container--default .select2-selection--single`
   com `height: 42px !important` (e borda, raio e display) GLOBAL, sem escopo, e carrega
   por ULTIMO (head.html:39). estadia.css:400-407 faz o mesmo com 38px. Especificidade
   maior nao basta contra `!important` — so `!important` vence `!important`.
   O escopo em `.cad-surface .cad-field` e o que impede isto de vazar para /reservas,
   /lancamentos e /estadia, que continuam com os 42px do tema.
   Cor, borda e foco seguem vindo de overrides.css — aqui so a metrica. */
.cad-premium .cad-surface .cad-field .select2-container--default .select2-selection--single {
    height: var(--occ-field-h) !important;
    min-height: var(--occ-field-h) !important;
    padding: 0 !important;
    border-radius: var(--occ-radius-xs) !important;
}
/* padding-left 12px = o mesmo `padding: 0 var(--occ-space-3)` do <input>/<select>
   nativo, para o texto do combo nascer na mesma vertical do campo ao lado
   (overrides.css poe 0.85rem = 13,6px no __rendered). */
.cad-premium .cad-surface .cad-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: var(--occ-space-3) !important;
    font-size: var(--occ-fs-base) !important;
}
/* a seta acompanha a altura nova; o `right` alinha com o chevron do <select> nativo,
   que encosta no padding de 12px (overrides.css poe 8px na __arrow) */
.cad-premium .cad-surface .cad-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--occ-field-h) !important;
    right: var(--occ-space-3) !important;
}

/* Estado de erro (.is-invalid) e mensagem (.xn-erro) MUDARAM DE ARQUIVO em 2026-08-20:
   foram para app/form-validacao.css, SEM o escopo `.cad-premium .cad-surface .cad-field`.
   O motivo esta la: exigir tres classes aninhadas mantinha o estado de erro fora de
   login.html, e-mail.html e reservas.html. Nao traga de volta para ca. */

/* --- Validacao no cliente (ao sair do campo) -------------------------------
   O estado de ERRO reusa .is-invalid, o mesmo do servidor: um so visual para a
   mesma coisa. O que e novo aqui e a confirmacao POSITIVA — um check discreto
   quando o campo passa, que a pesquisa aponta como o par necessario da validacao
   on-blur (sem ele o usuario nao sabe se acertou ou se ninguem olhou).
   Desenhado como background-image e nao elemento posicionado: nao mexe no fluxo,
   nao precisa de matematica de offset e nao entra na arvore de acessibilidade
   (o estado real vai por aria-invalid, no JS). Nao vale para <select>, que ja usa
   background-image para o chevron e sempre tem valor. */
.cad-premium .cad-surface .cad-field[data-valido] .form-control,
.cad-premium .cad-surface .cad-field[data-valido] input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close) {
    border-color: var(--st-confirmada);
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* aviso nao-bloqueante (DV do CPF/CNPJ) — convive com .text-danger no mesmo campo */
.cad-premium .cad-surface .cad-field .form-text {
    margin-top: 5px;
    font-size: var(--occ-fs-xs);
    line-height: var(--occ-lh-tight);
    color: var(--occ-ink-soft) !important;
}

/* Icones da superficie do formulario, por SIGNIFICADO e nao por posicao:
   ph-warning-circle = ajuda (tooltip), ph-info = campo exibido mas nao gravado.
   Escopado em .cad-surface e nao em .cad-field-head porque os mesmos icones
   tambem aparecem no cabecalho da lista tabular e no micro-rotulo, onde a regra
   antiga nao alcancava e o aviso de "nao grava" saia cinza. */
.cad-premium .cad-surface .ph-warning-circle { color: var(--occ-ink-soft) !important; }
.cad-premium .cad-surface .ph-info { color: var(--occ-warn) !important; }
/* excecao: o chip da barra de acoes usa ph-warning-circle como sinal de atencao.
   (0,3,1) para vencer o (0,3,0) da regra generica acima. */
.cad-premium .cad-formbar .cad-chip-warn i { color: var(--occ-warn) !important; }

/* O aviso amarelo de campo (.cad-hint-warn, DV do CPF/CNPJ) saiu em 2026-10-01: virou o
   .xn-aviso de form-validacao.css, montado por FormValidacao.avisar. */

/* --- Dropdown do <select> --------------------------------------------------
 *
 *  A lista que abre no <select> sempre foi desenhada pelo SISTEMA OPERACIONAL,
 *  não pela página: cantos retos, azul do Windows, fonte do sistema. Era o único
 *  pedaço da tela fora do design system, e não havia CSS que alcançasse.
 *
 *  `appearance: base-select` muda isso. Não é baseline (Chrome 135+, Safari 27,
 *  Firefox em prototipagem), mas o fallback é PERFEITO: quem não suporta continua
 *  vendo exatamente o select nativo de hoje. Zero risco, escondido atrás de
 *  @supports — nenhuma linha aqui roda em navegador que não entenda.
 *
 *  Escopo em .cad-surface/.cad-list: só as estruturas desta tela. Quando as irmãs
 *  migrarem, herdam junto.
 * ---------------------------------------------------------------------------- */
@supports (appearance: base-select) {

    /* Opt-in: precisa estar no select E no picker. */
    .cad-premium .cad-surface select,
    .cad-premium .cad-surface select::picker(select),
    .cad-premium .cad-list select,
    .cad-premium .cad-list select::picker(select) {
        appearance: base-select;
    }

    /* O base-select transforma o <select> num CONTÊINER com duas partes: o valor
       escolhido e o ::picker-icon. Sem dar layout a ele, a seta cai para onde o
       fluxo mandar — foi o que acontecia (ela ia parar embaixo, à esquerda).
       O flex aqui é o que põe o valor à esquerda e a seta encostada à direita.
       E background-image:none tira a seta do Bootstrap, que senão vinha junto. */
    .cad-premium .cad-surface select,
    .cad-premium .cad-list select {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--occ-space-2);
        background-image: none;
        text-align: left;
    }
    /* (0,3,1) de proposito: no tema ESCURO o bootstrap_limitless.css devolve a seta do Bootstrap
       com `html[data-color-theme=dark] .form-select`, (0,2,1) -- empata com a regra acima e vence
       pela ordem de carga. Eram duas setas em todo <select> escuro: a do ::picker-icon e esta, o
       "alguma coisa atras de Ativos" do XWM-85. */
    .cad-premium .cad-surface select.form-select,
    .cad-premium .cad-list select.form-select {
        background-image: none;
    }

    /* Troca o triângulo sólido do sistema pelo mesmo chevron fino usado no resto
       da tela — era ele o "duro e padrão" que destoava. */
    .cad-premium .cad-surface select::picker-icon,
    .cad-premium .cad-list select::picker-icon {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
        flex: none;
        width: 14px;
        height: 14px;
        transition: rotate var(--occ-dur) var(--occ-ease);
    }
    .cad-premium .cad-surface select:open::picker-icon,
    .cad-premium .cad-list select:open::picker-icon { rotate: 180deg; }

    /* O painel. Mesma receita do dropdown de exportação que já existe na tela
       (cadastros.css:250-258): vidro + linha + sombra. */
    .cad-premium .cad-surface select::picker(select),
    .cad-premium .cad-list select::picker(select) {
        margin-top: var(--occ-space-1);
        padding: var(--occ-space-1);
        background: var(--occ-glass-bg);
        -webkit-backdrop-filter: var(--occ-glass-blur);
        backdrop-filter: var(--occ-glass-blur);
        border: 1px solid var(--occ-glass-bd);
        border-radius: var(--occ-radius-sm);
        box-shadow: var(--occ-shadow-lg);
        /* Anima só transform, NUNCA opacity: se a transição não rodar, um painel
           com opacity:0 ficaria invisível e o usuário não conseguiria escolher
           nada. Deslocado 4px é inofensivo. `overlay`/`display` precisam de
           allow-discrete para o painel sair da top layer só no fim. */
        transform: translateY(-4px);
        transition:
            transform .16s var(--occ-ease),
            display .16s allow-discrete,
            overlay .16s allow-discrete;
    }
    .cad-premium .cad-surface select:open::picker(select),
    .cad-premium .cad-list select:open::picker(select) { transform: none; }
    @starting-style {
        .cad-premium .cad-surface select:open::picker(select),
        .cad-premium .cad-list select:open::picker(select) { transform: translateY(-4px); }
    }

    .cad-premium .cad-surface select option,
    .cad-premium .cad-list select option {
        padding: var(--occ-space-2) var(--occ-space-3);
        border: 0;
        border-radius: var(--occ-radius-xs);
        font-size: var(--occ-fs-base);
        color: var(--occ-ink);
        background: transparent;
        transition: background-color var(--occ-dur) var(--occ-ease), color var(--occ-dur) var(--occ-ease);
    }
    .cad-premium .cad-surface select option:hover,
    .cad-premium .cad-list select option:hover { background: var(--occ-surface-2); }

    /* A opção focada vinha com um contorno PRETO grosso do sistema — o mesmo
       "duro" que estamos tirando. Trocado pelo anel de foco do design system,
       com offset negativo para não vazar do painel. Removê-lo por completo não
       serve: é por ele que se enxerga a navegação por teclado. */
    .cad-premium .cad-surface select option:focus,
    .cad-premium .cad-list select option:focus { outline: none; }
    .cad-premium .cad-surface select option:focus-visible,
    .cad-premium .cad-list select option:focus-visible {
        outline: 2px solid var(--occ-accent);
        outline-offset: -2px;
    }

    /* selecionado: mesmo tratamento do item ativo do dropdown de exportação */
    .cad-premium .cad-surface select option:checked,
    .cad-premium .cad-list select option:checked {
        background: var(--occ-accent-soft);
        color: var(--occ-accent);
        font-weight: var(--occ-fw-semibold);
    }

    /* O check do base-select é um glifo do sistema e reintroduz exatamente o
       visual que estamos tirando. O tint + peso já dizem qual está escolhido. */
    .cad-premium .cad-surface select option::checkmark,
    .cad-premium .cad-list select option::checkmark { display: none; }

    @media (prefers-reduced-motion: reduce) {
        .cad-premium .cad-surface select::picker(select),
        .cad-premium .cad-list select::picker(select) { transition: none; transform: none; }
        .cad-premium .cad-surface select::picker-icon,
        .cad-premium .cad-list select::picker-icon { transition: none; }
    }
}

/* --- Lista tabular (Contatos) ---------------------------------------------- */
/* Cabecalho de coluna UNICO em vez de rotulo repetido por linha. So vale para
   Contatos: a soma de minimos aqui e 554px + gaps, contra ~916px de Enderecos —
   grid nao reflui, estoura. Por isso Enderecos continua em cartao. */
.cad-premium .cad-datalist {
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm);
    overflow: hidden;
}
.cad-premium .cad-datalist-head,
.cad-premium .cad-datarow {
    display: grid;
    grid-template-columns: var(--cad-cols, repeat(auto-fit, minmax(160px, 1fr)));
    gap: var(--occ-space-3);
    align-items: start;
    padding: var(--occ-space-3) var(--occ-space-4);
}
.cad-premium .cad-datalist-head {
    background: var(--occ-surface-2);
    border-bottom: 1px solid var(--occ-line);
    font-size: var(--occ-fs-micro);
    font-weight: var(--occ-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--occ-ls-eyebrow);
    color: var(--occ-ink-soft);
}
.cad-premium .cad-datalist-head > span { display: flex; align-items: center; gap: 5px; }
.cad-premium .cad-datarow {
    border-top: 1px solid var(--occ-line);
    transition: background-color var(--occ-dur) var(--occ-ease);
}
.cad-premium .cad-datalist-body > .cad-datarow:first-child { border-top: 0; }
.cad-premium .cad-datarow:hover,
.cad-premium .cad-datarow:focus-within { background: var(--occ-surface-2); }

/* label ENVOLVENTE: associacao implicita. E a unica forma que sobrevive ao clone
   do <template>, onde nao ha th:field e portanto nao ha id gerado. Corrige de
   passagem um defeito atual — os <label> das linhas repetiveis nao tem `for` nem
   envolvem nada, sao rotulos orfaos sem nome acessivel. */
.cad-premium .cad-cell { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.cad-premium .cad-microlabel {
    display: none;
    margin-bottom: var(--occ-space-1);
    font-size: var(--occ-fs-micro);
    font-weight: var(--occ-fw-semibold);
    color: var(--occ-ink-soft);
}
.cad-premium .cad-cell--action { align-items: flex-end; justify-content: flex-start; }
.cad-premium .cad-datarow .btn-remover-linha {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.cad-premium .btn-remover-linha {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-line) !important;
    color: var(--occ-ink-soft) !important;
    border-radius: var(--occ-radius-xs) !important;
}
.cad-premium .btn-remover-linha:hover {
    background: var(--occ-danger-soft) !important;
    border-color: var(--occ-danger-ink) !important;
    color: var(--occ-danger-ink) !important;
    transform: none;
}

/* Abaixo de 1200px o cabecalho de coluna some e os micro-rotulos voltam: nunca
   existe campo sem rotulo na tela. */
@media (max-width: 1199.98px) {
    .cad-premium .cad-datalist-head { display: none; }
    /* row-gap maior que column-gap: empilhado, o `gap` unico de 12px deixava o
       rotulo da celula de baixo colado no controle da de cima. Alinha com o
       row-gap de 24px das linhas de campo. */
    .cad-premium .cad-datarow {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--occ-space-3);
        row-gap: var(--occ-space-5);
    }
    .cad-premium .cad-microlabel { display: block; }
    .cad-premium .cad-cell--action { grid-column: span 2; align-items: flex-start; }
}
@media (max-width: 767.98px) {
    .cad-premium .cad-datarow { grid-template-columns: 1fr; }
    .cad-premium .cad-cell--action { grid-column: span 1; }
}

/* --- Cartao de endereco ---------------------------------------------------- */
/* Endereco NAO vira lista tabular: seus 10 campos somam ~916px de minimos e o
   grid estouraria antes de refluir (grid nao reflui, overflowa). Cartao compacto
   com 3 linhas semanticas mede ~236px contra ~400px do layout anterior. */
.cad-premium .cad-repeat-list { display: flex; flex-direction: column; gap: var(--occ-space-3); }
/* Identidade da superficie em app/superficie.css. Aqui fica so o encaixe. */
.cad-premium .cad-address-card {
    position: relative;
    padding: var(--occ-space-4);
    transition: border-color var(--occ-dur) var(--occ-ease);
}
.cad-premium .cad-address-card:focus-within { border-color: var(--occ-line-strong); }
/* input --occ-surface sobre superficie --occ-surface-2: sem isto o campo fica
   invisivel ate receber foco, nos dois temas. */
.cad-premium .cad-address-card .form-control,
.cad-premium .cad-address-card .form-select,
.cad-premium .cad-address-card input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close),
.cad-premium .cad-address-card select { background-color: var(--occ-surface); }

/* mesmo respiro das linhas de campo (row-gap), para o cabecalho do cartao nao
   ficar mais colado no primeiro rotulo do que as linhas ficam entre si */
.cad-premium .cad-card-head {
    display: flex;
    align-items: flex-end;
    gap: var(--occ-space-3);
    margin-bottom: var(--occ-space-5);
    padding-right: 44px;
}
.cad-premium .cad-eyebrow {
    font-size: var(--occ-fs-micro);
    font-weight: var(--occ-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--occ-ls-eyebrow);
    color: var(--occ-ink-soft);
}
.cad-premium .cad-card-head .cad-eyebrow { padding-bottom: 9px; }
.cad-premium .cad-card-head .cad-field { max-width: 280px; flex: 1 1 auto; }

/* botao remover: ULTIMO no DOM (nao no meio da sequencia de Tab, onde Space
   removeria a linha sem confirmacao) e posicionado no canto por CSS. Em repouso
   fica em --occ-ink-soft (4,76:1, passa SC 1.4.11), nunca em faint. */
.cad-premium .cad-address-card > .btn-remover-linha {
    position: absolute;
    top: var(--occ-space-4);
    right: var(--occ-space-4);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* subgrupo Exterior: hairline + eyebrow isolam codigoPais/cidadeEstrangeiro dos
   9 campos de endereco brasileiro, para o operador parar de ler "Codigo do Pais"
   como obrigatorio de rotina. */
/* Assimetrico de proposito: mais respiro ACIMA do filete que abaixo, para a linha
   se ligar ao que vem depois. 24px acima acompanha o ritmo das linhas de campo. */
.cad-premium .cad-subgroup {
    margin-top: var(--occ-space-5);
    padding-top: var(--occ-space-4);
    border-top: 1px solid var(--occ-line);
}
.cad-premium .cad-subgroup > .cad-eyebrow { display: block; margin-bottom: var(--occ-space-3); }

/* --- Empty state + CTA fundidos -------------------------------------------- */
/* O JS alterna .d-none em #vazio-<prefixo> (fragment:150-153). .d-none e
   display:none !important, entao display:flex aqui e seguro sem !important.
   O .cad-empty vem ANTES da lista no DOM porque o combinador de irmao adjacente
   que funde o CTA so alcanca elementos posteriores. */
.cad-premium .cad-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--occ-space-6) var(--occ-space-4);
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm) var(--occ-radius-sm) 0 0;
    border-bottom: 0;
}
.cad-premium .cad-empty i {
    font-size: 1.75rem;
    color: var(--occ-ink-faint);
    opacity: .75;
    margin-bottom: var(--occ-space-3);
}
.cad-premium .cad-empty-title {
    margin: 0 0 var(--occ-space-1);
    font-size: var(--occ-fs-base);
    font-weight: var(--occ-fw-semibold);
    color: var(--occ-ink);
}
/* subtexto em ink-soft, NAO faint: e ele que explica a consequencia */
.cad-premium .cad-empty-sub {
    margin: 0;
    max-width: 46ch;
    font-size: var(--occ-fs-sm);
    color: var(--occ-ink-soft);
}
.cad-premium .cad-list-actions { display: flex; margin-top: var(--occ-space-4); }

/* Botao de adicionar com o mesmo gesto do dropzone de documento do Check-in
   (.occ-dropzone, check-in.css:687-701): borda tracejada em repouso que vira
   accent com fill --occ-accent-soft no hover. Reusa a receita existente, so que
   aplicada ao BOTAO e nao ao bloco inteiro.
   background transparent (e nao --occ-surface-2 como no dropzone) porque este
   botao aparece sobre os DOIS fundos: dentro do empty state (surface-2) e solto
   embaixo da lista (surface). !important para vencer .cad-premium .btn-light
   (linha ~220), que tambem usa !important. */
.cad-premium .cad-btn-add {
    background: transparent !important;
    border: 2px dashed var(--occ-line-strong) !important;
    border-radius: var(--occ-radius-sm) !important;
    color: var(--occ-ink) !important;
    transition: border-color var(--occ-dur) var(--occ-ease), background-color var(--occ-dur) var(--occ-ease), color var(--occ-dur) var(--occ-ease);
}
.cad-premium .cad-btn-add:hover,
.cad-premium .cad-btn-add:focus-visible {
    border-color: var(--occ-accent) !important;
    background: var(--occ-accent-soft) !important;
    color: var(--occ-accent) !important;
    /* sem translateY: o dropzone de referencia nao levanta, so acende */
    transform: none;
}
/* vazio -> o CTA vira o rodape da propria caixa: um bloco visual so, um botao so.
   Irmao GERAL (~) e nao adjacente (+): a .cad-datalist fica entre os dois no DOM
   (oculta quando vazio), entao `+` nunca casaria. */
.cad-premium .cad-empty:not(.d-none) ~ .cad-list-actions {
    margin-top: 0;
    justify-content: center;
    padding: var(--occ-space-4);
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-top: 0;
    border-radius: 0 0 var(--occ-radius-sm) var(--occ-radius-sm);
}
/* Vazio -> a lista some (senao o cabecalho de coluna fica pendurado sobre o
   empty state). Cobre as DUAS formas de lista: .cad-datalist (Contatos) e
   .cad-repeat-list (Enderecos).
   O estado inicial de .d-none e renderizado pelo SERVIDOR (th:classappend no
   #vazio-*): sem isso, qualquer erro de JS anterior ao atualizarEstadoVazio
   deixaria a lista escondida sobre dados reais. */
.cad-premium .cad-empty:not(.d-none) ~ .cad-datalist,
.cad-premium .cad-empty:not(.d-none) ~ .cad-repeat-list { display: none; }

/* ==============================================================================
 *  # Movimento
 *
 *  Regra de escopo: TUDO aqui depende de `.cad-anim-ready`, classe que o JS poe
 *  na superficie DEPOIS do primeiro paint. Sem esse guarda o @starting-style
 *  dispara no carregamento e a tela inteira "nasce" animada a cada F5 — que e
 *  exatamente o tipo de movimento ambiente que cansa em 8h de recepcao.
 *  O movimento aqui so acontece quando o operador AGE.
 * ---------------------------------------------------------------------------- */

/* --- Troca do empty state pela lista --------------------------------------- */
/* transition-behavior: allow-discrete e o que permite animar algo saindo de
   display:none. `.d-none` do Bootstrap e display:none !important — o !important
   decide quem vence a cascata, nao impede a transicao do valor computado. */
.cad-premium .cad-anim-ready .cad-empty {
    transition:
        opacity var(--occ-dur) var(--occ-ease),
        transform var(--occ-dur) var(--occ-ease),
        display var(--occ-dur) allow-discrete;
}
/* SAIDA pode desaparecer: se a transicao nao rodar, o bloco some — que e o
   comportamento desejado de qualquer forma. */
.cad-premium .cad-anim-ready .cad-empty.d-none { opacity: 0; transform: translateY(-6px); }
.cad-premium .cad-anim-ready .cad-empty:not(.d-none) { opacity: 1; transform: none; }

/* ENTRADA parte deslocada, NAO invisivel — e de proposito, nao esquecimento.
   Transicao depende de frames; num contexto que nao os produz o elemento fica
   PARADO no valor do @starting-style. Se esse valor fosse opacity:0, o empty
   state ficaria invisivel e o usuario veria um vazio sem explicacao no lugar de
   "Nenhum contato adicionado". Com transform, o pior caso e o bloco 6px fora do
   lugar — visivel e legivel. Animacao cosmetica nunca pode esconder conteudo. */
@starting-style {
    .cad-premium .cad-anim-ready .cad-empty:not(.d-none) { transform: translateY(-6px); }
}

/* --- Linhas e cartoes entrando/saindo -------------------------------------- */
/* match-element gera o nome do snapshot por elemento — sem ele seria preciso um
   view-transition-name UNICO por linha, gerado em JS e renumerado a cada remocao.
   Baseline desde out/2025 (Chrome/Edge, Safari 18.2, Firefox 144). */
@supports (view-transition-name: match-element) {
    .cad-premium .cad-anim-ready .cad-datarow,
    .cad-premium .cad-anim-ready .cad-address-card {
        view-transition-name: match-element;
        view-transition-class: cad-linha;
    }
}

/* Os pseudo-elementos de view transition vivem na RAIZ do documento, entao nao
   podem ser escopados em .cad-premium — o namespace da classe e o escopo. */
::view-transition-group(.cad-linha) {
    animation-duration: .26s;
    animation-timing-function: var(--occ-ease);
}
::view-transition-old(.cad-linha) { animation: cad-vt-saida .18s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(.cad-linha) { animation: cad-vt-entrada .26s cubic-bezier(0, 0, .2, 1) both; }

@keyframes cad-vt-saida { to { opacity: 0; transform: translateX(-12px); } }
@keyframes cad-vt-entrada { from { opacity: 0; transform: translateX(12px); } }

@media (prefers-reduced-motion: reduce) {
    .cad-premium .cad-anim-ready .cad-empty { transition: none; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/*  O switch do GRID nascia 35x20 -- abaixo dos 24px que a WCAG 2.5.8 pede como minimo de
 *  alvo -- enquanto o do FORMULARIO ja media 44x24 (ver .cad-toggle-row .form-check-input
 *  logo abaixo). Duas medidas para o mesmo controle na mesma tela, e uma delas reprovando.
 *
 *  Nao esta sob media query de proposito: 2.5.8 vale para qualquer ponteiro, nao so toque.
 *  Custo: a linha do grid fica ~4px mais alta. */
.cad-premium .cad-list .form-check-input {
    width: 44px;
    height: 24px;
}

/* --- Bloco Status ---------------------------------------------------------- */
.cad-premium .cad-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--occ-space-4);
    padding: 14px var(--occ-space-4);
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm);
}
.cad-premium .cad-toggle-text { flex: 1 1 auto; min-width: 0; }
.cad-premium .cad-toggle-title {
    display: block;
    font-size: var(--occ-fs-base);
    font-weight: var(--occ-fw-semibold);
    color: var(--occ-ink);
}
.cad-premium .cad-toggle-sub {
    display: block;
    font-size: var(--occ-fs-sm);
    color: var(--occ-ink-soft);
}
/* o switch encosta a direita pelo flex; .form-check-reverse nao e mais preciso */
.cad-premium .cad-toggle-row .form-check {
    flex: none;
    margin: 0;
    padding: 0;
    min-height: 0;
}
.cad-premium .cad-toggle-row .form-check .form-label { margin: 0; }
.cad-premium .cad-toggle-row .form-check-input {
    float: none;
    margin: 0;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

/* --- Grupo de switches (opt-in) --------------------------------------------
   Junta switches irmaos numa caixa so, separados por hairline, em vez de cada um
   ser um cartao com borda e raio proprios.

   Por que existe: dois cartoes empilhados leem como duas decisoes sem relacao. Em
   Status UH os dois dizem respeito ao MESMO assunto — o que o sistema pode fazer
   com uma UH neste status — e a caixa unica e o que diz isso sem gastar um segundo
   cabecalho de secao (que era exatamente o "informacao em excesso" da queixa).

   O modificador mora no CONTAINER e nao na linha: o fragmento toggleRow e
   compartilhado por 11 telas e sua assinatura e POSICIONAL, entao um parametro a
   mais para "estou dentro de um grupo" quebraria as outras 10 de uma vez.

   `overflow: hidden` para o fundo das linhas respeitar o raio da caixa. */
.cad-premium .cad-toggle-group {
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm);
    overflow: hidden;
}
.cad-premium .cad-toggle-group > .cad-toggle-row {
    background: transparent;
    border: 0;
    border-radius: 0;
}
.cad-premium .cad-toggle-group > .cad-toggle-row + .cad-toggle-row {
    border-top: 1px solid var(--occ-line);
}

/* --- Aviso de estado da tela ----------------------------------------------- */
/* O .cad-notice virou o alerta de aviso do padrão de notificação (2026-09-18): banner de
   estado usa .alert.xn-alerta.xn-tom-warning + occ-persistent-alert. Ver notificacao.css. */

/*  .text-danger vem do tema Limitless e e o que pinta a linha "Nao foi possivel carregar a
 *  lista" dentro do grid. Medido: 3,76:1 sobre branco -- reprova AA. Aqui ele passa a usar
 *  o vermelho de TEXTO, que da 4,83. O escopo em .cad-premium evita mexer no resto do app. */
.cad-premium .text-danger { color: var(--occ-danger-ink) !important; }

/* --- Barra de acoes -------------------------------------------------------- */
/* Bloco no fim do formulario, NAO sticky: acompanhar a rolagem punha a barra
   flutuando sobre o conteudo (o CTA da lista aparecia por tras do vidro) e
   competia com a alca do rodape retratil. Aqui ela fecha a superficie, com o
   mesmo tratamento da .cad-recordbar que a abre — surface-2 + hairline. */
.cad-premium .cad-surface .cad-formbar {
    display: flex;
    align-items: center;
    gap: var(--occ-space-3);
    padding: var(--occ-space-4) var(--occ-space-6);
    background: var(--occ-surface-2);
    border-top: 1px solid var(--occ-line);
    border-radius: 0 0 var(--occ-radius) var(--occ-radius);
}
.cad-premium .cad-formbar-spacer { flex: 1 1 auto; }

/* chip "Nao grava" — e um <button> para alcancar teclado: o padrao do projeto
   (<span> com tooltip do Bootstrap) so responde a mouse, e este e o aviso mais
   importante da tela. Texto em --occ-ink: cor de estado nunca carrega texto
   (--occ-warn sobre superficie da 2,15:1). */
.cad-premium .cad-chip-warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--occ-warn-soft);
    border: 1px solid var(--occ-warn);
    border-radius: 99px;
    font-size: var(--occ-fs-xs);
    font-weight: var(--occ-fw-medium);
    color: var(--occ-ink);
    cursor: help;
}
.cad-premium .cad-chip-warn i { color: var(--occ-warn); }
.cad-premium .cad-chip-warn:focus-visible { outline: 2px solid var(--occ-accent); outline-offset: 2px; }

/* Cancelar: peso baixo tambem no movimento — sem fundo, sem borda, sem translate.
   Altura de clique preservada em --occ-field-h. */
.cad-premium .cad-btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: var(--occ-space-2);
    height: var(--occ-field-h);
    padding: 0 var(--occ-space-4);
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--occ-radius-xs);
    font-size: var(--occ-fs-base);
    font-weight: var(--occ-fw-medium);
    color: var(--occ-ink-soft) !important;
}
.cad-premium .cad-btn-quiet:hover {
    background: var(--occ-surface-2) !important;
    color: var(--occ-ink) !important;
    transform: none;
}

/* Salvar reusa o remap teal de .btn-success (linhas 198-207); aqui so ganha peso. */
.cad-premium .cad-formbar .btn-success {
    min-width: 120px;
    border-radius: var(--occ-radius-xs);
    font-weight: var(--occ-fw-semibold);
    box-shadow: var(--occ-shadow-sm);
}

/* --- Superficie irma da listagem ------------------------------------------- */
.cad-premium .cad-list { margin-top: var(--occ-space-5); }

/* --- A listagem dentro do popup (experimento, 2026-08-25) --------------------
 *  O grid nao e COPIADO para o modal: o proprio no .cad-list e MOVIDO para dentro
 *  do .modal-body ao abrir e devolvido ao lugar ao fechar (script em uh-status.html).
 *  Copiar duplicaria os ids que todo o JS da tela resolve por getElementById, e
 *  metade dos comandos passaria a agir sobre a copia errada, em silencio.
 *
 *  Como o .cad-list e uma .cad-surface, dentro do modal ele chega com borda, raio,
 *  sombra e margem -- moldura dentro de moldura. Aqui esses tracos saem.
 *
 *  ESCOPO: tudo exige .modal no seletor, entao e INERTE para as 12 telas irmas, que
 *  seguem com a listagem na pagina. .modal .cad-premium e (0,3,0) e vence o
 *  .cad-premium .cad-surface (0,2,0) que pinta a superficie. */
.modal .cad-premium .cad-list {
    margin-top: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* o padding ja vem do .modal-body; manter os dois daria respiro dobrado embaixo */
.modal .cad-premium .cad-list .table-responsive { padding: 0; }
/* o titulo "Registros" sai porque o CABECALHO DO MODAL ja diz isso. Sobram Exportar e
   Limpar Filtros, que viram a barra de ferramentas do popup -- e a .cad-list-rule
   empurra os dois para a direita sozinha, sem regra nova. */
.modal .cad-premium .cad-list .cad-list-title { display: none; }
.modal .cad-premium .cad-list-head { padding-left: 0; padding-right: 0; padding-top: 0; }

/*  LARGURA: quem mede e o navegador, nao um numero escolhido a dedo.
 *
 *  O pedido foi "elegante, sem muito espaco vazio e sem ficar muito apertado". Numero fixo
 *  erra nos dois sentidos -- modal-lg (800px) aperta esta tabela de 7 colunas e modal-xl
 *  (1140px) sobra -- e cada uma das 13 telas tem um numero diferente de colunas, entao o
 *  valor certo aqui seria o errado la.
 *
 *  fit-content no dialogo mais width:auto na tabela fazem o popup nascer da largura que as
 *  colunas pedem. Quem define o minimo legivel sao os <th>, que ja sao white-space: nowrap
 *  (ver .cad-list .table > thead th) -- ou seja, o popup nunca quebra um cabecalho.
 *
 *  Os limites existem para os extremos: min-width para nao encolher a ponto de virar uma
 *  caixinha quando o filtro deixa 1 registro, e max-width para nao virar faixa em monitor
 *  grande nem estourar a viewport no notebook. */
/*  ⚠️ min-width VENCE max-width em CSS -- e nao o contrario. Um min-width fixo de 640px
 *  deixava o dialogo mais largo que a viewport num celular, e .modal e overflow-x: hidden,
 *  entao a tabela simplesmente sumia pela direita, sem barra de rolagem. Medido num pane de
 *  499px: dialogo 640px. Por isso o piso tambem passa pela folga da viewport.
 *
 *  A folga acompanha a margem que o proprio Bootstrap poe no .modal-dialog: 0.5rem de cada
 *  lado abaixo de 576px, 1.75rem a partir dai. Mesmo breakpoint, para os dois numeros nunca
 *  discordarem. */
/*  Abaixo de 576px NADA disto vale: o popup vira TELA CHEIA pelo modal-fullscreen-sm-down
 *  do template. Num celular, margem e raio so roubam largura de uma tabela que ja nao cabe,
 *  e a tela cheia ainda deixa o botao de fechar num lugar obvio.
 *
 *  ⚠️ min-width VENCE max-width em CSS -- e nao o contrario. Por isso o piso tambem passa
 *  pela folga da viewport: um min-width fixo de 640px deixava o dialogo mais largo que a
 *  tela, e .modal e overflow-x: hidden, entao a tabela sumia pela direita SEM barra de
 *  rolagem. Medido num pane de 499px: dialogo 640px. */
@media (min-width: 576px) {
    .cad-list-modal .modal-dialog {
        width: fit-content;
        min-width: min(640px, calc(100vw - 3.5rem));
        max-width: min(1100px, calc(100vw - 3.5rem));
    }
}
.cad-list-modal .cad-list .table { width: auto; }

/* a contagem no botao que abre o popup. Sem ela o botao e uma porta cega: ninguem sabe se
   ha 3 ou 300 registros atras. Mesma forma do .cad-section-head .cad-count. */
.cad-premium .cad-btn-contagem {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 1px var(--occ-space-2);
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: 99px;
    font-size: var(--occ-fs-micro);
    font-weight: var(--occ-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--occ-ink-soft);
}
.cad-premium .cad-list .table-responsive { padding: 0 var(--occ-space-3) var(--occ-space-3); }

/* A cor SO-LEITURA de um status (etiqueta tingida e amostra) mora em cor-status.css:
   o Rack tambem a usa, e o Rack nao e cadastro. */

/* Cor EDITAVEL na listagem e no formulario (2026-08-24). Um <button>, nao um
   <input type="color">: o seletor nativo do navegador nao aceita nada dentro dele —
   nem a paleta de cores rapidas, nem o campo de hex. Quem desenha o painel e o
   occColorPicker (premium-globals.js).

   Classe propria e nao as de cor-status.css: aquelas sao so-leitura e globais (tela de
   UH e Rack) — mexer nelas respingaria nas outras telas.

   28px e nao os 14px do chip: aqui e um alvo de toque. Passa o minimo de 24px do
   WCAG 2.5.8, o que conta direto para o uso em tablet.

   A borda usa o MESMO token do chip e nao e decoracao: sem ela, um status #FFFFFF
   desaparece no tema claro e um quase-preto desaparece no escuro. Os dois tokens tem
   espelho em [data-color-theme="dark"].

   NAO zerar o outline: o anel de foco e o que torna o botao alcancavel por teclado. */
.cad-premium .cad-cor-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--occ-line-strong);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--occ-surface);
    cursor: pointer;
    vertical-align: -8px;
    transition: transform .12s ease;
}
.cad-premium .cad-cor-btn:hover { transform: scale(1.08); }

/* Botao de cor SEM cor escolhida — a matriz.

   Ate 2026-08-25 a inclusao mostrava o botao CINZA, porque corSegura devolve
   COR_PADRAO quando a cor e nula. Cinza e uma cor: parecia escolha feita, e o
   cadastro dava a impressao de nascer com uma cor que ninguem pediu. A matriz nao
   e uma cor — e o convite para escolher uma.

   So existe aqui na ficha, e so na inclusao: cor e obrigatoria, entao todo status
   ja gravado cai no ramo do background-color inline. No grid nao aparece nunca.

   As matizes entram com ALPHA sobre --occ-surface em vez de virarem uma segunda
   paleta de hex: sobre branco da pastel, sobre #232120 abafa. E o que dispensa um
   espelho em [data-color-theme="dark"] — medido: hsl(0 74% 56% / .42) sai
   rgb(243,173,173) no claro e rgb(115,44,44) no escuro.

   ⚠️ Quem escolhe a cor tem de TIRAR esta classe (ver o onEscolher em
   body-tabela-uh-status.html): `style.backgroundColor` e background-COLOR, e a
   matriz e background-IMAGE — sem remover a classe, o gradiente continuaria
   pintado por cima da cor escolhida. */
.cad-premium .cad-cor-btn--vazia {
    background-color: var(--occ-surface);
    background-image:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--occ-surface) 78%, transparent) 0%, transparent 62%),
        conic-gradient(from 90deg,
            hsl(0 74% 56% / .42), hsl(30 74% 56% / .42), hsl(60 74% 56% / .42),
            hsl(90 74% 56% / .42), hsl(120 74% 56% / .42), hsl(150 74% 56% / .42),
            hsl(180 74% 56% / .42), hsl(210 74% 56% / .42), hsl(240 74% 56% / .42),
            hsl(270 74% 56% / .42), hsl(300 74% 56% / .42), hsl(330 74% 56% / .42),
            hsl(360 74% 56% / .42));
}
/* Enquanto a requisicao esta no ar. aria-busy e nao [disabled]: botao desabilitado
   sai da ordem de foco, e o foco cairia no <body> logo depois de escolher a cor. */
.cad-premium .cad-cor-btn[aria-busy="true"] { opacity: .55; cursor: progress; }

/* Valor somente leitura dentro de um .cad-field.

   Nasceu do Status da tela de UH, que se escolhe na inclusao e depois disso so a operacao
   muda (check-in, arrumacao, interdicao). Na alteracao ele nao pode ser <select disabled>
   -- controle desabilitado nao envia valor, e o th:field + @NotNull do DTO exigem que o
   campo chegue no POST -- nem um <input readonly>, porque o valor vem acompanhado da
   etiqueta tingida do status (.xn-status-etiqueta, em cor-status.css).

   Metrica identica a dos controles (--occ-field-h / --occ-space-3 / --occ-radius-xs) para
   a linha de campos nao desalinhar; o que muda e o fundo --occ-surface-2 e a borda
   TRACEJADA, que dizem "isto nao e um campo" sem depender de cor. Os dois tokens tem
   espelho em [data-color-theme="dark"] (tokens.css:158-159). */
.cad-premium .cad-surface .cad-field .cad-readonly-value {
    display: flex;
    align-items: center;
    height: var(--occ-field-h);
    padding: 0 var(--occ-space-3);
    border: 1px dashed var(--occ-line);
    border-radius: var(--occ-radius-xs);
    background-color: var(--occ-surface-2);
    color: var(--occ-ink);
    font-size: var(--occ-fs-base);
}

.cad-premium .cad-list-head {
    display: flex;
    align-items: center;
    gap: var(--occ-space-4);
    padding: var(--occ-space-4) var(--occ-space-6);
    border-bottom: 1px solid var(--occ-line);
}
.cad-premium .cad-list-title {
    margin: 0;
    font-size: var(--occ-fs-md);
    font-weight: var(--occ-fw-semibold);
    color: var(--occ-ink);
}
.cad-premium .cad-list-rule { flex: 1 1 auto; height: 1px; background: var(--occ-line); }

/* table-bordered saiu do markup: a grade vertical e o que faz a tabela ler como
   planilha do Delphi. Fica so a regua horizontal. */
/*  ONDA 4 do pente-fino (2026-08-26): o cabecalho pode QUEBRAR em duas linhas.
 *
 *  Com `white-space: nowrap`, um titulo como "Fecha Comanda Automática" impunha 262px de
 *  coluna sozinho -- e o <select> do filtro embaixo herdava essa largura, exibindo "Todos"
 *  em 238px. Medido no PDV: a tabela pedia 1825px numa caixa de 958.
 *
 *  Todo titulo e centralizado (regra no bloco do .cad-num), entao as duas linhas se
 *  centralizam sozinhas.
 *
 *  `text-wrap: balance` reparte as palavras entre as duas linhas em vez de deixar uma orfa.
 *  ⚠️ A largura do popup de registros depende disto: o fit-content do .cad-list-modal usa o
 *  minimo dos <th>. Com o cabecalho quebrando, o popup nasce mais estreito -- e melhor. */
.cad-premium .cad-list .table > thead th {
    padding: 10px var(--occ-space-3);
    border-top: 0;
    border-bottom: 1px solid var(--occ-line);
    white-space: normal;
    text-wrap: balance;
    vertical-align: bottom;
    /*  PISO, e a correcao de um erro meu: sem ele a coluna encolhia ate a MAIOR PALAVRA do
     *  titulo, e "Pede Cartão de Consumo" quebrava em QUATRO linhas num espaco de 89px --
     *  o cabecalho da tabela passou de 86 para 140px de altura e ficou ilegivel.
     *  Medido: 6rem da 2 linhas nesse titulo (thead volta a 104px); 7rem tambem daria 2,
     *  mas inflaria a tabela de 1302 para 1414px porque TODA coluna herda o piso. */
    min-width: 6rem;
}

/*  A ULTIMA coluna nao paga o piso. Ela e a de Acoes em 12 das 13 telas (em
 *  cliente-fornecedor, que nao tem acoes, e "Ativo") -- titulo de uma palavra so, que nunca
 *  quebra, sobre um par de botoes. O piso existe para titulos de varias palavras; aqui ele so
 *  inflava a tabela.
 *
 *  Medido (2026-08-27, com linhas de verdade no corpo): a coluna cai de 96 para 66px, e a
 *  tabela da Forma de Pagamento vai de 1000 para 971px numa caixa de 958.
 *
 *  ⚠️ Isto NAO acaba com a rolagem horizontal, e nao ha como acabar: o PDV tem 12 colunas e
 *  pede 1218px no minimo. A rolagem do .table-responsive e a resposta certa para uma grade
 *  larga -- o que estava errado antes era o cabecalho ilegivel, nao o fato de rolar. */
.cad-premium .cad-list .table > thead th:last-child {
    min-width: 0;
}
/*  Larguras (varredura das 13 grades, 2026-10-07). Identificador (1a coluna), colunas de switch e
 *  Acoes (as .text-center) ficam no MENOR que couber -- `width: 1%` numa tabela automatica, com o
 *  piso de 6rem acima ainda valendo. O que sobra vai para as colunas de texto. Antes cada grade
 *  repartia sozinha: o ID ia de 120 a 384px e Acoes de 70 a 131px conforme o numero de colunas. */
.cad-premium .cad-list .table > thead tr:first-child th:first-child,
.cad-premium .cad-list .table > thead tr:first-child th.text-center {
    width: 1%;
}
.cad-premium .cad-list .table > tbody td {
    padding: 10px var(--occ-space-3);
    font-size: var(--occ-fs-sm);
}
/* a faixa de filtros le como controle, nao como linha de dados vazia */
.cad-premium .cad-list thead tr + tr td {
    padding: 6px var(--occ-space-3) 10px;
    border-bottom: 1px solid var(--occ-line-strong);
}

/* Filtros: sublinhado em vez de caixa, para tirar 4 retangulos concorrentes do
   cabecalho. Isto DISSOLVE o campo (fundo transparente, borda 0) em vez de lhe dar
   outra identidade -- e por isso continua legitimo depois que o campo virou
   componente do sistema em app/campo.css.

   A forma do seletor lista <input>, <select> e as duas classes de propria mao: os
   filtros do cabecalho sao NUS em algumas telas e com classe em outras, e um
   seletor so por classe deixaria metade deles em caixa. Ate 2026-09-09 havia um
   segundo motivo -- vencer os (0,5,1) do bloco de campo que morava aqui --, que
   deixou de existir com a mudanca. */
.cad-premium .cad-list thead tr + tr input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close),
.cad-premium .cad-list thead tr + tr select,
.cad-premium .cad-list thead tr + tr .form-select,
.cad-premium .cad-list thead tr + tr .form-control {
    height: var(--occ-field-h-sm);
    padding: 0 2px;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--occ-line-strong);
    border-radius: 0;
    font-size: var(--occ-fs-sm);
    box-shadow: none;
}
/*  Navegador SEM appearance:base-select (Firefox, Safari, Chrome < 135): la a seta do filtro e a
 *  background-image do Bootstrap, a 14px da borda direita -- e o padding de 2px acima nao lhe
 *  reservava lugar, entao ela era desenhada POR TRAS do texto. Era o "alguma coisa atras de
 *  Ativos" do XWM-85, reproduzido simulando esse navegador. Onde ha base-select a seta e o
 *  ::picker-icon (bloco mais acima) e esta regra nem se aplica. */
@supports not (appearance: base-select) {
    .cad-premium .cad-list thead tr + tr select.form-select {
        padding-right: 18px;
        background-position: right 2px center;
        background-size: 12px 9px;
    }
}
/*  O <select> do filtro CORTAVA a propria opcao (bug pre-existente, medido em 2026-08-26):
 *  a celula tem 69px, o padding do td come 24 e sobravam 45 para um conteudo de 62 --
 *  "Inativos" mede 48px mais a seta. O texto saia cortado nos dois temas e em QUALQUER
 *  largura, celular ou desktop.
 *
 *  max-content e nao um numero: cada tela tem opcoes diferentes, e um min-width fixo
 *  resolveria aqui e cortaria noutra. Custo medido nesta tela: a coluna vai de 69 para 88px
 *  e a tabela de 600 para 618 -- e ela ja rola dentro do .table-responsive. */
.cad-premium .cad-list thead tr + tr select,
.cad-premium .cad-list thead tr + tr .form-select {
    min-width: max-content;
}

/*  Piso para o filtro de TEXTO. Sem ele, num <table> que ja nao cabe a compressao inteira
 *  caia sobre os inputs, que nao tem largura minima: medido no PDV, "Filtrar Percentual ISS"
 *  ficou com 20px e "Filtrar Nome" com 37 -- e por isso que se lia "Filtra" e "Filtrar Ta".
 *  Os <select> ao lado nao encolhiam (max-content acima), entao os inputs pagavam a conta
 *  sozinhos.
 *
 *  4,5rem: desde 2026-10-07 todo filtro diz so "Filtrar…" (ph.filtrar), que cabe com a lupa do
 *  Nome. Era 6rem quando o texto era "Filtrar <coluna>" -- e mesmo assim 7 cortavam; o piso maior
 *  fazia a coluna de ID e as de numero (conteudo curto) inflarem ate 120px e a UH e a FMP rolarem. */
.cad-premium .cad-list thead tr + tr input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close) {
    min-width: 4.5rem;
}
.cad-premium .cad-list thead tr + tr input:hover,
.cad-premium .cad-list thead tr + tr select:hover { border-bottom-color: var(--occ-ink-faint); }
.cad-premium .cad-list thead tr + tr input:focus,
.cad-premium .cad-list thead tr + tr select:focus,
.cad-premium .cad-list thead tr + tr .form-select:focus,
.cad-premium .cad-list thead tr + tr .form-control:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom: 1px solid var(--occ-accent) !important;
    box-shadow: 0 1px 0 0 var(--occ-accent) !important;
}

/*  Filtro com select2 (XWM-78): o combo esconde o <select> e desenha um <span>, que as regras
 *  acima nao alcancam -- Tipo e Categoria da UH, Grupo e Unidade do Produto, Grupo do PDV saiam em
 *  CAIXA ao lado dos filtros sublinhados. Altura, raio, recuo e fonte o select-padrao.js ja copia
 *  do <select> nativo; faltam fundo e borda, que o overrides.css declara com !important. */
.cad-premium .cad-list thead tr + tr .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--occ-line-strong) !important;
    box-shadow: none !important;
}
.cad-premium .cad-list thead tr + tr .select2-container--default .select2-selection--single:hover {
    border-bottom-color: var(--occ-ink-faint) !important;
}

/*  Combo NA LINHA da listagem (XWM-78). So a UH tem: Tipo e Categoria trocam direto na lista.
 *  Era a caixa de formulario, 40px e borda inteira, repetida em cada linha. Segue o filtro de
 *  cima: sem caixa e com a seta fina; o sublinhado so aparece no hover e no foco, para a coluna
 *  continuar lendo como dado. As medidas vao no <select> nativo porque o select-padrao.js as
 *  copia dele com !important inline -- declaradas no container, perderiam. */
.cad-premium .cad-list tbody select {
    height: var(--occ-field-h-sm);
    padding: 0 2px;
    border-radius: 0;
    font-size: var(--occ-fs-sm);
}
.cad-premium .cad-list tbody .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
}
.cad-premium .cad-list tbody .select2-container--default .select2-selection--single:hover {
    border-bottom-color: var(--occ-line-strong) !important;
}
/* O peso 500 do overrides.css (global, !important) deixava o combo da linha em negrito ao lado do
   texto e do <select> nativo da mesma linha, em 400. Na grade o combo e dado como os outros. */
.cad-premium .cad-list tbody .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-weight: 400 !important;
}
/* Combo NATIVO na linha (so o Tipo Taxa da Forma de Pagamento: 3 opcoes fixas, sem select2).
   Sem isto ele herdava a caixa de app/campo.css ao lado do select2 sem caixa -- o "quadrado"
   do XWM-122. (0,3,2) vence o select.form-select e o :disabled de la. */
.cad-premium .cad-list tbody select.form-select {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}
.cad-premium .cad-list tbody select.form-select:hover:not(:disabled) {
    border-bottom-color: var(--occ-line-strong);
}
.cad-premium .cad-list tbody select.form-select:focus {
    border-bottom-color: var(--occ-accent);
    box-shadow: 0 1px 0 0 var(--occ-accent);
}

/* PADRAO das tabelas de cadastro (decisao do usuario, 2026-10-07): o TITULO da coluna e sempre
   centralizado, qualquer que seja o dado -- alinhar o titulo pelo tipo deixava a linha de titulos
   com uns a esquerda, uns ao centro e uns a direita. O filtro fica a esquerda como os demais; so o
   DADO segue o tipo: texto a esquerda, numero a direita (.cad-num), switch e acoes ao centro.
   Vale para a grade principal e para as tabelas da ficha (parcelas, precos por PDV). */
.cad-premium .table > thead > tr:first-child > th {
    text-align: center;
}
.cad-premium td.cad-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Lugar da seta. Ela e absoluta e nao ocupava espaco: a coluna encolhia ate o texto e a seta caia
   por cima dele ("Nenhum⌄", ate 20px de sobreposicao na UH). Mesma metrica do filtro nativo --
   texto, 8px, icone de 14px, 2px da borda. O padding vai no <select> porque o select-padrao.js o
   copia para o texto do combo com !important inline. Custo medido em 07/10: a grade da UH, que
   cabia justa, passa a rolar 10px (colunas ja no piso de 6rem). */
.cad-premium .cad-list select.select2 {
    padding-right: 24px;
}
.cad-premium .cad-list .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 2px !important;
}

/* a mesma seta do ::picker-icon dos filtros nativos (bloco do base-select), e nao a do tema */
.cad-premium .cad-list thead tr + tr .select2-selection--single .select2-selection__arrow,
.cad-premium .cad-list tbody .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-size: 14px 14px;
}
.cad-premium .cad-list thead tr + tr .select2-container--default.select2-container--focus .select2-selection--single,
.cad-premium .cad-list thead tr + tr .select2-container--default.select2-container--open .select2-selection--single,
.cad-premium .cad-list tbody .select2-container--default.select2-container--focus .select2-selection--single,
.cad-premium .cad-list tbody .select2-container--default.select2-container--open .select2-selection--single {
    border-bottom-color: var(--occ-accent) !important;
    box-shadow: 0 1px 0 0 var(--occ-accent) !important;
}

/* o unico filtro de texto livre se anuncia como busca */
.cad-premium .cad-filter { position: relative; display: block; }
.cad-premium .cad-filter > i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: .875rem;
    color: var(--occ-ink-faint);
    pointer-events: none;
}
.cad-premium .cad-filter > input { padding-left: 20px !important; }

@media (prefers-reduced-motion: reduce) {
    .cad-premium .cad-surface .btn-success:hover,
    .cad-premium .cad-btn-quiet:hover { transform: none; }
}

/* --- Registro do sistema (uh_status.permite_alteracao = false) --------------
 *
 *  A ficha inteira fica inerte por um <fieldset disabled> em volta das secoes, em vez de
 *  desabilitar controle por controle no JavaScript. O preco e o CSS do navegador, que o
 *  <fieldset> traz de graca: border groove 2px, padding .35em/.75em/.625em, margin-inline 2px
 *  e — o que de fato quebra — min-inline-size: min-content, que impede as colunas do
 *  .row.cad-fields de encolherem e estoura a superficie na largura de tablet.
 */
.cad-premium .cad-surface fieldset.cad-sections {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

/*  No grid, o botao de cor da linha travada fica inerte por aria-disabled e NAO por [disabled]:
 *  pela mesma razao registrada no bloco do aria-busy la em cima, [disabled] tiraria o botao da
 *  ordem de foco — e aqui isso custaria o balao que explica POR QUE ele nao funciona. */
.cad-premium .cad-cor-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
}
.cad-premium .cad-cor-btn[aria-disabled="true"]:hover { transform: none; }

/*  Ocupa o lugar do botao Excluir na linha travada. Nao e um botao desabilitado porque elemento
 *  [disabled] nao recebe evento de mouse e portanto nao mostra title — o cadeado E a explicacao,
 *  e um <span> a carrega nativamente. 28px casa com a altura do .cad-cor-btn ao lado. */
.cad-premium .cad-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--occ-ink-soft);
    cursor: help;
}

/* ============================================================================
 *  # Celular (< 576px) — medido a 375px, nao estimado
 *
 *  A auditoria em 375px achou dois estouros de verdade e alvos de toque abaixo do
 *  minimo. Tudo aqui e reparo desses achados, nao redesenho.
 * ---------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /*  A barra de acoes pedia 380px numa caixa de 333: o Salvar terminava FORA da tela
     *  (medido: borda direita em 401px numa viewport de 375). Deixar quebrar resolve, e
     *  dar a linha inteira ao Salvar ainda poe a acao primaria sob o polegar. */
    .cad-premium .cad-surface .cad-formbar {
        flex-wrap: wrap;
        padding-inline: var(--occ-space-4);
    }
    /*  espacador com flex:1 dentro de container que quebra rouba a sobra da PRIMEIRA
     *  linha e empurra o resto de um jeito imprevisivel; aqui ele nao tem funcao */
    .cad-premium .cad-formbar-spacer { display: none; }
    .cad-premium .cad-surface .cad-formbar .btn-success {
        flex: 1 0 100%;
        justify-content: center;
        min-height: 44px;
    }

    /*  Mesma historia no cabecalho da listagem: 443px de conteudo em 333 -- e o
     *  "Limpar Filtros" cortado pela metade. A regua decorativa sai porque, com quebra
     *  ligada, ela ocuparia uma linha inteira em branco. */
    .cad-premium .cad-list-head {
        flex-wrap: wrap;
        gap: var(--occ-space-3);
        padding-inline: var(--occ-space-4);
    }
    .cad-premium .cad-list-rule { display: none; }

    /*  a linha de filtros vinha com --occ-field-h-sm; no celular o toque erra e digitar
     *  incomoda. Selector IDENTICO ao da regra original (mesma especificidade) e mais
     *  abaixo no arquivo -- e assim que este ganha, sem !important. */
    .cad-premium .cad-list thead tr + tr input:not([type=checkbox]):not([type=radio]):not(.form-check-input):not(.btn-close),
    .cad-premium .cad-list thead tr + tr select,
    .cad-premium .cad-list thead tr + tr .form-select,
    .cad-premium .cad-list thead tr + tr .form-control {
        height: var(--occ-field-h);
    }
    /*  botao de excluir da linha: media 46x34 */
    .cad-premium .cad-list .btn-sm { min-height: 36px; }
}

/* Rodapé de lista paginada (XWM-157: Cliente/Fornecedor). Mora num <tr> do próprio <tbody>, porque
   a lista chega por innerHTML; o desenho segue o rodapé da tela de Estadias. */
.cad-premium .cad-paginacao > td {
    padding: var(--occ-space-3, 12px) var(--occ-space-4, 16px);
    border-top: 1px solid var(--occ-line);
    background: transparent;
}
.cad-premium .cad-paginacao__barra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--occ-space-3, 12px);
    align-items: center;
    justify-content: space-between;
}
.cad-premium .cad-paginacao__info,
.cad-premium .cad-paginacao__tamanho {
    font-size: var(--occ-fs-sm, .8125rem);
    color: var(--occ-ink-soft);
}
.cad-premium .cad-paginacao__tamanho {
    display: inline-flex;
    align-items: center;
    gap: var(--occ-space-2, 8px);
    margin: 0;
}
.cad-premium .cad-paginacao__tamanho > span {
    white-space: nowrap;
}
.cad-premium .cad-paginacao__tamanho .form-select {
    width: auto;
    min-width: 5.5rem;
}