/*
 * PlayTCG 2.0 - Estilos globais dos componentes
 *
 * Traduz o sistema 2.0 para o AntDesign: raio 0, sombra nenhuma, borda de 2px
 * como separação, Archivo como fonte e acento vermelho no lugar do azul.
 *
 * Depende de: tcg-tokens.css (deve ser carregado antes)
 */

/* ========================================
   BASE
   ======================================== */

body,
.ant-layout,
.ant-btn,
.ant-input,
.ant-select,
.ant-table,
.ant-menu,
.ant-modal,
.ant-form,
.ant-card,
.ant-tag,
.ant-typography,
.ant-picker,
.ant-drawer,
.ant-notification,
.ant-message {
    font-family: var(--tcg-font-family);
}

body {
    background: var(--tcg-ground);
    color: var(--tcg-ink);
    font-size: var(--tcg-font-size-base);
    line-height: var(--tcg-line-height-normal);
}

/* Todo número é tabular */
.ant-statistic-content,
.ant-table td,
.ant-progress-text,
.tcg-num {
    font-variant-numeric: tabular-nums;
}

/* ========================================
   SELO "AO VIVO" — a única animação contínua do sistema
   ------------------------------------------
   .ptcg-live-dot: quadrado vermelho (sobre superfície clara), com o anel de
   box-shadow que dissipa. .ptcg-live-dot-light: quadrado branco sobre fundo
   vermelho (topbar, faixa de contexto), sem anel — o próprio fundo já é o
   acento. Ambos marcam a única coisa que muda sozinha: a rodada em curso.
   ======================================== */

