/*
 * Unitax: componentes de conteudo do template (botoes, campos, cards, tabelas, badges,
 * alertas, modais, dropdowns, paginacao, abas, progresso, toasts).
 *
 * Escopo: html[data-utx-template]. Sem !important, sem style inline, sem hex fora do
 * utx-tokens.css (unica excecao: SVG de seta/icone embutido, onde a cor nao pode ser var()).
 * Funciona sobre Bootstrap 5.3 (--bs-*, frontend e login) e CoreUI 5 (--cui-*, admin): as
 * propriedades visuais sao escritas direto, e as variaveis dos dois frameworks so entram
 * onde o framework le a variavel em varios estados.
 * Carrega depois de utx-tokens.css e utx-bridge.css (ordem do contrato).
 *
 * Variaveis locais deste arquivo (prefixo --utx-btn-): cor de fundo, texto, sombra e estados
 * de cada variante de botao; ficam no proprio elemento e nao vazam para outros componentes.
 *
 * Secoes:
 *   1. Base: titulos, selecao, foco
 *   2. Botoes
 *   3. Campos de formulario
 *   4. Cards
 *   5. Tabelas
 *   6. Badges e pilulas de status
 *   7. Alertas
 *   8. Modais
 *   9. Dropdowns, tooltips e popovers
 *  10. Paginacao
 *  11. Abas, pilulas de navegacao e acordeao
 *  12. Progresso, lista e migalhas
 *  13. Toasts (simple-notify)
 *  14. Movimento reduzido
 *
 * Divergencias intencionais (detalhe em 04-tokens/TOKENS.md):
 *   - warning: texto --utx-on-warning (green-900) em vez de --utx-text (4,35:1 reprovava).
 *   - contorno de campo: --utx-ring-control (3:1, WCAG 1.4.11) em vez de 16% (1,35:1).
 *   - badge/alert com .bg-* e .text-bg-*: o Bootstrap/CoreUI usam !important nessas
 *     utilidades; a cor e trocada pela variavel que elas leem, nao por !important.
 */

/* ------------------------------------------------------------------ */
/* 1. Base: titulos, selecao, foco                                     */
/* ------------------------------------------------------------------ */
html[data-utx-template] :is(h1, h2, h3, .h1, .h2, .h3) {
    font-family: var(--utx-font-display);
    letter-spacing: var(--utx-tracking-title);
}

/* Cor dos titulos com especificidade 0 (:where): qualquer regra do legado (heroi escuro,
   banner verde, .text-white) vence, e o titulo sobre fundo escuro mantem a cor clara. */
:where(html[data-utx-template]) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--utx-text);
}

html[data-utx-template] ::selection {
    background: var(--utx-soft);
    color: var(--utx-text);
}

html[data-utx-template] :is(.text-muted, .text-secondary, .text-body-secondary) {
    color: var(--utx-faint);
}

html[data-utx-template] :is(.form-control, .form-select, .btn, .page-link, .nav-link, .dropdown-item, .accordion-button, .form-check-input):focus-visible {
    outline: 2px solid var(--utx-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 2. Botoes                                                           */
/* ------------------------------------------------------------------ */
html[data-utx-template] .btn {
    --bs-btn-focus-shadow-rgb: var(--utx-primary-rgb);
    --cui-btn-focus-shadow-rgb: var(--utx-primary-rgb);
    --bs-btn-border-width: 0;
    --cui-btn-border-width: 0;
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-text);
    --utx-btn-shadow: var(--utx-shadow-btn-secondary);
    --utx-btn-hover-bg: var(--utx-surface-2);
    --utx-btn-hover-fg: var(--utx-text);
    --utx-btn-active-bg: var(--utx-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--utx-btn-h);
    padding: 0 14px;
    border: 0;
    border-radius: var(--utx-radius-sm);
    font: var(--utx-weight-semibold) var(--utx-text-sm)/1.2 var(--utx-font);
    letter-spacing: 0;
    text-decoration: none;
    vertical-align: middle;
    color: var(--utx-btn-fg);
    background-color: var(--utx-btn-bg);
    box-shadow: var(--utx-btn-shadow);
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

html[data-utx-template] .btn:hover {
    color: var(--utx-btn-hover-fg);
    background-color: var(--utx-btn-hover-bg);
    box-shadow: var(--utx-btn-shadow);
}

html[data-utx-template] .btn:is(:active, .active, .show, :first-child:active),
html[data-utx-template] .btn-check:checked + .btn,
html[data-utx-template] :not(.btn-check) + .btn:active {
    color: var(--utx-btn-hover-fg);
    background-color: var(--utx-btn-active-bg);
    box-shadow: var(--utx-btn-shadow);
}

html[data-utx-template] .btn:focus-visible {
    color: var(--utx-btn-hover-fg);
    background-color: var(--utx-btn-hover-bg);
    box-shadow: var(--utx-btn-shadow);
    outline: 2px solid var(--utx-focus);
    outline-offset: 2px;
}

html[data-utx-template] .btn :is(i, svg) {
    flex: 0 0 auto;
}

html[data-utx-template] .btn-sm,
html[data-utx-template] .btn-group-sm > .btn {
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--utx-radius-xs);
}

html[data-utx-template] .btn-lg,
html[data-utx-template] .btn-group-lg > .btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--utx-radius-sm);
    font-size: var(--utx-text-lg);
}

/* Primario (e familias legadas que eram o botao principal) */
html[data-utx-template] :is(.btn-primary, .btn-base, .btn-merchant, .btn-agent) {
    --utx-btn-bg: var(--utx-primary);
    --utx-btn-fg: var(--utx-on-primary);
    --utx-btn-shadow: var(--utx-shadow-btn);
    --utx-btn-hover-bg: var(--utx-primary-hover);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: var(--utx-primary-active);
    transform: none;
    filter: none;
}

html[data-utx-template] :is(.btn-primary, .btn-base, .btn-merchant, .btn-agent):hover {
    transform: none;
    filter: none;
}

/* Secundario, claro e contornos neutros: fundo de superficie com anel */
html[data-utx-template] :is(.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-light, .btn-default) {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-text);
    --utx-btn-shadow: var(--utx-shadow-btn-secondary);
    --utx-btn-hover-bg: var(--utx-surface-2);
    --utx-btn-hover-fg: var(--utx-text);
    --utx-btn-active-bg: var(--utx-soft);
}

