/* ==========================================================================
   A cor de um status de UH — duas formas, um lugar

   .xn-status-etiqueta  o NOME do status numa etiqueta tingida com a cor dele. É a
                        forma de leitura: grid e ficha da tela de UH.
   .xn-cor-status       só a amostra (círculo), para quando a cor precisa de uma
                        chave ao lado do nome: legenda do Rack.

   ── Por que saiu de cadastros.css (2026-10-07, XWM-119) ─────────────────
   Até então era `.cad-premium .cad-cor-chip`, presa às telas de cadastro. O Rack
   não é cadastro e passou a precisar dela na legenda — a mesma história do campo e
   da superfície (ver `campo.css`): fora do container, ou copiava, ou ficava sem.

   ── O que não se negocia ────────────────────────────────────────────────
   · A cor de FUNDO vem do banco e passa antes pela whitelist ^#[0-9A-Fa-f]{6}$ de
     UhStatusDTO.getCorSegura() — o template nunca injeta o valor cru num th:style.
   · O contorno usa TOKEN de tema, não cor fixa: sem ele um status branco (#FFFFFF)
     sumiria no tema claro e um quase-preto sumiria no escuro. A borda dá o limite e o
     halo de --occ-surface separa a amostra da superfície; os dois tokens têm espelho
     em [data-color-theme="dark"].
   · A cor NUNCA é o único canal de informação: o nome do status vai ao lado, em
     texto (WCAG 1.4.1).

   A etiqueta não leva o círculo dentro (decisão de 07/10): cor e nome na mesma
   peça dizem a mesma coisa duas vezes, e o círculo espremia o nome numa segunda
   linha nas colunas estreitas do grid.

   O botão de cor EDITÁVEL da tela Status UH é outro componente (.cad-cor-btn, em
   cadastros.css): é alvo de toque, com 28px.
   ========================================================================== */
.xn-cor-status {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: .5rem;
    border: 1px solid var(--occ-line-strong);
    box-shadow: 0 0 0 1px var(--occ-surface);
}

/* --xn-status-cor vem do th:style, só a partir da corSegura. O texto fica na tinta
   do tema (o fundo é só um tingido), então o contraste é o do texto comum nos dois
   temas. O contorno mistura a cor com --occ-line-strong para um status claro
   (#FFFFFF) não sumir sobre a superfície clara. nowrap: a etiqueta é uma peça só. */
.xn-status-etiqueta {
    display: inline-block;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: var(--occ-ink);
    background: color-mix(in srgb, var(--xn-status-cor, transparent) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xn-status-cor, transparent) 40%, var(--occ-line-strong));
}