@keyframes ptcgLivePulse {
    0%, 46% { opacity: 1; transform: scale(1); }
    58% { opacity: .35; transform: scale(.7); }
    72%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes ptcgLiveRing {
    0% { box-shadow: 0 0 0 0 rgba(236, 48, 19, .6); }
    70% { box-shadow: 0 0 0 8px rgba(236, 48, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(236, 48, 19, 0); }
}

.ptcg-live-dot {
    animation:
        ptcgLivePulse 1.4s cubic-bezier(.65, 0, .35, 1) infinite,
        ptcgLiveRing 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}

.ptcg-live-dot-light {
    animation: ptcgLivePulse 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ptcg-live-dot,
    .ptcg-live-dot-light {
        animation: ptcgLivePulse 2.8s ease-in-out infinite;
    }
}

/* ========================================
   RAIO 0 EM TUDO
   ======================================== */

.ant-btn,
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-input-group-addon,
.ant-select-selector,
.ant-select-dropdown,
.ant-picker,
.ant-picker-panel-container,
.ant-card,
.ant-modal-content,
.ant-drawer-content,
.ant-tag,
.ant-alert,
.ant-table,
.ant-table-container,
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
.ant-dropdown-menu,
.ant-menu,
.ant-menu-item,
.ant-menu-submenu-title,
.ant-notification-notice,
.ant-message-notice-content,
.ant-popover-inner,
.ant-tooltip-inner,
.ant-badge-count,
.ant-avatar,
.ant-progress-inner,
.ant-progress-bg,
.ant-progress-success-bg,
.ant-steps-item-icon,
.ant-pagination-item,
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link,
.ant-checkbox-inner,
.ant-switch,
.ant-slider-handle,
.ant-upload,
.ant-segmented,
.ant-segmented-item,
.ant-collapse,
.ant-collapse-content,
.ant-result-content,
.ant-list,
.ant-descriptions-view,
.ant-empty-image,
.ant-spin-container,
.ant-timeline-item-head {
    border-radius: 0 !important;
}

/* ========================================
   SEM SOMBRA
   ======================================== */

.ant-card,
.ant-modal-content,
.ant-drawer-content-wrapper,
.ant-dropdown-menu,
.ant-notification-notice,
.ant-message-notice-content,
.ant-popover-inner,
.ant-btn,
.ant-btn:hover,
.ant-btn:focus,
.ant-btn:active,
.ant-table,
.ant-select-dropdown,
.ant-picker-panel-container,
.ant-layout-header,
.ant-layout-sider,
.ant-menu,
.ant-tabs-dropdown-menu,
.ant-back-top {
    box-shadow: none !important;
}

/* ========================================
   FOCO DE TECLADO
   ======================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ant-btn:focus-visible,
.ant-menu-item:focus-visible,
.ant-input:focus-visible,
.ant-select-selector:focus-visible {
    outline: var(--tcg-focus-outline);
    outline-offset: var(--tcg-focus-outline-offset);
}

/* Desabilitado */
.ant-btn[disabled],
.ant-btn[disabled]:hover,
.ant-input[disabled],
.ant-select-disabled .ant-select-selector {
    opacity: var(--tcg-disabled-opacity);
}

/* ========================================
   BOTÕES — 44px, rótulo à esquerda, sem transform
   ======================================== */

.ant-btn {
    height: var(--tcg-touch-target);
    padding: 0 var(--tcg-space-md);
    font-size: var(--tcg-font-size-base);
    font-weight: var(--tcg-font-weight-semibold);
    border-width: var(--tcg-border-width-thick);
    transition: background-color var(--tcg-transition-fast), color var(--tcg-transition-fast);
}

.ant-btn-lg {
    height: 52px;
}

.ant-btn-sm {
    height: 38px;
    font-size: var(--tcg-font-size-sm);
}

/* Primário */
.ant-btn-primary {
    background: var(--tcg-accent);
    border-color: var(--tcg-accent);
    color: #fff;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
    background: var(--tcg-accent-700);
    border-color: var(--tcg-accent-700);
    color: #fff;
}

/* Borda */
.ant-btn-default {
    background: transparent;
    border-color: var(--tcg-ink);
    color: var(--tcg-ink);
}

.ant-btn-default:hover,
.ant-btn-default:focus {
    background: var(--tcg-neutral-200);
    border-color: var(--tcg-ink);
    color: var(--tcg-ink);
}

/* Fantasma / link */
.ant-btn-text,
.ant-btn-link {
    border-color: transparent;
    color: var(--tcg-neutral-700);
}

.ant-btn-text:hover,
.ant-btn-link:hover {
    background: transparent;
    color: var(--tcg-accent);
}

/* Botão largo mantém o rótulo à esquerda */
.ant-btn-block {
    text-align: left;
}

/* Botão perigoso usa a mesma família do acento */
.ant-btn-dangerous {
    border-color: var(--tcg-accent);
    color: var(--tcg-accent-700);
}

/* ========================================
   LINKS
   ======================================== */

a {
    color: var(--tcg-accent-700);
}

a:hover {
    color: var(--tcg-accent);
}

/* ========================================
   CARTÕES — borda de 2px, sem raio, sem sombra
   ======================================== */

.ant-card {
    background: var(--tcg-surface);
    border: var(--tcg-border-frame);
}

.ant-card-head {
    border-bottom: var(--tcg-border-frame);
    min-height: auto;
    padding: 0 18px;
}

.ant-card-head-title {
    padding: 12px 0;
    font-size: var(--tcg-font-size-xs);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-group);
    text-transform: uppercase;
    color: var(--tcg-ink);
}

.ant-card-bordered {
    border: var(--tcg-border-frame);
}

/* ========================================
   TABELAS — cabeçalho em tinta, régua de 1px entre linhas
   ======================================== */

.ant-table {
    border: var(--tcg-border-frame);
    font-variant-numeric: tabular-nums;
}

.ant-table-thead > tr > th {
    background: var(--tcg-ink);
    color: var(--tcg-ground);
    font-size: var(--tcg-font-size-xs);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    text-transform: uppercase;
    border-bottom: none;
}

.ant-table-thead > tr > th::before {
    display: none !important;
}

.ant-table-tbody > tr > td {
    border-bottom: var(--tcg-border-rule);
}

.ant-table-tbody > tr:hover > td {
    background: var(--tcg-neutral-200);
}

/* Linha do próprio usuário */
.ant-table-tbody > tr.tcg-row-self > td {
    background: var(--tcg-accent-100);
}

.ant-table-tbody > tr.tcg-row-self > td:first-child {
    box-shadow: inset 4px 0 0 var(--tcg-accent);
}

/* Régua de 2px marcando o corte do top cut */
.ant-table-tbody > tr.tcg-row-cut > td {
    border-bottom: var(--tcg-border-frame);
}

/* ========================================
   CAMPOS DE FORMULÁRIO
   ======================================== */

.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select-selector,
.ant-picker {
    height: var(--tcg-touch-target);
    border: var(--tcg-border-width-thick) solid var(--tcg-border-color-field);
    background: var(--tcg-surface);
    font-size: var(--tcg-font-size-base);
    color: var(--tcg-ink);
}

.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
    line-height: 40px;
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
    border-color: var(--tcg-accent);
    box-shadow: none;
}