html[data-utx-template] :is(.btn-outline-primary, .btn-border-base, .btn-outline-merchant, .btn-outline-agent) {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-ink);
    --utx-btn-shadow: var(--utx-shadow-btn-secondary);
    --utx-btn-hover-bg: var(--utx-surface-2);
    --utx-btn-hover-fg: var(--utx-ink);
    --utx-btn-active-bg: var(--utx-soft);
}

html[data-utx-template] .btn-outline-dark {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-text);
    --utx-btn-shadow: var(--utx-shadow-btn-secondary);
    --utx-btn-hover-bg: var(--utx-surface-2);
    --utx-btn-hover-fg: var(--utx-text);
    --utx-btn-active-bg: var(--utx-soft);
}

/* Estados: solido do token com texto branco; hover/active escurecem em direcao ao green-900 */
html[data-utx-template] .btn-success {
    --utx-btn-bg: var(--utx-success);
    --utx-btn-fg: var(--utx-on-primary);
    --utx-btn-shadow: var(--utx-shadow-btn);
    --utx-btn-hover-bg: color-mix(in srgb, var(--utx-success) 85%, var(--utx-green-900));
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-success) 70%, var(--utx-green-900));
}

html[data-utx-template] .btn-danger {
    --utx-btn-bg: var(--utx-danger);
    --utx-btn-fg: var(--utx-on-primary);
    --utx-btn-shadow: var(--utx-shadow-btn);
    --utx-btn-hover-bg: color-mix(in srgb, var(--utx-danger) 85%, var(--utx-green-900));
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-danger) 70%, var(--utx-green-900));
}

html[data-utx-template] .btn-info {
    --utx-btn-bg: var(--utx-info);
    --utx-btn-fg: var(--utx-on-primary);
    --utx-btn-shadow: var(--utx-shadow-btn);
    --utx-btn-hover-bg: color-mix(in srgb, var(--utx-info) 85%, var(--utx-green-900));
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-info) 70%, var(--utx-green-900));
}

/* Aviso: texto escuro (--utx-on-warning, 5,61:1); hover/active clareiam para manter o contraste */
html[data-utx-template] .btn-warning {
    --utx-btn-bg: var(--utx-warning);
    --utx-btn-fg: var(--utx-on-warning);
    --utx-btn-shadow: 0 1px 2px rgba(var(--utx-b-text-rgb), 0.15);
    --utx-btn-hover-bg: color-mix(in srgb, var(--utx-warning) 88%, white);
    --utx-btn-hover-fg: var(--utx-on-warning);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-warning) 76%, white);
}

html[data-utx-template] .btn-dark {
    --utx-btn-bg: var(--utx-green-900);
    --utx-btn-fg: var(--utx-on-primary);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-green-800);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: var(--utx-green-800);
}

/* Contornos de estado: fundo de superficie, texto do estado */
html[data-utx-template] .btn-outline-success {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-success-ink);
    --utx-btn-hover-bg: var(--utx-success-soft);
    --utx-btn-hover-fg: var(--utx-success-ink);
    --utx-btn-active-bg: var(--utx-success-soft);
}

html[data-utx-template] .btn-outline-danger {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-danger);
    --utx-btn-hover-bg: var(--utx-danger-soft);
    --utx-btn-hover-fg: var(--utx-danger-ink);
    --utx-btn-active-bg: var(--utx-danger-soft);
}

html[data-utx-template] .btn-outline-warning {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-warning-ink);
    --utx-btn-hover-bg: var(--utx-warning-soft);
    --utx-btn-hover-fg: var(--utx-warning-ink);
    --utx-btn-active-bg: var(--utx-warning-soft);
}

html[data-utx-template] .btn-outline-info {
    --utx-btn-bg: var(--utx-surface);
    --utx-btn-fg: var(--utx-info-ink);
    --utx-btn-hover-bg: var(--utx-info-soft);
    --utx-btn-hover-fg: var(--utx-info-ink);
    --utx-btn-active-bg: var(--utx-info-soft);
}

/* Familia "btn-light-*" (dashboard do usuario/empresa/agente): suave que vira solido no hover */
html[data-utx-template] :is(.btn-light-primary, .btn-light-merchant, .btn-light-agent, .btn-merchant-soft) {
    --utx-btn-bg: var(--utx-soft);
    --utx-btn-fg: var(--utx-ink);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-primary);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: var(--utx-primary-hover);
}

html[data-utx-template] .btn-light-secondary {
    --utx-btn-bg: var(--utx-neutral-soft);
    --utx-btn-fg: var(--utx-muted);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-muted);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: var(--utx-green-800);
}

html[data-utx-template] .btn-light-success {
    --utx-btn-bg: var(--utx-success-soft);
    --utx-btn-fg: var(--utx-success-ink);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-success);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-success) 85%, var(--utx-green-900));
}

html[data-utx-template] .btn-light-danger {
    --utx-btn-bg: var(--utx-danger-soft);
    --utx-btn-fg: var(--utx-danger-ink);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-danger);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-danger) 85%, var(--utx-green-900));
}

html[data-utx-template] .btn-light-warning {
    --utx-btn-bg: var(--utx-warning-soft);
    --utx-btn-fg: var(--utx-warning-ink);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-warning);
    --utx-btn-hover-fg: var(--utx-on-warning);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-warning) 88%, white);
}

html[data-utx-template] .btn-light-info {
    --utx-btn-bg: var(--utx-info-soft);
    --utx-btn-fg: var(--utx-info-ink);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-info);
    --utx-btn-hover-fg: var(--utx-on-primary);
    --utx-btn-active-bg: color-mix(in srgb, var(--utx-info) 85%, var(--utx-green-900));
}

/* Link */
html[data-utx-template] .btn-link {
    --utx-btn-bg: transparent;
    --utx-btn-fg: var(--utx-ink);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: transparent;
    --utx-btn-hover-fg: var(--utx-primary);
    --utx-btn-active-bg: transparent;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration: underline;
}

/* Desabilitado */
html[data-utx-template] .btn:is(:disabled, .disabled, [aria-disabled="true"]),
html[data-utx-template] fieldset:disabled .btn {
    --utx-btn-bg: var(--utx-disabled-bg);
    --utx-btn-fg: var(--utx-disabled-text);
    --utx-btn-shadow: none;
    --utx-btn-hover-bg: var(--utx-disabled-bg);
    --utx-btn-hover-fg: var(--utx-disabled-text);
    --utx-btn-active-bg: var(--utx-disabled-bg);
    opacity: 1;
    cursor: not-allowed;
    transform: none;
}

/* Botoes legados de outras familias: so o essencial (forma e cor primaria) */
html[data-utx-template] :is(.vc-btn--primary, .fb-btn--primary, .p2p-btn--primary, .ms-btn--primary, .gc-btn--primary, .pm-btn--primary, .cla-btn--primary) {
    background: var(--utx-primary);
    color: var(--utx-on-primary);
    border-color: var(--utx-primary);
    box-shadow: var(--utx-shadow-btn);
}

html[data-utx-template] :is(.vc-btn--primary, .fb-btn--primary, .p2p-btn--primary, .ms-btn--primary, .gc-btn--primary, .pm-btn--primary, .cla-btn--primary):hover {
    background: var(--utx-primary-hover);
    color: var(--utx-on-primary);
    border-color: var(--utx-primary-hover);
}

/* ------------------------------------------------------------------ */
/* 3. Campos de formulario                                             */
/* ------------------------------------------------------------------ */
html[data-utx-template] :is(.form-control, .form-select) {
    min-height: var(--utx-control-h);
    padding: 0 15px;
    border: 0;
    border-radius: var(--utx-radius-sm);
    background-color: var(--utx-surface);
    color: var(--utx-text);
    font: var(--utx-weight-medium) var(--utx-text-md)/1.5 var(--utx-font);
    box-shadow: var(--utx-shadow-control);
    transition: box-shadow 0.2s;
}

/* Altura fixa e line-height normal (o legado fixa height e line-height em 45px); textarea,
   multiple e tamanhos sm/lg ficam de fora e tem regra propria. A cor do contorno legado
   (border com !important lendo --border-color) vira transparente so no proprio campo, para nao
   somar com o anel de --utx-shadow-control. */
html[data-utx-template] :is(.form-control, .form-select):not(textarea, [multiple], .form-control-sm, .form-select-sm, .form-control-lg, .form-select-lg) {
    --border-color: transparent;
    --front-palette-e2e8f0: transparent;
    height: var(--utx-control-h);
    line-height: normal;
}

html[data-utx-template] :is(.form-control, .form-select).rounded {
    --bs-border-radius: var(--utx-radius-sm);
    border-radius: var(--utx-radius-sm);
}

html[data-utx-template] textarea.form-control {
    min-height: 96px;
    padding: 10px 12px;
}

html[data-utx-template] :is(.form-control, .form-select)::placeholder {
    color: var(--utx-faint);
    opacity: 1;
}

html[data-utx-template] :is(.form-control, .form-select):focus {
    border: 0;
    outline: 2px solid var(--utx-focus);
    outline-offset: 0;
    color: var(--utx-text);
    background-color: var(--utx-surface);
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] :is(.form-control, .form-select):is(:disabled, [readonly]) {
    background-color: var(--utx-surface-2);
    color: var(--utx-faint);
    box-shadow: 0 0 0 1px var(--utx-ring-soft);
}

html[data-utx-template] .form-select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2344584C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
}

html[data-utx-template] :is(.form-control-sm, .form-select-sm):not(textarea, [multiple]) {
    --border-color: transparent;
    --front-palette-e2e8f0: transparent;
    height: 32px;
    line-height: normal;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--utx-radius-xs);
    font-size: var(--utx-text-sm);
}

html[data-utx-template] :is(.form-control-lg, .form-select-lg):not(textarea, [multiple]) {
    --border-color: transparent;
    --front-palette-e2e8f0: transparent;
    height: 44px;
    line-height: normal;
    min-height: 44px;
    padding: 0 16px;
    font-size: var(--utx-text-lg);
}

html[data-utx-template] .form-control[type="file"] {
    padding-top: 7px;
    padding-bottom: 7px;
}

html[data-utx-template] .form-control::file-selector-button {
    background-color: var(--utx-surface-2);
    color: var(--utx-text);
    font-weight: var(--utx-weight-semibold);
}

html[data-utx-template] :is(.form-control, .form-select).is-invalid,
html[data-utx-template] .was-validated :is(.form-control, .form-select):invalid {
    box-shadow: 0 0 0 1px var(--utx-danger);
}

/* Foco em campo invalido: um anel so, vermelho, com halo suave (sem o verde do foco normal;
   o a11y.css pinta o outline com --ux-focus-ring-color, trocada aqui so no proprio campo). */
html[data-utx-template] :is(.form-control, .form-select).is-invalid:focus,
html[data-utx-template] :is(.form-control, .form-select).is-invalid:focus-visible,
html[data-utx-template] .was-validated :is(.form-control, .form-select):invalid:focus,
html[data-utx-template] .was-validated :is(.form-control, .form-select):invalid:focus-visible {
    --ux-focus-ring-color: var(--utx-danger);
    --utx-focus: var(--utx-danger);
    outline-color: var(--utx-danger);
    box-shadow: 0 0 0 1px var(--utx-danger), 0 0 0 4px var(--utx-danger-soft);
}

html[data-utx-template] :is(.form-control, .form-select).is-valid,
html[data-utx-template] .was-validated :is(.form-control, .form-select):valid {
    box-shadow: 0 0 0 1px var(--utx-success);
}

html[data-utx-template] .form-control:is(.is-invalid, .is-valid),
html[data-utx-template] .was-validated .form-control:is(:invalid, :valid) {
    background-image: none;
    padding-right: 15px;
}

html[data-utx-template] :is(.invalid-feedback, .invalid-tooltip) {
    color: var(--utx-danger-ink);
    font-size: var(--utx-text-xs);
}

html[data-utx-template] .valid-feedback {
    color: var(--utx-success-ink);
    font-size: var(--utx-text-xs);
}

html[data-utx-template] :is(.form-label, .col-form-label) {
    margin: 0 0 4px;
    color: var(--utx-muted);
    font-size: var(--utx-text-sm);
    font-weight: var(--utx-weight-semibold);
}