.ant-form-item-label > label {
    font-size: var(--tcg-font-size-xs);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    text-transform: uppercase;
    color: var(--tcg-neutral-600);
}

/* ========================================
   ETIQUETAS
   ======================================== */

.ant-tag {
    padding: 5px 10px;
    border: none;
    font-size: 12px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: 0.5px;
    line-height: 1;
}

/* ========================================
   ALERTA / ERRO
   ======================================== */

.ant-alert {
    border: var(--tcg-border-width-thick) solid var(--tcg-neutral-300);
    background: var(--tcg-neutral-200);
    color: var(--tcg-neutral-700);
}

.ant-alert-error {
    background: var(--tcg-accent-100);
    border-color: var(--tcg-accent);
    color: var(--tcg-accent-700);
}

.ant-alert-error .ant-alert-message,
.ant-alert-error .ant-alert-description {
    color: var(--tcg-accent-700);
}

/* ========================================
   ABAS — sublinhado em acento
   ======================================== */

.ant-tabs-ink-bar {
    background: var(--tcg-accent);
    height: 3px;
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--tcg-ink);
    font-weight: var(--tcg-font-weight-bold);
}

/* ========================================
   PROGRESSO
   ======================================== */

.ant-progress-inner {
    background: var(--tcg-neutral-200);
}

.ant-progress-bg {
    background: var(--tcg-accent);
}

/* ========================================
   AVATAR — quadrado
   ======================================== */

.ant-avatar {
    background: var(--tcg-ink);
    color: var(--tcg-ground);
    font-weight: var(--tcg-font-weight-bold);
}

/* ========================================
   UTILITÁRIOS DE LAYOUT
   ======================================== */

.tcg-page-wrapper {
    min-height: calc(100vh - var(--tcg-topbar-height));
    background: var(--tcg-bg-page);
}

/* Grid responsivo para cards de estatísticas */
.tcg-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--tcg-ink);
    border: var(--tcg-border-frame);
    margin-bottom: var(--tcg-space-lg);
}

@media (max-width: 1200px) {
    .tcg-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .tcg-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Row AntDesign com colunas de altura igual. */
.tcg-equal-height-row.ant-row {
    align-items: stretch;
}

.tcg-equal-height-row.ant-row > .ant-col {
    display: flex;
    flex-direction: column;
}

.tcg-equal-height-row.ant-row > .ant-col > .ant-card {
    flex: 1;
}

/* Grid de 2 colunas para conteúdo */
.tcg-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--tcg-space-lg);
}

@media (max-width: 992px) {
    .tcg-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   BOTÕES PADRONIZADOS
   ======================================== */

.tcg-action-buttons {
    display: flex;
    gap: var(--tcg-space-sm);
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .tcg-action-buttons {
        flex-direction: column;
    }

    .tcg-action-buttons > * {
        width: 100%;
    }
}

/* Segmentado: células coladas, ativa em tinta */
.tcg-segmented {
    display: inline-flex;
    gap: 0;
}

.tcg-segmented > * {
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    background: var(--tcg-surface);
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
    border-left: none;
    font-size: var(--tcg-font-size-sm);
    font-weight: var(--tcg-font-weight-semibold);
    color: var(--tcg-ink);
    cursor: pointer;
}

.tcg-segmented > *:first-child {
    border-left: var(--tcg-border-frame);
}

.tcg-segmented > *:hover {
    background: var(--tcg-neutral-200);
}

.tcg-segmented > .tcg-segmented-active,
.tcg-segmented > .tcg-segmented-active:hover {
    background: var(--tcg-ink);
    border-color: var(--tcg-ink);
    color: var(--tcg-ground);
}

/* ========================================
   ESTILOS DE TEXTO
   ======================================== */

.tcg-text-primary {
    color: var(--tcg-text-primary);
}

.tcg-text-secondary {
    color: var(--tcg-text-secondary);
}

.tcg-text-success {
    color: var(--tcg-success);
}

.tcg-text-warning {
    color: var(--tcg-warning);
}

.tcg-text-error {
    color: var(--tcg-accent-700);
}

.tcg-text-muted {
    color: var(--tcg-text-tertiary);
}

/* Rótulo: 11px/700, maiúsculas, letter-spacing 1.5px */
.tcg-label {
    font-size: var(--tcg-font-size-xs);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    text-transform: uppercase;
    color: var(--tcg-neutral-600);
}

/* ========================================
   ESPAÇAMENTOS UTILITÁRIOS
   ======================================== */

.tcg-mt-xs { margin-top: var(--tcg-space-xs); }
.tcg-mt-sm { margin-top: var(--tcg-space-sm); }
.tcg-mt-md { margin-top: var(--tcg-space-md); }
.tcg-mt-lg { margin-top: var(--tcg-space-lg); }

.tcg-mb-xs { margin-bottom: var(--tcg-space-xs); }
.tcg-mb-sm { margin-bottom: var(--tcg-space-sm); }
.tcg-mb-md { margin-bottom: var(--tcg-space-md); }
.tcg-mb-lg { margin-bottom: var(--tcg-space-lg); }

.tcg-p-xs { padding: var(--tcg-space-xs); }
.tcg-p-sm { padding: var(--tcg-space-sm); }
.tcg-p-md { padding: var(--tcg-space-md); }
.tcg-p-lg { padding: var(--tcg-space-lg); }

/* ========================================
   CARDS — hover sem sombra, sem transform
   ======================================== */

.tcg-card.ant-card,
.tcg-stat-card.ant-card,
.tcg-page-content .ant-card {
    transition: border-color var(--tcg-transition-fast);
}

.tcg-card.ant-card:hover,
.tcg-stat-card.ant-card:hover,
.tcg-page-content .ant-card:hover {
    border-color: var(--tcg-accent);
}

/* ========================================
   OVERRIDES DO ANTDESIGN PARA COMPONENTES CORE
   ======================================== */

/* O PageHeader do AntDesign traz o título em 20px; o sistema 2.0 pede 32px
   com tracking negativo, e o subtítulo desce para uma linha própria. */
.ant-page-header {
    background: transparent;
    padding: var(--tcg-space-md) 0;
}

.ant-page-header-heading-title {
    font-size: var(--tcg-font-size-xxxl);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-title);
    line-height: 1.15;
    color: var(--tcg-ink);
}

.ant-page-header-heading-sub-title {
    font-size: var(--tcg-font-size-base);
    color: var(--tcg-neutral-700);
}

.tcg-page-content .ant-page-header {
    background: transparent;
    padding: var(--tcg-space-md) 0;
}