html[data-utx-template] .form-text {
    color: var(--utx-faint);
    font-size: var(--utx-text-xs);
}

html[data-utx-template] .input-group-text {
    border: 0;
    background-color: var(--utx-surface-2);
    color: var(--utx-muted);
    font-size: var(--utx-text-md);
    font-weight: var(--utx-weight-medium);
    box-shadow: var(--utx-shadow-control);
}

/* Input-group: itens encostados (-1px une os aneis em uma linha so), cantos so nas pontas,
   addon em --utx-surface-2, botao com a altura do campo. O :is() com o ramo
   ".single-input-inner .input-group" sobe a especificidade acima das regras do legado. */
html[data-utx-template] :is(.input-group, .single-input-inner .input-group),
html[data-utx-template] :is(.input-group, .single-input-inner .input-group):focus-within {
    border-radius: var(--utx-radius-sm);
    box-shadow: none;
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > :is(.form-control, .form-select, .input-group-text, .btn) {
    margin-left: 0;
    border-radius: 0;
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > :is(.form-control, .form-select, .input-group-text, .btn):not(:first-child) {
    margin-left: -1px;
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > :is(.form-control, .form-select, .input-group-text, .btn):first-child {
    border-top-left-radius: var(--utx-radius-sm);
    border-bottom-left-radius: var(--utx-radius-sm);
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > :is(.form-control, .form-select, .input-group-text, .btn):not(:has(~ :is(.form-control, .form-select, .input-group-text, .btn))) {
    border-top-right-radius: var(--utx-radius-sm);
    border-bottom-right-radius: var(--utx-radius-sm);
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > .input-group-text {
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 0;
    background: var(--utx-surface-2);
    color: var(--utx-muted);
    box-shadow: var(--utx-shadow-control);
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > .btn {
    height: var(--utx-control-h);
    min-height: var(--utx-control-h);
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group).input-group-sm > .btn {
    height: 32px;
    min-height: 32px;
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > :is(.form-control, .form-select):focus {
    position: relative;
    z-index: 3;
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] :is(.input-group, .single-input-inner .input-group) > :is(.form-control, .form-select).is-invalid:focus {
    box-shadow: 0 0 0 1px var(--utx-danger), 0 0 0 4px var(--utx-danger-soft);
}

/* Checkbox, radio e switch: borda 3:1, marcado em --utx-primary */
html[data-utx-template] .form-check-input {
    border: 1px solid var(--utx-ring-control);
    background-color: var(--utx-surface);
}

html[data-utx-template] .form-check-input:checked,
html[data-utx-template] .form-check-input:is([type="checkbox"], [type="radio"]):indeterminate {
    background-color: var(--utx-primary);
    border-color: var(--utx-primary);
}

html[data-utx-template] .form-check-input:focus {
    border-color: var(--utx-focus);
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] .form-check-input:disabled {
    opacity: 1;
    background-color: var(--utx-disabled-bg);
    border-color: var(--utx-ring);
}

html[data-utx-template] .form-check-input:disabled ~ .form-check-label {
    color: var(--utx-disabled-text);
    opacity: 1;
}

html[data-utx-template] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23236B45'/%3e%3c/svg%3e");
    --cui-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23236B45'/%3e%3c/svg%3e");
}

html[data-utx-template] .form-check-label {
    color: var(--utx-text);
    font-size: var(--utx-text-md);
}

html[data-utx-template] .form-range::-webkit-slider-thumb {
    background-color: var(--utx-primary);
}

html[data-utx-template] .form-range::-moz-range-thumb {
    background-color: var(--utx-primary);
}

html[data-utx-template] .form-range:focus::-webkit-slider-thumb {
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] .form-range:focus::-moz-range-thumb {
    box-shadow: var(--utx-shadow-focus);
}

/* ------------------------------------------------------------------ */
/* 4. Cards                                                            */
/* ------------------------------------------------------------------ */
html[data-utx-template] .card {
    --bs-card-bg: var(--utx-surface);
    --cui-card-bg: var(--utx-surface);
    --bs-card-cap-bg: transparent;
    --cui-card-cap-bg: transparent;
    --bs-card-border-width: 0;
    --cui-card-border-width: 0;
    border: 0;
    border-radius: var(--utx-radius-lg);
    background-color: var(--utx-surface);
    color: var(--utx-text);
    box-shadow: var(--utx-shadow-card);
}

html[data-utx-template] .card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--utx-line);
    background-color: transparent;
    color: var(--utx-text);
    font-size: var(--utx-text-lg);
    font-weight: var(--utx-weight-semibold);
    letter-spacing: -0.3px;
}

html[data-utx-template] .card-header:first-child {
    border-radius: var(--utx-radius-lg) var(--utx-radius-lg) 0 0;
}

html[data-utx-template] .card-body {
    padding: 20px;
}

html[data-utx-template] .card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--utx-line);
    background-color: transparent;
}

html[data-utx-template] :is(.card-title, .card-header .h5, .card-header .h6) {
    color: var(--utx-text);
    font-size: var(--utx-text-lg);
    font-weight: var(--utx-weight-semibold);
    letter-spacing: -0.3px;
}

html[data-utx-template] .card-subtitle {
    color: var(--utx-faint);
    font-size: var(--utx-text-sm);
}

/* ------------------------------------------------------------------ */
/* 5. Tabelas                                                          */
/* ------------------------------------------------------------------ */
html[data-utx-template] .table {
    --bs-table-color: var(--utx-text);
    --cui-table-color: var(--utx-text);
    --bs-table-bg: var(--utx-surface);
    --cui-table-bg: var(--utx-surface);
    --bs-table-border-color: var(--utx-line);
    --cui-table-border-color: var(--utx-line);
    --bs-table-striped-bg: transparent;
    --cui-table-striped-bg: transparent;
    --bs-table-striped-color: var(--utx-text);
    --cui-table-striped-color: var(--utx-text);
    --bs-table-hover-bg: var(--utx-surface-2);
    --cui-table-hover-bg: var(--utx-surface-2);
    --bs-table-hover-color: var(--utx-text);
    --cui-table-hover-color: var(--utx-text);
    --bs-table-active-bg: var(--utx-soft);
    --cui-table-active-bg: var(--utx-soft);
    border-radius: 0;
    background: var(--utx-surface);
    color: var(--utx-text);
    font-size: var(--utx-text-sm);
    line-height: 1.5;
}

html[data-utx-template] .table > :not(caption) > * > * {
    padding: 12px 12px 12px 20px;
    border-bottom: 1px solid var(--utx-line);
    transition: background-color 0.15s;
}

html[data-utx-template] .table > thead > tr > th,
html[data-utx-template] .table > thead th {
    padding: 10px 12px 10px 20px;
    border-bottom: 1px solid var(--utx-line);
    background-color: var(--utx-surface-2);
    color: var(--utx-muted);
    font-size: var(--utx-text-xs);
    font-weight: var(--utx-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
}

html[data-utx-template] .table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--utx-surface-2);
    --cui-table-bg-state: var(--utx-surface-2);
    --bs-table-color-state: var(--utx-text);
    --cui-table-color-state: var(--utx-text);
}

html[data-utx-template] .table-sm > :not(caption) > * > * {
    padding: 8px 10px 8px 16px;
}

html[data-utx-template] .table > :not(caption) > :last-child > * {
    border-bottom-width: 0;
}

/* ------------------------------------------------------------------ */
/* 6. Badges e pilulas de status                                       */
/* ------------------------------------------------------------------ */
html[data-utx-template] .badge {
    --bs-badge-padding-x: 9px;
    --cui-badge-padding-x: 9px;
    --bs-badge-padding-y: 0;
    --cui-badge-padding-y: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: var(--utx-radius-pill);
    font-size: var(--utx-text-xs);
    font-weight: var(--utx-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
    vertical-align: middle;
}

/* bg-primary: a utilidade do framework usa !important e le --*-primary-rgb; trocamos o
   triplet localmente para o tom suave, sem !important. */
html[data-utx-template] .badge.bg-primary {
    --bs-primary-rgb: var(--utx-b-soft-rgb);
    --cui-primary-rgb: var(--utx-b-soft-rgb);
    --bs-bg-opacity: 1;
    --cui-bg-opacity: 1;
    color: var(--utx-ink);
}

html[data-utx-template] .badge.bg-dark {
    --bs-dark-rgb: var(--utx-b-g900-rgb);
    --cui-dark-rgb: var(--utx-b-g900-rgb);
    color: var(--utx-on-primary);
}

/* Estados (soft/ink) tambem para os modificadores sem .bg-* */
html[data-utx-template] :is(.badge-success, .badge-soft-success) {
    background-color: var(--utx-success-soft);
    color: var(--utx-success-ink);
}

html[data-utx-template] :is(.badge-danger, .badge-soft-danger) {
    background-color: var(--utx-danger-soft);
    color: var(--utx-danger-ink);
}

html[data-utx-template] :is(.badge-warning, .badge-soft-warning) {
    background-color: var(--utx-warning-soft);
    color: var(--utx-warning-ink);
}

html[data-utx-template] :is(.badge-info, .badge-soft-info) {
    background-color: var(--utx-info-soft);
    color: var(--utx-info-ink);
}

html[data-utx-template] :is(.badge-primary, .badge-soft-primary) {
    background-color: var(--utx-soft);
    color: var(--utx-ink);
}

html[data-utx-template] :is(.badge-secondary, .badge-soft-secondary, .badge-light) {
    background-color: var(--utx-neutral-soft);
    color: var(--utx-neutral-ink);
}

/* Pilulas legadas: mesma altura e peso; a cor vem das variaveis ja mapeadas na ponte */
html[data-utx-template] :is(.status-pill, .role-badge, .method-badge, .settings-badge) {
    min-height: 24px;
    font-size: var(--utx-text-xs);
    font-weight: var(--utx-weight-semibold);
}

/* ------------------------------------------------------------------ */
/* 7. Alertas                                                          */
/* ------------------------------------------------------------------ */
html[data-utx-template] .alert {
    --bs-alert-padding-x: 14px;
    --bs-alert-padding-y: 12px;
    --bs-alert-border-radius: var(--utx-radius-md);
    --cui-alert-padding-x: 14px;
    --cui-alert-padding-y: 12px;
    --cui-alert-border-radius: var(--utx-radius-md);
    padding: 12px 14px;
    border: 0;
    border-radius: var(--utx-radius-md);
    font-size: var(--utx-text-sm);
    line-height: 1.5;
}

html[data-utx-template] :is(.alert-primary, .alert-info) {
    --bs-alert-bg: var(--utx-soft);
    --bs-alert-color: var(--utx-ink);
    --cui-alert-bg: var(--utx-soft);
    --cui-alert-color: var(--utx-ink);
    background-color: var(--utx-soft);
    color: var(--utx-ink);
}

html[data-utx-template] .alert-success {
    --bs-alert-bg: var(--utx-success-soft);
    --bs-alert-color: var(--utx-success-ink);
    --cui-alert-bg: var(--utx-success-soft);
    --cui-alert-color: var(--utx-success-ink);
    background-color: var(--utx-success-soft);
    color: var(--utx-success-ink);
}

html[data-utx-template] .alert-danger {
    --bs-alert-bg: var(--utx-danger-soft);
    --bs-alert-color: var(--utx-danger-ink);
    --cui-alert-bg: var(--utx-danger-soft);
    --cui-alert-color: var(--utx-danger-ink);
    background-color: var(--utx-danger-soft);
    color: var(--utx-danger-ink);
}

html[data-utx-template] .alert-warning {
    --bs-alert-bg: var(--utx-warning-soft);
    --bs-alert-color: var(--utx-warning-ink);
    --cui-alert-bg: var(--utx-warning-soft);
    --cui-alert-color: var(--utx-warning-ink);
    background-color: var(--utx-warning-soft);
    color: var(--utx-warning-ink);
}

html[data-utx-template] :is(.alert-secondary, .alert-light, .alert-dark) {
    --bs-alert-bg: var(--utx-neutral-soft);
    --bs-alert-color: var(--utx-neutral-ink);
    --cui-alert-bg: var(--utx-neutral-soft);
    --cui-alert-color: var(--utx-neutral-ink);
    background-color: var(--utx-neutral-soft);
    color: var(--utx-neutral-ink);
}

html[data-utx-template] .alert .alert-link {
    color: inherit;
    font-weight: var(--utx-weight-semibold);
}

/* ------------------------------------------------------------------ */
/* 8. Modais                                                           */
/* ------------------------------------------------------------------ */
html[data-utx-template] .modal {
    --bs-modal-zindex: var(--utx-z-modal);
    --cui-modal-zindex: var(--utx-z-modal);
    --bs-modal-border-width: 0;
    --cui-modal-border-width: 0;
    --bs-modal-border-radius: var(--utx-radius-xl);
    --cui-modal-border-radius: var(--utx-radius-xl);
    --bs-modal-box-shadow: var(--utx-shadow-pop);
    --cui-modal-box-shadow: var(--utx-shadow-pop);
}

html[data-utx-template] .modal-content {
    border: 0;
    border-radius: var(--utx-radius-xl);
    background-color: var(--utx-surface);
    color: var(--utx-text);
    box-shadow: var(--utx-shadow-pop);
}

html[data-utx-template] .modal-header {
    padding: 18px 20px 0;
    border-bottom: 0;
    border-radius: var(--utx-radius-xl) var(--utx-radius-xl) 0 0;
    background-color: transparent;
}

html[data-utx-template] .modal-title {
    color: var(--utx-text);
    font-family: var(--utx-font-display);
    font-size: 18px;
    font-weight: var(--utx-weight-semibold);
    letter-spacing: var(--utx-tracking-title);
}

html[data-utx-template] .modal-body {
    padding: 16px 20px;
}

html[data-utx-template] .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px 20px;
    border-top: 0;
    background-color: transparent;
}

html[data-utx-template] .modal-footer > * {
    margin: 0;
}

html[data-utx-template] .modal-backdrop {
    --bs-backdrop-bg: var(--utx-backdrop);
    --cui-backdrop-bg: var(--utx-backdrop);
    --bs-backdrop-opacity: 1;
    --cui-backdrop-opacity: 1;
    background-color: var(--utx-backdrop);
}

html[data-utx-template] .offcanvas {
    --bs-offcanvas-bg: var(--utx-surface);
    --cui-offcanvas-bg: var(--utx-surface);
    --bs-offcanvas-border-width: 0;
    --cui-offcanvas-border-width: 0;
    border: 0;
    background-color: var(--utx-surface);
    color: var(--utx-text);
    box-shadow: var(--utx-shadow-pop);
}

/* ------------------------------------------------------------------ */
/* 9. Dropdowns, tooltips e popovers                                   */
/* ------------------------------------------------------------------ */
html[data-utx-template] .dropdown-menu {
    --bs-dropdown-zindex: var(--utx-z-dropdown);
    --cui-dropdown-zindex: var(--utx-z-dropdown);
    --bs-dropdown-bg: var(--utx-surface);
    --cui-dropdown-bg: var(--utx-surface);
    --bs-dropdown-border-width: 0;
    --cui-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--utx-radius-md);
    --cui-dropdown-border-radius: var(--utx-radius-md);
    --bs-dropdown-padding-y: 6px;
    --cui-dropdown-padding-y: 6px;
    --bs-dropdown-padding-x: 6px;
    --cui-dropdown-padding-x: 6px;
    --bs-dropdown-link-color: var(--utx-text);
    --cui-dropdown-link-color: var(--utx-text);
    --bs-dropdown-link-hover-bg: var(--utx-soft);
    --cui-dropdown-link-hover-bg: var(--utx-soft);
    --bs-dropdown-link-hover-color: var(--utx-text);
    --cui-dropdown-link-hover-color: var(--utx-text);
    --bs-dropdown-link-active-bg: var(--utx-soft);
    --cui-dropdown-link-active-bg: var(--utx-soft);
    --bs-dropdown-link-active-color: var(--utx-ink);
    --cui-dropdown-link-active-color: var(--utx-ink);
    --bs-dropdown-divider-bg: var(--utx-line);
    --cui-dropdown-divider-bg: var(--utx-line);
    --bs-dropdown-header-color: var(--utx-faint);
    --cui-dropdown-header-color: var(--utx-faint);
    padding: 6px;
    border: 0;
    border-radius: var(--utx-radius-md);
    background-color: var(--utx-surface);
    box-shadow: var(--utx-shadow-pop);
    font-size: var(--utx-text-sm);
}