.tcg-page-content .ant-breadcrumb {
    font-size: var(--tcg-font-size-sm);
}

.tcg-page-content .ant-breadcrumb-link {
    color: var(--tcg-text-secondary);
}

.tcg-page-content .ant-breadcrumb-link:hover {
    color: var(--tcg-accent);
}

.tcg-row {
    margin-bottom: var(--tcg-space-md);
}

/* ========================================
   ANIMAÇÕES
   ======================================== */

@keyframes tcg-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tcg-fade-in {
    animation: tcg-fade-in var(--tcg-transition-normal) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .tcg-fade-in {
        animation: none;
    }
}

/* ========================================
   ESTADOS INTERATIVOS
   ======================================== */

.tcg-clickable {
    cursor: pointer;
    transition: background-color var(--tcg-transition-fast);
}

.tcg-clickable:hover {
    background: var(--tcg-neutral-200);
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */

/*
 * Texto só para leitor de tela. As telas de execução marcam vencedor,
 * derrota e estado de mesa por cor e por quadrado; quem não enxerga a
 * cor precisa da mesma informação em palavras.
 */
.tcg-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   BOTÕES DO SISTEMA 2.0 (fora do AntDesign)
   ------------------------------------------
   As telas 2.0 são markup semântico: não passam por .ant-btn e por isso
   não herdam os overrides acima. Este é o mesmo botão do design system —
   altura 44px (alvo de toque), raio 0, sem sombra e rótulo alinhado à
   esquerda, inclusive em botão largo.

   Quatro papéis, na ordem em que o design os usa:
     .tcg-btn-primary   ação da tela, em acento
     .tcg-btn-outline   ação secundária, borda de tinta
     .tcg-btn-ghost     ação terciária, só texto
     .tcg-btn-dark      secundária sobre fundo Arena
   ======================================== */

.tcg-btn {
    height: var(--tcg-touch-target);
    padding: 0 var(--tcg-space-md);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--tcg-font-size-base);
    font-weight: var(--tcg-font-weight-bold);
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tcg-transition-fast), color var(--tcg-transition-fast);
}

/* Botão largo mantém o rótulo à esquerda — regra do design system. */
.tcg-btn-block {
    display: flex;
    width: 100%;
}

/* Altura maior para a ação principal de uma página pública. */
.tcg-btn-lg {
    height: 52px;
    font-size: var(--tcg-font-size-lg);
}

.tcg-btn-sm {
    height: 38px;
    font-size: var(--tcg-font-size-sm);
}

/* accent-700 em repouso, e não o accent.

   Branco sobre #ec3013 dá 4,20:1; texto de 15px em peso 700 não alcança o limiar de texto
   grande, então a exigência é 4,5:1 e o botão reprovava. O accent-700 (#c2260f) dá 5,87:1
   com o mesmo branco.

   O efeito colateral é real e vale dizer: o vermelho vivo deixa de ser a cor de fundo do
   botão primário. Ele continua sendo a cor do produto — anel de foco, estado ao vivo,
   vitória, a barra da marca. O botão passa a usar o tom impresso da mesma família, que a
   paleta já definia para "o vermelho quando precisa de contraste".

   Antes disto o botão passava no hover e reprovava parado, o que é a forma mais estranha
   possível de falhar em contraste. */
.tcg-btn-primary {
    background: var(--tcg-accent-700);
    color: #fff;
}

.tcg-btn-primary:hover,
.tcg-btn-primary:focus {
    background: var(--tcg-accent-800);
    color: #fff;
}

/* Fundo transparente, não branco.

   Sobre o ground (#f3f2f2) o branco desenhava um retângulo que competia com o campo de
   texto ao lado — três caixas brancas de tamanhos diferentes na mesma linha, sem hierarquia
   entre a superfície onde se digita e a ação que se clica. Transparente faz o botão assentar
   no fundo e deixa a moldura de 2px fazer o trabalho. É o que o DESIGN.md já declarava em
   `components.button-outline.backgroundColor`; o CSS é que tinha divergido. */
.tcg-btn-outline {
    background: transparent;
    color: var(--tcg-ink);
    border: var(--tcg-border-frame);
}

/* Hover preenche em tinta e inverte o texto — não cinza.

   O cinza chapado (neutral-200) não existe como estado no sistema: ele é cor de régua e de
   fundo de etiqueta. E `:focus` estava agrupado aqui, então o botão ficava cinza e assim
   permanecia depois do clique, como se estivesse desabilitado. Quem cuida do foco é o anel
   de `.tcg-btn:focus-visible`, que já existe — e só aparece para quem navega por teclado. */
.tcg-btn-outline:hover {
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
}

/* Variante de perigo: mesma moldura, família do acento. */
.tcg-btn-outline-danger {
    background: var(--tcg-surface);
    color: var(--tcg-accent-700);
    border: var(--tcg-border-width-thick) solid var(--tcg-accent);
}

.tcg-btn-outline-danger:hover,
.tcg-btn-outline-danger:focus {
    background: var(--tcg-accent-100);
    color: var(--tcg-accent-700);
}

.tcg-btn-ghost {
    background: transparent;
    color: var(--tcg-neutral-700);
}

.tcg-btn-ghost:hover,
.tcg-btn-ghost:focus {
    color: var(--tcg-accent);
}

.tcg-btn-dark {
    background: var(--tcg-arena-700);
    color: var(--tcg-ground);
}

.tcg-btn-dark:hover,
.tcg-btn-dark:focus {
    background: var(--tcg-arena-700, #2c2a28);
    color: var(--tcg-ground);
}

/* Botão claro sobre fundo Arena ou sobre a faixa de acento. */
.tcg-btn-light {
    background: var(--tcg-ground);
    color: var(--tcg-ink);
}

.tcg-btn-light:hover,
.tcg-btn-light:focus {
    background: #fff;
    color: var(--tcg-ink);
}

.tcg-btn:focus-visible {
    outline: var(--tcg-focus-outline);
    outline-offset: var(--tcg-focus-outline-offset);
}

/*
 * Desabilitado é opacidade 45% — e o motivo fica escrito na tela, ao lado
 * do botão. Um botão apagado sem explicação é um beco sem saída.
 */
.tcg-btn:disabled,
.tcg-btn[aria-disabled="true"] {
    opacity: var(--tcg-disabled-opacity);
    cursor: not-allowed;
}

.tcg-btn:disabled:hover,
.tcg-btn[aria-disabled="true"]:hover {
    background: inherit;
}

/* Botão de ícone: quadrado do alvo de toque. */
.tcg-btn-icon {
    width: var(--tcg-touch-target);
    padding: 0;
    justify-content: center;
}

/* ========================================
   ETAPAS, ETIQUETAS E ÍCONE DO AVISO — tirar o azul do AntDesign
   ========================================

   A paleta 2.0 não tem azul, verde nem roxo: os tokens de estado colapsam em
   tinta, neutro e acento de propósito (--tcg-success e --tcg-info são a própria
   tinta). O que sobrou do AntDesign aqui era só a cor — a forma já tinha sido
   corrigida no topo do arquivo, que zera raio e troca a fonte.

   Isto vale para o app inteiro, não para uma tela: um Steps azul está errado em
   qualquer página onde apareça. */

/* Etapa atual: quadrado de tinta, número no tom do fundo. */
.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon {
    background: var(--tcg-accent);
    border-color: var(--tcg-accent);
}

.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon .ant-steps-icon {
    color: var(--tcg-surface);
}

/* Etapa concluída: contorno de tinta e o "check" em tinta, não em azul. */
.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon {
    background: var(--tcg-surface);
    border-color: var(--tcg-ink);
}

.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon .ant-steps-icon,
.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon .ant-steps-icon .anticon {
    color: var(--tcg-ink);
}

.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
    background: var(--tcg-ink);
}