html[data-utx-template] .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--utx-text);
    font-size: var(--utx-text-sm);
    font-weight: var(--utx-weight-medium);
}

html[data-utx-template] .dropdown-item:is(:hover, :focus) {
    background-color: var(--utx-soft);
    color: var(--utx-text);
}

html[data-utx-template] .dropdown-item.active,
html[data-utx-template] .dropdown-item:active {
    background-color: var(--utx-soft);
    color: var(--utx-ink);
}

html[data-utx-template] .dropdown-item:is(.disabled, :disabled) {
    background-color: transparent;
    color: var(--utx-disabled-text);
}

html[data-utx-template] .dropdown-divider {
    margin: 6px 0;
    border-top: 1px solid var(--utx-line);
    opacity: 1;
}

html[data-utx-template] .dropdown-header {
    color: var(--utx-faint);
    font-size: var(--utx-text-xs);
    font-weight: var(--utx-weight-semibold);
}

html[data-utx-template] .tooltip {
    --bs-tooltip-bg: var(--utx-text);
    --cui-tooltip-bg: var(--utx-text);
    --bs-tooltip-color: var(--utx-on-primary);
    --cui-tooltip-color: var(--utx-on-primary);
    --bs-tooltip-border-radius: 9px;
    --cui-tooltip-border-radius: 9px;
    --bs-tooltip-opacity: 1;
    --cui-tooltip-opacity: 1;
    font-size: 12.5px;
    font-weight: var(--utx-weight-semibold);
}