/* Etapa ainda não alcançada: cinza de campo, sem cor de marca. */
.ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-icon {
    background: var(--tcg-surface);
    border-color: var(--tcg-neutral-300);
}

.ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-icon .ant-steps-icon {
    color: var(--tcg-neutral-500);
}

.ant-steps-item-process .ant-steps-item-title {
    color: var(--tcg-ink);
    font-weight: 700;
}

.ant-steps-item-finish .ant-steps-item-title {
    color: var(--tcg-ink);
}

.ant-steps-item-wait .ant-steps-item-title,
.ant-steps-item-wait .ant-steps-item-description {
    color: var(--tcg-neutral-500);
}

/* Etiquetas. Toda cor nomeada do AntDesign vira o mesmo par tinta-sobre-neutro;
   só a etiqueta de acento e a de erro ficam vermelhas, porque acento é a única
   cor que a 2.0 usa para destacar. */
.ant-tag {
    border: var(--tcg-border-width) solid var(--tcg-neutral-300);
    background: var(--tcg-neutral-200);
    color: var(--tcg-text-secondary);
    font-weight: 600;
}

.ant-tag-blue,
.ant-tag-geekblue,
.ant-tag-cyan,
.ant-tag-green,
.ant-tag-lime,
.ant-tag-purple,
.ant-tag-magenta,
.ant-tag-gold,
.ant-tag-orange,
.ant-tag-processing,
.ant-tag-success,
.ant-tag-warning {
    border-color: var(--tcg-ink);
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
}

.ant-tag-red,
.ant-tag-volcano,
.ant-tag-error {
    border-color: var(--tcg-accent);
    background: var(--tcg-accent-100);
    color: var(--tcg-accent-700);
}

/* ========================================
   BADGE DE STATUS — mesmo par tinta/acento do Tag, não o semáforo do AntDesign.
   Tela de monitoramento (63): saúde de serviço não é verde/vermelho/amarelo.
   ======================================== */

.ant-badge-status-dot {
    border-radius: 0 !important;
}

.ant-badge-status-success .ant-badge-status-dot,
.ant-badge-status-processing .ant-badge-status-dot,
.ant-badge-status-default .ant-badge-status-dot {
    background: var(--tcg-ink);
}

.ant-badge-status-error .ant-badge-status-dot,
.ant-badge-status-warning .ant-badge-status-dot {
    background: var(--tcg-accent);
}

.ant-badge-status-error .ant-badge-status-text,
.ant-badge-status-warning .ant-badge-status-text {
    color: var(--tcg-accent-700);
    font-weight: var(--tcg-font-weight-bold);
}

/* O ícone do aviso continuava azul mesmo com a caixa já em cinza 2.0. */
.ant-alert-icon,
.ant-alert-info .ant-alert-icon {
    color: var(--tcg-ink);
}

.ant-alert-error .ant-alert-icon {
    color: var(--tcg-accent);
}

/* ========================================
   SÓ PARA LEITOR DE TELA, E O LINK DE PULAR
   ======================================== */

/* Rótulo que existe na árvore de acessibilidade e não ocupa espaço visual.
   Placeholder não é rótulo: some quando a pessoa digita, e nem todo leitor o
   anuncia. Onde o desenho não comporta um label visível, é esta classe que
   dá nome ao campo. */
.tcg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pular para o conteúdo: invisível até receber foco, primeiro elemento tabulável
   da página. Sem ele, quem navega por teclado atravessa o cabeçalho inteiro em
   cada página antes de chegar ao conteúdo. */
.tcg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 18px;
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
    font-weight: 700;
    text-decoration: none;
}

.tcg-skip-link:focus {
    left: 0;
    outline: var(--tcg-focus-outline);
    outline-offset: var(--tcg-focus-outline-offset);
}