html[data-utx-template] .popover {
    --bs-popover-bg: var(--utx-surface);
    --cui-popover-bg: var(--utx-surface);
    --bs-popover-border-width: 0;
    --cui-popover-border-width: 0;
    --bs-popover-border-radius: var(--utx-radius-md);
    --cui-popover-border-radius: var(--utx-radius-md);
    --bs-popover-header-bg: transparent;
    --cui-popover-header-bg: transparent;
    --bs-popover-header-color: var(--utx-text);
    --cui-popover-header-color: var(--utx-text);
    --bs-popover-body-color: var(--utx-text);
    --cui-popover-body-color: var(--utx-text);
    border: 0;
    border-radius: var(--utx-radius-md);
    box-shadow: var(--utx-shadow-pop);
}

/* ------------------------------------------------------------------ */
/* 10. Paginacao                                                       */
/* ------------------------------------------------------------------ */
html[data-utx-template] .pagination {
    --bs-pagination-color: var(--utx-muted);
    --cui-pagination-color: var(--utx-muted);
    --bs-pagination-hover-color: var(--utx-text);
    --cui-pagination-hover-color: var(--utx-text);
    --bs-pagination-hover-bg: var(--utx-surface-2);
    --cui-pagination-hover-bg: var(--utx-surface-2);
    --bs-pagination-active-bg: var(--utx-surface);
    --cui-pagination-active-bg: var(--utx-surface);
    --bs-pagination-active-color: var(--utx-text);
    --cui-pagination-active-color: var(--utx-text);
    --bs-pagination-disabled-color: var(--utx-disabled-text);
    --cui-pagination-disabled-color: var(--utx-disabled-text);
    --bs-pagination-disabled-bg: transparent;
    --cui-pagination-disabled-bg: transparent;
    gap: 4px;
}

html[data-utx-template] .pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin-left: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background-color: transparent;
    color: var(--utx-muted);
    font-size: var(--utx-text-sm);
    font-weight: var(--utx-weight-semibold);
    line-height: 1;
    box-shadow: none;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

html[data-utx-template] .pagination .page-item .page-link:hover {
    background-color: var(--utx-surface-2);
    color: var(--utx-text);
}

html[data-utx-template] .pagination .page-item .page-link:focus {
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] .pagination .page-item.active .page-link {
    background-color: var(--utx-surface);
    color: var(--utx-text);
    box-shadow: 0 0 0 1px var(--utx-ring), 0 1px 2px rgba(var(--utx-b-text-rgb), 0.1);
}

html[data-utx-template] .pagination .page-item.disabled .page-link {
    background-color: transparent;
    color: var(--utx-disabled-text);
}

/* ------------------------------------------------------------------ */
/* 11. Abas, pilulas de navegacao e acordeao                           */
/* ------------------------------------------------------------------ */
html[data-utx-template] .nav-tabs {
    --bs-nav-tabs-border-color: var(--utx-line);
    --cui-nav-tabs-border-color: var(--utx-line);
    border-bottom: 1px solid var(--utx-line);
}

html[data-utx-template] .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 9px 14px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--utx-muted);
    font-size: var(--utx-text-sm);
    font-weight: var(--utx-weight-semibold);
    box-shadow: none;
    transition: color 0.2s, box-shadow 0.2s;
}

html[data-utx-template] .nav-tabs .nav-link:hover {
    background-color: transparent;
    color: var(--utx-text);
    box-shadow: inset 0 -2px 0 var(--utx-border);
}

html[data-utx-template] .nav-tabs .nav-link:is(.active, [aria-selected="true"]),
html[data-utx-template] .nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    color: var(--utx-ink);
    box-shadow: inset 0 -2px 0 var(--utx-primary);
}

html[data-utx-template] .nav-tabs .nav-link:focus-visible {
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--utx-soft);
    --cui-nav-pills-link-active-bg: var(--utx-soft);
    --bs-nav-pills-link-active-color: var(--utx-ink);
    --cui-nav-pills-link-active-color: var(--utx-ink);
    gap: 4px;
}

html[data-utx-template] .nav-pills .nav-link {
    border-radius: var(--utx-radius-sm);
    color: var(--utx-muted);
    font-size: var(--utx-text-sm);
    font-weight: var(--utx-weight-semibold);
}

html[data-utx-template] .nav-pills .nav-link:hover {
    background-color: var(--utx-sidebar-hover-bg);
    color: var(--utx-text);
}

html[data-utx-template] .nav-pills .nav-link:is(.active, [aria-selected="true"]),
html[data-utx-template] .nav-pills .show > .nav-link {
    background-color: var(--utx-soft);
    color: var(--utx-ink);
}

html[data-utx-template] :is(.page-link, .nav-link, .accordion-button, .btn-close, .navbar-toggler, .list-group-item-action):focus {
    box-shadow: var(--utx-shadow-focus);
}

html[data-utx-template] .accordion {
    --bs-accordion-bg: var(--utx-surface);
    --cui-accordion-bg: var(--utx-surface);
    --bs-accordion-color: var(--utx-text);
    --cui-accordion-color: var(--utx-text);
    --bs-accordion-border-color: var(--utx-line);
    --cui-accordion-border-color: var(--utx-line);
    --bs-accordion-border-radius: var(--utx-radius-md);
    --cui-accordion-border-radius: var(--utx-radius-md);
    --bs-accordion-inner-border-radius: var(--utx-radius-md);
    --cui-accordion-inner-border-radius: var(--utx-radius-md);
    --bs-accordion-active-bg: var(--utx-soft);
    --cui-accordion-active-bg: var(--utx-soft);
    --bs-accordion-active-color: var(--utx-ink);
    --cui-accordion-active-color: var(--utx-ink);
    --bs-accordion-btn-focus-box-shadow: var(--utx-shadow-focus);
    --cui-accordion-btn-focus-box-shadow: var(--utx-shadow-focus);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23285D3E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23285D3E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

html[data-utx-template] .accordion-button {
    font-size: var(--utx-text-md);
    font-weight: var(--utx-weight-semibold);
}

/* ------------------------------------------------------------------ */
/* 12. Progresso, lista e migalhas                                     */
/* ------------------------------------------------------------------ */
html[data-utx-template] .progress {
    --bs-progress-bg: var(--utx-neutral-soft);
    --cui-progress-bg: var(--utx-neutral-soft);
    --bs-progress-bar-bg: var(--utx-primary);
    --cui-progress-bar-bg: var(--utx-primary);
    --bs-progress-border-radius: var(--utx-radius-pill);
    --cui-progress-border-radius: var(--utx-radius-pill);
    border-radius: var(--utx-radius-pill);
    background-color: var(--utx-neutral-soft);
}

html[data-utx-template] .progress-bar {
    background-color: var(--utx-primary);
    color: var(--utx-on-primary);
}

html[data-utx-template] .list-group {
    --bs-list-group-border-color: var(--utx-line);
    --cui-list-group-border-color: var(--utx-line);
    --bs-list-group-border-radius: var(--utx-radius-md);
    --cui-list-group-border-radius: var(--utx-radius-md);
    --bs-list-group-active-bg: var(--utx-soft);
    --cui-list-group-active-bg: var(--utx-soft);
    --bs-list-group-active-color: var(--utx-ink);
    --cui-list-group-active-color: var(--utx-ink);
    --bs-list-group-active-border-color: var(--utx-border);
    --cui-list-group-active-border-color: var(--utx-border);
    --bs-list-group-action-hover-bg: var(--utx-surface-2);
    --cui-list-group-action-hover-bg: var(--utx-surface-2);
}

html[data-utx-template] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--utx-faint);
    --cui-breadcrumb-divider-color: var(--utx-faint);
    --bs-breadcrumb-item-active-color: var(--utx-faint);
    --cui-breadcrumb-item-active-color: var(--utx-faint);
    font-size: var(--utx-text-sm);
}

/* ------------------------------------------------------------------ */
/* 13. Toasts (simple-notify, notifyEvs)                               */
/* ------------------------------------------------------------------ */
html[data-utx-template] .notify {
    --notify-skin-accent: var(--utx-primary);
    --notify-skin-accent-rgb: var(--utx-primary-rgb);
    --notify-skin-surface: var(--utx-surface);
    --notify-skin-ink: var(--utx-text);
    --notify-skin-muted: var(--utx-muted);
    --notify-skin-line: var(--utx-line);
    --notify-skin-shadow: var(--utx-shadow-pop);
    border: 0;
    border-left: 4px solid var(--notify-skin-accent);
    border-radius: var(--utx-radius-md);
    background: var(--utx-surface);
    color: var(--notify-skin-accent);
    font-family: var(--utx-font);
    box-shadow: var(--utx-shadow-pop);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-utx-template] .notify--success {
    --notify-skin-accent: var(--utx-success);
    --notify-skin-accent-rgb: var(--utx-b-success-rgb);
}

html[data-utx-template] .notify--error {
    --notify-skin-accent: var(--utx-danger);
    --notify-skin-accent-rgb: var(--utx-b-danger-rgb);
}

html[data-utx-template] .notify--warning {
    --notify-skin-accent: var(--utx-warning-ink);
    --notify-skin-accent-rgb: var(--utx-b-warning-rgb);
}

html[data-utx-template] .notify--info {
    --notify-skin-accent: var(--utx-info);
    --notify-skin-accent-rgb: var(--utx-b-info-rgb);
}

html[data-utx-template] .notify::after {
    background: none;
}

html[data-utx-template] .notify__icon {
    background: rgba(var(--notify-skin-accent-rgb), 0.12);
    color: var(--notify-skin-accent);
    box-shadow: none;
}

html[data-utx-template] .notify__title {
    color: var(--utx-text);
    font-weight: var(--utx-weight-semibold);
}

html[data-utx-template] .notify__text {
    color: var(--utx-muted);
}

html[data-utx-template] .notify__close {
    background: transparent;
    color: var(--utx-faint);
}

html[data-utx-template] .notify__close:hover {
    background: var(--utx-sidebar-hover-bg);
    color: var(--utx-text);
}

html[data-utx-template] .toast {
    --bs-toast-bg: var(--utx-surface);
    --cui-toast-bg: var(--utx-surface);
    --bs-toast-border-width: 0;
    --cui-toast-border-width: 0;
    --bs-toast-border-radius: var(--utx-radius-md);
    --cui-toast-border-radius: var(--utx-radius-md);
    --bs-toast-box-shadow: var(--utx-shadow-pop);
    --cui-toast-box-shadow: var(--utx-shadow-pop);
    --bs-toast-color: var(--utx-text);
    --cui-toast-color: var(--utx-text);
    border: 0;
    border-left: 4px solid var(--utx-primary);
}

/* ------------------------------------------------------------------ */
/* 14. Movimento reduzido                                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html[data-utx-template] :is(.btn, .form-control, .form-select, .table > :not(caption) > * > *, .pagination .page-link, .nav-tabs .nav-link) {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Rodada 2 (T): botoes em <a> sem sublinhado, texto corrido, primario */
/* ------------------------------------------------------------------ */

/* app.css (a{text-decoration:underline}) nao pode sublinhar botoes */
html[data-utx-template] a:is(.btn, .theme-btn, .site-btn, [class*="-btn"], [class*="__btn"], [class*="__action"], .dropdown-item, .page-link, .nav-link),
html[data-utx-template] a:is(.btn, .theme-btn, .site-btn, [class*="-btn"], [class*="__btn"], [class*="__action"]):is(:hover, :focus, :focus-visible, :active) {
    text-decoration: none;
}

/* Paragrafos: sem tracking herdado do cabecalho de card, hifenizacao so manual */
html[data-utx-template] :is(p, .user-feature-header__subtitle, .user-not-found__hint, li, td, th, label) {
    letter-spacing: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}

/* Botao primario: texto sempre --utx-on-primary, tambem quando o link legado vence */
html[data-utx-template] :is(.btn-primary, .notification-dropdown__action--primary),
html[data-utx-template] a:is(.btn-primary, .notification-dropdown__action--primary):is(:hover, :focus, :visited) {
    color: var(--utx-on-primary);
}

html[data-utx-template] .notification-dropdown__action--primary {
    background: var(--utx-primary);
    border-color: transparent;
    box-shadow: var(--utx-shadow-btn);
}

html[data-utx-template] .notification-dropdown__action--primary:is(:hover, :focus-visible) {
    background: var(--utx-primary-hover);
    transform: none;
}

html[data-utx-template] .notification-dropdown__action--primary :is(.notification-dropdown__action-icon, .icon) {
    color: var(--utx-on-primary);
}

/* Estados vazios: orbes e realces ciano/azul legados viram tom do template */
html[data-utx-template] .user-not-found__orb--two,
html[data-utx-template] .payment-link-empty__orb--two {
    background: var(--utx-soft);
}

html[data-utx-template] .user-not-found__orb--one,
html[data-utx-template] .payment-link-empty__orb--one {
    background: rgba(var(--utx-primary-rgb), 0.1);
}