/* ===== Fontes locais (self-hosted): sem dependência de CDN de terceiros =====
   Arquivos variáveis (um por subset) baixados do Google Fonts. O subset
   `vietnamese` do Archivo é o que carrega ẽ/ĩ/ũ/ỹ do guaraní. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/fonts/archivo-latin-cd56e2ec63d7a63df092f824f981253c.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/fonts/archivo-latin-ext-c5e41aa17045085afae47acffe97ba24.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/fonts/archivo-vietnamese-fca5a1ef9b8c10b63309ac8baee856d3.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-b636a65da4f00129f08c7df6e5dd75ac.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-ext-bd4781a31b4215a1e80868802b3d0e05.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;
    --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-num: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
    --tf-navy: #14110f;
    --tf-ink: #14110f;
    --tf-red: #d91e28;
    --tf-page: #faf9f7;
    --tf-muted: #57514c;
    --tf-input: #ffffff;
    --tf-border: #dfdad4;
    /* Design system "BJJ Pro Paraguay" */
    --tf-surface: #ffffff;
    --tf-line: #e7e2dc;
    --tf-line-soft: #ede9e4;
    --tf-faint: #8b837c;
    --tf-red-strong: #a5151c;
    --tf-red-bright: #ef4444;
    --tf-accent-soft: #fdeeee;
    --tf-gold: #c79a0a;
    --tf-gold-soft: #f5e6a8;
    --tf-gold-ink: #6b5406;
    /* Superfícies escuras (hero, seção de organizadores, rodapé) */
    --tf-dark: #14110f;
    --tf-dark-deep: #0e0c0b;
    --tf-dark-line: #2a2521;
    --tf-dark-line-soft: #211d1a;
    --tf-dark-elevated: #3a342f;
    --tf-on-dark: #ffffff;
    --tf-on-dark-muted: #9c948c;
    --tf-on-dark-faint: #6f6862;
    --tf-ok: #1a7f4e;
    --tf-ok-soft: #e7f5ee;
    --tf-warn: #9a6b00;
    --tf-warn-soft: #fbf3df;
    --tf-done-soft: #f0f0ee;
    /* Primitivo de campo de formulário (.tf-form-field): medidas únicas */
    --tf-field-h: 2.6rem;
    --tf-field-h-sm: 2.25rem;
    --tf-field-pad: 0.5rem 0.65rem;
    --tf-field-border: #dfdad4;
    --tf-field-radius: 0.4rem;
    --tf-field-ring: rgb(217 30 40 / 14%);
    --tf-field-error: #8f1419;
    --tf-label-size: 0.78rem;
    --tf-label-weight: 700;
    /* Kicker monoespaçado: o rótulo recorrente do design system */
    --tf-kicker-size: 0.6875rem;
    --tf-kicker-tracking: 0.16em;
    /* Régua do design system: no mockup todo container é
       `max-width: 1180px; margin: 0 auto; padding: ... 32px`. A caixa externa
       mede 73.75rem e o gutter vive dentro dela, então topbar, hero e conteúdo
       compartilham a mesma borda. O gutter acompanha o viewport. */
    --tf-shell-max: 73.75rem;
    --tf-shell-gutter: 1.25rem;
}

@media (min-width: 640px) {
    :root {
        --tf-shell-gutter: 1.5rem;
    }}

@media (min-width: 1024px) {
    :root {
        --tf-shell-gutter: 2rem;
    }}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    /* Sem o efeito elástico, o vão além do fim da página nunca abre. As telas de
       fundo escuro pintam o tema num wrapper (.tf-welcome-page), não no <body>,
       porque o hx-boost só troca o conteúdo do body — então o canvas continua
       claro e apareceria nesse vão. Precisa ficar no <html>: ao contrário de
       overflow, o overscroll-behavior do <body> não é propagado ao viewport. */
    overscroll-behavior: none;
}

body {
    margin: 0;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
}

/* Conteúdo só para leitores de tela (rótulos de busca sem rótulo visível). */
.tf-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

dl,
dd,
h1,
h2,
h3,
h4,
p {
    margin: 0;
}

[x-cloak] {
    display: none !important;
}

.tf-body {
    min-height: 100vh;
    background: var(--tf-page);
    color: var(--tf-ink);
    antialiasing: antialiased;
}

.tf-app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--tf-page);
    color: var(--tf-ink);
}

.tf-app-main {
    flex: 1 0 auto;
    background: var(--tf-page);
    color: var(--tf-ink);
    /* Evita o "salto" de scroll do navegador (scroll anchoring) quando o htmx
       troca o container de conteúdo inteiro via outerHTML em swaps in-place. */
    overflow-anchor: none;
}

.tf-app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    color: var(--tf-ink);
    background: var(--tf-surface);
    border-bottom: 1px solid var(--tf-line);
}

.tf-public-shell {
    width: 100%;
    max-width: var(--tf-shell-max);
    margin-inline: auto;
    padding-inline: var(--tf-shell-gutter);
}

.tf-public-nav {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
}

/* ===== Lockup da marca: bloco + "BJJ PRO PY" + kicker monoespaçado ===== */
.tf-public-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.6875rem;
    color: var(--tf-ink);
}

.tf-mobile-menu-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.625rem;
    color: var(--tf-on-dark);
}

.tf-brand-icon {
    width: 3.875rem;
    height: 1.625rem;
    flex: 0 0 auto;
}

.tf-brand-lockup {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.tf-brand-name {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
    font-size: 1.1875rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.tf-brand-name i {
    color: var(--tf-red);
    font-style: normal;
}

.tf-brand-kicker {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf-mobile-menu-brand .tf-brand-name {
    color: var(--tf-on-dark);
}

.tf-mobile-menu-brand .tf-brand-kicker {
    color: var(--tf-on-dark-faint);
}

.tf-public-brand .tf-brand-lockup {
    display: none;
}

.tf-public-menu {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    color: var(--tf-muted);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    scrollbar-width: none;
}

.tf-public-menu::-webkit-scrollbar {
    display: none;
}

.tf-public-menu a,
.tf-public-menu button {
    position: relative;
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 0.75rem;
    color: var(--tf-muted);
    background: transparent;
    font-family: var(--font-num);
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 150ms ease, background-color 150ms ease;
}

.tf-public-menu a:hover,
.tf-public-menu button:hover,
.tf-public-menu a.is-active,
.tf-public-menu button.is-active {
    color: var(--tf-ink);
}

.tf-public-menu a.is-active,
.tf-public-menu button.is-active {
    font-weight: 700;
}

.tf-public-menu a:focus-visible,
.tf-public-menu button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--tf-red);
}

/* Item corrente: filete vermelho colado na base da barra. */
.tf-public-menu a.is-active::after,
.tf-public-menu button.is-active::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    bottom: 0;
    left: 0.75rem;
    height: 0.125rem;
    background: var(--tf-red);
}

/* "Cerrar sesion" é uma ação secundária: monoespaçada, sem peso de link. */
.tf-public-menu .tf-logout-form button {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-public-menu a.tf-nav-cta {
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 0.625rem 1.125rem;
}

.tf-public-menu a.tf-nav-cta:hover {
    color: var(--tf-on-dark);
    background: var(--tf-red-strong);
}

/* Confirmação global das ações htmx. Vive nos layouts para continuar disponível
   após navegações boosted e evita depender dos diálogos nativos do navegador. */
.tf-confirmation-dialog {
    width: min(30rem, calc(100% - 2rem));
    max-width: none;
    border: 0;
    padding: 0;
    color: var(--tf-ink);
    background: transparent;
}

.tf-confirmation-dialog:not([open]) {
    display: none;
}

.tf-confirmation-dialog::backdrop {
    background: rgb(20 17 15 / 72%);
    backdrop-filter: blur(2px);
}

.tf-confirmation-panel {
    border: 1px solid var(--tf-line);
    padding: 1.5rem;
    background: var(--tf-surface);
    box-shadow: 0 1.5rem 4rem rgb(20 17 15 / 24%);
}

.tf-confirmation-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.tf-confirmation-header > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 800;
}

.tf-confirmation-header div {
    display: grid;
    gap: 0.25rem;
}

.tf-confirmation-header small {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-confirmation-header h2 {
    font-size: 1.25rem;
    line-height: 1.15;
}

.tf-confirmation-panel > p {
    margin-top: 1.125rem;
    color: var(--tf-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.tf-confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.tf-confirmation-actions button {
    min-height: 2.625rem;
    border: 1px solid var(--tf-ink);
    padding: 0.625rem 1.125rem;
    color: var(--tf-ink);
    background: var(--tf-surface);
    font-size: 0.8125rem;
    font-weight: 800;
}

.tf-confirmation-actions button:hover,
.tf-confirmation-actions button:focus-visible {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
    outline: 0;
}

.tf-confirmation-actions button.is-confirm {
    border-color: var(--tf-red);
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-confirmation-actions button.is-confirm:hover,
.tf-confirmation-actions button.is-confirm:focus-visible {
    border-color: var(--tf-red-strong);
    background: var(--tf-red-strong);
}

@media (max-width: 35rem) {
    .tf-confirmation-panel {
        padding: 1.25rem;
    }

    .tf-confirmation-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }}

.tf-mobile-menu-button {
    position: relative;
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tf-line);
    border-radius: 0.5rem;
    color: var(--tf-ink);
    background: transparent;
    transition: background-color 150ms ease;
}

.tf-mobile-menu-button:hover {
    background: rgb(23 24 26 / 6%);
}

.tf-mobile-menu-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--tf-red);
}

.tf-mobile-menu-button span {
    position: absolute;
    width: 1.25rem;
    height: 0.125rem;
    border-radius: 999px;
    background: currentColor;
}

.tf-mobile-menu-button span:nth-child(1) {
    transform: translateY(-0.375rem);
}

.tf-mobile-menu-button span:nth-child(3) {
    transform: translateY(0.375rem);
}

.tf-mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 38%);
    backdrop-filter: blur(1px);
}

.tf-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    display: flex;
    width: min(19.5rem, calc(100vw - 3rem));
    height: 100dvh;
    flex-direction: column;
    padding: 1.5rem;
    color: #ffffff;
    background: var(--tf-dark);
    box-shadow: -18px 0 42px rgb(0 0 0 / 22%);
}

.tf-mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tf-mobile-menu-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-mobile-menu-head button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.375rem;
    color: #ffffff;
    background: transparent;
}

.tf-mobile-menu-head button:hover {
    background: rgb(255 255 255 / 8%);
}

.tf-mobile-menu-head button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 70%);
}

.tf-mobile-menu-head svg {
    width: 1.5rem;
    height: 1.5rem;
}

.tf-mobile-menu-links {
    display: grid;
    margin-top: 2.5rem;
    border-block: 1px solid rgb(255 255 255 / 8%);
}

.tf-mobile-menu-links .tf-logout-form {
    display: contents;
}

.tf-mobile-menu-links a,
.tf-mobile-menu-links button {
    position: relative;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    padding: 1rem;
    color: rgb(255 255 255 / 68%);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    transition: background-color 150ms ease, color 150ms ease;
}

.tf-mobile-menu-links a:hover,
.tf-mobile-menu-links button:hover,
.tf-mobile-menu-links a.is-active,
.tf-mobile-menu-links button.is-active {
    color: #ffffff;
    background: rgb(255 255 255 / 8%);
}

.tf-mobile-menu-links a.is-active::before,
.tf-mobile-menu-links button.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.125rem;
    background: var(--tf-red);
}

.tf-public-hero {
    border-bottom: 1px solid var(--tf-line);
    color: var(--tf-ink);
    background: var(--tf-page);
}

/* Uma coluna por padrão; a partir de 62rem entra o painel do próximo evento. */
.tf-public-hero-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
    padding-top: 2.5rem;
}

.tf-public-hero-content {
    max-width: 44rem;
    padding-bottom: 2.25rem;
}

.tf-public-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6875rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-public-eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 0.25rem;
    flex: 0 0 auto;
    background: var(--tf-red);
}

.tf-public-hero h1 {
    max-width: 16ch;
    margin-top: 1.25rem;
    font-size: clamp(2.125rem, 6.4vw, 3.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.98;
    text-wrap: balance;
}

.tf-public-hero h1 strong {
    color: var(--tf-red);
    font-weight: inherit;
}

.tf-public-copy {
    max-width: 44ch;
    margin-top: 1.25rem;
    color: var(--tf-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ===== Painel "próximo evento": o único bloco escuro do hero ===== */
.tf-next-event {
    display: flex;
    flex-direction: column;
    gap: 1.625rem;
    align-self: stretch;
    padding: 2.125rem 1.875rem 1.875rem;
    color: var(--tf-on-dark);
    background: var(--tf-dark);
}

.tf-next-event-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tf-next-event-head span {
    color: var(--tf-on-dark-muted);
}

.tf-next-event-head b {
    padding: 0.25rem 0.5rem;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.tf-next-event-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tf-next-event-date {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-next-event-title h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.tf-next-event-title p {
    color: var(--tf-on-dark-muted);
    font-size: 0.875rem;
}

.tf-next-event-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    border-block: 1px solid var(--tf-dark-line);
    padding-block: 1.125rem;
}

.tf-next-event-facts div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

/* Filete vertical entre os dados, como no mockup. */
.tf-next-event-facts div + div {
    border-left: 1px solid var(--tf-dark-line);
    padding-left: 1.25rem;
}

.tf-next-event-facts dt {
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-next-event-facts dd {
    color: var(--tf-on-dark);
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-next-event-facts .tf-fact-value-num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.tf-next-event-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tf-next-event-actions a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding-inline: 1rem;
    font-size: 0.875rem;
    font-weight: 800;
    text-align: center;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.tf-next-event-actions a:first-child {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-next-event-actions a:first-child:hover {
    background: var(--tf-red-bright);
}

.tf-next-event-actions a:last-child {
    border: 1.5px solid var(--tf-dark-elevated);
    color: var(--tf-on-dark);
}

.tf-next-event-actions a:last-child:hover {
    border-color: var(--tf-on-dark);
}

.tf-next-event-actions a:focus-visible {
    outline: 2px solid var(--tf-on-dark);
    outline-offset: 2px;
}

.tf-public-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.tf-hero-primary-action,
.tf-hero-secondary-action {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding-inline: 1.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.tf-hero-primary-action {
    color: #ffffff;
    background: var(--tf-red);
}

.tf-hero-primary-action:hover {
    background: var(--tf-red-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgb(215 25 32 / 35%);
}

.tf-hero-secondary-action {
    border: 1.5px solid var(--tf-line);
    color: var(--tf-ink);
    background: transparent;
}

.tf-hero-secondary-action:hover {
    border-color: var(--tf-ink);
}

.tf-public-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.75rem;
    max-width: 30rem;
    margin-top: 1.625rem;
    border-top: 1px solid var(--tf-line);
    padding-top: 1.625rem;
}

.tf-public-stats dt {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
}

.tf-public-stats div:nth-child(2) dt {
    color: var(--tf-red);
}

.tf-public-stats dd {
    margin-top: 0.3125rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-public-content {
    padding-block: 2.75rem 4.5rem;
}

/* ===== Faixa "para organizadores": convite escuro antes do rodapé ===== */
.tf-organizers {
    color: var(--tf-on-dark);
    background: var(--tf-dark);
}

.tf-organizers-grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding-block: 3.5rem;
}

.tf-organizers-copy {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    align-items: flex-start;
}

.tf-organizers-copy h2 {
    max-width: 18ch;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.tf-organizers-copy p {
    max-width: 46ch;
    color: var(--tf-on-dark-muted);
    font-size: 1rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-organizers-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.375rem;
}

.tf-organizers-actions a {
    display: inline-flex;
    min-height: 2.875rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding-inline: 1.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.tf-organizers-actions a:first-child {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-organizers-actions a:first-child:hover {
    background: var(--tf-red-bright);
}

.tf-organizers-actions a:focus-visible {
    outline: 2px solid var(--tf-on-dark);
    outline-offset: 2px;
}

/* Grade de números reais da plataforma: as células são separadas pelo gap,
   que deixa a cor de fundo aparecer como filete de 1px. */
.tf-organizers-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--tf-dark-line);
}

.tf-organizers-stats div {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 1.625rem 1.375rem;
    background: var(--tf-dark);
}

.tf-organizers-stats dt {
    color: var(--tf-on-dark);
    font-family: var(--font-num);
    font-size: 1.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tf-organizers-stats dd {
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ===== Rodapé do site ===== */
.tf-site-footer {
    border-top: 1px solid var(--tf-dark-line);
    color: var(--tf-on-dark);
    background: var(--tf-dark-deep);
}

.tf-site-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding-block: 3rem 2.125rem;
}

.tf-site-footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
}

.tf-site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.tf-site-footer-brand p {
    max-width: 20rem;
    color: var(--tf-on-dark-faint);
    font-size: 0.84375rem;
    line-height: 1.6;
}

.tf-site-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3.5rem;
}

.tf-site-footer-columns nav {
    display: flex;
    min-width: 8rem;
    flex-direction: column;
    gap: 0.75rem;
}

.tf-site-footer-columns h2 {
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-site-footer-columns a {
    color: #c9c2bb;
    font-size: 0.84375rem;
    transition: color 150ms ease;
}

.tf-site-footer-columns a:hover {
    color: var(--tf-on-dark);
}

.tf-site-footer-columns a:focus-visible {
    outline: 2px solid var(--tf-on-dark);
    outline-offset: 2px;
}

.tf-site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--tf-dark-line-soft);
    padding-top: 1.375rem;
}

.tf-site-footer-bottom small {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Assinatura tricolor: branco, vermelho e ouro do design system. */
.tf-site-footer-flag {
    display: flex;
    gap: 0.25rem;
}

.tf-site-footer-flag i {
    width: 1.375rem;
    height: 0.25rem;
    background: var(--tf-on-dark);
}

.tf-site-footer-flag i:nth-child(2) {
    background: var(--tf-red);
}

.tf-site-footer-flag i:nth-child(3) {
    background: var(--tf-gold);
}

/* A busca pública usa o primitivo .tf-form-field (fragmento `search`); aqui fica
   apenas a faixa de filtros que a acompanha. */
.tf-public-tournament-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 0.5rem;
}

.tf-public-tournament-search .tf-form-field {
    gap: 0;
}

.tf-public-tournament-search-submit,
.tf-public-tournament-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border: 1px solid var(--tf-ink);
    border-radius: 999px;
    padding-inline: 1rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.tf-public-tournament-search-submit {
    color: var(--tf-page);
    background: var(--tf-ink);
}

.tf-public-tournament-search-clear {
    color: var(--tf-ink);
    background: var(--tf-surface);
}

.tf-public-tournament-search-clear:hover {
    border-color: var(--tf-muted);
}

.tf-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.tf-filter-row::-webkit-scrollbar {
    display: none;
}

.tf-filter-row button,
.tf-filter-row a {
    display: inline-flex;
    min-height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5625rem;
    border: 1px solid var(--tf-line);
    border-radius: 999px;
    padding-inline: 1rem;
    color: var(--tf-ink);
    background: var(--tf-surface);
    font-size: 0.84375rem;
    font-weight: 700;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.tf-filter-row button:hover,
.tf-filter-row a:hover {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
}

.tf-filter-row button.is-active,
.tf-filter-row a.is-active {
    border-color: var(--tf-ink);
    color: var(--tf-page);
    background: var(--tf-ink);
}

.tf-filter-row small {
    border-radius: 999px;
    padding: 0.125rem 0.375rem;
    color: var(--tf-muted);
    background: #f1efec;
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
}

.tf-filter-row button.is-active small,
.tf-filter-row a.is-active small {
    color: var(--tf-on-dark);
    background: #332e2a;
}

/* Paginação: classe própria para não herdar o espaçamento do hero — e para que
   o fragmento de resultados nunca contenha a string "tf-public-hero". */
.tf-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.tf-pagination span {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Linha de resultado: contagem à esquerda, critério de ordenação à direita. */
.tf-result-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.tf-result-count {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-result-count strong {
    color: var(--tf-ink);
}

.tf-result-order {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf-tournament-grid {
    display: grid;
    gap: 1.375rem;
    margin-top: 1.5rem;
}

.tf-tournament-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.625rem;
    background: var(--tf-surface);
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.tf-tournament-card:hover {
    border-color: var(--tf-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgb(20 17 15 / 8%);
}

/* Cartaz gerado: sem imagem enviada, a capa é a sigla do torneo sobre a
   textura diagonal do design system. */
.tf-card-banner {
    position: relative;
    height: 13.125rem;
    overflow: hidden;
    background: var(--tf-dark);
}

.tf-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-card-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background:
        repeating-linear-gradient(115deg, rgb(255 255 255 / 4.5%) 0 1px, transparent 1px 13px),
        linear-gradient(140deg, #1b1512 0%, #2e1214 48%, #14110f 100%);
    text-align: center;
    text-transform: uppercase;
}

/* No card os selos ficam sobrepostos no topo e podem quebrar em duas linhas
   ("Inscripciones abiertas" + "Cupos limitados"), então o conteúdo do cartaz
   começa abaixo dessa faixa. O drawer reusa o cartaz sem selos e não precisa. */
.tf-card-banner .tf-card-poster {
    padding-top: 3.875rem;
}

.tf-poster-kicker {
    color: var(--tf-on-dark-muted);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.26em;
}

.tf-poster-title {
    color: var(--tf-red-bright);
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
}

.tf-poster-sub {
    border: 1px solid var(--tf-red);
    padding: 0.25rem 0.625rem;
    color: var(--tf-on-dark);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.tf-card-badges {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    left: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tf-badge {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-badge-sport {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-badge-open {
    color: var(--tf-ink);
    background: var(--tf-on-dark);
}

.tf-badge-closed {
    color: var(--tf-on-dark);
    background: var(--tf-dark-elevated);
}

.tf-badge-limit {
    color: var(--tf-ink);
    background: var(--tf-gold);
}

/* Selo de data encaixado no canto inferior do cartaz, sem margem. */
.tf-card-date {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 0.5rem 0 0;
    padding: 0.4375rem 0.75rem;
    color: var(--tf-ink);
    background: var(--tf-page);
    font-family: var(--font-num);
    line-height: 1;
}

.tf-card-date-day {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tf-card-date-month {
    margin-top: 0.125rem;
    color: var(--tf-red);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.125rem 1.125rem 1.25rem;
}

.tf-card-body h2 {
    color: var(--tf-ink);
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.tf-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    color: var(--tf-muted);
    font-size: 0.8125rem;
}

.tf-card-meta .tf-card-meta-date {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.75rem;
}

.tf-card-meta-item {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.3125rem;
}

.tf-card-meta-item svg {
    width: 0.8125rem;
    height: 0.8125rem;
    flex: 0 0 auto;
    opacity: 0.7;
}

.tf-card-meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-card-capacity {
    margin-top: auto;
}

.tf-capacity-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.4375rem;
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-capacity-line b {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.75rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.tf-capacity-bar {
    height: 0.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tf-line-soft);
}

.tf-capacity-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tf-red);
}

.tf-card-capacity.is-high .tf-capacity-bar i {
    background: var(--tf-gold);
}

.tf-card-fee {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
}

.tf-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin-top: auto;
}

/* Quando a barra de cupos aparece, é ela que empurra o bloco para o rodapé. */
.tf-card-capacity + .tf-card-actions {
    margin-top: 0;
}

.tf-card-actions > a:only-child {
    grid-column: span 2;
}

.tf-tournament-card .tf-primary-action,
.tf-tournament-card .tf-secondary-action {
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 800;
}

.tf-tournament-card .tf-primary-action {
    border: 0;
}

.tf-tournament-card .tf-primary-action:hover {
    background: var(--tf-red-strong);
    box-shadow: 0 4px 12px rgb(217 30 40 / 35%);
}

.tf-tournament-card .tf-secondary-action {
    border: 1.5px solid var(--tf-border);
    background: transparent;
}

.tf-tournament-card .tf-secondary-action:hover {
    border-color: var(--tf-ink);
}

.tf-public-details-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100vw, 44rem);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    overflow: hidden;
    border: 0;
    padding: 0;
    color: var(--tf-ink);
    background: transparent;
}

.tf-public-details-dialog::backdrop {
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(3px);
    animation: tf-public-details-fade-in 240ms ease-out both;
}

.tf-public-details-dialog.is-closing {
    pointer-events: none;
}

.tf-public-details-dialog.is-closing::backdrop {
    animation: tf-public-details-fade-out 260ms ease-in both;
}

.tf-public-details-panel {
    position: relative;
    display: flex;
    width: 100%;
    height: 100dvh;
    margin-left: auto;
    flex-direction: column;
    overflow: hidden;
    background: var(--tf-surface);
    box-shadow: -18px 0 48px rgb(24 24 24 / 24%);
    animation: tf-public-details-slide-in 380ms cubic-bezier(0.4, 0, 0.2, 1) both;
    will-change: transform;
}

.tf-public-details-dialog.is-closing .tf-public-details-panel {
    animation: tf-public-details-slide-out 260ms cubic-bezier(0.4, 0, 1, 1) both;
}

.tf-public-details-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 1rem;
}

.tf-public-details-media {
    position: relative;
    width: 100%;
    height: 15rem;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--tf-dark);
}

/* A capa do drawer é maior que a do card, então a sigla acompanha. */
.tf-public-details-media .tf-poster-title {
    font-size: 4.75rem;
    letter-spacing: -0.07em;
    line-height: 0.92;
}

.tf-public-details-return {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    color: var(--tf-on-dark);
    background: rgb(250 249 247 / 12%);
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.tf-public-details-return:hover {
    border-color: var(--tf-red);
    background: var(--tf-red);
    transform: translateX(-2px);
}

.tf-public-details-return:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tf-public-details-return svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Selo de data encaixado no canto inferior da capa: dia/mês empilhados,
   filete e a data por extenso. */
.tf-public-details-date {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    border-radius: 0 0.5rem 0 0;
    padding: 0.5625rem 1rem;
    background: var(--tf-surface);
}

.tf-public-details-date > span {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tf-public-details-date b {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tf-public-details-date i {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* O filete acompanha o fluxo do flex; posicioná-lo por offset fixo cortava a
   data quando o mês tinha outra largura. */
.tf-public-details-date time {
    border-left: 1px solid var(--tf-line-soft);
    padding-left: 0.6875rem;
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    line-height: 1.5rem;
}

.tf-public-details-content {
    display: grid;
    gap: 1.5rem;
    padding: 1.25rem 1rem 1.5rem;
}

.tf-public-details-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tf-public-details-badges span {
    border-radius: 0.25rem;
    padding: 0.3125rem 0.5625rem;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-public-details-badges span:nth-child(2) {
    background: var(--tf-dark);
}

.tf-public-details-badges span:nth-child(3) {
    color: var(--tf-gold-ink);
    background: var(--tf-gold-soft);
}

.tf-public-details-content h2 {
    color: var(--tf-ink);
    font-size: clamp(1.5rem, 5vw, 2.125rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

/* Local e ocupação, separados por um ponto, logo abaixo do título. */
.tf-public-details-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: -0.75rem;
    color: var(--tf-muted);
    font-size: 0.90625rem;
}

.tf-public-details-meta b {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.78125rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.tf-public-details-meta b::before {
    content: "";
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: #c9c2bb;
}

/* Modalidad e sede: duas células com filete de 1px vindo do fundo. */
.tf-public-details-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    gap: 1px;
    border: 1px solid var(--tf-line-soft);
    border-radius: 0.625rem;
    background: var(--tf-line-soft);
}

.tf-public-details-facts div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    background: var(--tf-surface);
}

.tf-public-details-facts dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-public-details-facts dd {
    color: var(--tf-ink);
    font-size: 0.875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tf-public-details-section {
    display: grid;
    gap: 1rem;
}

/* Rótulo de seção: monoespaçado com o filete correndo até a margem. */
.tf-public-details-section > h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-public-details-section > h3::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: var(--tf-line-soft);
}

.tf-public-lot-list,
.tf-public-details-sections {
    display: grid;
    gap: 0.75rem;
}

.tf-public-lot-card {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.625rem;
    background: var(--tf-surface);
}

.tf-public-lot-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--tf-line-soft);
    padding: 0.8125rem 1rem;
    background: var(--tf-page);
}

.tf-public-lot-card header strong {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    color: var(--tf-ink);
    font-size: 0.875rem;
    font-weight: 800;
}

.tf-public-lot-card header strong > span:first-child {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--tf-red);
}

.tf-public-lot-card header small {
    flex: 0 0 auto;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.71875rem;
}

.tf-public-lot-card dl {
    display: grid;
    padding-inline: 1rem;
}

.tf-public-lot-card dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--tf-line-soft);
    padding-block: 0.8125rem;
}

.tf-public-lot-card dl > div:last-child {
    border-bottom: 0;
}

.tf-public-lot-card dt {
    color: var(--tf-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.tf-public-lot-card dd {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.84375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Informações: filete vertical colorido à esquerda, como no mockup. */
.tf-public-info-block {
    display: grid;
    gap: 0.3125rem;
    border-left: 3px solid var(--tf-border);
    padding-left: 0.8125rem;
}

.tf-public-info-block h4 {
    color: var(--tf-ink);
    font-size: 0.84375rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-transform: uppercase;
}

.tf-public-info-block.is-warning {
    border-left-color: var(--tf-red);
}

.tf-public-info-block.is-warning h4 {
    color: var(--tf-red);
}

.tf-public-info-block p {
    color: var(--tf-muted);
    font-size: 0.90625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-public-details-actions {
    display: grid;
    /* A ação principal fica mais larga que "Cerrar", como no mockup. */
    grid-template-columns: 1.4fr 1fr;
    gap: 0.75rem;
    flex: 0 0 auto;
    border-top: 1px solid var(--tf-line);
    padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: var(--tf-surface);
    box-shadow: 0 -14px 34px rgb(24 24 24 / 10%);
}

/* CTA indisponível vira superfície neutra, não um vermelho esmaecido. */
.tf-public-details-actions .tf-primary-action:disabled {
    cursor: not-allowed;
    color: var(--tf-faint);
    background: #f1efec;
}

@keyframes tf-public-details-fade-in {
    from {
        background: rgb(0 0 0 / 0%);
        backdrop-filter: blur(0);
    }
}

@keyframes tf-public-details-fade-out {
    to {
        background: rgb(0 0 0 / 0%);
        backdrop-filter: blur(0);
    }
}

@keyframes tf-public-details-slide-in {
    from {
        transform: translateX(100%);
    }
}

@keyframes tf-public-details-slide-out {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tf-public-details-dialog::backdrop,
    .tf-public-details-dialog.is-closing::backdrop,
    .tf-public-details-panel,
    .tf-public-details-dialog.is-closing .tf-public-details-panel {
        animation-duration: 1ms;
    }}

.tf-sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    border-top: 1px solid var(--tf-line);
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(10px);
}

.tf-sticky-cta p {
    color: var(--tf-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.tf-sticky-cta p strong {
    display: block;
    color: var(--tf-ink);
    font-size: 0.875rem;
}

.tf-sticky-cta .tf-hero-primary-action {
    min-height: 2.75rem;
    flex: 0 0 auto;
    padding-inline: 1.25rem;
    font-size: 0.875rem;
}

.tf-primary-action,
.tf-secondary-action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding-inline: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    border: 1.5px solid var(--tf-line);
    background: transparent;
}

.tf-primary-action {
    border: 0;
    color: #ffffff;
    background: var(--tf-red);
}

.tf-primary-action:hover {
    background: var(--tf-red-strong);
    box-shadow: 0 4px 12px rgb(215 25 32 / 35%);
}

.tf-secondary-action {
    border: 1px solid var(--tf-border);
    color: var(--tf-navy);
    background: #ffffff;
}

.tf-secondary-action:hover {
    border-color: var(--tf-navy);
}

.tf-empty-state {
    margin-top: 1.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.75rem;
    padding: 2.5rem 2rem;
    background: var(--tf-surface);
    text-align: center;
}

.tf-empty-state h2 {
    color: var(--tf-ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tf-empty-state p {
    margin-top: 0.5rem;
    color: var(--tf-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tf-auth-frame {
    display: flex;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--tf-page);
}

.tf-auth-shell {
    display: flex;
    width: 100%;
    max-width: 28rem;
    flex-direction: column;
    gap: 1rem;
}

.tf-auth-brand {
    display: inline-flex;
    align-self: center;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    color: var(--tf-ink);
}

.tf-auth-brand .tf-brand-icon {
    width: 4.625rem;
    height: 1.9375rem;
}

.tf-auth-brand .tf-brand-lockup {
    align-items: center;
}

.tf-auth-brand .tf-brand-name {
    font-size: 1.375rem;
}

.tf-auth-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(23 24 26 / 5%);
}

.tf-auth-header {
    display: grid;
    gap: 0.4rem;
    text-align: center;
}

.tf-auth-header h1 {
    color: var(--tf-navy);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.tf-auth-header p {
    color: #686868;
    font-size: 0.92rem;
    line-height: 1.45rem;
}

.tf-auth-alert {
    border: 1px solid rgb(215 25 32 / 24%);
    border-radius: 0.375rem;
    padding: 0.75rem 0.875rem;
    color: #8f1419;
    background: rgb(215 25 32 / 8%);
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-auth-form {
    display: grid;
    gap: 1rem;
}

.tf-phone-grid,
.tf-registration-athlete-phone {
    display: grid;
    grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr);
    gap: 0.5rem;
}

.tf-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1rem;
    color: #ffffff;
    background: var(--tf-red);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: transform 150ms ease, background-color 150ms ease;
}

/* Vive no CSS compartilhado (nao no <style> do layout auth): navegacao boosted
   troca so o <body>, entao regras de /login precisam existir em qualquer head. */
.login-spinner {
    display: none;
}

.htmx-request .login-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tf-auth-submit:hover {
    background: #bd141a;
    transform: translateY(-1px);
}

.tf-auth-submit:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgb(215 25 32 / 24%);
}

.tf-auth-switch {
    color: #686868;
    font-size: 0.875rem;
    text-align: center;
}

.tf-auth-switch a {
    color: var(--tf-red);
    font-weight: 900;
}

/* ===== Login — mockup BJJ Pro PY Login =====
   As regras ficam no CSS compartilhado porque a tela também pode ser alcançada
   por navegação htmx boosted, que preserva o <head> da página de origem. */
.tf-login-page {
    display: grid;
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: var(--tf-page);
}

.tf-login-showcase {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 3rem;
    padding: 3rem 3.1875rem;
    color: var(--tf-on-dark);
    background: var(--tf-dark);
}

.tf-login-brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.6875rem;
    color: var(--tf-on-dark);
}

.tf-login-brand:hover {
    color: var(--tf-on-dark);
}

.tf-login-brand .tf-brand-icon {
    width: 3.875rem;
    height: 1.625rem;
    flex: none;
}

.tf-login-brand .tf-brand-lockup {
    gap: 0.1875rem;
}

.tf-login-brand .tf-brand-name {
    color: var(--tf-on-dark);
    font-size: 1.1875rem;
    line-height: 1;
}

.tf-login-brand .tf-brand-kicker {
    color: #8b837c;
    font-size: 0.5rem;
    letter-spacing: 0.22em;
}

.tf-login-showcase-copy {
    align-self: center;
    max-width: 40rem;
    transform: translateY(-4.25rem);
}

.tf-login-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    margin: 0 0 1.625rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-login-eyebrow span {
    width: 1.5rem;
    height: 0.25rem;
    background: var(--tf-red);
}

.tf-login-showcase-copy h1 {
    margin: 0;
    color: var(--tf-on-dark);
    font-size: clamp(3rem, 3.7vw, 3.625rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.94;
    text-wrap: balance;
}

.tf-login-showcase-copy > p:last-child {
    max-width: 25rem;
    margin: 1.625rem 0 0;
    color: #9c948c;
    font-size: 1rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-login-access {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
}

.tf-login-card {
    display: flex;
    width: 100%;
    max-width: 26.25rem;
    flex-direction: column;
    gap: 1.875rem;
}

.tf-login-header {
    display: grid;
    gap: 0.5625rem;
}

.tf-login-header h2 {
    margin: 0;
    color: var(--tf-ink);
    font-size: 2.125rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.tf-login-header p {
    margin: 0;
    color: #57514c;
    font-size: 0.90625rem;
}

.tf-login-header a,
.tf-login-options a {
    color: var(--tf-red);
    font-weight: 700;
}

.tf-login-header a:hover,
.tf-login-options a:hover {
    color: var(--tf-red-strong);
}

.tf-login-card .tf-auth-form {
    gap: 1rem;
}

.tf-login-card .tf-form-field {
    gap: 0.4375rem;
}

.tf-login-card [class~="tf-form-field"] > span {
    color: #57514c;
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-login-card .tf-form-field input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 2.875rem;
    border-color: #e7e2dc;
    border-radius: 0;
    padding: 0.875rem 0.9375rem;
    color: var(--tf-ink);
    font-size: 0.9375rem;
    line-height: 1.1;
}

.tf-login-card .tf-form-field input:not([type="checkbox"]):not([type="radio"])::placeholder {
    color: #a8a09a;
    opacity: 1;
}

.tf-login-card .tf-form-field input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--tf-ink);
    box-shadow: none;
}

.tf-login-password-field {
    position: relative;
}

.tf-login-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    padding: 0;
    color: #8b837c;
    background: transparent;
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tf-login-password-toggle:hover,
.tf-login-password-toggle:focus-visible {
    color: var(--tf-red);
}

.tf-login-password-toggle:focus-visible {
    outline: 2px solid var(--tf-red);
    outline-offset: 0.1875rem;
}

.tf-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.125rem;
}

.tf-login-card .tf-form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    color: #57514c;
    font-size: 0.84375rem;
    font-weight: 400;
}

.tf-login-card .tf-form-check input {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: none;
    appearance: none;
    border: 1.5px solid #c9c2ba;
    border-radius: 0;
    background: #ffffff;
}

.tf-login-card .tf-form-check input:checked {
    border-color: var(--tf-ink);
    background-color: var(--tf-ink);
    background-image: linear-gradient(#ffffff, #ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.4375rem 0.4375rem;
}

.tf-login-card .tf-form-check input:focus-visible {
    outline: 2px solid var(--tf-red);
    outline-offset: 0.1875rem;
}

.tf-login-options > a {
    flex: none;
    font-size: 0.84375rem;
}

.tf-login-card .tf-auth-alert {
    border: 0;
    border-left: 3px solid var(--tf-red);
    border-radius: 0;
    padding: 0.75rem 0.875rem;
    color: var(--tf-red-strong);
    background: #fdf0f0;
    font-size: 0.84375rem;
    font-weight: 500;
}

.tf-login-submit {
    min-height: 2.875rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.tf-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #a8a09a;
    font-family: var(--font-num);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: -1rem;
}

.tf-login-divider::before,
.tf-login-divider::after {
    height: 1px;
    flex: 1;
    background: #e7e2dc;
    content: "";
}

.tf-login-divider span {
    white-space: nowrap;
}

.tf-login-provider {
    min-height: 2.625rem;
    margin-top: -1rem;
    border: 1.5px solid var(--tf-ink);
    border-radius: 0;
    padding: 0.75rem 1rem;
    color: var(--tf-ink);
    background: transparent;
    font-size: 0.84375rem;
    font-weight: 800;
}

.tf-login-provider:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.tf-login-provider:hover:not(:disabled),
.tf-login-provider:focus-visible {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
}

.tf-login-support {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-top: 1px solid #e7e2dc;
    padding-top: 1.25rem;
}

.tf-login-support > span {
    color: #a8a09a;
    font-family: var(--font-num);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-login-support p {
    margin: 0;
    color: #57514c;
    font-size: 0.8125rem;
}

/* ===== Registro — mockup BJJ Pro PY Registro ===== */
.tf-register-page {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.tf-register-showcase {
    gap: 2.75rem;
    padding: 2.75rem 3.25rem;
}

.tf-register-showcase-copy {
    align-self: center;
    max-width: 29rem;
    transform: translateY(-5rem);
}

.tf-register-showcase-copy .tf-login-eyebrow {
    margin-bottom: 1.5rem;
    color: var(--tf-red);
}

.tf-register-showcase-copy h1 {
    margin: 0;
    color: var(--tf-on-dark);
    font-size: clamp(2.75rem, 3.15vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.96;
    text-wrap: balance;
}

.tf-register-showcase-copy > p {
    max-width: 21.25rem;
    margin: 1.5rem 0 0;
    color: #9c948c;
    font-size: 0.96875rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-register-benefits {
    display: grid;
    gap: 0.8125rem;
    margin: 1.875rem 0 0;
    padding: 0;
    color: #c9c2ba;
    font-size: 0.84375rem;
    line-height: 1.45;
    list-style: none;
}

.tf-register-benefits li {
    position: relative;
    padding-left: 1.0625rem;
}

.tf-register-benefits li::before {
    position: absolute;
    top: 0.45rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--tf-red);
    content: "";
}

.tf-register-access {
    align-items: flex-start;
    padding-top: 3rem;
}

.tf-register-card {
    max-width: 32.5rem;
    gap: 1.625rem;
}

.tf-register-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tf-register-card .tf-form-field select {
    min-height: 2.875rem;
    border-color: #e7e2dc;
    border-radius: 0;
    padding: 0.75rem 0.9375rem;
    color: var(--tf-ink);
    background: #ffffff;
    font-size: 0.875rem;
    line-height: 1.1;
}

.tf-register-card .tf-form-field select:focus {
    border-color: var(--tf-ink);
    box-shadow: none;
}

.tf-register-submit-group {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.6875rem;
}

.tf-register-submit-group .tf-login-submit {
    width: 100%;
}

.tf-register-submit-group p {
    margin: 0;
    color: #8b837c;
    font-size: 0.78125rem;
    text-align: center;
}

.tf-register-card .tf-login-divider {
    margin-top: -0.25rem;
}

@media (max-width: 56rem) {
    .tf-login-page {
        grid-template-columns: 1fr;
    }

    .tf-login-showcase {
        min-height: 18rem;
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .tf-login-showcase-copy h1 {
        font-size: clamp(2.5rem, 8vw, 3.25rem);
    }

    .tf-login-showcase-copy {
        transform: none;
    }

    .tf-register-showcase-copy {
        transform: none;
    }

    .tf-login-access {
        padding-block: 3.5rem;
    }

    .tf-register-access {
        align-items: center;
    }}

@media (max-width: 32rem) {
    .tf-login-showcase {
        min-height: auto;
        gap: 2.5rem;
        padding: 1.5rem 1.25rem 2rem;
    }

    .tf-login-showcase-copy h1 {
        font-size: 2.25rem;
    }

    .tf-login-showcase-copy > p:last-child {
        margin-top: 1rem;
        font-size: 0.9rem;
    }

    .tf-login-eyebrow {
        margin-bottom: 1rem;
    }

    .tf-login-access {
        padding: 2.5rem 1.25rem;
    }

    .tf-login-header h2 {
        font-size: 1.875rem;
    }

    .tf-register-showcase-copy h1 {
        font-size: 2.25rem;
    }

    .tf-register-showcase-copy > p {
        margin-top: 1rem;
        font-size: 0.9rem;
    }

    .tf-register-benefits {
        margin-top: 1.25rem;
    }

    .tf-register-form {
        grid-template-columns: 1fr;
    }

    .tf-login-options,
    .tf-login-support {
        align-items: flex-start;
        flex-direction: column;
    }}

.tf-dashboard-eyebrow {
    color: var(--tf-red);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* ===== Painel pessoal ===== */
.tf-panel-shell { width: min(100%, var(--tf-shell-max)); margin-inline: auto; padding-inline: var(--tf-shell-gutter); }
.tf-panel-hero { background: var(--tf-dark); color: var(--tf-on-dark); }
.tf-panel-hero-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; padding-block: 2.75rem 2.5rem; }
.tf-panel-kicker, .tf-panel-heading h2, .tf-panel-side-card h2, .tf-panel-profile h2 { margin: 0; font-family: var(--font-num); font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.tf-panel-kicker { display: flex; align-items: center; gap: .7rem; color: var(--tf-red); }
.tf-panel-kicker span { width: 1.5rem; height: .25rem; background: var(--tf-red); }
.tf-panel-hero h1 { margin: .9rem 0 1rem; font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 900; letter-spacing: -.04em; line-height: .98; }
.tf-panel-identity { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; color: var(--tf-on-dark-muted); font-family: var(--font-num); font-size: .6875rem; letter-spacing: .06em; }
.tf-panel-identity > span { border: 1px solid var(--tf-dark-line); border-radius: 999px; padding: .38rem .65rem; }
.tf-panel-identity strong { border-radius: 999px; padding: .38rem .65rem; color: white; background: var(--tf-red); font-size: .625rem; letter-spacing: .14em; }
.tf-panel-identity small { color: var(--tf-on-dark-faint); font: inherit; }
.tf-panel-stats { display: flex; margin: 0; border: 1px solid var(--tf-dark-line); }
.tf-panel-stats div { min-width: 7.5rem; padding: 1.2rem 1.35rem; }
.tf-panel-stats div + div { border-left: 1px solid var(--tf-dark-line); }
.tf-panel-stats dd { margin: 0 0 .35rem; color: white; font-family: var(--font-num); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.tf-panel-stats div:first-child dd { color: var(--tf-red); }
.tf-panel-stats dt { color: var(--tf-faint); font-family: var(--font-num); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.tf-panel-main { display: grid; gap: 2.75rem; padding-block: 2.5rem 5rem; }
.tf-panel-heading { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.15rem; }
.tf-panel-heading::after { order: 1; height: 1px; flex: 1; background: var(--tf-line); content: ""; }
.tf-panel-heading a { order: 2; color: var(--tf-red); font-size: .8125rem; font-weight: 700; }
.tf-panel-heading h2 { color: var(--tf-ink); }
.tf-panel-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .875rem; }
/* Sem min-height: a altura vem do conteúdo e o grid iguala os cartões da linha.
   row-gap curto (título/descrição) + margin-top no título para o respiro maior
   entre a linha do ícone e o bloco de texto, como no mockup. */
.tf-panel-shortcut { display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: .75rem; row-gap: .3125rem; border: 1px solid var(--tf-line); padding: 1.25rem; background: white; transition: border-color 150ms ease, transform 150ms ease; }
.tf-panel-shortcut:hover { border-color: var(--tf-ink); transform: translateY(-2px); }
.tf-panel-shortcut b { display: grid; width: 2.125rem; height: 2.125rem; place-items: center; border-radius: .25rem; color: white; background: var(--tf-red); font-family: var(--font-num); font-size: .8rem; }
.tf-panel-count { color: var(--tf-faint); font-family: var(--font-num); font-size: .6875rem; font-weight: 700; }
.tf-panel-shortcut strong, .tf-panel-shortcut small { grid-column: 1 / -1; }
.tf-panel-shortcut strong { margin-top: .5625rem; color: var(--tf-ink); font-size: 1rem; letter-spacing: -.02em; }
.tf-panel-shortcut small { color: var(--tf-muted); font-size: .8125rem; line-height: 1.4; }
.tf-panel-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr); gap: 1.75rem; align-items: start; }
.tf-panel-primary, .tf-panel-sidebar { display: grid; gap: 2rem; }
.tf-panel-list, .tf-panel-side-card { border: 1px solid var(--tf-line); background: white; }
.tf-panel-registration { display: grid; grid-template-columns: 3.875rem minmax(0, 1fr) auto; gap: 1.125rem; align-items: center; padding: 1.1rem 1.2rem; }
.tf-panel-registration + .tf-panel-registration { border-top: 1px solid var(--tf-line-soft); }
.tf-panel-registration:hover { background: #fcfbfa; }
.tf-panel-date { display: grid; place-items: center; gap: .1rem; padding: .5rem; color: white; background: var(--tf-dark); font-family: var(--font-num); }
.tf-panel-date b { font-size: 1.05rem; line-height: 1; }.tf-panel-date small { color: var(--tf-red); font-size: .56rem; letter-spacing: .12em; }
.tf-panel-registration-copy { display: grid; gap: .28rem; min-width: 0; }.tf-panel-registration-copy strong { color: var(--tf-ink); font-size: 1rem; }.tf-panel-registration-copy small { overflow: hidden; color: var(--tf-muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.tf-panel-registration-status { display: grid; justify-items: end; gap: .4rem; }.tf-panel-registration-status b, .tf-panel-tournament header > b { padding: .32rem .5rem; color: white; background: var(--tf-dark); font-family: var(--font-num); font-size: .56rem; letter-spacing: .1em; }.is-red { color: white !important; background: var(--tf-red) !important; }.is-muted { color: var(--tf-muted) !important; background: #f0ede8 !important; }.tf-panel-registration-status small { color: var(--tf-ink); font-size: .75rem; font-weight: 700; }
.tf-panel-tournaments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }.tf-panel-tournament { display: grid; gap: 1rem; border: 1px solid var(--tf-line); padding: 1.15rem 1.25rem; background: white; }/* align-items: o padrão `stretch` esticava o badge de status na altura toda do header. */
.tf-panel-tournament header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }.tf-panel-tournament header small { color: var(--tf-red); font-family: var(--font-num); font-size: .625rem; letter-spacing: .12em; }.tf-panel-tournament h3 { margin: .35rem 0 0; font-size: 1.0625rem; letter-spacing: -.03em; }/* Reusa a estrutura de .tf-capacity-line/.tf-capacity-bar da vitrine pública; aqui
   ficam só as medidas próprias do cartão do painel (barra reta e mais grossa). */
.tf-panel-tournament-capacity .tf-capacity-line { margin-bottom: .45rem; color: var(--tf-faint); font-size: .625rem; font-weight: 400; }.tf-panel-tournament-capacity .tf-capacity-line b { font-weight: 700; }.tf-panel-tournament-capacity .tf-capacity-bar, .tf-panel-tournament-capacity .tf-capacity-bar i { height: .3125rem; border-radius: 0; }
.tf-panel-tournament-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }.tf-panel-tournament-actions a { border: 1px solid var(--tf-ink); padding: .5rem; color: var(--tf-ink); font-size: .75rem; font-weight: 800; text-align: center; }.tf-panel-tournament-actions a:hover { color: white; background: var(--tf-ink); }
.tf-panel-empty { margin: 0; border: 1px solid var(--tf-line); padding: 1.25rem; color: var(--tf-muted); font-size: .875rem; }.tf-panel-empty a { color: var(--tf-red); font-weight: 700; }.tf-panel-side-card { padding: 1.25rem; }.tf-panel-side-card header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }.tf-panel-side-card header a { color: var(--tf-red); font-size: .78rem; font-weight: 700; }.tf-panel-side-card-actions { display: flex; align-items: center; gap: .75rem; }.tf-panel-athlete, .tf-panel-academy { display: flex; min-width: 0; align-items: center; gap: .75rem; border-top: 1px solid var(--tf-line-soft); padding-block: .75rem; }.tf-panel-athlete > b { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border-radius: 50%; color: var(--tf-muted); background: #f0ede8; font-family: var(--font-num); font-size: .65rem; }.tf-panel-athlete span { display: grid; min-width: 0; gap: .12rem; }.tf-panel-athlete strong { overflow: hidden; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }.tf-panel-athlete small { color: var(--tf-faint); font-size: .75rem; }.tf-panel-athlete i { width: 1.25rem; height: .44rem; margin-left: auto; border: 1px solid var(--tf-line); border-radius: .1rem; background: white; }.tf-panel-athlete i.is-blue { background: #2c6fd1; }.tf-panel-athlete i.is-purple { background: #6b2fa8; }.tf-panel-athlete i.is-brown { background: #8a5a2b; }.tf-panel-athlete i.is-black { background: #14110f; }.tf-panel-academy > b { display: grid; width: 2.1rem; height: 2.1rem; flex: none; place-items: center; color: white; background: var(--tf-dark); font-family: var(--font-num); font-size: .65rem; }.tf-panel-academy span { overflow: hidden; flex: 1; font-size: .875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.tf-panel-academy small { color: var(--tf-red); font-family: var(--font-num); font-size: .56rem; font-weight: 700; letter-spacing: .08em; }
.tf-panel-profile { display: grid; gap: 1.1rem; padding: 1.4rem; color: white; background: var(--tf-dark); }.tf-panel-profile h2 { color: var(--tf-on-dark-muted); }.tf-panel-profile dl { display: grid; gap: .65rem; margin: 0; }.tf-panel-profile dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--tf-dark-line); padding-bottom: .65rem; }.tf-panel-profile dt { color: var(--tf-on-dark-faint); font-family: var(--font-num); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }.tf-panel-profile dd { overflow-wrap: anywhere; margin: 0; font-size: .78rem; font-weight: 700; text-align: right; }.tf-panel-profile > a { border-radius: 999px; padding: .7rem; color: white; background: var(--tf-red); font-size: .8125rem; font-weight: 800; text-align: center; }.tf-panel-footer { border-top: 1px solid var(--tf-line); padding-block: 1.3rem; color: var(--tf-faint); background: white; font-family: var(--font-num); font-size: .625rem; letter-spacing: .14em; }
@media (max-width: 68rem) { .tf-panel-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 48rem) { .tf-panel-hero-content, .tf-panel-columns { grid-template-columns: 1fr; }.tf-panel-hero-content { gap: 2rem; }.tf-panel-stats { width: 100%; }.tf-panel-stats div { min-width: 0; flex: 1; padding-inline: .8rem; }.tf-panel-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tf-panel-tournaments { grid-template-columns: 1fr; }}
@media (max-width: 32rem) { .tf-panel-shortcuts { grid-template-columns: 1fr; }.tf-panel-registration { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .75rem; }.tf-panel-registration-status { grid-column: 2; justify-items: start; }.tf-panel-identity { align-items: flex-start; flex-direction: column; }.tf-panel-stats dd { font-size: 1.3rem; }}

.tf-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(2px);
}

.tf-modal-header {
    padding: 1.25rem;
    color: var(--tf-ink);
    border-bottom: 1px solid var(--tf-line);
    background: var(--tf-surface);
}

.tf-modal-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.tf-modal-header p {
    margin-top: 0.5rem;
    color: var(--tf-muted);
    font-size: 0.9rem;
    line-height: 1.45rem;
}

.tf-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    background: #ffffff;
}

.tf-modal-link-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tf-line);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    color: var(--tf-ink);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-modal-link-button.is-primary {
    border-color: var(--tf-red);
    color: #ffffff;
    background: var(--tf-red);
}

/* ===== Mis atletas — tabela e modal do design system =====
   Bloco único: as regras do layout antigo (cartões) ficavam depois dos ajustes de
   redesign e, com a mesma especificidade, venciam por ordem de cascata. */
.tf-athletes-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.75rem;
    margin-inline: auto;
    padding: 2.5rem var(--tf-shell-gutter) 5rem;
}

.tf-athletes-redesign-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.tf-athletes-redesign-heading p {
    margin: 0 0 0.7rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.tf-athletes-redesign-heading p span {
    color: #c9c2ba;
}

.tf-athletes-redesign-heading p b {
    color: var(--tf-red);
}

.tf-athletes-redesign-heading h1 {
    margin: 0;
    color: var(--tf-ink);
    font-size: clamp(2.3rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-athletes-redesign-heading > div > span {
    display: block;
    margin-top: 0.7rem;
    color: var(--tf-muted);
    font-size: 1rem;
}

.tf-athletes-create-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding: 0.8rem 1.35rem;
    color: #ffffff;
    background: var(--tf-red);
    font-size: 0.875rem;
    font-weight: 800;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.tf-athletes-create-button:hover,
.tf-athletes-create-button:focus-visible {
    color: #ffffff;
    background: var(--tf-red-strong);
    outline: 0;
}

.tf-athletes-create-button:focus-visible {
    box-shadow: 0 0 0 3px rgb(215 25 32 / 18%);
}

.tf-athletes-create-button i {
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

/* justify-self (e não align-self): dentro de um grid quem encolhe no eixo
   horizontal é o justify — com align-self a caixa esticava a linha toda. */
.tf-athletes-stats {
    display: flex;
    justify-self: start;
    margin: 0;
    border: 1px solid var(--tf-line);
    background: #ffffff;
}

.tf-athletes-stats div {
    padding: 0.85rem 1.35rem;
}

.tf-athletes-stats div + div {
    border-left: 1px solid var(--tf-line);
}

.tf-athletes-stats dd {
    margin: 0 0 0.3rem;
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.tf-athletes-stats div:nth-child(2) dd {
    color: var(--tf-red);
}

.tf-athletes-stats dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-athletes-panel {
    border: 1px solid var(--tf-line);
    background: #ffffff;
}

.tf-athletes-empty {
    margin: 0;
    padding: 2rem 1.35rem;
    color: var(--tf-muted);
    font-size: 0.875rem;
}

.tf-athletes-empty a {
    color: var(--tf-red);
    font-weight: 700;
}

.tf-athletes-table-head,
.tf-athlete-table-row {
    display: grid;
    grid-template-columns:
        minmax(13rem, 2.1fr) minmax(8rem, 1fr) minmax(9rem, 1.3fr)
        minmax(7rem, 1.15fr) 5.25rem;
    gap: 1.25rem;
    align-items: center;
}

.tf-athletes-table-head {
    border-bottom: 1px solid var(--tf-line);
    padding: 0.8rem 1.35rem;
    color: var(--tf-faint);
    background: #fcfbfa;
    font-family: var(--font-num);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-athletes-table-head span:last-child {
    text-align: right;
}

.tf-athlete-table-row {
    position: relative;
    min-height: 4.4rem;
    border-bottom: 1px solid var(--tf-line-soft);
    padding: 0.9rem 1.35rem;
    background: #ffffff;
}

/* A borda do painel já fecha a tabela: sem isso a última linha vira traço duplo. */
.tf-athlete-table-row:last-child {
    border-bottom: 0;
}

.tf-athlete-table-row:hover {
    background: #fcfbfa;
}

.tf-athlete-table-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
}

/* Nome e etiqueta na primeira linha, idade embaixo — como no mockup. */
.tf-athlete-table-summary > div:last-child {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.tf-athlete-table-summary > div:last-child > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.tf-athlete-table-summary small {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-athlete-table-summary b {
    flex: none;
    padding: 0.2rem 0.375rem;
    color: #ffffff;
    background: var(--tf-dark);
    font-family: var(--font-num);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.tf-athlete-avatar {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    color: var(--tf-muted);
    background: #f0ede8;
    font-family: var(--font-num);
    font-size: 0.75rem;
    font-weight: 700;
}

.tf-athlete-name {
    overflow: hidden;
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.tf-athlete-table-belt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--tf-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.tf-athlete-table-belt i {
    width: 1.375rem;
    height: 0.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.12rem;
    background: #ffffff;
}

.tf-athlete-table-belt i.is-blue { background: #2c6fd1; }
.tf-athlete-table-belt i.is-purple { background: #6b2fa8; }
.tf-athlete-table-belt i.is-brown { background: #8a5a2b; }
.tf-athlete-table-belt i.is-black { background: var(--tf-dark); }

.tf-athlete-table-academy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    color: var(--tf-muted);
    font-size: 0.85rem;
}

.tf-athlete-table-academy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-athlete-table-academy small {
    flex: none;
    color: var(--tf-warn);
    font-family: var(--font-num);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.tf-athlete-table-relationship {
    color: var(--tf-muted);
    font-size: 0.8rem;
}

.tf-athlete-actions {
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: 0.5rem;
}

.tf-athlete-action {
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 1px solid var(--tf-line);
    border-radius: 0;
    padding: 0;
    color: var(--tf-muted);
    background: #ffffff;
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    transition: border-color 150ms ease, color 150ms ease;
}

.tf-athlete-action svg {
    width: 0.9rem;
    height: 0.9rem;
}

.tf-athlete-action:hover,
.tf-athlete-action:focus-visible {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
    background: #ffffff;
    box-shadow: none;
    outline: 0;
}

.tf-athlete-action.is-edit:hover,
.tf-athlete-action.is-edit:focus-visible {
    border-color: var(--tf-red);
    color: var(--tf-red);
}

.tf-athlete-details {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem 1.25rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--tf-line-soft);
    padding-top: 0.75rem;
}

.tf-athlete-details .tf-athlete-detail-row {
    display: grid;
    gap: 0.15rem;
}

.tf-athlete-detail-label {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-athlete-detail-value {
    color: var(--tf-ink);
    font-size: 0.8rem;
}

/* Fecho global do modal (não é exclusivo de atletas); as telas ajustam depois. */
.tf-modal-close {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--tf-muted);
}

.tf-modal-close:hover {
    color: var(--tf-ink);
    background: rgb(23 24 26 / 6%);
}

.tf-modal-close svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* Modal de atleta conforme o painel de cadastro do design system. */
.tf-athlete-modal-panel {
    display: flex;
    width: min(45rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 5rem);
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-top: 0.25rem solid var(--tf-red);
    background: #ffffff;
    box-shadow: 0 18px 48px rgb(23 24 26 / 18%);
}

.tf-athlete-modal-panel .tf-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 1.85rem 1.15rem;
}

.tf-athlete-form-kicker {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.tf-athlete-modal-panel .tf-modal-header h2 {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
}

.tf-athlete-modal-panel .tf-modal-header p {
    margin-top: 0.45rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.tf-athlete-modal-panel .tf-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--tf-line);
    border-radius: 0;
}

.tf-athlete-modal-panel .tf-modal-close:hover {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
    background: transparent;
}

.tf-athlete-modal-panel .tf-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.tf-athlete-modal-form {
    display: flex;
    overflow: hidden;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Corpo rolável do modal; as colunas e as medidas vêm de .tf-form-grid/.tf-form-field. */
.tf-athlete-modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    gap: 1rem;
    padding: 1.45rem 1.85rem;
}

.tf-athlete-modal-body .tf-form-field {
    gap: 0.38rem;
}

/* Especificidade casada com a regra base `.tf-form-field input:not(...)`, senão
   o raio e a borda padrão do campo continuam vencendo por cascata. */
.tf-athlete-modal-body .tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-athlete-modal-body .tf-form-field select,
.tf-athlete-modal-body .tf-form-field textarea,
.tf-athlete-modal-body .tf-date-control {
    border-color: var(--tf-line);
    border-radius: 0;
    background: #ffffff;
}

.tf-athlete-form-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-athlete-form-section::after {
    height: 1px;
    flex: 1;
    background: var(--tf-line-soft);
    content: "";
}

.tf-athlete-form-alert {
    grid-column: 1 / -1;
    margin: 0;
}

.tf-athlete-modal-panel .tf-modal-actions {
    grid-template-columns: 1fr 1.4fr;
    gap: 0.75rem;
    border-top: 1px solid var(--tf-line);
    padding: 1.1rem 1.85rem;
}

.tf-athlete-modal-panel .tf-modal-link-button {
    min-height: 2.8rem;
    border-color: var(--tf-ink);
    border-radius: 999px;
    font-weight: 800;
}

.tf-athlete-modal-panel .tf-modal-link-button.is-primary {
    border-color: var(--tf-red);
}

@media (max-width: 48rem) {
    .tf-athletes-redesign-heading { align-items: flex-start; flex-direction: column; }
    .tf-athletes-stats { width: 100%; }
    .tf-athletes-stats div { min-width: 0; flex: 1; padding-inline: 0.75rem; }
    .tf-athletes-table-head { display: none; }
    .tf-athlete-table-row { grid-template-columns: 1fr auto; gap: 0.8rem; }
    .tf-athlete-table-belt,
    .tf-athlete-table-academy,
    .tf-athlete-table-relationship { grid-column: 1; padding-left: 3.05rem; }
    .tf-athlete-table-belt::before,
    .tf-athlete-table-academy::before,
    .tf-athlete-table-relationship::before {
        width: 5.2rem;
        flex: none;
        color: var(--tf-faint);
        font-family: var(--font-num);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.1em;
    }
    .tf-athlete-table-belt::before { content: "CINTURÓN"; }
    .tf-athlete-table-academy::before { content: "ACADEMIA"; }
    .tf-athlete-table-relationship::before { content: "RELACIÓN"; }
    .tf-athlete-actions { grid-column: 2; grid-row: 1; }
    .tf-athlete-details { grid-template-columns: 1fr 1fr; }}

@media (max-width: 40rem) {
    .tf-athlete-modal-panel { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
    .tf-athlete-modal-panel .tf-modal-header,
    .tf-athlete-modal-body,
    .tf-athlete-modal-panel .tf-modal-actions { padding-inline: 1rem; }
    .tf-athlete-modal-panel .tf-modal-actions { grid-template-columns: 1fr; }
    .tf-athlete-modal-body { grid-template-columns: 1fr; }}

@media (max-width: 32rem) {
    .tf-athletes-stats div { padding-inline: 0.5rem; }
    .tf-athletes-stats dd { font-size: 1.1rem; }
    .tf-athletes-stats dt { font-size: 0.48rem; }
    .tf-athlete-table-row { padding-inline: 0.9rem; }
    .tf-athlete-details { grid-template-columns: 1fr; }
    .tf-athlete-table-belt,
    .tf-athlete-table-academy,
    .tf-athlete-table-relationship { padding-left: 0; }}

/* ===== Inscripción ===== */
.tf-registration-page {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding-block: 1.25rem 4.5rem;
}

.tf-registration-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 150ms ease;
}

.tf-registration-back:hover {
    color: var(--tf-red-strong);
}

.tf-registration-heading {
    display: flex;
    flex-direction: column;
    gap: 0.8125rem;
}

.tf-registration-heading h1 {
    font-size: clamp(1.875rem, 5vw, 2.875rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-wrap: balance;
}

.tf-registration-heading > p:last-child {
    color: var(--tf-muted);
    font-size: 1rem;
}

/* Trilha de progresso: reflete o estado do formulário, não é clicável. */
.tf-registration-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.375rem;
    padding: 0;
    list-style: none;
}

.tf-registration-steps li {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
}

.tf-registration-steps li + li::before {
    content: "";
    width: 1.625rem;
    height: 1px;
    margin-right: 0.5rem;
    background: var(--tf-border);
}

.tf-registration-steps b {
    display: inline-flex;
    width: 1.375rem;
    height: 1.375rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tf-faint);
    background: var(--tf-line-soft);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
}

.tf-registration-steps span {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-registration-steps li.is-current b {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-registration-steps li.is-current span {
    color: var(--tf-ink);
}

.tf-registration-steps li.is-done b {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
}

.tf-registration-steps li.is-done span {
    color: var(--tf-muted);
}

.tf-registration-grid {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}

.tf-registration-steps-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.375rem;
}

.tf-registration-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.75rem;
    padding: 1.625rem;
    background: var(--tf-surface);
}

.tf-registration-card-kicker {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-card h2 {
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 700;
}

.tf-registration-empty {
    border: 1px dashed var(--tf-border);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    color: var(--tf-muted);
    background: var(--tf-surface);
    text-align: center;
}

.tf-registration-empty a {
    color: var(--tf-red);
    font-weight: 700;
}

.tf-registration-hint {
    color: var(--tf-muted);
    font-size: 0.84375rem;
}

/* Confirmação dos dados do atleta: cabeçalho escuro e ladrilhos com filete. */
.tf-registration-confirmation-card {
    overflow: hidden;
    border: 1px solid var(--tf-ink);
    border-radius: 0.625rem;
}

.tf-registration-confirmation-card > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    background: var(--tf-ink);
}

.tf-registration-confirmation-card h3 {
    color: var(--tf-on-dark);
    font-size: 0.875rem;
    font-weight: 800;
}

.tf-registration-confirmation-card .tf-registration-edit-athlete {
    color: var(--tf-red-bright);
    background: transparent;
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-registration-confirmation-card .tf-registration-edit-athlete:hover {
    color: var(--tf-on-dark);
}

.tf-registration-confirmation-list {
    display: grid;
    gap: 1px;
    background: var(--tf-line-soft);
}

.tf-registration-confirmation-list .tf-form-check {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    margin: 0;
    padding: 0.9375rem 1.125rem;
    background: var(--tf-surface);
    cursor: pointer;
}

.tf-registration-confirmation-list .tf-form-check input {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: 0 0 auto;
    accent-color: var(--tf-ink);
}

.tf-registration-confirmation-list .tf-form-check span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.tf-registration-confirmation-list .tf-form-check strong {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-registration-confirmation-list .tf-form-check b {
    color: var(--tf-ink);
    font-size: 0.875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tf-registration-hint + * {
    margin-top: 0;
}

/* Tipo de inscripción: cada opção é um cartão selecionável. */
.tf-registration-type-options .tf-form-choice-group {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    border: 0;
    margin: 0;
    padding: 0;
}

.tf-registration-type-options .tf-form-choice-group > label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 1.5px solid var(--tf-border);
    border-radius: 0.625rem;
    padding: 1.125rem;
    background: var(--tf-surface);
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tf-registration-type-options .tf-form-choice-group > label:hover {
    border-color: var(--tf-ink);
}

.tf-registration-type-options .tf-form-choice-group > label:has(input:checked) {
    border-color: var(--tf-ink);
    background: var(--tf-page);
}

.tf-registration-type-options .tf-form-choice-group input {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    accent-color: var(--tf-red);
}

.tf-registration-category-fields {
    display: grid;
    gap: 1rem;
}

/* Aviso do pesaje: filete dourado à esquerda. */
.tf-registration-notice {
    display: flex;
    gap: 0.6875rem;
    border-radius: 0.5rem;
    padding: 0.8125rem 1rem;
    color: var(--tf-muted);
    background: var(--tf-page);
    font-size: 0.84375rem;
    line-height: 1.45;
}

.tf-registration-notice::before {
    content: "";
    width: 0.25rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--tf-gold);
}

.tf-registration-notice.is-plain {
    background: transparent;
    padding-inline: 0;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tf-registration-notice.is-plain::before {
    display: none;
}

/* PcD: as duas opções viram pills. */
.tf-registration-pcd-options .tf-form-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    border: 0;
    margin: 0;
    padding: 0;
}

.tf-registration-pcd-options .tf-form-choice-group > label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 1.5px solid var(--tf-border);
    border-radius: 999px;
    padding: 0.8125rem 1.375rem;
    color: var(--tf-ink);
    font-size: 0.90625rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tf-registration-pcd-options .tf-form-choice-group > label:hover {
    border-color: var(--tf-ink);
}

.tf-registration-pcd-options .tf-form-choice-group > label:has(input:checked) {
    border-color: var(--tf-ink);
    background: var(--tf-page);
}

.tf-registration-pcd-options .tf-form-choice-group input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tf-red);
}

/* ===== Coluna lateral: torneo e resumo ===== */
.tf-registration-aside {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.875rem;
}

/* Erro de envio, ao lado da ação que o provocou. */
.tf-registration-error {
    display: flex;
    gap: 0.6875rem;
    border: 1px solid var(--tf-red);
    border-radius: 0.75rem;
    padding: 0.9375rem 1.125rem;
    color: var(--tf-field-error);
    background: var(--tf-accent-soft);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
}

.tf-registration-error::before {
    content: "!";
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.75rem;
}

.tf-registration-event-card {
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--tf-dark);
}

.tf-registration-event-cover {
    display: flex;
    height: 8.125rem;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    background:
        repeating-linear-gradient(115deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 14px),
        linear-gradient(140deg, #1b1512 0%, #2e1214 46%, #14110f 100%);
}

.tf-registration-event-cover .tf-poster-title {
    color: var(--tf-red-bright);
    font-size: 2.875rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
}

.tf-registration-event-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.tf-registration-event-meta i {
    color: var(--tf-on-dark-muted);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tf-registration-event-meta b {
    border: 1px solid var(--tf-red);
    padding: 0.1875rem 0.5625rem;
    color: var(--tf-on-dark);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-event-title {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    border-bottom: 1px solid var(--tf-dark-line);
    padding: 1.25rem 1.375rem;
}

.tf-registration-event-title h2 {
    color: var(--tf-on-dark);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.tf-registration-event-title p {
    color: var(--tf-on-dark-muted);
    font-size: 0.84375rem;
}

.tf-registration-summary {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.375rem;
}

.tf-registration-summary-kicker {
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-summary-empty {
    color: var(--tf-on-dark-muted);
    font-size: 0.84375rem;
    line-height: 1.5;
}

.tf-registration-summary-line,
.tf-registration-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.875rem;
}

.tf-registration-summary-line span {
    color: #c9c2bb;
    font-size: 0.84375rem;
}

.tf-registration-summary-line b {
    color: var(--tf-on-dark);
    font-family: var(--font-num);
    font-size: 0.8125rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.tf-registration-summary-total {
    border-top: 1px solid var(--tf-dark-line);
    padding-top: 0.875rem;
}

.tf-registration-summary-total span {
    color: var(--tf-on-dark-muted);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-summary-total b {
    color: var(--tf-on-dark);
    font-family: var(--font-num);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tf-registration-confirm {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 0.9375rem 1rem;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-size: 0.9375rem;
    font-weight: 800;
    transition: background-color 150ms ease;
}

.tf-registration-confirm:hover {
    background: var(--tf-red-bright);
}

.tf-registration-confirm:focus-visible {
    outline: 2px solid var(--tf-on-dark);
    outline-offset: 2px;
}

.tf-registration-summary-note {
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.tf-registration-aside-note {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
    background: var(--tf-surface);
}

.tf-registration-aside-note .tf-registration-summary-kicker {
    color: var(--tf-faint);
}

.tf-registration-aside-note p:last-child {
    color: var(--tf-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.tf-registration-final-step {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* ===== Modal de términos y condiciones ===== */
.tf-registration-terms-dialog {
    width: min(100% - 2rem, 45rem);
    max-height: min(88dvh, 54rem);
    margin: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0.875rem;
    padding: 0;
    color: var(--tf-ink);
    background: var(--tf-page);
    box-shadow: 0 32px 80px rgb(14 12 11 / 40%);
}

.tf-registration-terms-dialog:not([open]) {
    display: none;
}

.tf-registration-terms-dialog::backdrop {
    background: rgb(14 12 11 / 62%);
    backdrop-filter: blur(3px);
}

.tf-registration-terms-panel {
    display: flex;
    max-height: min(88dvh, 54rem);
    flex-direction: column;
}

/* Cabeçalho escuro com o progresso de leitura. */
.tf-registration-terms-header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.5rem 1.75rem 1.375rem;
    background: var(--tf-dark);
}

.tf-registration-terms-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.125rem;
}

.tf-registration-terms-title > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.4375rem;
}

.tf-registration-terms-header h2 {
    color: var(--tf-on-dark);
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.tf-registration-terms-header > .tf-registration-terms-title p:last-child {
    color: var(--tf-on-dark-muted);
    font-size: 0.875rem;
}

.tf-registration-terms-close {
    display: inline-flex;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tf-dark-elevated);
    border-radius: 50%;
    color: var(--tf-on-dark);
    background: transparent;
    font-family: var(--font-num);
    font-size: 0.875rem;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.tf-registration-terms-close:hover {
    border-color: var(--tf-red);
    background: var(--tf-red);
}

.tf-registration-terms-close:focus-visible {
    outline: 2px solid var(--tf-on-dark);
    outline-offset: 2px;
}

.tf-registration-terms-progress {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.tf-registration-terms-progress > div {
    height: 0.25rem;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tf-dark-line);
}

.tf-registration-terms-progress > div span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--tf-red);
    transition: width 200ms ease;
}

.tf-registration-terms-progress strong {
    color: var(--tf-on-dark);
    font-family: var(--font-num);
    font-size: 0.78125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Grid com linhas de altura natural: em flex-column um término longo era
   espremido pelo corpo rolável em vez de manter a própria altura. */
.tf-registration-terms-body {
    display: grid;
    flex: 1 1 auto;
    gap: 0.75rem;
    grid-auto-rows: max-content;
    align-content: start;
    overflow-y: auto;
    padding: 1.25rem 1.75rem 1.5rem;
}

/* Cada seção é um cartão que abre; a borda acende quando aceita. */
.tf-registration-term {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.625rem;
    background: var(--tf-surface);
    transition: border-color 150ms ease;
}

.tf-registration-term:has(input:checked) {
    border-color: var(--tf-ink);
}

.tf-registration-term summary {
    display: flex;
    align-items: center;
    gap: 0.8125rem;
    padding: 1rem 1.125rem;
    cursor: pointer;
    list-style: none;
}

.tf-registration-term summary::marker,
.tf-registration-term summary::-webkit-details-marker {
    display: none;
    content: "";
}

.tf-registration-term summary:focus-visible {
    outline: 2px solid var(--tf-red);
    outline-offset: -2px;
}

.tf-registration-term summary strong {
    flex: 1 1 auto;
    color: var(--tf-ink);
    font-size: 0.96875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tf-registration-term-number {
    display: inline-flex;
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: var(--tf-faint);
    background: #f1efec;
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
}

.tf-registration-term:has(input:checked) .tf-registration-term-number {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
}

/* Selo que só existe depois do aceite da seção. */
.tf-registration-term-accepted {
    display: none;
    flex: 0 0 auto;
    border-radius: 0.25rem;
    padding: 0.25rem 0.4375rem;
    color: var(--tf-on-dark);
    background: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-registration-term:has(input:checked) .tf-registration-term-accepted {
    display: inline-block;
}

.tf-registration-term-sign {
    flex: 0 0 auto;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-registration-term-sign::after {
    content: "+";
}

.tf-registration-term[open] .tf-registration-term-sign::after {
    content: "−";
}

.tf-registration-term > div {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1.125rem 1.125rem;
}

.tf-registration-term > div p {
    color: var(--tf-muted);
    font-size: 0.90625rem;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Aceite da seção: caixa clicável que muda de estado ao marcar. */
.tf-registration-term > div .tf-form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    border: 1.5px solid var(--tf-border);
    border-radius: 0.5rem;
    padding: 0.9375rem 1rem;
    background: var(--tf-surface);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tf-registration-term > div .tf-form-check:hover {
    border-color: var(--tf-ink);
}

.tf-registration-term > div .tf-form-check:has(input:checked) {
    border-color: var(--tf-ink);
    background: var(--tf-page);
}

.tf-registration-term > div .tf-form-check input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--tf-ink);
}

.tf-registration-term > div .tf-form-check span {
    color: var(--tf-ink);
    font-size: 0.90625rem;
    font-weight: 700;
}

.tf-registration-term-notice {
    border-left: 3px solid var(--tf-red);
    padding-left: 0.8125rem;
    color: var(--tf-red) !important;
    font-weight: 700;
}

/* Rodapé: contagem de seções, ação principal e cancelar. */
.tf-registration-terms-footer {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    border-top: 1px solid var(--tf-line);
    padding: 1.125rem 1.75rem 1.25rem;
    background: var(--tf-surface);
}

.tf-registration-terms-completion-count {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.1875rem;
}

.tf-registration-terms-completion-count small {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-registration-terms-completion-count > span {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tf-registration-terms-footer button {
    min-height: 3rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 800;
}

.tf-registration-terms-footer button[type="submit"] {
    flex: 1 1 12rem;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    transition: background-color 150ms ease;
}

.tf-registration-terms-footer button[type="submit"]:hover:not(:disabled) {
    background: var(--tf-red-bright);
}

.tf-registration-terms-footer button[type="submit"]:disabled {
    cursor: not-allowed;
    color: var(--tf-faint);
    background: #f1efec;
}

.tf-registration-terms-footer button[type="button"] {
    flex: 0 0 auto;
    padding-inline: 0.75rem;
    color: var(--tf-muted);
    background: transparent;
}

.tf-registration-terms-footer button[type="button"]:hover {
    color: var(--tf-ink);
}

.tf-registration-athlete-dialog {
    width: min(100% - 2rem, 38rem);
    max-height: min(90dvh, 46rem);
    margin: auto;
    border: 0;
    border-radius: 0.65rem;
    padding: 0;
    color: var(--tf-ink);
    background: #ffffff;
    box-shadow: 0 24px 64px rgb(23 24 26 / 28%);
}

.tf-registration-athlete-dialog:not([open]) {
    display: none;
}

.tf-registration-athlete-dialog::backdrop {
    background: rgb(0 0 0 / 52%);
    backdrop-filter: blur(2px);
}

.tf-registration-athlete-dialog form {
    display: grid;
    gap: 1rem;
    max-height: min(90dvh, 46rem);
    overflow-y: auto;
    padding: 1.5rem;
}

.tf-registration-athlete-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tf-registration-athlete-dialog-header p {
    margin-bottom: 0.2rem;
    color: var(--tf-red);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-registration-athlete-dialog-header h2 {
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.tf-registration-athlete-dialog-header > button {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #555b64;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.tf-registration-athlete-dialog-header > button:hover {
    color: var(--tf-red);
    background: #f7f3ea;
}

.tf-registration-athlete-dialog-fields {
    display: grid;
    gap: 0.9rem;
}

.tf-registration-athlete-phone {
    display: grid;
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.tf-registration-athlete-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

.tf-registration-athlete-dialog-footer button {
    min-height: 2.6rem;
    border-radius: 0.45rem;
    padding: 0.55rem 1rem;
    font-weight: 700;
    cursor: pointer;
}

.tf-registration-athlete-dialog-footer button[type="submit"] {
    border: 1px solid var(--tf-red);
    color: #ffffff;
    background: var(--tf-red);
}

.tf-registration-athlete-dialog-footer button[type="button"] {
    border: 1px solid var(--tf-border);
    color: #555b64;
    background: #ffffff;
}

.tf-registration-empty a {
    color: var(--tf-red);
    font-weight: 700;
    text-decoration: underline;
}

.tf-registration-result {
    width: min(100% - 2rem, 46rem);
    margin: 2rem auto;
    border: 1px solid var(--tf-border);
    border-radius: 0.55rem;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(23 24 26 / 5%);
}

@media (min-width: 640px) {
    .tf-registration-page {
        padding-inline: 1.5rem;
    }}

/* ===== Mis inscripciones — lista de cartões do design system ===== */
.tf-registration-index-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.25rem;
    margin-inline: auto;
    padding: 2.5rem var(--tf-shell-gutter) 5rem;
}

.tf-registration-index-heading p {
    margin: 0 0 0.7rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.tf-registration-index-heading p span {
    color: #c9c2ba;
}

.tf-registration-index-heading p b {
    color: var(--tf-red);
}

.tf-registration-index-heading h1 {
    margin: 0;
    color: var(--tf-ink);
    font-size: clamp(2.3rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-registration-index-heading > span {
    display: block;
    margin-top: 0.7rem;
    color: var(--tf-muted);
    font-size: 1rem;
}

.tf-registration-index-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}

.tf-registration-index-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tf-registration-index-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--tf-line);
    padding: 0.6rem 0.9rem;
    color: var(--tf-muted);
    background: var(--tf-surface);
    font-size: 0.875rem;
    font-weight: 700;
    transition: border-color 150ms ease, color 150ms ease;
}

.tf-registration-index-tabs a:hover {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
}

.tf-registration-index-tabs a.is-active {
    border-color: var(--tf-dark);
    color: #ffffff;
    background: var(--tf-dark);
}

.tf-registration-index-tabs b {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
}

.tf-registration-index-tabs a.is-active b {
    color: #ffffff;
}

.tf-registration-index-athlete-filter {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.tf-registration-index-athlete-filter label {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-index-athlete-filter select {
    min-height: 2.6rem;
    min-width: 11.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 0;
    padding: 0.5rem 0.65rem;
    color: var(--tf-ink);
    background: var(--tf-surface);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.tf-registration-index-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.9rem;
    margin: 0;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-registration-index-summary a {
    color: var(--tf-red);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.tf-registration-index-empty {
    margin: 0;
    border: 1px dashed #c9c2ba;
    padding: 2rem;
    color: var(--tf-muted);
    font-size: 0.875rem;
}

.tf-registration-index-card {
    border: 1px solid var(--tf-line);
    background: var(--tf-surface);
}

.tf-registration-index-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--tf-line);
    padding: 1.1rem 1.25rem;
}

.tf-registration-index-card-header p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
}

/* O Nº é o identificador real da inscrição; o mockup mostrava também um código
   inventado que não existe no domínio e foi deixado de fora. */
.tf-registration-index-card-header b {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tf-registration-index-card-header strong {
    color: var(--tf-ink);
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.tf-registration-index-card-header small {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
}

.tf-registration-index-card-header > div {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.tf-registration-index-card-header > div > span {
    padding: 0.32rem 0.5rem;
    color: #ffffff;
    background: var(--tf-dark);
    font-family: var(--font-num);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-registration-index-card-header > div > span.is-pending {
    background: var(--tf-red);
}

.tf-registration-index-card-header > div > span.is-rejected {
    color: var(--tf-muted);
    background: #f0ede8;
}

.tf-registration-index-card-header > div > a {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    color: var(--tf-ink);
    font-size: 0.8125rem;
    font-weight: 700;
}

.tf-registration-index-card-header > div > a:hover {
    color: var(--tf-red);
}

.tf-registration-index-card-header svg {
    width: 0.9rem;
    height: 0.9rem;
}

.tf-registration-index-body {
    display: grid;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.tf-registration-index-body dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.tf-registration-index-body dt {
    margin-bottom: 0.3rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-index-body dd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 700;
}

.tf-registration-index-body dd i {
    width: 1.375rem;
    height: 0.5rem;
    flex: none;
    border: 1px solid var(--tf-line);
    border-radius: 0.12rem;
    background: #ffffff;
}

.tf-registration-index-body dd i.is-blue { background: #2c6fd1; }
.tf-registration-index-body dd i.is-purple { background: #6b2fa8; }
.tf-registration-index-body dd i.is-brown { background: #8a5a2b; }
.tf-registration-index-body dd i.is-black { background: var(--tf-dark); }

.tf-registration-index-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tf-registration-correction-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tf-dark);
    padding: 0.6rem 1rem;
    color: #ffffff;
    background: var(--tf-dark);
    font-size: 0.8125rem;
    font-weight: 800;
    transition: background 150ms ease, color 150ms ease;
}

.tf-registration-correction-action:hover {
    color: var(--tf-dark);
    background: transparent;
}

.tf-registration-correction-action.is-disabled {
    border-color: var(--tf-line);
    color: var(--tf-faint);
    background: transparent;
    cursor: not-allowed;
}

.tf-registration-history {
    border-top: 1px solid var(--tf-line-soft);
}

.tf-registration-history summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    background: #fcfbfa;
    cursor: pointer;
    list-style: none;
}

.tf-registration-history summary::-webkit-details-marker {
    display: none;
}

.tf-registration-history summary > span {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-registration-history summary > b {
    margin-left: auto;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-registration-history-chevron {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    color: var(--tf-faint);
    transition: transform 150ms ease;
}

.tf-registration-history[open] .tf-registration-history-chevron {
    transform: rotate(180deg);
}

.tf-registration-history-empty,
.tf-registration-history ol {
    margin: 0;
    padding: 0.9rem 1.25rem 1.1rem;
}

.tf-registration-history-empty {
    color: var(--tf-faint);
    font-size: 0.8125rem;
}

.tf-registration-history ol {
    display: grid;
    gap: 0.75rem;
    list-style: none;
}

.tf-registration-history li {
    display: grid;
    gap: 0.2rem;
    border-left: 2px solid var(--tf-line);
    padding-left: 0.75rem;
}

.tf-registration-history time {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
}

.tf-registration-history li p {
    margin: 0;
    color: var(--tf-ink);
    font-size: 0.8125rem;
}

@media (max-width: 40rem) {
    .tf-registration-index-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tf-registration-index-athlete-filter select {
        flex: 1;
        min-width: 0;
    }

    .tf-registration-index-card-header,
    .tf-registration-index-body {
        padding-inline: 1rem;
    }

    .tf-registration-index-body dl {
        grid-template-columns: 1fr;
    }

    .tf-registration-index-actions,
    .tf-registration-correction-action {
        width: 100%;
    }

    .tf-registration-history summary,
    .tf-registration-history-empty,
    .tf-registration-history ol {
        padding-inline: 1rem;
    }}

.tf-registration-correction-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tf-registration-correction-hero h1 {
    margin-top: 0.35rem;
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.tf-registration-correction-hero div > p:last-child {
    margin-top: 0.65rem;
    color: #60646c;
}

.tf-registration-correction-panel {
    display: grid;
    gap: 1.5rem;
    padding: 1.25rem;
}

.tf-registration-correction-details {
    display: grid;
    gap: 0.4rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--tf-border);
}

.tf-registration-correction-details > div {
    display: grid;
    grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.tf-registration-correction-details dt {
    color: #60646c;
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-registration-correction-details dd {
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-registration-correction-submit {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 40rem) {
    .tf-registration-correction-hero {
        display: grid;
    }

    .tf-registration-correction-details > div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }}

/* ===== Mis academias — grade de cartões e modal do design system =====
   Bloco único: as regras antigas ficavam depois dos ajustes de redesign e,
   com a mesma especificidade, venciam por ordem de cascata. */
.tf-academies-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.75rem;
    margin-inline: auto;
    padding: 2.5rem var(--tf-shell-gutter) 5rem;
}

.tf-academies-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.tf-academies-heading p {
    margin: 0 0 0.7rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.tf-academies-heading p span {
    color: #c9c2ba;
}

.tf-academies-heading p b {
    color: var(--tf-red);
}

.tf-academies-heading h1 {
    margin: 0;
    color: var(--tf-ink);
    font-size: clamp(2.3rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-academies-heading small {
    display: block;
    margin-top: 0.7rem;
    color: var(--tf-muted);
    font-size: 1rem;
}

.tf-academies-create-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding: 0.8rem 1.35rem;
    color: #ffffff;
    background: var(--tf-red);
    font-size: 0.875rem;
    font-weight: 800;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.tf-academies-create-button:hover,
.tf-academies-create-button:focus-visible {
    color: #ffffff;
    background: var(--tf-red-strong);
    outline: 0;
}

.tf-academies-create-button:focus-visible {
    box-shadow: 0 0 0 3px rgb(215 25 32 / 18%);
}

.tf-academies-create-button i {
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

/* Sem borda: o cartão tracejado de "Crear academia" logo abaixo já é o CTA. */
.tf-academies-empty {
    margin: -0.75rem 0 0;
    color: var(--tf-muted);
    font-size: 0.9375rem;
}

.tf-academies-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(21.25rem, 100%), 1fr));
    gap: 1rem;
}

/* Cartão: identidade acima, faixa de ação abaixo. */
.tf-academy-card {
    display: flex;
    min-height: 9.25rem;
    flex-direction: column;
    border: 1px solid var(--tf-line);
    background: var(--tf-surface);
    transition: border-color 150ms ease;
}

.tf-academy-card:hover,
.tf-academy-card:focus-within {
    border-color: var(--tf-ink);
}

.tf-academy-summary {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem;
    color: inherit;
}

.tf-academy-avatar {
    display: flex;
    width: 2.875rem;
    height: 2.875rem;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--tf-dark);
    font-family: var(--font-num);
    font-size: 0.8125rem;
    font-weight: 700;
}

.tf-academy-info {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
}

.tf-academy-name {
    color: var(--tf-ink);
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.tf-academy-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4375rem;
}

.tf-academy-badge {
    font-family: var(--font-num);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tf-academy-badge--role {
    padding: 0.25rem 0.4375rem;
    color: #ffffff;
    background: var(--tf-red);
}

.tf-academy-badge--location {
    border: 1px solid var(--tf-line);
    padding: 0.1875rem 0.4375rem;
    color: var(--tf-muted);
    background: var(--tf-surface);
}

.tf-academy-card-actions {
    display: flex;
    flex: none;
    align-items: stretch;
    border-top: 1px solid var(--tf-line-soft);
}

/* Faixa de números do cartão: duas células iguais separadas por um filete. */
.tf-academy-card-actions dl {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
}

.tf-academy-card-actions dl div {
    flex: 1 1 0;
    padding: 0.8125rem 1.25rem;
}

.tf-academy-card-actions dl div + div {
    border-left: 1px solid var(--tf-line-soft);
}

.tf-academy-card-actions dd {
    margin: 0 0 0.25rem;
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.tf-academy-card-actions dl div:last-child dd {
    color: var(--tf-red);
}

.tf-academy-card-actions dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-academy-card-actions > div {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.25rem;
}

.tf-academy-icon-button {
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 1px solid var(--tf-line);
    color: var(--tf-muted);
    background: var(--tf-surface);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    transition: border-color 150ms ease, color 150ms ease;
}

.tf-academy-icon-button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.tf-academy-icon-button:hover,
.tf-academy-icon-button:focus-visible {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
    outline: 0;
}

.tf-academy-icon-button.is-edit:hover,
.tf-academy-icon-button.is-edit:focus-visible {
    border-color: var(--tf-red);
    color: var(--tf-red);
}

.tf-academy-create-card {
    display: flex;
    min-height: 9.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px dashed #c9c2ba;
    color: var(--tf-muted);
    background: transparent;
    transition: border-color 150ms ease, color 150ms ease;
}

.tf-academy-create-card:hover,
.tf-academy-create-card:focus-visible {
    border-color: var(--tf-red);
    color: var(--tf-red);
    outline: 0;
}

.tf-academy-create-card b {
    color: var(--tf-faint);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
}

.tf-academy-create-card span {
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-academy-create-card small {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
}

.tf-academy-create-card:hover b,
.tf-academy-create-card:hover small,
.tf-academy-create-card:focus-visible b,
.tf-academy-create-card:focus-visible small {
    color: inherit;
}

/* Modal de academia (criar em /academies, editar em /academies/ {id}). */
.tf-academy-modal-panel {
    display: flex;
    width: min(38.75rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 5rem);
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-top: 0.25rem solid var(--tf-red);
    background: #ffffff;
    box-shadow: 0 18px 48px rgb(23 24 26 / 18%);
}

.tf-academy-modal-panel .tf-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem 1.85rem 1.25rem;
}

.tf-academy-form-kicker {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.tf-academy-modal-panel .tf-modal-header h2 {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
}

.tf-academy-modal-panel .tf-modal-header p {
    margin-top: 0.45rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.tf-academy-modal-panel .tf-modal-close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--tf-line);
    border-radius: 0;
}

.tf-academy-modal-panel .tf-modal-close:hover {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
    background: transparent;
}

.tf-academy-modal-panel .tf-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.tf-academy-modal-form {
    display: flex;
    overflow: hidden;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Corpo rolável do modal; as colunas e as medidas vêm de .tf-form-grid/.tf-form-field. */
.tf-academy-modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    gap: 1rem;
    padding: 1.45rem 1.85rem;
}

.tf-academy-modal-body .tf-form-field {
    gap: 0.38rem;
}

/* Especificidade casada com a regra base `.tf-form-field input:not(...)`, senão
   o raio e a borda padrão do campo continuam vencendo por cascata. */
.tf-academy-modal-body .tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-academy-modal-body .tf-form-field select {
    border-color: var(--tf-line);
    border-radius: 0;
    background: #ffffff;
}

.tf-academy-form-alert {
    grid-column: 1 / -1;
    margin: 0;
}

.tf-academy-modal-panel .tf-modal-actions {
    grid-template-columns: 1fr 1.4fr;
    gap: 0.75rem;
    border-top: 1px solid var(--tf-line);
    padding: 1.1rem 1.85rem;
}

.tf-academy-modal-panel .tf-modal-link-button {
    min-height: 2.8rem;
    border-color: var(--tf-ink);
    border-radius: 999px;
    font-weight: 800;
}

.tf-academy-modal-panel .tf-modal-link-button.is-primary {
    border-color: var(--tf-red);
}

@media (max-width: 40rem) {
    .tf-academies-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tf-academy-modal-panel {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .tf-academy-modal-panel .tf-modal-header,
    .tf-academy-modal-body,
    .tf-academy-modal-panel .tf-modal-actions {
        padding-inline: 1rem;
    }

    .tf-academy-modal-panel .tf-modal-actions {
        grid-template-columns: 1fr;
    }}

/* ===== Página pública do torneo ===== */
.tf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1.125rem;
    font-family: var(--font-num);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-breadcrumb a {
    color: var(--tf-faint);
    transition: color 150ms ease;
}

.tf-breadcrumb a:hover {
    color: var(--tf-ink);
}

.tf-breadcrumb span {
    color: #c9c2bb;
}

.tf-breadcrumb b {
    min-width: 0;
    overflow: hidden;
    color: var(--tf-ink);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-landing-hero {
    padding-top: 1.25rem;
}

/* Capa: mesmo cartaz gerado do card, em escala de página. */
.tf-landing-cover {
    position: relative;
    height: 22.5rem;
    overflow: hidden;
    /* Canto inferior esquerdo reto: é onde o selo de data encaixa. Arredondá-lo
       deixaria a costura de antialiasing do `overflow: hidden` vazar o gradiente
       escuro por baixo da borda clara do selo. */
    border-radius: 0.75rem 0.75rem 0.75rem 0;
    background: var(--tf-dark);
}

.tf-landing-cover .tf-card-poster {
    gap: 1rem;
    padding-top: 4.5rem;
}

.tf-landing-cover .tf-poster-title {
    font-size: clamp(4rem, 11vw, 7.375rem);
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.tf-landing-cover .tf-poster-kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.32em;
}

.tf-landing-cover .tf-poster-sub {
    padding: 0.3125rem 0.875rem;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
}

.tf-landing-cover .tf-card-badges {
    top: 1.25rem;
    right: 1.375rem;
    left: 1.375rem;
}

.tf-landing-cover .tf-badge {
    padding: 0.3125rem 0.5625rem;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
}

/* Selo de data encaixado no canto, com dia do evento e horario de inicio. */
.tf-landing-cover-date {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Canto inferior esquerdo reto de propósito: o selo preenche o canto e o
       `overflow: hidden` da capa o corta contra o fundo da página, que é a
       mesma cor. Arredondá-lo aqui deixaria o gradiente escuro aparecer na
       lente entre as duas curvas. */
    border-radius: 0 0.625rem 0 0;
    padding: 0.75rem 1.25rem;
    background: var(--tf-page);
}

.tf-landing-cover-date > span:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tf-landing-cover-date > span:first-child b {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tf-landing-cover-date > span:first-child i {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-landing-cover-when {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    border-left: 1px solid var(--tf-border);
    padding-left: 0.75rem;
}

.tf-landing-cover-when i {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-landing-cover-when b {
    color: var(--tf-ink);
    font-size: 0.8125rem;
    font-weight: 700;
}

.tf-landing-summary {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding-top: 2.125rem;
}

.tf-landing-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.tf-landing-heading > div:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.875rem;
}

.tf-landing-heading h1 {
    font-size: clamp(2rem, 5.5vw, 3.375rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.tf-landing-place {
    color: var(--tf-muted);
    font-size: 1rem;
}

.tf-landing-description {
    max-width: 52ch;
    color: var(--tf-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-landing-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.tf-landing-heading-actions .tf-secondary-action {
    min-height: 2.75rem;
    border: 1.5px solid var(--tf-border);
    border-radius: 999px;
    padding-inline: 1.25rem;
    font-size: 0.875rem;
    font-weight: 800;
}

.tf-landing-heading-actions .tf-secondary-action:hover {
    border-color: var(--tf-ink);
}

/* A ação que leva ao edital tem contorno de tinta e inverte no hover. */
.tf-landing-heading-actions .tf-secondary-action.is-strong {
    border-color: var(--tf-ink);
}

.tf-landing-heading-actions .tf-secondary-action.is-strong:hover {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
}

/* Faixa de dados: células separadas por filete dentro de um cartão branco. */
.tf-landing-facts {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.625rem;
    background: var(--tf-surface);
}

.tf-landing-facts > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: 1px solid var(--tf-line-soft);
    padding: 1.25rem 1.375rem;
}

.tf-landing-facts > div:last-child {
    border-bottom: 0;
}

.tf-landing-facts dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-landing-facts dd {
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tf-landing-facts dd.is-num {
    font-family: var(--font-num);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.tf-landing-facts small {
    color: var(--tf-gold);
    font-family: var(--font-num);
    font-size: 0.6875rem;
}

/* <progress> desenhado como a barra do design system, nos dois motores. */
.tf-landing-capacity progress {
    width: 100%;
    height: 0.25rem;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--tf-line-soft);
}

.tf-landing-capacity progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--tf-line-soft);
}

.tf-landing-capacity progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--tf-red);
}

.tf-landing-capacity progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--tf-red);
}

.tf-landing-capacity progress.is-full::-webkit-progress-value {
    background: var(--tf-gold);
}

.tf-landing-capacity progress.is-full::-moz-progress-bar {
    background: var(--tf-gold);
}

.tf-landing-map-link {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-landing-map-link:hover {
    color: var(--tf-red-strong);
}

.tf-landing-body {
    display: grid;
    gap: 1.75rem;
    align-items: start;
    padding-top: 2.5rem;
}

.tf-landing-edital {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

/* Painel do edital: bloco escuro com as seções em acordeão. */
.tf-edital-panel {
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--tf-dark);
}

.tf-edital-intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-bottom: 1px solid var(--tf-dark-line);
    padding: 1.75rem 1.625rem;
}

.tf-edital-intro h2 {
    color: var(--tf-on-dark);
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.tf-edital-intro .tf-rich-content {
    max-width: 42rem;
    color: var(--tf-on-dark-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.tf-edital-section {
    border-bottom: 1px solid var(--tf-dark-line-soft);
}

.tf-edital-section > summary {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.625rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 150ms ease;
}

.tf-edital-section > summary::marker,
.tf-edital-section > summary::-webkit-details-marker {
    display: none;
    content: "";
}

.tf-edital-section > summary:hover {
    background: #1b1714;
}

.tf-edital-section > summary:focus-visible {
    outline: 2px solid var(--tf-red);
    outline-offset: -2px;
}

.tf-edital-num {
    flex: 0 0 auto;
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
}

.tf-edital-title {
    flex: 1 1 auto;
    color: #e4ded8;
    font-size: 0.90625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* O sinal troca de + para − conforme o <details> abre. */
.tf-edital-sign {
    flex: 0 0 auto;
    color: var(--tf-on-dark-faint);
    font-family: var(--font-num);
    font-size: 0.9375rem;
    font-weight: 700;
}

.tf-edital-sign::after {
    content: "+";
}

.tf-edital-section[open] > summary .tf-edital-sign::after {
    content: "−";
}

.tf-edital-section[open] > summary .tf-edital-sign,
.tf-edital-section[open] > summary .tf-edital-num {
    color: var(--tf-red);
}

.tf-edital-section[open] > summary .tf-edital-title {
    color: var(--tf-on-dark);
}

.tf-edital-section > .tf-rich-content {
    padding: 0 1.625rem 1.375rem 3.1875rem;
    color: #c9c2bb;
    font-size: 0.90625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-edital-section > .tf-rich-content a {
    color: var(--tf-red-bright);
}

/* ===== Barra lateral ===== */
.tf-landing-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tf-aside-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.75rem;
    padding: 1.375rem;
    background: var(--tf-surface);
}

.tf-aside-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-aside-head b {
    padding: 0.25rem 0.5rem;
    color: var(--tf-muted);
    background: #f1efec;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tf-aside-head b.is-open {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-aside-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tf-aside-price strong {
    color: var(--tf-ink);
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.tf-aside-price a {
    color: var(--tf-red);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tf-aside-price a:hover {
    color: var(--tf-red-strong);
}

.tf-aside-price span {
    color: var(--tf-muted);
    font-size: 0.84375rem;
}

.tf-aside-card .tf-primary-action {
    border: 0;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 800;
}

.tf-aside-card .tf-primary-action:disabled {
    cursor: not-allowed;
    color: var(--tf-faint);
    background: #f1efec;
}

.tf-aside-card .tf-secondary-action {
    border: 1.5px solid var(--tf-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 800;
}

.tf-aside-card .tf-secondary-action:hover {
    border-color: var(--tf-ink);
}

.tf-aside-counts {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    border-top: 1px solid var(--tf-line-soft);
    padding-top: 0.875rem;
}

.tf-aside-counts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.tf-aside-counts dt {
    color: var(--tf-muted);
    font-size: 0.84375rem;
}

.tf-aside-counts dd {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.84375rem;
    font-variant-numeric: tabular-nums;
}

.tf-aside-organizer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tf-aside-organizer .tf-brand-icon {
    width: 3.25rem;
    height: 1.375rem;
    flex: 0 0 auto;
}

.tf-aside-organizer > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.tf-aside-organizer b {
    color: var(--tf-ink);
    font-size: 0.90625rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.tf-aside-organizer span {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
}

/* ===== Documentos e llaves ===== */
.tf-landing-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 2.5rem 4.5rem;
}

.tf-link-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.tf-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.625rem;
    padding: 1.0625rem 1.125rem;
    background: var(--tf-surface);
    transition: border-color 150ms ease, transform 150ms ease;
}

.tf-link-card > span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.tf-link-card b {
    color: var(--tf-ink);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tf-link-card i {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-link-arrow {
    flex: 0 0 auto;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.875rem;
    font-weight: 700;
}

a.tf-link-card:hover {
    border-color: var(--tf-ink);
    transform: translateY(-1px);
}

/* Destino em destaque: a inscripción aberta é a ação que importa aqui. */
.tf-link-card.is-hot {
    border-color: var(--tf-ink);
    background: var(--tf-dark);
}

.tf-link-card.is-hot b {
    color: var(--tf-on-dark);
}

.tf-link-card.is-hot i,
.tf-link-card.is-hot .tf-link-arrow {
    color: var(--tf-red-bright);
}

/* Indisponível: continua legível, mas sem afordância de clique. */
.tf-link-card.is-off {
    border-color: var(--tf-line-soft);
    cursor: not-allowed;
}

.tf-link-card.is-off b {
    color: #a8a09a;
}

.tf-link-card.is-off i,
.tf-link-card.is-off .tf-link-arrow {
    color: #c4bcb5;
}

.tf-tournament-empty-section {
    border: 1px dashed var(--tf-border);
    border-radius: 0.625rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.tf-tournament-empty-section h2 {
    color: var(--tf-ink);
    font-size: 1.125rem;
    font-weight: 800;
}

.tf-tournament-empty-section p {
    margin-top: 0.375rem;
    color: var(--tf-muted);
    font-size: 0.875rem;
}

.tf-checkin-heading-section {
    padding-block: 1.5rem 2rem;
    border-bottom: 1px solid var(--tf-border);
}

.tf-checkin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #5e636c;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tf-checkin-back-link svg {
    width: 1.1rem;
    height: 1.1rem;
}

.tf-checkin-back-link:hover {
    color: var(--tf-red);
}

.tf-checkin-heading {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.tf-checkin-heading h1 {
    max-width: 46rem;
    margin-top: 0.5rem;
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.tf-checkin-heading p:not(.tf-public-eyebrow) {
    max-width: 42rem;
    margin-top: 0.65rem;
    color: #5d626b;
    line-height: 1.65;
}

.tf-checkin-heading p strong {
    color: var(--tf-ink);
}

/* O card é conteúdo do cabeçalho, não coluna: não deve esticar na versão de uma
   coluna nem encolher a ponto de o número colar no rótulo. */
.tf-checkin-heading .tf-stat-card {
    justify-self: start;
    min-width: 11rem;
}

/* O campo de busca do chequeo vem do primitivo (fragmento `search`); resta a
   separação do bloco dentro do cabeçalho. */
.tf-checkin-search {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--tf-border);
    padding-top: 1.25rem;
}

/* A pill de «Mostrar todos» já ganha respiro do `gap` do formulário. */
.tf-checkin-search .tf-filter-row {
    margin-top: 0;
}

/* A altura mínima só existe para o rodapé não pular durante o swap htmx; o card
   de estado vazio já ocupa a maior parte dela. */
.tf-checkin-results-section {
    min-height: 12rem;
    padding-block: 2rem 4rem;
    background: #ffffff;
}

.tf-checkin-results-summary {
    margin-bottom: 0.75rem;
    color: #676c75;
    font-size: 0.78rem;
    font-weight: 800;
}

.tf-checkin-groups {
    overflow: hidden;
    border: 1px solid var(--tf-border);
    border-radius: 0.375rem;
}

.tf-checkin-groups details + details {
    border-top: 1px solid var(--tf-border);
}

.tf-checkin-groups summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    background: var(--tf-page);
}

.tf-checkin-groups summary::marker,
.tf-checkin-groups summary::-webkit-details-marker {
    display: none;
}

.tf-checkin-groups summary > span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 900;
}

.tf-checkin-groups summary small {
    color: var(--tf-red);
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
}

.tf-checkin-groups summary svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 150ms ease;
}

.tf-checkin-groups details[open] summary svg {
    transform: rotate(180deg);
}

.tf-checkin-table-scroll {
    overflow-x: auto;
}

.tf-checkin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.tf-checkin-table th {
    padding: 0.75rem 1rem;
    color: #737881;
    background: #f4f1ea;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tf-checkin-table td {
    padding: 0.9rem 1rem;
    border-top: 1px solid #ebe6dc;
    font-weight: 700;
}

.tf-checkin-table td:first-child {
    font-weight: 900;
}

.tf-brackets-results-section {
    min-height: 20rem;
    padding-block: 2rem 4rem;
    background: #ffffff;
}

.tf-bracket-rounds-scroll {
    overflow-x: auto;
    padding: 1rem;
    background: #ffffff;
    scrollbar-color: #b9b5ac transparent;
}

.tf-bracket-rounds {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: stretch;
}

.tf-bracket-round {
    display: flex;
    width: 16rem;
    flex: 0 0 auto;
    flex-direction: column;
    min-width: 0;
}

.tf-bracket-round + .tf-bracket-round {
    margin-left: 2rem;
}

.tf-bracket-round > h2 {
    margin-bottom: 0.4rem;
    color: #454a52;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-bracket-round-matches {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.tf-bracket-slot {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    padding: 0.45rem 0;
}

/* Conectores: cada par de luchas se une en el centro de la lucha que alimentan. */
.tf-bracket-round:not(:last-child) .tf-bracket-slot::after {
    content: "";
    position: absolute;
    right: -1rem;
    width: 1rem;
    border-right: 2px solid var(--tf-border);
}

.tf-bracket-round:not(:last-child) .tf-bracket-slot:nth-child(odd)::after {
    top: 50%;
    bottom: 0;
    border-top: 2px solid var(--tf-border);
    border-top-right-radius: 0.5rem;
}

.tf-bracket-round:not(:last-child) .tf-bracket-slot:nth-child(even)::after {
    top: 0;
    bottom: 50%;
    border-bottom: 2px solid var(--tf-border);
    border-bottom-right-radius: 0.5rem;
}

/* Una lucha impar sin pareja sigue derecho hasta la próxima ronda. */
.tf-bracket-round:not(:last-child) .tf-bracket-slot:nth-child(odd):last-child::after {
    top: 50%;
    bottom: auto;
    height: 0;
    border-right: 0;
    border-radius: 0;
}

.tf-bracket-round:not(:first-child) .tf-bracket-slot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1rem;
    width: 1rem;
    height: 0;
    border-top: 2px solid var(--tf-border);
}

/* Camino de la campeona: los tramos de su recorrido se encienden en rojo. */
.tf-bracket-round:not(:last-child) .tf-bracket-slot.is-path::after {
    z-index: 1;
    border-color: var(--tf-red);
}

.tf-bracket-round:not(:first-child) .tf-bracket-slot.is-path-in::before {
    z-index: 1;
    border-color: var(--tf-red);
}

@media (prefers-reduced-motion: no-preference) {
    .tf-bracket-slot.is-path::after,
    .tf-bracket-slot.is-path-in::before {
        animation: tf-bracket-ignite 700ms ease both;
    }}

@keyframes tf-bracket-ignite {
    from { opacity: 0.15; }
    to { opacity: 1; }
}

/* La lucha es un solo card: dos filas separadas por un filete. */
.tf-bracket-match {
    position: relative;
    z-index: 2;
    width: 100%;
    border: 1px solid var(--tf-line);
    border-radius: 0.55rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgb(23 24 26 / 5%);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.tf-bracket-match:hover {
    box-shadow: 0 6px 18px rgb(23 24 26 / 10%);
    transform: translateY(-1px);
}

/* Lift the card whose entrant menu is open above the sibling cards below it. */
.tf-bracket-match:has(.tf-bracket-entrant.is-menu-open) {
    z-index: 30;
}

/* Slot still undecided inside a previewed next-round match. */
.tf-bracket-entrant.is-tbd strong {
    color: #a7abb2;
    font-weight: 600;
}

/* Categoría con un solo inscripto confirmado: se muestra "en espera" de rival. */
.tf-bracket-waiting {
    width: 16rem;
    max-width: 100%;
    padding: 1rem 1.25rem 0;
}

.tf-bracket-waiting .tf-bracket-slot {
    padding: 0;
}

.tf-bracket-entrant.is-waiting {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: #a7abb2;
}

.tf-bracket-entrant.is-waiting svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: #c7c3b8;
}

.tf-bracket-entrant.is-waiting strong {
    color: #a7abb2;
    font-weight: 600;
}

.tf-bracket-match-label {
    position: absolute;
    top: -0.55rem;
    left: 0.6rem;
    z-index: 3;
    border: 1px solid var(--tf-line);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    color: #898e96;
    background: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-bracket-entrants {
    display: grid;
}

.tf-bracket-entrant {
    position: relative;
    display: flex;
    min-height: 2.9rem;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 0.45rem 0.75rem 0.45rem 0.9rem;
}

.tf-bracket-entrant + .tf-bracket-entrant {
    border-top: 1px solid var(--tf-line);
}

.tf-bracket-entrant.is-winner::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    bottom: 0.45rem;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--tf-red);
}

.tf-bracket-entrant strong,
.tf-bracket-entrant small {
    overflow-wrap: anywhere;
}

.tf-bracket-entrant strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.tf-bracket-entrant.is-winner strong {
    font-weight: 700;
}

.tf-bracket-entrant small {
    display: block;
    margin-top: 0.15rem;
    color: #6f747c;
    font-size: 0.7rem;
}

.tf-bracket-entrant.is-loser strong {
    color: #8b8f96;
    font-weight: 500;
}

.tf-bracket-entrant.is-loser small {
    color: #b0b3b8;
}

.tf-bracket-entrant.is-bye strong {
    color: #a3a7ad;
    letter-spacing: 0.08em;
}

.tf-bracket-placeholder {
    border-radius: 0.55rem;
    padding: 0.9rem;
    color: #747982;
    background: #faf9f6;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Remate del camino: la campeona de la categoría. */
.tf-bracket-champion-column .tf-bracket-slot {
    justify-content: center;
}

.tf-bracket-champion {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #ecdfb6;
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, #fffdf6, #faf3dd);
    box-shadow: 0 2px 10px rgb(201 162 39 / 18%);
}

.tf-bracket-champion .tf-medal {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
}

.tf-bracket-champion-text {
    min-width: 0;
}

.tf-bracket-champion-text em {
    display: block;
    color: #9a7c1c;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-bracket-champion-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tf-medal {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 18%);
}

.tf-medal.is-gold { background: #c9a227; }
.tf-medal.is-silver { background: #868d96; }
.tf-medal.is-bronze { background: #b06a35; }

/* Podio */
.tf-bracket-podium {
    border-top: 1px solid var(--tf-line);
    padding: 1.25rem 1rem;
}

.tf-bracket-podium h3 {
    margin-bottom: 0.9rem;
    color: #454a52;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-bracket-podium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.tf-bracket-medalist {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: #ffffff;
}

.tf-bracket-medalist.is-gold {
    border-color: #ecdfb6;
    background: linear-gradient(135deg, #fffdf6, #faf3dd);
}

.tf-bracket-medalist.is-silver {
    background: linear-gradient(135deg, #ffffff, #f1f2f4);
}

.tf-bracket-medalist.is-bronze {
    background: linear-gradient(135deg, #ffffff, #f7ece3);
}

.tf-bracket-medalist-who {
    min-width: 0;
}

.tf-bracket-medalist-who strong {
    display: block;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.tf-bracket-medalist-who small {
    color: var(--tf-muted);
    font-size: 0.7rem;
}

.tf-bracket-medalist-label {
    margin-left: auto;
    color: var(--tf-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .tf-public-brand .tf-brand-lockup {
        display: flex;
    }

    .tf-public-hero-grid {
        padding-top: 3.5rem;
    }

    .tf-public-hero-content {
        padding-bottom: 2.75rem;
    }

    .tf-public-copy {
        font-size: 1.125rem;
    }

    .tf-public-content {
        padding-block: 2.75rem 4.5rem;
    }

    .tf-organizers-grid {
        padding-block: 4rem;
    }

    .tf-sticky-cta {
        display: none;
    }

    .tf-tournament-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-phone-grid,
    .tf-registration-athlete-phone {
        grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    }

    .tf-modal-overlay {
        align-items: center;
        padding: 1.5rem;
    }

    .tf-athlete-modal-panel {
        border-radius: 0.375rem;
    }

    .tf-landing-hero {
        padding-top: 1.75rem;
    }

    .tf-landing-summary {
        padding-top: 2.5rem;
    }

    .tf-landing-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-landing-facts > div {
        border-right: 1px solid var(--tf-line-soft);
    }

    .tf-landing-facts > div:nth-child(even) {
        border-right: 0;
    }

    .tf-checkin-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .tf-checkin-heading h1 {
        font-size: 3rem;
    }}

@media (min-width: 1024px) {
    .tf-public-menu {
        gap: 1.5rem;
    }

    /* O painel do próximo evento só ganha coluna própria quando há largura
       para as duas colunas do mockup (conteúdo + 24rem). */
    .tf-public-hero-grid {
        grid-template-columns: minmax(0, 1fr) 24rem;
        gap: 3.5rem;
    }

    .tf-public-hero-content {
        padding-bottom: 3.5rem;
    }

    .tf-organizers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }

    .tf-tournament-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Os cinco dados do torneo cabem em uma linha; os filetes voltam a ser
       verticais e o último não fecha a borda. */
    .tf-landing-facts {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tf-landing-facts > div {
        border-right: 1px solid var(--tf-line-soft);
        border-bottom: 0;
    }

    .tf-landing-facts > div:last-child {
        border-right: 0;
    }

    /* Edital e barra lateral lado a lado, com a lateral acompanhando o scroll. */
    .tf-landing-body {
        grid-template-columns: minmax(0, 1fr) 21.25rem;
    }

    .tf-landing-aside {
        position: sticky;
        top: 5.75rem;
    }

    /* Formulário e barra lateral lado a lado só quando cabem as duas colunas. */
    .tf-registration-grid {
        grid-template-columns: minmax(0, 1fr) 22.25rem;
    }

    /* Os quatro dados confirmados em 2x2, como no mockup. */
    .tf-registration-confirmation-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Confirmación: hero e corpo ganham a coluna lateral. */
    .tf-confirmation-hero-grid {
        grid-template-columns: minmax(0, 1fr) 19rem;
        gap: 3rem;
    }

    .tf-confirmation-body {
        grid-template-columns: minmax(0, 1fr) 22.25rem;
    }

    .tf-confirmation-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Com número ímpar de dados o último ocupa a linha, senão sobra uma
       célula vazia mostrando o filete de fundo. */
    .tf-confirmation-detail > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .tf-registration-aside {
        position: sticky;
        top: 5.75rem;
    }

    .tf-checkin-search .tf-form-field {
        max-width: 46rem;
    }

    .tf-bracket-rounds {
        grid-auto-columns: 20rem;
    }}

@media (max-width: 639.98px) {
    .tf-athletes-page {
        gap: 1.25rem;
        padding-block: 1.25rem 3rem;
    }

    .tf-athletes-create-button {
        width: 100%;
        min-height: 2.65rem;
    }

    .tf-athlete-avatar {
        width: 2.25rem;
        height: 2.25rem;
    }

    .tf-athlete-actions {
        flex-direction: column;
    }

    .tf-athlete-action {
        width: 2rem;
        height: 2rem;
    }

    .tf-athlete-details {
        margin-inline: 0.75rem;
        padding-left: 0;
    }

    .tf-public-nav {
        min-height: 4rem;
    }

    .tf-public-menu {
        display: none;
    }

    .tf-mobile-menu-button {
        display: inline-flex;
    }

    .tf-public-hero-grid {
        padding-top: 2.25rem;
    }

    .tf-public-hero-content {
        padding-bottom: 1.75rem;
    }

    .tf-public-copy {
        font-size: 1rem;
        line-height: 1.55;
    }

    .tf-public-stats {
        gap: 1.25rem 2rem;
    }

    .tf-public-stats dt {
        font-size: 1.5rem;
    }

    .tf-public-content {
        padding-block: 2rem 7rem;
    }

    .tf-next-event {
        padding: 1.5rem 1.25rem;
    }

    .tf-organizers-grid {
        padding-block: 2.75rem;
    }

    .tf-site-footer-inner {
        padding-block: 2.5rem 1.75rem;
    }

.tf-filter-row button,
    .tf-filter-row a {
        min-height: 2.25rem;
        padding-inline: 0.75rem;
    }

    .tf-tournament-grid {
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .tf-card-body {
        padding: 0.75rem;
    }

    .tf-card-body h2 {
        min-height: 0;
        font-size: 1.125rem;
    }

    .tf-card-actions {
        gap: 0.5rem;
    }

    .tf-athlete-modal-panel {
        height: 100dvh;
    }

    .tf-checkin-table-scroll {
        overflow: visible;
    }

    .tf-checkin-table,
    .tf-checkin-table tbody,
    .tf-checkin-table tr,
    .tf-checkin-table td {
        display: block;
        width: 100%;
    }

    .tf-checkin-table thead {
        display: none;
    }

    .tf-checkin-table tr {
        padding: 0.6rem 1rem;
        border-top: 1px solid #ebe6dc;
    }

    .tf-checkin-table td {
        display: grid;
        grid-template-columns: minmax(5.5rem, 0.45fr) minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .tf-checkin-table td::before {
        content: attr(data-label);
        color: #858a93;
        font-size: 0.65rem;
        font-weight: 900;
        text-transform: uppercase;
    }}

/* Tournaments management: index listing */
.tf-auth-alert--success {
    border-color: rgb(22 128 61 / 28%);
    color: #166c32;
    background: rgb(22 128 61 / 8%);
}

.tf-tournaments-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.75rem;
    margin-inline: auto;
    padding: 1.75rem var(--tf-shell-gutter) 4rem;
}

/* Tournaments management: creation form */
.tf-tournament-form-page {
    display: grid;
    width: min(100%, 60rem);
    gap: 1.25rem;
    margin-inline: auto;
    padding: 1.75rem 1rem 4rem;
}

.tf-tournament-form-back {
    color: #737373;
    font-size: 0.82rem;
    font-weight: 700;
}

.tf-tournament-form-back:hover,
.tf-tournament-form-back:focus-visible {
    color: var(--tf-red);
}

.tf-tournament-form-hero h1 {
    color: var(--tf-ink);
    font-size: 1.35rem;
    font-weight: 600;
}

.tf-tournament-form-hero p {
    margin-top: 0.4rem;
    color: #737373;
    font-size: 0.82rem;
}

.tf-tournament-form {
    display: grid;
    gap: 1.25rem;
}

.tf-form-step {
    display: grid;
    gap: 1.25rem;
}

.tf-form-step.is-hidden {
    display: none;
}

.tf-form-panel {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(23 24 26 / 5%);
}

.tf-form-panel-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-bottom: 1px solid var(--tf-line);
    padding: 0.8rem 1rem;
}

.tf-form-panel-header h2 {
    color: var(--tf-ink);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tf-form-step-number {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tf-red);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
}

.tf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.15rem 1rem;
}

.tf-form-field {
    display: grid;
    gap: 0.4rem;
    align-content: start;
}

.tf-form-field-full {
    grid-column: 1 / -1;
}

.tf-form-field-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tf-form-field > span {
    color: var(--tf-ink);
    font-size: var(--tf-label-size);
    font-weight: var(--tf-label-weight);
}

.tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-form-field select,
.tf-form-field textarea {
    min-height: var(--tf-field-h);
    width: 100%;
    border: 1px solid var(--tf-field-border);
    border-radius: var(--tf-field-radius);
    padding: var(--tf-field-pad);
    background: #ffffff;
    color: var(--tf-ink);
    font-size: 0.88rem;
}

.tf-form-field textarea {
    min-height: auto;
    resize: vertical;
}

.tf-form-field-sm input:not([type="checkbox"]):not([type="radio"]),
.tf-form-field-sm select {
    min-height: var(--tf-field-h-sm);
}

.tf-form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.tf-form-field select:focus,
.tf-form-field textarea:focus {
    border-color: var(--tf-red);
    box-shadow: 0 0 0 3px var(--tf-field-ring);
    outline: 0;
}

.tf-form-field input:not([type="checkbox"]):not([type="radio"])[readonly],
.tf-form-field textarea[readonly] {
    border-color: var(--tf-line);
    background: #f4f2ec;
    color: var(--tf-muted);
}

.tf-form-field input:not([type="checkbox"]):not([type="radio"]):disabled,
.tf-form-field select:disabled,
.tf-form-field textarea:disabled {
    background: #f4f2ec;
    color: #a3a3a3;
}

.tf-form-help {
    color: var(--tf-muted);
    font-size: 0.74rem;
}

.tf-form-error {
    color: var(--tf-field-error);
    font-size: 0.74rem;
    font-weight: 700;
}

/* Checkbox único do primitivo: controle + rótulo, com ajuda/erro alinhados ao rótulo. */
.tf-form-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    color: #686868;
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-form-inline-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.tf-form-inline-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #686868;
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-form-inline-option input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: var(--tf-red);
}

.tf-form-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tf-red);
}

.tf-form-check .tf-form-help,
.tf-form-check .tf-form-error {
    grid-column: 2;
}

.tf-form-choice-group {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    border: 0;
    padding: 0;
}

.tf-form-choice-group legend {
    color: var(--tf-ink);
    font-size: var(--tf-label-size);
    font-weight: var(--tf-label-weight);
}

.tf-form-choice-group > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #686868;
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-form-choice-group input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tf-red);
}

/* Busca do primitivo: o controle continua sendo .tf-form-field; aqui só entram o
   ícone e o indicador htmx posicionados dentro dele. */
.tf-form-search {
    position: relative;
    display: block;
}

.tf-form-search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--tf-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

/* O `padding` curto de `.tf-form-field input:not([type=checkbox]):not([type=radio])`
   tem especificidade maior, então os recuos do ícone e do indicador precisam
   igualar esse seletor. */
.tf-form-search.has-icon input:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 2.3rem;
}

.tf-form-search.has-indicator input:not([type="checkbox"]):not([type="radio"]) {
    padding-right: 2.3rem;
}

.tf-form-search .htmx-indicator {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    color: var(--tf-muted);
    transform: translateY(-50%);
}

.tf-form-options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.tf-form-options-row > span {
    color: var(--tf-ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.tf-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.tf-form-button {
    border: 1.5px solid var(--tf-line);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    background: #ffffff;
    color: var(--tf-ink);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.tf-form-button:hover {
    border-color: #b7b1a3;
}

.tf-form-button.is-primary {
    border-color: var(--tf-red);
    background: var(--tf-red);
    color: #ffffff;
}

.tf-form-button.is-primary:hover {
    background: #bb141a;
}

@media (max-width: 40rem) {
    .tf-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .tf-form-field-pair {
        grid-template-columns: minmax(0, 1fr);
    }}

/* Tournaments management: edital section editor and review */
.is-hidden {
    display: none;
}

.tf-section-editor {
    display: grid;
    gap: 0.85rem;
    border: 1px solid #ddd8cd;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #fbfaf7;
}

.tf-section-editor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.tf-section-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tf-section-action {
    border: 1px solid var(--tf-border);
    border-radius: 0.35rem;
    padding: 0.35rem 0.6rem;
    background: #ffffff;
    color: #5f5f5f;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.tf-section-action:hover:not(:disabled) {
    border-color: var(--tf-red);
    color: var(--tf-red);
}

.tf-section-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tf-section-action.is-danger {
    border-color: rgb(215 25 32 / 40%);
    color: #8f1419;
}

.tf-form-field-label {
    color: var(--tf-ink);
    font-size: 0.78rem;
    font-weight: 800;
}

.tf-rich-text-field {
    display: grid;
    gap: 0.4rem;
}

/* Com JavaScript, tournament-rich-text-editor.js esconde o textarea de fallback.
   O invólucro `.tf-form-field` do fragmento de campo continuaria ocupando uma
   linha do grid acima, somando um gap solto abaixo do editor. */
.tf-rich-text-field .tf-form-field:has(> textarea.is-hidden) {
    display: none;
}

.tf-rich-text-shell {
    border: 1px solid var(--tf-border);
    border-radius: 0.4rem;
    overflow: hidden;
    background: #ffffff;
}

.tf-rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 1px solid var(--tf-line);
    padding: 0.4rem 0.5rem;
    background: #f7f5ef;
}

.tf-rich-text-toolbar button {
    min-width: 1.9rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    background: transparent;
    color: #5f5f5f;
    font-size: 0.82rem;
    cursor: pointer;
}

.tf-rich-text-toolbar button:hover {
    border-color: var(--tf-border);
    background: #ffffff;
}

.tf-rich-text-divider {
    width: 1px;
    height: 1.2rem;
    background: var(--tf-line);
    margin-inline: 0.15rem;
}

.tf-rich-text-editor {
    min-height: 8rem;
    padding: 0.65rem 0.75rem;
    color: var(--tf-ink);
    font-size: 0.88rem;
    line-height: 1.5;
    outline: none;
}

.tf-rich-text-editor:focus {
    box-shadow: inset 0 0 0 2px rgb(215 25 32 / 14%);
}

.tf-rich-content h3 {
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0.5rem 0 0.3rem;
}

/* Tournament creation wizard — BJJ Pro PY design system */
.tf-create-tournament-page {
    --tf-font-mono: "JetBrains Mono", monospace;
    width: min(100%, var(--tf-shell-max));
    gap: 0;
    padding: 1.9rem var(--tf-shell-gutter) 5rem;
}

.tf-create-category-catalog {
    min-width: 0;
}

.tf-create-tournament-page .tf-tournament-form {
    gap: 1.5rem;
}

.tf-create-tournament-page .tf-tournament-form-back {
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: #8b837c;
    font-family: var(--tf-font-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.tf-create-wizard-hero-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2.25rem;
}

.tf-create-wizard-hero {
    display: grid;
    min-width: 0;
    gap: 0.7rem;
}

.tf-create-tournament-page .tf-create-wizard-hero h1 {
    font-size: clamp(2.2rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-create-wizard-hero-row.is-review .tf-create-wizard-hero h1 {
    font-size: 2.35rem;
    white-space: nowrap;
}

.tf-create-tournament-page .tf-create-wizard-hero > p:last-child {
    max-width: 40rem;
    margin: 0;
    color: #57514c;
    font-size: 0.95rem;
    line-height: 1.4;
}

.tf-create-tournament-page .tf-create-wizard-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-create-tournament-page .tf-create-wizard-kicker::before {
    width: 1.5rem;
    height: 0.18rem;
    background: var(--tf-red);
    content: "";
}

.tf-create-wizard-progress {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-create-wizard-progress li {
    display: flex;
    align-items: center;
    color: #958d86;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.tf-create-wizard-progress li:not(:last-child)::after {
    width: 1.6rem;
    height: 1px;
    margin-inline: 0.75rem;
    background: #d6d0c9;
    content: "";
}

.tf-create-wizard-progress li > span {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.55rem;
    place-items: center;
    border: 1px solid #d6d0c9;
    border-radius: 50%;
    background: #fff;
    font-family: var(--tf-font-mono);
    font-size: 0.67rem;
}

.tf-create-wizard-progress li.is-active {
    color: #14110f;
}

.tf-create-wizard-progress li.is-active > span {
    border-color: var(--tf-red);
    background: var(--tf-red);
    color: #fff;
}

.tf-create-wizard-progress li.is-complete {
    color: #57514c;
}

.tf-create-wizard-progress li.is-complete > span {
    border-color: #14110f;
    background: #14110f;
    color: #fff;
}

.tf-create-wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    gap: 1.6rem;
    align-items: start;
}

.tf-create-wizard-main,
.tf-create-wizard-sidebar {
    display: grid;
    min-width: 0;
    gap: 1.1rem;
}

.tf-create-wizard-sidebar {
    position: sticky;
    top: 5.25rem;
}

.tf-create-tournament-page .tf-form-step {
    gap: 1.1rem;
}

.tf-create-tournament-page .tf-form-panel {
    overflow: visible;
    border-color: #e7e2dc;
    border-radius: 0;
    box-shadow: none;
}

.tf-create-tournament-page .tf-form-panel-header {
    min-height: 3rem;
    border-color: #e7e2dc;
    padding: 0.9rem 1.35rem;
    background: #fcfbfa;
}

.tf-create-tournament-page .tf-form-panel-header h2 {
    font-family: var(--tf-font-mono);
    font-size: 0.67rem;
    letter-spacing: 0.18em;
}

.tf-create-tournament-page .tf-form-step-number {
    width: 1.38rem;
    height: 1.38rem;
    font-family: var(--tf-font-mono);
    font-size: 0.66rem;
}

.tf-create-tournament-page .tf-form-step-number.is-dark {
    background: #14110f;
}

.tf-create-tournament-page .tf-form-grid {
    gap: 1rem;
    padding: 1.35rem;
}

.tf-create-tournament-page .tf-form-field > span,
.tf-create-tournament-page .tf-form-field-label {
    font-size: 0.72rem;
    font-weight: 700;
}

.tf-create-tournament-page .tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-create-tournament-page .tf-form-field select,
.tf-create-tournament-page .tf-form-field textarea {
    border-color: #e7e2dc;
    border-radius: 0;
    font-size: 0.82rem;
}

.tf-create-tournament-page .tf-form-inline-row {
    gap: 0.6rem;
}

.tf-create-tournament-page #s2 .tf-form-inline-option {
    min-height: 2.4rem;
    border: 1px solid #e7e2dc;
    padding: 0.55rem 0.9rem;
    background: #fff;
    color: #14110f;
}

.tf-create-option-stack {
    display: grid;
    align-items: stretch;
    gap: 0.65rem;
}

.tf-create-option-stack > .tf-form-inline-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    border: 1px solid #e7e2dc;
    padding: 0.75rem 0.9rem;
    color: #14110f;
}

.tf-create-option-stack > .tf-form-inline-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.tf-create-option-stack > .tf-form-inline-option > .tf-form-error {
    grid-column: 2;
}

.tf-create-combo-pricing {
    display: grid;
    gap: 0.8rem;
    border-top: 1px solid #e7e2dc;
    padding-top: 1rem;
}

.tf-create-combo-pricing h3 {
    font-family: var(--font-num);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-create-choice-copy {
    display: grid;
    gap: 0.15rem;
}

.tf-create-choice-copy strong {
    font-size: 0.78rem;
}

.tf-create-choice-copy small {
    color: #57514c;
    font-size: 0.7rem;
    font-weight: 400;
}

.tf-create-tournament-page .tf-form-actions {
    margin-top: 0.2rem;
}

.tf-create-tournament-page .tf-form-button {
    min-height: 2.55rem;
    border-color: #14110f;
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    font-size: 0.78rem;
}

.tf-create-tournament-page .tf-form-button.is-primary {
    border-color: var(--tf-red);
}

.tf-create-sidebar-dark,
.tf-create-category-summary {
    padding: 1.25rem;
    background: #14110f;
    color: #fff;
}

.tf-create-sidebar-dark h2,
.tf-create-category-summary h2,
.tf-create-review-checklist h2,
.tf-create-sidebar-note h2 {
    margin-bottom: 1rem;
    color: #a8a098;
    font-family: var(--tf-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-create-sidebar-dark ol,
.tf-create-sidebar-dark ul {
    display: grid;
    gap: 0.78rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-create-sidebar-dark li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.68rem;
}

.tf-create-sidebar-dark li > span {
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.57rem;
}

.tf-create-sidebar-dark a {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-create-sidebar-dark ul li::before {
    width: 0.25rem;
    height: 0.25rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tf-red);
    content: "";
}

.tf-create-sidebar-dark ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-create-sidebar-note {
    border: 1px solid #e7e2dc;
    border-left: 2px solid var(--tf-red);
    padding: 1.1rem;
    background: #fff;
}

.tf-create-sidebar-note h2 {
    margin-bottom: 0.45rem;
    color: var(--tf-red);
}

.tf-create-sidebar-note strong {
    font-size: 0.78rem;
}

.tf-create-sidebar-note p {
    margin-top: 0.3rem;
    color: #57514c;
    font-size: 0.72rem;
    line-height: 1.45;
}

.tf-create-edital-heading {
    flex-wrap: wrap;
}

.tf-create-edital-heading > h2 {
    margin-right: auto;
}

.tf-create-edital-stats {
    display: flex;
    gap: 1.5rem;
    margin-right: 0.6rem;
}

.tf-create-edital-stats div {
    display: grid;
    gap: 0.15rem;
}

.tf-create-edital-stats dt {
    color: #8b837c;
    font-family: var(--tf-font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-create-edital-stats dd {
    color: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.85rem;
    font-weight: 700;
}

.tf-create-tournament-page .tf-section-editor {
    border-color: #e7e2dc;
    border-radius: 0;
    background: #fff;
}

.tf-create-tournament-page .tf-rich-text-shell {
    border-color: #e7e2dc;
    border-radius: 0;
}

.tf-create-tournament-page .tf-rich-text-toolbar {
    background: #fcfbfa;
}

.tf-create-category-context {
    display: grid;
}

.tf-create-category-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 1.35rem;
}

.tf-create-category-select-row,
.tf-create-category-add-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.85rem 1.35rem;
}

.tf-create-category-select-row button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: #14110f;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.tf-create-category-select-row button > span {
    width: 1rem;
    height: 1rem;
    border: 1px solid #cfc8c1;
    background: #fff;
}

.tf-create-category-select-row small {
    color: #8b837c;
    font-family: var(--tf-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tf-create-category-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.6rem;
    padding: 0.8rem 1.35rem;
}

.tf-create-category-presets .tf-form-check {
    min-width: 0;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.8rem 0;
    color: #14110f;
}

.tf-create-category-presets .tf-form-check span {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
}

.tf-create-category-presets .tf-form-check strong {
    font-size: 0.78rem;
    line-height: 1.25;
}

.tf-create-category-presets .tf-form-check small {
    color: #8b837c;
    font-family: var(--tf-font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.tf-create-category-add-row {
    border-top: 1px solid #e7e2dc;
    border-bottom: 0;
}

.tf-create-category-add-row p {
    color: #57514c;
    font-size: 0.76rem;
}

.tf-create-category-add-row p.is-error {
    color: var(--tf-red);
    font-weight: 700;
}

.tf-create-category-empty {
    display: grid;
    min-height: 8.8rem;
    place-content: center;
    gap: 0.35rem;
    padding: 1.5rem;
    text-align: center;
}

.tf-create-category-empty strong {
    font-size: 0.88rem;
}

.tf-create-category-empty p {
    max-width: 26rem;
    color: #8b837c;
    font-size: 0.76rem;
}

.tf-create-category-summary h2 {
    margin-bottom: 0.7rem;
}

.tf-create-category-summary > p {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    border-bottom: 1px solid #35312e;
    padding-bottom: 1rem;
    font-size: 0.7rem;
}

.tf-create-category-summary > p strong {
    font-size: 2.6rem;
    line-height: 1;
}

.tf-create-category-summary dl {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.tf-create-category-summary dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.7rem;
}

.tf-create-category-summary dd {
    font-family: var(--tf-font-mono);
}

.tf-create-category-groups article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.9rem 1.35rem;
}

.tf-create-category-groups article:last-child {
    border-bottom: 0;
}

.tf-create-category-groups article > div {
    display: grid;
    gap: 0.22rem;
}

.tf-create-category-groups strong {
    font-size: 0.78rem;
}

.tf-create-category-groups small {
    color: #8b837c;
    font-size: 0.7rem;
}

.tf-create-category-groups b {
    flex: 0 0 auto;
    color: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.65rem;
}

.tf-create-review-warning {
    border-left: 3px solid var(--tf-red);
    padding: 1rem 1.2rem;
    background: #fff;
}

.tf-create-review-warning > strong {
    color: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-create-review-warning p {
    margin-top: 0.55rem;
    color: #57514c;
    font-size: 0.75rem;
}

.tf-create-review-card .tf-form-panel-header > h2 {
    margin-right: auto;
}

.tf-create-review-card .tf-form-panel-header > button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.tf-create-review-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    padding: 1.35rem;
}

.tf-create-review-data div {
    display: grid;
    gap: 0.2rem;
}

.tf-create-review-data dt {
    color: #8b837c;
    font-family: var(--tf-font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-create-review-data dd {
    color: #14110f;
    font-size: 0.78rem;
    font-weight: 700;
}

.tf-create-review-edital details {
    border-bottom: 1px solid #e7e2dc;
    padding: 0.85rem 1.35rem;
}

.tf-create-review-edital details:last-child {
    border-bottom: 0;
}

.tf-create-review-edital summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    list-style: none;
}

.tf-create-review-edital summary::before {
    width: 0.28rem;
    height: 0.28rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tf-red);
    content: "";
}

.tf-create-review-edital summary strong {
    margin-right: auto;
    font-size: 0.75rem;
}

.tf-create-review-edital summary span,
.tf-create-review-edital summary small {
    color: #8b837c;
    font-family: var(--tf-font-mono);
    font-size: 0.55rem;
    text-transform: uppercase;
}

.tf-create-review-edital details.is-unpublished summary::before {
    background: #cfc8c1;
}

.tf-create-review-edital .tf-rich-content {
    padding: 0.8rem 0 0 0.95rem;
    color: #57514c;
    font-size: 0.73rem;
}

.tf-create-review-submit {
    display: grid;
    gap: 0.55rem;
    padding: 1.4rem;
    background: #14110f;
    color: #fff;
}

.tf-create-review-submit > small {
    color: var(--tf-red);
    font-family: var(--tf-font-mono);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-create-review-submit h2 {
    font-size: 1.12rem;
}

.tf-create-review-submit > p {
    color: #a8a098;
    font-size: 0.75rem;
    line-height: 1.45;
}

.tf-create-review-submit .tf-form-check {
    margin-top: 0.35rem;
    color: #fff;
    font-size: 0.72rem;
}

.tf-create-review-checklist {
    border: 1px solid #e7e2dc;
    padding: 1.2rem;
    background: #fff;
}

.tf-create-review-checklist ul {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-create-review-checklist li {
    display: flex;
    align-items: start;
    gap: 0.6rem;
}

.tf-create-review-checklist li > span {
    display: grid;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #14110f;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
}

.tf-create-review-checklist li.is-pending > span {
    background: var(--tf-red);
}

.tf-create-review-checklist li > div {
    display: grid;
    gap: 0.1rem;
}

.tf-create-review-checklist strong {
    font-size: 0.7rem;
}

.tf-create-review-checklist small {
    color: #8b837c;
    font-size: 0.62rem;
}

.tf-create-tournament-page .tf-form-actions.is-review-actions {
    margin-top: -1.1rem;
    justify-content: flex-start;
    padding: 0 1.4rem 1.4rem;
    background: #14110f;
}

.tf-create-tournament-page .tf-form-actions.is-review-actions .tf-form-button:not(.is-primary) {
    border-color: #57514c;
    background: transparent;
    color: #fff;
}

@media (max-width: 64rem) {
    .tf-create-wizard-hero-row {
        align-items: start;
        flex-direction: column;
    }

    .tf-create-wizard-progress {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .tf-create-wizard-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-create-wizard-sidebar {
        position: static;
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 40rem) {
    .tf-create-tournament-page {
        padding-block: 1.3rem 3rem;
    }

    .tf-create-tournament-page .tf-create-wizard-hero h1 {
        font-size: 2.15rem;
    }

    .tf-create-wizard-hero-row.is-review .tf-create-wizard-hero h1 {
        font-size: 2rem;
        white-space: normal;
    }

    .tf-create-wizard-progress li:not(:last-child)::after {
        width: 1rem;
        margin-inline: 0.45rem;
    }

    .tf-create-wizard-progress li strong {
        display: none;
    }

    .tf-create-wizard-progress li > span {
        margin-right: 0;
    }

    .tf-create-tournament-page .tf-form-grid,
    .tf-create-review-data,
    .tf-create-category-filters,
    .tf-create-category-presets {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-create-tournament-page .tf-form-panel-header,
    .tf-create-tournament-page .tf-form-grid,
    .tf-create-category-filters,
    .tf-create-category-presets,
    .tf-create-review-data {
        padding-inline: 1rem;
    }

    .tf-create-wizard-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-create-edital-heading .tf-create-edital-stats {
        order: 4;
        width: 100%;
        margin: 0;
        padding-top: 0.45rem;
    }

    .tf-create-category-select-row,
    .tf-create-category-add-row {
        align-items: stretch;
        flex-direction: column;
    }

    .tf-create-category-add-row .tf-form-button {
        width: 100%;
    }

    .tf-create-tournament-page .tf-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tf-create-tournament-page .tf-form-actions .tf-form-button {
        width: 100%;
    }}

.tf-rich-content p {
    margin-bottom: 0.4rem;
}

.tf-rich-content ul,
.tf-rich-content ol {
    margin: 0.3rem 0 0.3rem 1.25rem;
}

/* Tournaments management: detail */
.tf-tournament-detail-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.25rem;
    margin-inline: auto;
    padding: 1.75rem var(--tf-shell-gutter) 4rem;
}

/* Bracket trees need more horizontal room than the other management pages. */
.tf-tournament-detail-page.tf-brackets-page {
    width: min(100%, 110rem);
}

.tf-tournament-detail-hero {
    display: grid;
    gap: 0.45rem;
}

.tf-tournament-detail-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    color: var(--tf-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.tf-tournament-detail-back:hover {
    color: var(--tf-red);
}

.tf-tournament-detail-back:focus-visible {
    color: var(--tf-red);
    outline: 2px solid var(--tf-red);
    outline-offset: 3px;
}

.tf-tournament-detail-back svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.tf-tournament-detail-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.tf-tournament-detail-hero-heading {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.tf-tournament-detail-hero-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
}

.tf-tournament-detail-hero-title h1 {
    min-width: 0;
    color: var(--tf-ink);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.tf-tournament-detail-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    color: #5f5f5f;
    background: #f2efe7;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tf-tournament-detail-status.is-open {
    color: var(--tf-ok);
    background: var(--tf-ok-soft);
}

.tf-tournament-detail-status.is-danger {
    color: #b91c1c;
    background: #fdeeee;
}

.tf-tournament-detail-slug {
    color: #8a8f98;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.tf-tournament-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tf-tournament-toolbar a {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.45rem;
    border: 1.5px solid var(--tf-line);
    border-radius: 0.4rem;
    padding: 0.45rem 0.8rem;
    color: var(--tf-ink);
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    transition: border-color 150ms ease;
}

.tf-tournament-toolbar a:hover {
    border-color: var(--tf-ink);
}

.tf-tournament-toolbar a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgb(24 24 24 / 18%);
}

.tf-tournament-toolbar a svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    color: var(--tf-red);
}

.tf-tournament-detail-panel {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-top: 3px solid var(--tf-red);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(23 24 26 / 5%);
}

.tf-tournament-review-panel {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-top: 3px solid #ca8a04;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(23 24 26 / 5%);
}

.tf-tournament-detail-panel-header {
    display: grid;
    gap: 0.25rem;
    border-bottom: 1px solid var(--tf-line);
    padding: 0.85rem 1rem;
    background: #ffffff;
}

.tf-tournament-detail-panel-header h2 {
    color: var(--tf-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.tf-tournament-detail-panel-header p {
    color: #737373;
    font-size: 0.8rem;
    line-height: 1.35rem;
}

.tf-tournament-detail-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.tf-tournament-detail-field {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 0.28rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.45rem;
    padding: 0.72rem 0.8rem;
    background: #fbfaf7;
}

.tf-tournament-detail-field span {
    color: #737373;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-tournament-detail-field strong,
.tf-tournament-detail-field a {
    min-width: 0;
    color: var(--tf-ink);
    font-size: 0.85rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tf-tournament-detail-field a {
    color: var(--tf-red);
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.tf-tournament-detail-empty {
    padding: 1.25rem 1rem;
    color: #737373;
    font-size: 0.82rem;
}

.tf-tournament-detail-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.tf-tournament-detail-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.tf-tournament-detail-table thead th {
    padding: 0.7rem 0.85rem;
    color: #737373;
    background: #fbfaf7;
    border-bottom: 1px solid var(--tf-line);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf-tournament-detail-table tbody td {
    padding: 0.8rem 0.85rem;
    color: var(--tf-ink);
    border-bottom: 1px solid #efece4;
    vertical-align: middle;
}

.tf-tournament-detail-table tbody tr:last-child td {
    border-bottom: 0;
}
.tf-tournament-detail-table-actions {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tf-tournament-detail-table-actions {
    min-width: 12rem;
}

.tf-tournament-review-actions {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.tf-tournament-review-approve {
    display: flex;
    align-items: flex-start;
}

.tf-tournament-review-reject {
    display: grid;
    gap: 0.45rem;
}

.tf-tournament-action-button {
    display: inline-flex;
    min-height: 2.25rem;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.4rem;
    padding: 0.52rem 0.8rem;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    transition: filter 150ms ease, box-shadow 150ms ease;
}

.tf-tournament-action-button:hover {
    filter: brightness(0.92);
}

.tf-tournament-action-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgb(24 24 24 / 18%);
}

.tf-tournament-action-button.is-approve {
    background: #15803d;
}

.tf-tournament-action-button.is-primary {
    background: var(--tf-red);
}

.tf-tournament-action-button.is-secondary {
    background: var(--tf-ink);
}

.tf-tournament-action-button.is-reject {
    background: #b91c1c;
}

.tf-tournament-lifecycle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.1rem 1rem;
}

.tf-tournament-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.tf-tournament-step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.tf-tournament-step-dot {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
}

.tf-tournament-step.is-done .tf-tournament-step-dot {
    color: var(--tf-ok);
    background: var(--tf-ok-soft);
}

.tf-tournament-step.is-current .tf-tournament-step-dot {
    color: #ffffff;
    background: var(--tf-red);
}

.tf-tournament-step.is-next .tf-tournament-step-dot {
    color: #8a8f98;
    background: var(--tf-done-soft);
}

.tf-tournament-step-label {
    font-size: 0.76rem;
    font-weight: 700;
}

.tf-tournament-step.is-done .tf-tournament-step-label {
    color: var(--tf-ok);
}

.tf-tournament-step.is-current .tf-tournament-step-label {
    color: var(--tf-ink);
}

.tf-tournament-step.is-next .tf-tournament-step-label {
    color: #8a8f98;
}

.tf-tournament-step-sep {
    width: 2rem;
    height: 2px;
    margin-inline: 0.5rem;
    border-radius: 999px;
    background: var(--tf-line);
}

.tf-tournament-step-sep.is-done {
    background: var(--tf-ok);
}

.tf-tournament-lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tf-tournament-panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.tf-tournament-panel-summary::-webkit-details-marker {
    display: none;
}

.tf-tournament-panel-summary h3 {
    color: var(--tf-ink);
    font-size: 0.9rem;
    font-weight: 800;
}

.tf-tournament-panel-summary:hover h2,
.tf-tournament-panel-summary:hover h3 {
    color: var(--tf-red);
}

.tf-tournament-panel-summary:focus-visible {
    outline: 2px solid var(--tf-red);
    outline-offset: -2px;
}

.tf-tournament-panel-summary-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    color: #737373;
    font-size: 0.76rem;
    font-weight: 600;
}

.tf-tournament-panel-summary-meta svg {
    width: 1rem;
    height: 1rem;
    color: #8a8f98;
    transition: transform 150ms ease;
}

.tf-tournament-panel-collapse[open] > .tf-tournament-panel-summary svg {
    transform: rotate(180deg);
}

.tf-tournament-panel-collapse:not([open]) > .tf-tournament-panel-summary {
    border-bottom: 0;
}

.tf-tournament-action-button.is-ghost {
    border: 1.5px solid var(--tf-line);
    color: var(--tf-ink);
    background: #ffffff;
    transition: border-color 150ms ease;
}

.tf-tournament-action-button.is-ghost:hover {
    border-color: var(--tf-ink);
    filter: none;
}

.tf-toast-region {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: grid;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
}

.tf-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid var(--tf-line);
    border-left-width: 3px;
    border-radius: 0.5rem;
    padding: 0.8rem 0.9rem;
    background: #ffffff;
    box-shadow: 0 8px 24px rgb(23 24 26 / 14%);
    font-size: 0.84rem;
    font-weight: 600;
    animation: tf-toast-in 220ms ease-out;
}

@keyframes tf-toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tf-toast svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin-top: 0.05rem;
}

.tf-toast span {
    flex: 1 1 auto;
    color: var(--tf-ink);
}

.tf-toast button {
    flex: 0 0 auto;
    border: 0;
    margin: -0.15rem -0.25rem 0 0;
    padding: 0.1rem 0.35rem;
    color: #8a8f98;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    border-radius: 0.3rem;
}

.tf-toast button:hover {
    color: var(--tf-ink);
    background: #f0f0ee;
}

.tf-toast.is-ok {
    border-left-color: var(--tf-ok);
}

.tf-toast.is-ok svg {
    color: var(--tf-ok);
}

.tf-toast.is-error {
    border-left-color: #b91c1c;
}

.tf-toast.is-error svg {
    color: #b91c1c;
}

.tf-bracket-note {
    padding: 1rem;
    color: #737373;
    font-size: 0.82rem;
}

.tf-bracket-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem 0.5rem;
}

.tf-bracket-actions:last-child {
    padding-bottom: 1rem;
}

.tf-bracket-swap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 1rem 1rem;
}

.tf-bracket-swap .tf-form-field {
    min-width: 12rem;
    max-width: 20rem;
    flex: 1 1 12rem;
}

.tf-bracket-swap .tf-tournament-action-button {
    flex: 0 0 auto;
}

.tf-bracket-relocate {
    display: grid;
    gap: 1.25rem;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px dashed var(--tf-line);
}

.tf-bracket-relocate > .tf-bracket-note {
    margin: 0;
    padding: 0;
}

.tf-bracket-relocate-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.tf-bracket-relocate-form + .tf-bracket-relocate-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tf-line);
}

.tf-bracket-relocate-form .tf-form-field {
    min-width: 12rem;
    max-width: 28rem;
    flex: 1 1 16rem;
}

.tf-bracket-relocate-form .tf-tournament-action-button {
    flex: 0 0 auto;
}

.tf-bracket-entrant.is-actionable {
    cursor: pointer;
    transition: background-color 150ms ease;
}

.tf-bracket-entrant.is-actionable:hover {
    background: #fbfaf7;
}

/* Draft click-to-swap: select one athlete, then a second, to swap positions. */
.tf-bracket-entrant.is-swappable {
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.tf-bracket-entrant.is-swappable:hover {
    background: #fbfaf7;
}

.tf-bracket-entrant.is-selected {
    background: #fdecec;
    box-shadow: inset 3px 0 0 var(--tf-red);
}

.tf-bracket-swap-hint {
    margin-bottom: 0.6rem;
    color: var(--tf-muted);
    font-size: 0.75rem;
}

/* Small lock glyph on a result that can no longer change. */
.tf-bracket-lock {
    width: 0.85rem;
    height: 0.85rem;
    margin-left: auto;
    color: #a7abb2;
}

.tf-bracket-record-hint.is-locked {
    color: #a7752a;
}

.tf-bracket-entrant-menu button.is-muted {
    color: var(--tf-muted);
    font-weight: 700;
}

.tf-bracket-entrant-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    color: var(--tf-warn);
    background: var(--tf-warn-soft);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.tf-bracket-entrant-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 20;
    min-width: 14rem;
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.45rem;
    background: #ffffff;
    box-shadow: 0 10px 28px rgb(23 24 26 / 18%);
}

.tf-bracket-entrant-menu.opens-upward {
    top: auto;
    bottom: calc(100% + 0.25rem);
}

.tf-bracket-entrant-menu form {
    display: contents;
}

.tf-bracket-entrant-menu button {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #efece4;
    padding: 0.6rem 0.8rem;
    color: var(--tf-ink);
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
}

.tf-bracket-entrant-menu form:last-child button {
    border-bottom: 0;
}

.tf-bracket-entrant-menu button:hover {
    background: #fbfaf7;
}

.tf-bracket-entrant-menu button.is-danger {
    color: #b91c1c;
}

.tf-bracket-record-hint {
    border-top: 1px solid var(--tf-line);
    padding: 0.45rem 0.9rem 0.55rem;
    color: #8a8f98;
    font-size: 0.7rem;
}

/* "Imprimir" trigger shown on screen; hidden in the print stylesheet itself. */
.tf-print-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.5rem;
    padding: 0.35rem 0.75rem;
    color: var(--tf-ink);
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.tf-print-action:hover {
    border-color: var(--tf-muted);
    background: #fbfaf7;
}

.tf-print-action svg {
    width: 1rem;
    height: 1rem;
}

.tf-checkin-heading-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Per-category "5/7 luchas" progress next to the status pill. */
.tf-bracket-progress {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--tf-muted);
}

.tf-bracket-progress.is-complete {
    color: #3f6b4c;
}

.tf-registration-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

/* Card de número: nasceu no painel de gestão, hoje também serve o chequeo público
   pelo alias `.tf-stat-card`. */
.tf-stat-card,
.tf-registration-stat {
    display: grid;
    gap: 0.15rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(23 24 26 / 5%);
}

.tf-stat-card strong,
.tf-registration-stat strong {
    color: var(--tf-ink);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tf-stat-card span,
.tf-registration-stat span {
    color: #737373;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-registration-stat.is-ok strong {
    color: var(--tf-ok);
}

.tf-registration-stat.is-warn strong {
    color: var(--tf-warn);
}

.tf-registration-stat.is-danger strong {
    color: #b91c1c;
}

.tf-registration-checkin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.tf-registration-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    border-bottom: 1px solid var(--tf-line);
    padding: 1rem;
}

/* Os filtros usam o primitivo compacto (.tf-form-field-sm); aqui fica só como
   cada campo divide a linha. O primeiro é a busca, que recebe o dobro de espaço. */
.tf-registration-filters .tf-form-field {
    min-width: 10rem;
    flex: 1 1 10rem;
}

.tf-registration-filters .tf-form-field:first-of-type {
    flex: 2 1 16rem;
}

.tf-registration-academy-note {
    color: #737373;
    font-size: 0.72rem;
}

.tf-registration-numeric {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tf-status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    color: #5f5f5f;
    background: #f2efe7;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tf-status-pill.is-ok {
    color: var(--tf-ok);
    background: var(--tf-ok-soft);
}

.tf-status-pill.is-warn {
    color: var(--tf-warn);
    background: var(--tf-warn-soft);
}

.tf-status-pill.is-danger {
    color: #b91c1c;
    background: #fdeeee;
}

.tf-tournament-danger {
    border: 1px solid #f3d4d5;
    border-radius: 0.5rem;
    background: #ffffff;
}

.tf-tournament-danger summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    color: #b91c1c;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.tf-tournament-danger summary::-webkit-details-marker {
    display: none;
}

.tf-tournament-danger summary:focus-visible {
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.tf-tournament-danger summary svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.tf-tournament-danger-form {
    display: grid;
    gap: 0.45rem;
    border-top: 1px solid #f3d4d5;
    padding: 1rem;
}

.tf-tournament-danger-form .tf-tournament-action-button {
    justify-self: start;
}

.tf-tournament-category-form {
    border-top: 1px solid var(--tf-line);
    padding: 1rem;
    background: #fbfaf7;
}

.tf-tournament-category-form > h3 {
    color: var(--tf-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.tf-tournament-category-form > p {
    margin-top: 0.3rem;
    color: #737373;
    font-size: 0.8rem;
}

.tf-tournament-category-form > form {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.tf-tournament-category-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tf-tournament-category-presets {
    display: grid;
    max-height: 24rem;
    overflow-y: auto;
    border: 1px solid #ddd8cd;
    border-radius: 0.45rem;
    background: #ffffff;
}

.tf-tournament-category-presets label {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #efece4;
    cursor: pointer;
}

.tf-tournament-category-presets label:last-child {
    border-bottom: 0;
}

.tf-tournament-category-presets label:hover {
    background: #fbfaf7;
}

.tf-tournament-category-presets .tf-form-check input {
    margin-top: 0.15rem;
}

.tf-tournament-category-presets span {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.tf-tournament-category-presets strong {
    color: var(--tf-ink);
    font-size: 0.8rem;
    line-height: 1.25rem;
}

.tf-tournament-category-presets small {
    color: #737373;
    font-size: 0.7rem;
}

.tf-tournament-category-form .tf-tournament-detail-empty {
    padding: 0.75rem 0;
}

.tf-category-management-page {
    display: grid;
    gap: 1.25rem;
}

.tf-category-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--tf-line);
    background: #fff;
}

.tf-category-summary > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-right: 1px solid var(--tf-line);
}

.tf-category-summary > div:last-child {
    border-right: 0;
}

.tf-category-summary span,
.tf-category-management-table small {
    color: #7d7870;
    font-size: 0.67rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-category-summary strong {
    color: var(--tf-ink);
    font-family: var(--tf-font-display);
    font-size: 1.45rem;
}

.tf-category-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tf-category-list-filters {
    display: grid;
    grid-template-columns: minmax(16rem, 2fr) repeat(2, minmax(10rem, 1fr)) auto;
    align-items: end;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--tf-line);
    background: #fbfaf7;
}

.tf-category-management-table {
    min-width: 58rem;
}

.tf-category-management-table td:first-child,
.tf-category-management-table td:nth-child(2),
.tf-category-management-table td:nth-child(3) {
    display: table-cell;
}

.tf-category-management-table td strong,
.tf-category-management-table td small {
    display: block;
}

.tf-category-management-table td small {
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.tf-category-management-table tr.is-inactive {
    opacity: 0.62;
    background: #f7f5f1;
}

.tf-category-capacity-form {
    display: flex;
    align-items: end;
    gap: 0.35rem;
}

.tf-category-capacity-form .tf-form-field {
    width: 7rem;
}

.tf-category-capacity-form button,
.tf-category-row-action {
    min-height: 2rem;
    border: 1px solid var(--tf-line);
    padding: 0.35rem 0.55rem;
    color: var(--tf-ink);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.tf-category-row-action.is-danger {
    color: var(--tf-red);
    border-color: #efb6b9;
}

.tf-category-status {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-category-status.is-active {
    color: #fff;
    background: var(--tf-ink);
}

.tf-category-status.is-inactive {
    color: #68635d;
    background: #e9e6df;
}

.tf-category-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-top: 1px solid var(--tf-line);
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
}

.tf-category-pagination a {
    color: var(--tf-red);
    font-weight: 800;
}

.tf-category-add-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.tf-tournament-toolbar a.is-current {
    border-color: var(--tf-red);
    box-shadow: inset 0 -2px 0 var(--tf-red);
}

@media (max-width: 800px) {
    .tf-category-list-filters {
        grid-template-columns: 1fr;
    }

    .tf-category-summary {
        grid-template-columns: 1fr;
    }

    .tf-category-summary > div {
        border-right: 0;
        border-bottom: 1px solid var(--tf-line);
    }

    .tf-category-summary > div:last-child {
        border-bottom: 0;
    }}

@media (min-width: 64rem) {
    .tf-tournament-category-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tf-tournament-category-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-tournament-category-presets label:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }}

@media (min-width: 40.01rem) {
    .tf-tournament-review-actions {
        grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
        align-items: start;
    }}

@media (max-width: 40rem) {
    .tf-tournament-detail-page {
        gap: 1rem;
        padding-block: 1.25rem 3rem;
    }

    .tf-tournament-detail-hero-title {
        align-items: flex-start;
    }

    .tf-tournament-detail-hero-title h1 {
        width: 100%;
        font-size: 1.35rem;
    }

    .tf-tournament-detail-fields,
    .tf-tournament-category-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-tournament-action-button,
    .tf-tournament-review-approve,
    .tf-tournament-review-approve .tf-tournament-action-button {
        width: 100%;
    }}

/* Tournament management overview — Tatame redesign. Scoped so the bracket,
   registration and ranking screens can keep their denser operational layouts. */
.tf-tournament-management-page {
    width: min(100%, var(--tf-shell-max));
    gap: 1.4rem;
    padding: 2rem var(--tf-shell-gutter) 5.5rem;
}

.tf-tournament-management-page .tf-tournament-detail-hero {
    gap: 1rem;
}

.tf-tournament-management-page .tf-tournament-detail-back {
    gap: 0.45rem;
    margin: 0;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-tournament-management-page .tf-tournament-detail-back svg {
    display: none;
}

.tf-tournament-management-page .tf-tournament-detail-back::before {
    content: "‹";
    color: #57514c;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.tf-tournament-management-page .tf-tournament-detail-hero-row {
    align-items: flex-end;
    gap: 1.5rem 2rem;
}

.tf-tournament-management-page .tf-tournament-detail-hero-heading {
    gap: 0.65rem;
}

.tf-tournament-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tf-tournament-approval-badge,
.tf-tournament-management-page .tf-tournament-detail-status {
    width: fit-content;
    border-radius: 0;
    padding: 0.31rem 0.56rem;
    color: #fff;
    background: #14110f;
    font-family: var(--font-num);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-tournament-approval-badge {
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: #14110f;
    font-family: var(--font-num);
    font-size: 0.62rem;
    font-weight: 700;
}

.tf-tournament-management-page .tf-tournament-detail-status.is-open,
.tf-tournament-management-page .tf-tournament-detail-status.is-danger {
    color: #fff;
    background: var(--tf-red);
}

.tf-tournament-management-page .tf-tournament-detail-hero-title h1 {
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.tf-tournament-management-page .tf-tournament-detail-slug {
    display: flex;
    flex-wrap: wrap;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-tournament-public-link {
    display: inline-flex;
    min-height: 2.55rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #14110f;
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    color: #14110f;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 800;
}

.tf-tournament-public-link:hover {
    color: #fff;
    background: #14110f;
}

.tf-tournament-toolbar {
    gap: 0.62rem;
}

.tf-tournament-toolbar a {
    min-height: 2.45rem;
    gap: 0.6rem;
    border-width: 1px;
    border-radius: 0;
    padding: 0.55rem 1rem;
    background: transparent;
    font-size: 0.82rem;
}

.tf-tournament-toolbar a span {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.64rem;
    font-weight: 700;
}

.tf-tournament-management-page .tf-tournament-lifecycle-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 0;
    border-radius: 0;
    padding: 1.5rem 1.65rem;
    color: #fff;
    background: #14110f;
    box-shadow: none;
}

.tf-tournament-management-page .tf-tournament-lifecycle-panel > .tf-tournament-detail-panel-header {
    display: grid;
    grid-column: 1;
    gap: 0.25rem;
    border: 0;
    padding: 0;
    background: transparent;
}

.tf-tournament-management-page .tf-tournament-lifecycle-panel > .tf-tournament-detail-panel-header h2 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-family: var(--font-body);
    text-transform: none;
}

.tf-tournament-management-page .tf-tournament-lifecycle-panel > .tf-tournament-detail-panel-header p {
    color: #9c948c;
}

.tf-tournament-management-page .tf-tournament-lifecycle {
    display: contents;
}

.tf-tournament-management-page .tf-tournament-steps {
    grid-column: 1 / -1;
    margin-top: 0.7rem;
}

.tf-tournament-management-page .tf-tournament-step-label {
    font-size: 0.8rem;
}

.tf-tournament-management-page .tf-tournament-step.is-done .tf-tournament-step-dot {
    color: #14110f;
    background: #fff;
}

.tf-tournament-management-page .tf-tournament-step.is-done .tf-tournament-step-label,
.tf-tournament-management-page .tf-tournament-step.is-current .tf-tournament-step-label {
    color: #fff;
}

.tf-tournament-management-page .tf-tournament-step.is-next .tf-tournament-step-dot {
    border: 1px solid #4d4741;
    color: #7c746d;
    background: transparent;
}

.tf-tournament-management-page .tf-tournament-step.is-next .tf-tournament-step-label {
    color: #625b55;
}

.tf-tournament-management-page .tf-tournament-step-sep {
    background: #4d4741;
}

.tf-tournament-management-page .tf-tournament-step-sep.is-done {
    background: #fff;
}

.tf-tournament-management-page .tf-tournament-lifecycle-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.tf-tournament-management-page .tf-tournament-lifecycle-hint {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    color: #9c948c;
    font-size: 0.78rem;
}

.tf-tournament-management-page .tf-tournament-lifecycle-actions .tf-tournament-action-button {
    min-height: 2.55rem;
    border-radius: 999px;
    padding-inline: 1.4rem;
    background: var(--tf-red);
}

.tf-tournament-operation-metrics {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
    border-top: 1px solid #2e2a26;
    padding-top: 1rem;
}

.tf-tournament-operation-metrics > div {
    display: grid;
    gap: 0.2rem;
}

.tf-tournament-operation-metrics span {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-tournament-operation-metrics strong {
    color: #fff;
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-tournament-operation-metrics small {
    color: #7c746d;
    font-size: 0.7rem;
}

.tf-tournament-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.35rem;
    align-items: start;
}

.tf-tournament-management-main,
.tf-tournament-management-sidebar {
    display: grid;
    gap: 1rem;
}

.tf-tournament-management-page .tf-tournament-detail-panel:not(.tf-tournament-lifecycle-panel),
.tf-tournament-management-page .tf-tournament-danger,
.tf-tournament-side-panel {
    border: 1px solid #e7e2dc;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.tf-tournament-management-page .tf-tournament-detail-panel:not(.tf-tournament-lifecycle-panel) {
    border-top-width: 1px;
}

.tf-tournament-management-page section.tf-tournament-detail-panel.tf-tournament-lifecycle-panel {
    border: 0;
    background: #14110f;
}

.tf-tournament-management-page .tf-tournament-detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.35rem;
    background: #fcfbfa;
}

.tf-tournament-management-page .tf-tournament-detail-panel-header h2,
.tf-tournament-side-panel h2 {
    color: #14110f;
    font-family: var(--font-num);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-tournament-management-page .tf-tournament-detail-panel-header > a:not(.tf-tournament-action-button) {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tf-tournament-management-page .tf-tournament-detail-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
    padding: 1rem 1.35rem;
}

.tf-tournament-management-page .tf-tournament-detail-field {
    gap: 0.3rem;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.tf-tournament-management-page .tf-tournament-detail-field span {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
}

.tf-tournament-management-page .tf-tournament-detail-field strong,
.tf-tournament-management-page .tf-tournament-detail-field a {
    font-size: 0.84rem;
}

.tf-tournament-management-page .tf-tournament-detail-table {
    min-width: 40rem;
}

.tf-tournament-management-page .tf-tournament-detail-table thead {
    display: none;
}

.tf-tournament-management-page .tf-tournament-detail-table tbody tr {
    display: grid;
    grid-template-columns: minmax(15rem, 2fr) repeat(6, minmax(5rem, 1fr));
    align-items: center;
    border-bottom: 1px solid #f0ece7;
}

.tf-tournament-management-page .tf-tournament-detail-table tbody td {
    border: 0;
    padding: 0.78rem 0.25rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.61rem;
}

.tf-tournament-management-page .tf-tournament-detail-table tbody td:first-child {
    padding-left: 1.35rem;
    color: #14110f;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
}

.tf-tournament-management-page .tf-tournament-detail-table tbody td:last-child {
    padding-right: 1.35rem;
}

.tf-tournament-management-page .tf-category-management-table thead {
    display: table-header-group;
}

.tf-tournament-management-page .tf-category-management-table tbody tr {
    display: table-row;
}

.tf-tournament-management-page .tf-category-management-table tbody td {
    display: table-cell;
    padding-inline: 0.85rem;
}

.tf-tournament-side-panel {
    padding: 1.2rem 1.1rem;
}

.tf-tournament-side-panel h2 {
    margin-bottom: 1rem;
    color: #8b837c;
}

.tf-tournament-milestones {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-tournament-milestones li {
    position: relative;
    display: grid;
    gap: 0.18rem;
    padding-left: 1.25rem;
}

.tf-tournament-milestones li::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #cdc7c1;
}

.tf-tournament-milestones li:first-child::before {
    background: var(--tf-red);
}

.tf-tournament-milestones time {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-tournament-milestones li:first-child time {
    color: var(--tf-red);
}

.tf-tournament-milestones strong {
    color: #14110f;
    font-size: 0.76rem;
}

.tf-tournament-milestones span {
    color: #8b837c;
    font-size: 0.7rem;
    line-height: 1.25;
}

.tf-tournament-management-page .tf-tournament-danger {
    border-left: 3px solid var(--tf-red);
}

.tf-tournament-management-page .tf-tournament-danger summary {
    border-radius: 0;
    color: var(--tf-red);
}

@media (max-width: 62rem) {
    .tf-tournament-management-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-tournament-management-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 40rem) {
    .tf-tournament-management-page {
        padding-block: 1.25rem 3.5rem;
    }

    .tf-tournament-public-link {
        width: 100%;
    }

    .tf-tournament-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-tournament-toolbar a {
        justify-content: flex-start;
    }

    .tf-tournament-management-page .tf-tournament-lifecycle-panel {
        display: block;
        padding: 1.25rem;
    }

    .tf-tournament-management-page .tf-tournament-steps {
        display: grid;
        gap: 0.65rem;
    }

    .tf-tournament-management-page .tf-tournament-step-sep {
        display: none;
    }

    .tf-tournament-management-page .tf-tournament-lifecycle-actions {
        margin-top: 1rem;
    }

    .tf-tournament-management-page .tf-tournament-lifecycle-actions form,
    .tf-tournament-management-page .tf-tournament-lifecycle-actions .tf-tournament-action-button {
        width: 100%;
    }

    .tf-tournament-operation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-tournament-management-page .tf-tournament-detail-fields,
    .tf-tournament-management-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }}

/* Tournament operational data — faithful to the Tatame management mockup. */
.tf-tournament-operational-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.35rem;
    margin-inline: auto;
    padding: 1.85rem var(--tf-shell-gutter) 5.5rem;
}

.tf-operational-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-operational-back span {
    color: #57514c;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.tf-operational-back:hover,
.tf-operational-back:focus-visible {
    color: var(--tf-red);
}

.tf-operational-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
}

.tf-operational-heading {
    display: grid;
    gap: 0.6rem;
}

.tf-operational-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-operational-kicker span {
    width: 1.5rem;
    height: 0.18rem;
    background: var(--tf-red);
}

.tf-operational-heading h1 {
    color: #14110f;
    font-size: clamp(2.25rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.tf-operational-tournament-name {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-operational-approval-note {
    display: grid;
    width: min(100%, 23.5rem);
    gap: 0.3rem;
    border: 1px solid #e7e2dc;
    border-left: 3px solid var(--tf-red);
    padding: 0.85rem 1rem;
    background: #fff;
}

.tf-operational-approval-note strong {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-operational-approval-note p {
    color: #57514c;
    font-size: 0.78rem;
    line-height: 1.5;
}

.tf-tournament-operational-form {
    display: grid;
}

.tf-operational-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1.5rem;
    align-items: start;
}

.tf-operational-main {
    display: grid;
    min-width: 0;
    gap: 1.1rem;
}

.tf-operational-panel {
    scroll-margin-top: 5.75rem;
    border: 1px solid #e7e2dc;
    background: #fff;
}

.tf-operational-panel-header {
    display: flex;
    min-height: 3.3rem;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.9rem 1.35rem;
    background: #fcfbfa;
}

.tf-operational-panel-header > span,
.tf-operational-index a span {
    display: inline-flex;
    width: 1.38rem;
    height: 1.38rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.65rem;
    font-weight: 700;
}

.tf-operational-panel-header h2 {
    color: #14110f;
    font-family: var(--font-num);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-operational-panel.is-locked .tf-operational-panel-header > span {
    background: #a8a098;
}

.tf-operational-panel.is-locked .tf-operational-panel-header h2 {
    color: #8b837c;
}

.tf-operational-panel-body {
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
}

.tf-operational-grid,
.tf-operational-address,
.tf-operational-address .tf-form-field-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tf-operational-address {
    grid-template-columns: minmax(0, 1fr);
}

.tf-operational-address .tf-form-field-pair:first-child {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.tf-operational-end-date {
    width: min(100%, 20rem);
}

.tf-operational-separator {
    height: 1px;
    background: #f0ece7;
}

.tf-tournament-operational-page .tf-form-field,
.tf-tournament-operational-page .tf-form-check {
    min-width: 0;
}

.tf-tournament-operational-page .tf-form-field > span,
.tf-tournament-operational-page .tf-form-check > span {
    color: #14110f;
    font-size: 0.75rem;
    font-weight: 700;
}

.tf-tournament-operational-page .tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-tournament-operational-page .tf-form-field select,
.tf-tournament-operational-page .tf-phone-grid input,
.tf-tournament-operational-page .tf-phone-grid select {
    min-height: 2.65rem;
    border-color: #e7e2dc;
    border-radius: 0;
    padding: 0.68rem 0.8rem;
    color: #14110f;
    background-color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
}

.tf-tournament-operational-page .tf-form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.tf-tournament-operational-page .tf-form-field select:focus,
.tf-tournament-operational-page .tf-phone-grid input:focus,
.tf-tournament-operational-page .tf-phone-grid select:focus {
    border-color: #14110f;
    box-shadow: none;
}

.tf-tournament-operational-page .tf-form-check {
    width: fit-content;
    color: #14110f;
    font-size: 0.8rem;
}

.tf-tournament-operational-page .tf-form-check input {
    width: 1rem;
    height: 1rem;
}

.tf-tournament-operational-page .tf-phone-grid {
    grid-template-columns: 11.9rem minmax(0, 1fr);
    gap: 0.75rem;
}

.tf-operational-locked-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    padding: 1.2rem 1.35rem;
}

.tf-operational-locked-grid > div {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
}

.tf-operational-locked-grid span {
    color: #a8a098;
    font-family: var(--font-num);
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-operational-locked-grid strong {
    overflow-wrap: anywhere;
    color: #8b837c;
    font-size: 0.86rem;
    font-weight: 700;
}

.tf-operational-locked-grid > p {
    grid-column: 1 / -1;
    color: #8b837c;
    font-size: 0.76rem;
    line-height: 1.45;
}

.tf-operational-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.tf-operational-actions a,
.tf-operational-actions button {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #14110f;
    border-radius: 999px;
    padding: 0.7rem 1.5rem;
    color: #14110f;
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.tf-operational-actions button {
    border-color: var(--tf-red);
    color: #fff;
    background: var(--tf-red);
}

.tf-operational-actions a:hover,
.tf-operational-actions a:focus-visible {
    color: #fff;
    background: #14110f;
}

.tf-operational-actions button:hover,
.tf-operational-actions button:focus-visible {
    border-color: var(--tf-red-strong);
    background: var(--tf-red-strong);
}

.tf-operational-sidebar {
    position: sticky;
    top: 5.75rem;
    display: grid;
    gap: 1rem;
}

.tf-operational-index {
    display: grid;
    gap: 0.65rem;
    padding: 1.25rem 1.1rem;
    background: #14110f;
}

.tf-operational-index h2,
.tf-operational-impact h2 {
    color: #9c948c;
    font-family: var(--font-num);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-operational-index a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.2rem 0;
    color: #e7e2dc;
    font-size: 0.77rem;
    font-weight: 600;
}

.tf-operational-index a:hover,
.tf-operational-index a:focus-visible {
    color: #fff;
}

.tf-operational-index a span {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.57rem;
}

.tf-operational-index a.is-locked span {
    background: #4a443f;
}

.tf-operational-impact {
    display: grid;
    gap: 0.7rem;
    border: 1px solid #e7e2dc;
    padding: 1.1rem;
    background: #fff;
}

.tf-operational-impact h2 {
    color: #8b837c;
}

.tf-operational-impact ul {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-operational-impact li {
    position: relative;
    padding-left: 1rem;
    color: #57514c;
    font-size: 0.76rem;
    line-height: 1.45;
}

.tf-operational-impact li::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--tf-red);
}

@media (max-width: 62rem) {
    .tf-operational-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-operational-sidebar {
        position: static;
        grid-row: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 40rem) {
    .tf-tournament-operational-page {
        gap: 1.15rem;
        padding-block: 1.25rem 3.5rem;
    }

    .tf-operational-hero {
        display: grid;
        align-items: stretch;
        gap: 1.2rem;
    }

    .tf-operational-heading h1 {
        font-size: 2.25rem;
    }

    .tf-operational-approval-note {
        width: 100%;
    }

    .tf-operational-sidebar,
    .tf-operational-grid,
    .tf-operational-address .tf-form-field-pair,
    .tf-operational-address .tf-form-field-pair:first-child,
    .tf-operational-locked-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-operational-panel-header,
    .tf-operational-panel-body,
    .tf-operational-locked-grid {
        padding-inline: 1rem;
    }

    .tf-tournament-operational-page .tf-phone-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-operational-locked-grid > p {
        grid-column: 1;
    }

    .tf-operational-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-operational-actions a,
    .tf-operational-actions button {
        width: 100%;
        padding-inline: 1rem;
    }}

/* Tournament public edital editor — Tatame management layout. */
.tf-tournament-edital-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.45rem;
    margin-inline: auto;
    padding: 1.85rem var(--tf-shell-gutter) 5rem;
}

.tf-edital-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-edital-back span {
    color: #57514c;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.tf-edital-back:hover,
.tf-edital-back:focus-visible {
    color: var(--tf-red);
}

.tf-edital-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2.25rem;
}

.tf-edital-heading {
    display: grid;
    max-width: 38.75rem;
    gap: 0.65rem;
}

.tf-edital-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-edital-kicker span {
    width: 1.5rem;
    height: 0.18rem;
    background: var(--tf-red);
}

.tf-edital-heading h1 {
    color: #14110f;
    font-size: clamp(2.25rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.tf-edital-tournament-name {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-edital-publication-note {
    display: grid;
    width: min(100%, 21.25rem);
    gap: 0.3rem;
    border: 1px solid #e7e2dc;
    border-left: 3px solid var(--tf-red);
    padding: 0.85rem 1rem;
    background: #fff;
}

.tf-edital-publication-note strong {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-edital-publication-note p {
    color: #57514c;
    font-size: 0.78rem;
    line-height: 1.5;
}

.tf-tournament-edital-form {
    display: grid;
}

.tf-edital-management-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    gap: 1.625rem;
    align-items: start;
}

.tf-edital-main {
    display: grid;
    min-width: 0;
    gap: 1.1rem;
}

.tf-edital-manager {
    min-width: 0;
    border: 1px solid #e7e2dc;
    background: #fff;
}

.tf-edital-manager-header {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.9rem 1.35rem;
    background: #fcfbfa;
}

.tf-edital-manager-header > span {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    background: var(--tf-red);
}

.tf-edital-manager-header h2,
.tf-edital-index h2,
.tf-edital-visibility h2 {
    color: #14110f;
    font-family: var(--font-num);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-edital-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.4rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 1.1rem 1.35rem;
}

.tf-edital-stats {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.tf-edital-stats > div {
    display: grid;
    gap: 0.2rem;
}

.tf-edital-stats span {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-edital-stats strong {
    color: #14110f;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.tf-edital-stats > div:last-child strong {
    color: var(--tf-red);
}

.tf-edital-stats i {
    width: 1px;
    height: 2rem;
    background: #e7e2dc;
}

.tf-edital-summary > button {
    min-height: 2.4rem;
    border: 1.5px solid #14110f;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    color: #14110f;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.tf-edital-summary > button:hover,
.tf-edital-summary > button:focus-visible {
    color: #fff;
    background: #14110f;
}

.tf-edital-sections {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
}

.tf-edital-section-card {
    display: grid;
    min-width: 0;
    scroll-margin-top: 5.75rem;
    gap: 0.8rem;
    border: 1px solid #e7e2dc;
    padding: 1rem 1.1rem;
    background: #fcfbfa;
}

.tf-edital-section-card.is-unpublished {
    border-color: #efebe6;
    background: #f7f5f2;
}

.tf-edital-section-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
}

.tf-tournament-edital-page .tf-form-check {
    width: fit-content;
    color: #14110f;
    font-size: 0.8rem;
}

.tf-tournament-edital-page .tf-form-check > span {
    color: #14110f;
    font-size: 0.8rem;
}

.tf-tournament-edital-page .tf-form-check input {
    width: 1rem;
    height: 1rem;
}

.tf-edital-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.tf-edital-section-actions button {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6d0c9;
    border-radius: 0;
    padding: 0;
    color: #14110f;
    background: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.tf-edital-section-actions button:hover:not(:disabled),
.tf-edital-section-actions button:focus-visible:not(:disabled) {
    border-color: #14110f;
}

.tf-edital-section-actions button:disabled {
    color: #c9c2ba;
    cursor: not-allowed;
}

.tf-edital-section-actions button.is-danger {
    color: #8b837c;
}

.tf-edital-section-actions button.is-danger:hover,
.tf-edital-section-actions button.is-danger:focus-visible {
    border-color: var(--tf-red);
    color: var(--tf-red);
}

.tf-edital-auto-badge {
    border: 1px solid #d6d0c9;
    padding: 0.35rem 0.65rem;
    color: #8b837c;
    background: #fff;
    font-family: var(--font-num);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-edital-editable-section,
.tf-edital-locked-section {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
}

.tf-tournament-edital-page .tf-form-field > span,
.tf-edital-locked-section > div > span,
.tf-tournament-edital-page .tf-form-field-label {
    color: #14110f;
    font-size: 0.75rem;
    font-weight: 700;
}

.tf-tournament-edital-page .tf-form-field input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 2.65rem;
    border-color: #e7e2dc;
    border-radius: 0;
    padding: 0.68rem 0.8rem;
    color: #14110f;
    background: #fff;
    font-size: 0.86rem;
    font-weight: 600;
}

.tf-tournament-edital-page .tf-form-field input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: #14110f;
    box-shadow: none;
}

.tf-tournament-edital-page .tf-rich-text-field {
    min-width: 0;
}

.tf-tournament-edital-page .tf-rich-text-shell {
    border-color: #e7e2dc;
    border-radius: 0;
}

.tf-tournament-edital-page .tf-rich-text-toolbar {
    gap: 0.12rem;
    padding: 0.35rem 0.45rem;
    background: #fcfbfa;
}

.tf-tournament-edital-page .tf-rich-text-toolbar button {
    min-width: 1.65rem;
    height: 1.5rem;
    border-radius: 0;
    font-size: 0.74rem;
}

.tf-tournament-edital-page .tf-rich-text-editor {
    min-height: 7.5rem;
    padding: 0.8rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.55;
}

.tf-tournament-edital-page .tf-rich-text-editor:focus {
    box-shadow: inset 0 0 0 1px #14110f;
}

.tf-edital-locked-section > div {
    display: grid;
    gap: 0.4rem;
}

.tf-edital-locked-section > div > strong {
    min-height: 2.65rem;
    border: 1px solid #e7e2dc;
    padding: 0.68rem 0.8rem;
    color: #8b837c;
    background: #f7f5f2;
    font-size: 0.86rem;
}

.tf-edital-locked-section > div > p {
    color: #8b837c;
    font-size: 0.74rem;
    font-style: italic;
}

.tf-edital-locked-content {
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid #e7e2dc;
    padding: 0.8rem 0.9rem;
    color: #57514c;
    background: #fff;
    font-size: 0.82rem;
}

.tf-edital-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.tf-edital-actions a,
.tf-edital-actions button {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #14110f;
    border-radius: 999px;
    padding: 0.7rem 1.5rem;
    color: #14110f;
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.tf-edital-actions button {
    border-color: var(--tf-red);
    color: #fff;
    background: var(--tf-red);
}

.tf-edital-actions a:hover,
.tf-edital-actions a:focus-visible {
    color: #fff;
    background: #14110f;
}

.tf-edital-actions button:hover,
.tf-edital-actions button:focus-visible {
    border-color: var(--tf-red-strong);
    background: var(--tf-red-strong);
}

.tf-edital-sidebar {
    position: sticky;
    top: 5.75rem;
    display: grid;
    gap: 1rem;
}

.tf-edital-index {
    display: grid;
    gap: 0.1rem;
    padding: 1.25rem 1.1rem;
    background: #14110f;
}

.tf-edital-index h2 {
    margin-bottom: 0.55rem;
    color: #9c948c;
}

.tf-edital-index a {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0;
    color: #e7e2dc;
    font-size: 0.71rem;
    font-weight: 600;
}

.tf-edital-index a > span:first-child {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: var(--tf-red);
}

.tf-edital-index a > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-edital-index a.is-unpublished {
    color: #7c746d;
}

.tf-edital-index a.is-unpublished > span:first-child {
    background: #4a443f;
}

.tf-edital-index a:hover,
.tf-edital-index a:focus-visible {
    color: #fff;
}

.tf-edital-visibility {
    display: grid;
    gap: 0.45rem;
    border: 1px solid #e7e2dc;
    border-left: 3px solid var(--tf-red);
    padding: 1.1rem;
    background: #fff;
}

.tf-edital-visibility h2 {
    color: var(--tf-red);
}

.tf-edital-visibility strong {
    color: #14110f;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tf-edital-visibility p {
    color: #57514c;
    font-size: 0.76rem;
    line-height: 1.45;
}

@media (max-width: 62rem) {
    .tf-edital-management-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-edital-sidebar {
        position: static;
        grid-row: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 40rem) {
    .tf-tournament-edital-page {
        gap: 1.15rem;
        padding-block: 1.25rem 3.5rem;
    }

    .tf-edital-hero {
        display: grid;
        align-items: stretch;
        gap: 1.2rem;
    }

    .tf-edital-heading h1 {
        font-size: 2.25rem;
    }

    .tf-edital-publication-note {
        width: 100%;
    }

    .tf-edital-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-edital-summary,
    .tf-edital-manager-header,
    .tf-edital-sections {
        padding-inline: 1rem;
    }

    .tf-edital-section-card {
        padding: 0.9rem;
    }

    .tf-edital-section-card-header {
        align-items: flex-start;
    }

    .tf-edital-section-actions {
        width: 100%;
    }

    .tf-edital-auto-badge {
        margin-right: auto;
    }

    .tf-edital-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-edital-actions a,
    .tf-edital-actions button {
        width: 100%;
        padding-inline: 1rem;
    }}

/* Printable brackets: one category per landscape page, without app chrome or controls.
   Scoped to the bracket pages via a named page and their wrappers so other pages print
   unchanged. */
@media print {
    .tf-app-topbar,
    .tf-loading-bar,
    .tf-toast-region {
        display: none !important;
    }

    .tf-brackets-page,
    #brackets-content {
        page: bracketSheet;
    }

    .tf-brackets-page .tf-tournament-detail-back,
    .tf-brackets-page .tf-tournament-detail-hero-title,
    .tf-brackets-page .tf-print-action,
    .tf-brackets-page .tf-bracket-actions,
    .tf-brackets-page .tf-bracket-swap,
    .tf-brackets-page .tf-bracket-swap-hint,
    .tf-brackets-page .tf-bracket-relocate,
    .tf-brackets-page .tf-bracket-entrant-menu,
    .tf-brackets-page .tf-bracket-record-hint,
    .tf-brackets-page .tf-bracket-note,
    .tf-brackets-page .tf-tournament-panel-summary-meta svg,
    #brackets-content .tf-checkin-back-link,
    #brackets-content .tf-print-action,
    #brackets-content summary svg {
        display: none !important;
    }

    /* Print the full tree instead of clipping it inside the horizontal scroll. */
    .tf-bracket-rounds-scroll {
        overflow: visible !important;
    }

    .tf-bracket-match {
        box-shadow: none !important;
        transform: none !important;
    }

    .tf-bracket-entrant.is-actionable,
    .tf-bracket-entrant.is-swappable {
        cursor: default;
    }

    /* One category per page. */
    .tf-brackets-page article.tf-tournament-detail-panel,
    #brackets-content .tf-bracket-categories > details {
        break-inside: avoid;
        break-after: page;
    }

    .tf-brackets-page article.tf-tournament-detail-panel:last-child,
    #brackets-content .tf-bracket-categories > details:last-child {
        break-after: auto;
    }}

/* Tournament ranking management — academy standings and accounted categories. */
.tf-ranking-management-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    margin: 0 auto;
    padding: 2rem var(--tf-shell-gutter) 5rem;
    gap: 1.35rem;
}

.tf-ranking-management-back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 0.45rem;
    color: #6f6862;
    font-family: var(--font-num);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-ranking-management-back:hover {
    color: var(--tf-red);
}

.tf-ranking-management-back span {
    font-size: 1rem;
    line-height: 1;
}

.tf-ranking-management-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.tf-ranking-management-heading {
    min-width: 0;
}

.tf-ranking-management-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.55rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: var(--tf-kicker-size);
    font-weight: 700;
    letter-spacing: var(--tf-kicker-tracking);
    text-transform: uppercase;
}

.tf-ranking-management-kicker span,
.tf-ranking-panel-header h2 > span,
.tf-ranking-categories-panel > header h2 > span {
    display: inline-block;
    width: 1.45rem;
    height: 0.2rem;
    background: var(--tf-red);
}

.tf-ranking-management-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tf-ranking-management-title h1 {
    margin: 0;
    color: var(--tf-ink);
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.tf-ranking-status {
    flex: 0 0 auto;
    padding: 0.38rem 0.6rem;
    color: #fff;
    background: #8b837c;
    font-family: var(--font-num);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.tf-ranking-status.is-published {
    background: #14110f;
}

.tf-ranking-status.is-empty {
    color: #6f6862;
    background: #e7e2dc;
}

.tf-ranking-management-meta {
    margin: 0.75rem 0 0;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.63rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-ranking-management-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.tf-ranking-management-actions button,
.tf-ranking-panel-header button {
    min-height: 2.35rem;
    border: 1px solid #14110f;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    color: #fff;
    background: #14110f;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.tf-ranking-management-actions form button {
    border-color: var(--tf-red);
    background: var(--tf-red);
}

.tf-ranking-management-actions .tf-ranking-export-action {
    color: #14110f;
    background: transparent;
}

.tf-ranking-management-actions .tf-ranking-export-action:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.tf-ranking-management-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.tf-ranking-management-stats > div {
    display: grid;
    align-content: start;
    min-height: 7rem;
    border: 1px solid #e2ddd7;
    border-top: 3px solid #14110f;
    padding: 1rem 1.2rem;
    background: #fff;
}

.tf-ranking-management-stats > div.is-points {
    border-top-color: var(--tf-red);
}

.tf-ranking-management-stats > div.is-leader {
    border-top-color: #a8a098;
}

.tf-ranking-management-stats strong {
    margin-bottom: 0.32rem;
    color: #14110f;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-ranking-management-stats .is-points strong {
    color: var(--tf-red);
}

.tf-ranking-management-stats .is-leader strong {
    overflow: hidden;
    color: #8b837c;
    font-size: 1.15rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-ranking-management-stats span,
.tf-ranking-management-stats small {
    display: block;
}

.tf-ranking-management-stats span {
    color: #706963;
    font-family: var(--font-num);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-ranking-management-stats small {
    margin-top: 0.35rem;
    color: #8b837c;
    font-size: 0.7rem;
}

.tf-ranking-table-panel,
.tf-ranking-categories-panel {
    border: 1px solid #e2ddd7;
    background: #fff;
}

.tf-ranking-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.85rem 1.35rem;
}

.tf-ranking-panel-header h2,
.tf-ranking-categories-panel > header h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: #332e2a;
    font-family: var(--font-num);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-ranking-panel-header h2 > span,
.tf-ranking-categories-panel > header h2 > span {
    width: 0.5rem;
    height: 0.5rem;
}

.tf-ranking-panel-header > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.tf-ranking-panel-header p {
    margin: 0;
    color: #6f6862;
    font-size: 0.7rem;
}

.tf-ranking-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.tf-ranking-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tf-ranking-table th {
    border-bottom: 1px solid #e7e2dc;
    padding: 0.7rem 1.35rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
}

.tf-ranking-table th:first-child,
.tf-ranking-table td:first-child {
    width: 5rem;
}

.tf-ranking-table th:nth-child(n + 3),
.tf-ranking-table td:nth-child(n + 3) {
    width: 5.1rem;
    text-align: center;
}

.tf-ranking-table th:last-child,
.tf-ranking-table td:last-child {
    width: 6rem;
    text-align: right;
}

.tf-ranking-table td {
    border-bottom: 1px solid #eeeae5;
    padding: 0.7rem 1.35rem;
    color: #4f4944;
    font-family: var(--font-num);
    font-size: 0.68rem;
}

.tf-ranking-table tbody tr:last-child td {
    border-bottom: 0;
}

.tf-ranking-position {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    color: #fff;
    background: #14110f;
    font-family: var(--font-num);
    font-size: 0.63rem;
    font-weight: 700;
}

.tf-ranking-position.is-1 {
    background: var(--tf-red);
}

.tf-ranking-position.is-4,
.tf-ranking-position.is-5,
.tf-ranking-position.is-6 {
    color: #8b837c;
    background: #f0ede9;
}

.tf-ranking-academy strong,
.tf-ranking-academy small {
    display: block;
}

.tf-ranking-academy strong {
    color: #14110f;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 800;
}

.tf-ranking-academy small {
    margin-top: 0.08rem;
    color: #9a928b;
    font-size: 0.5rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tf-ranking-table td.is-gold {
    color: var(--tf-red);
}

.tf-ranking-table td.tf-ranking-points {
    color: #14110f;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 900;
}

.tf-ranking-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #e7e2dc;
    padding: 0.75rem 1.35rem;
}

.tf-ranking-table-footer p {
    margin: 0;
    color: #8b837c;
    font-size: 0.66rem;
}

.tf-ranking-table-footer p:last-child {
    font-family: var(--font-num);
    font-size: 0.51rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tf-ranking-empty {
    margin: 0;
    padding: 2rem 1.35rem;
    color: #8b837c;
    font-size: 0.78rem;
}

.tf-ranking-categories-panel > header {
    border-bottom: 1px solid #e7e2dc;
    padding: 1rem 1.35rem;
}

.tf-ranking-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #eeeae5;
    padding: 0.8rem 1.35rem;
}

.tf-ranking-category-row:last-child {
    border-bottom: 0;
}

.tf-ranking-category-row > div {
    min-width: 0;
}

.tf-ranking-category-row h3,
.tf-ranking-category-row p {
    margin: 0;
}

.tf-ranking-category-row h3 {
    color: #272320;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
}

.tf-ranking-category-row p {
    margin-top: 0.18rem;
    overflow: hidden;
    color: #9a928b;
    font-family: var(--font-num);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-ranking-category-row > span {
    flex: 0 0 auto;
    min-width: 6.5rem;
    padding: 0.35rem 0.55rem;
    color: #fff;
    background: #14110f;
    font-family: var(--font-num);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.tf-ranking-category-row.is-pending h3 {
    color: #8b837c;
}

.tf-ranking-category-row.is-pending > span {
    background: #c7c0b9;
}

@media (max-width: 62rem) {
    .tf-ranking-management-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 42rem) {
    .tf-ranking-management-page {
        padding-block: 1.4rem 3.5rem;
        gap: 1rem;
    }

    .tf-ranking-management-hero,
    .tf-ranking-management-title,
    .tf-ranking-panel-header,
    .tf-ranking-panel-header > div,
    .tf-ranking-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .tf-ranking-management-title {
        gap: 0.65rem;
    }

    .tf-ranking-management-title h1 {
        font-size: clamp(2.2rem, 11vw, 2.75rem);
    }

    .tf-ranking-management-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tf-ranking-management-actions form,
    .tf-ranking-management-actions button {
        width: 100%;
    }

    .tf-ranking-management-stats {
        gap: 0.6rem;
    }

    .tf-ranking-management-stats > div {
        min-height: 7.35rem;
        padding: 0.9rem;
    }

    .tf-ranking-management-stats strong {
        font-size: 1.55rem;
    }

    .tf-ranking-management-stats .is-leader strong {
        font-size: 1rem;
        white-space: normal;
    }

    .tf-ranking-panel-header {
        padding: 1rem;
    }

    .tf-ranking-panel-header > div {
        width: 100%;
        gap: 0.75rem;
    }

    .tf-ranking-panel-header form,
    .tf-ranking-panel-header button {
        width: 100%;
    }

    .tf-ranking-table-wrap {
        overflow: visible;
    }

    .tf-ranking-table,
    .tf-ranking-table tbody {
        display: block;
        width: 100%;
    }

    .tf-ranking-table thead {
        display: none;
    }

    .tf-ranking-table tbody tr {
        display: grid;
        grid-template-columns: 2.4rem minmax(0, 1fr) repeat(3, 2rem) 2.7rem;
        align-items: center;
        gap: 0.25rem;
        border-bottom: 1px solid #eeeae5;
        padding: 0.8rem 1rem;
    }

    .tf-ranking-table td,
    .tf-ranking-table th:first-child,
    .tf-ranking-table td:first-child,
    .tf-ranking-table th:nth-child(n + 3),
    .tf-ranking-table td:nth-child(n + 3),
    .tf-ranking-table th:last-child,
    .tf-ranking-table td:last-child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        border: 0;
        padding: 0;
        text-align: center;
    }

    .tf-ranking-table td:nth-child(n + 3)::before {
        content: attr(data-label);
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tf-ranking-table td.tf-ranking-academy {
        display: block;
        min-width: 0;
        padding-inline: 0.25rem;
        text-align: left;
    }

    .tf-ranking-academy strong {
        overflow-wrap: anywhere;
    }

    .tf-ranking-position {
        width: 1.75rem;
        height: 1.75rem;
    }

    .tf-ranking-table td.tf-ranking-points {
        font-size: 0.92rem;
        text-align: right;
    }

    .tf-ranking-table-footer {
        padding: 1rem;
    }

    .tf-ranking-categories-panel > header,
    .tf-ranking-category-row {
        padding: 0.9rem 1rem;
    }

    .tf-ranking-category-row {
        align-items: flex-start;
    }

    .tf-ranking-category-row p {
        overflow: visible;
        white-space: normal;
    }

    .tf-ranking-category-row > span {
        min-width: 0;
        margin-top: 0.1rem;
    }}

@page bracketSheet {
    size: landscape;
    margin: 10mm;
}

/* ===== Campo de data: máscara + popup de calendário (date-picker.js) ===== */
.tf-date-control {
    position: relative;
    display: flex;
    align-items: center;
}
.tf-date-control > input[type="text"] {
    flex: 1;
    padding-right: 2.5rem;
}
.tf-date-toggle {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--tf-muted);
    cursor: pointer;
    border-radius: 6px;
}
.tf-date-toggle:hover {
    color: var(--tf-red);
    background: var(--tf-accent-soft);
}
.tf-date-popup {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    width: 17rem;
    max-width: 90vw;
    padding: 0.75rem;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.tf-date-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.tf-date-popup-head span {
    font-weight: 600;
    text-transform: capitalize;
    color: var(--tf-ink);
}
.tf-date-popup-head button {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--tf-ink);
}
.tf-date-popup-head button:hover {
    background: var(--tf-accent-soft);
    color: var(--tf-red);
}
.tf-date-dow,
.tf-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.tf-date-dow span {
    text-align: center;
    font-size: 0.7rem;
    color: var(--tf-muted);
    text-transform: uppercase;
    padding: 0.25rem 0;
}
.tf-date-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--tf-ink);
    font-size: 0.85rem;
}
.tf-date-day:hover:not(.is-blank) {
    background: var(--tf-accent-soft);
}
.tf-date-day.is-blank {
    visibility: hidden;
    cursor: default;
}
.tf-date-day.is-today {
    outline: 1px solid var(--tf-border);
}
.tf-date-day.is-selected {
    background: var(--tf-red);
    color: #fff;
    font-weight: 600;
}

/* ===== Confirmación da inscripción ===== */
.tf-confirmation-hero {
    position: relative;
    overflow: hidden;
    background: var(--tf-dark);
}

.tf-confirmation-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 15px);
}

.tf-confirmation-hero-grid {
    position: relative;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding-block: 3rem 3.25rem;
}

.tf-confirmation-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    align-items: flex-start;
}

.tf-confirmation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.tf-confirmation-badge span {
    display: inline-flex;
    width: 1.625rem;
    height: 1.625rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tf-on-dark);
    background: var(--tf-red);
    font-size: 0.8125rem;
    font-weight: 800;
}

.tf-confirmation-badge b {
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-confirmation-hero h1 {
    color: var(--tf-on-dark);
    font-size: clamp(2rem, 5.2vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-wrap: balance;
}

.tf-confirmation-lead {
    max-width: 34rem;
    color: var(--tf-on-dark-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-confirmation-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6875rem;
    margin-top: 0.375rem;
}

.tf-confirmation-primary,
.tf-confirmation-ghost {
    display: inline-flex;
    min-height: 2.875rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding-inline: 1.5rem;
    font-size: 0.90625rem;
    font-weight: 800;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.tf-confirmation-primary {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-confirmation-primary:hover {
    color: var(--tf-on-dark);
    background: var(--tf-red-bright);
}

.tf-confirmation-ghost {
    border: 1.5px solid var(--tf-dark-elevated);
    color: var(--tf-on-dark);
}

.tf-confirmation-ghost:hover {
    border-color: var(--tf-on-dark);
    color: var(--tf-on-dark);
}

/* Cartão do código de acreditación. */
.tf-confirmation-code-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    border-radius: 0.75rem;
    padding: 1.25rem;
    background: var(--tf-page);
}

.tf-confirmation-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-confirmation-code-head button {
    border: 0;
    padding: 0;
    color: var(--tf-red);
    background: transparent;
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-confirmation-code-head button:hover {
    color: var(--tf-red-strong);
}

.tf-confirmation-code {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.5625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tf-confirmation-barcode {
    display: flex;
    gap: 3px;
}

.tf-confirmation-barcode i {
    height: 2.75rem;
    background: var(--tf-ink);
}

.tf-confirmation-code-note {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    line-height: 1.5;
    text-transform: uppercase;
}

/* ===== Corpo ===== */
.tf-confirmation-body {
    display: grid;
    gap: 1.75rem;
    align-items: start;
    padding-block: 2.5rem 4.5rem;
}

.tf-confirmation-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.375rem;
}

.tf-confirmation-card {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.75rem;
    background: var(--tf-surface);
}

.tf-confirmation-card.is-padded {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.tf-confirmation-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    border-bottom: 1px solid var(--tf-line-soft);
    padding: 1.25rem 1.5rem;
}

.tf-confirmation-card-head h2 {
    color: var(--tf-ink);
    font-size: 1.1875rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.tf-confirmation-status {
    border-radius: 0.25rem;
    padding: 0.3125rem 0.5625rem;
    color: var(--tf-ink);
    background: var(--tf-gold);
    font-family: var(--font-num);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-confirmation-status.is-ok {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
}

.tf-confirmation-detail {
    display: grid;
    gap: 1px;
    background: var(--tf-line-soft);
}

.tf-confirmation-detail > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.3125rem;
    padding: 1.0625rem 1.5rem;
    background: var(--tf-surface);
}

.tf-confirmation-detail dt,
.tf-confirmation-rows dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-confirmation-detail dd {
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tf-confirmation-detail dd.is-num {
    font-family: var(--font-num);
    font-weight: 400;
}

.tf-confirmation-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.875rem;
    border-top: 1px solid var(--tf-line-soft);
    padding: 1.125rem 1.5rem;
    background: var(--tf-page);
}

.tf-confirmation-total span {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-confirmation-total b {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tf-confirmation-kicker {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-confirmation-copy {
    color: var(--tf-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.tf-confirmation-rows {
    display: grid;
    overflow: hidden;
    gap: 1px;
    border: 1px solid var(--tf-line-soft);
    border-radius: 0.625rem;
    background: var(--tf-line-soft);
}

.tf-confirmation-rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9375rem 1.125rem;
    background: var(--tf-surface);
}

.tf-confirmation-rows dd {
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.875rem;
    font-weight: 700;
}

.tf-confirmation-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.tf-confirmation-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.tf-confirmation-steps b {
    display: inline-flex;
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tf-faint);
    background: #f1efec;
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
}

.tf-confirmation-steps li.is-hot b {
    color: var(--tf-on-dark);
    background: var(--tf-red);
}

.tf-confirmation-steps strong {
    display: block;
    color: var(--tf-ink);
    font-size: 0.9375rem;
    font-weight: 800;
}

.tf-confirmation-steps p {
    margin-top: 0.25rem;
    color: var(--tf-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ===== Coluna lateral ===== */
.tf-confirmation-aside {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.875rem;
}

.tf-confirmation-event-card {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.75rem;
    background: var(--tf-surface);
}

.tf-confirmation-event-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.375rem;
}

.tf-confirmation-event-body h2 {
    color: var(--tf-ink);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.tf-confirmation-event-body p {
    color: var(--tf-muted);
    font-size: 0.84375rem;
}

.tf-confirmation-outline {
    display: inline-flex;
    width: 100%;
    min-height: 2.625rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.625rem;
    border: 1.5px solid var(--tf-ink);
    border-radius: 999px;
    color: var(--tf-ink);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 800;
    transition: background-color 150ms ease, color 150ms ease;
}

.tf-confirmation-outline:hover {
    color: var(--tf-on-dark);
    background: var(--tf-ink);
}

.tf-confirmation-correction {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 1.375rem;
    background: var(--tf-dark);
}

.tf-confirmation-correction .tf-confirmation-kicker {
    color: var(--tf-on-dark-faint);
}

.tf-confirmation-correction p {
    color: #c9c2bb;
    font-size: 0.90625rem;
    line-height: 1.5;
}

.tf-confirmation-correction a {
    color: var(--tf-red-bright);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-confirmation-correction a:hover {
    color: var(--tf-on-dark);
}

/* ===== Mis torneos — fiel ao mockup de gestión ===== */
.tf-managed-tournaments {
    width: min(100%, var(--tf-shell-max));
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 2.25rem var(--tf-shell-gutter) 5rem;
}

.tf-managed-tournaments-heading {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.tf-managed-tournaments-heading > div {
    min-width: 0;
}

.tf-managed-tournaments-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.tf-managed-tournaments-breadcrumb a {
    color: var(--tf-faint);
}

.tf-managed-tournaments-breadcrumb a:hover,
.tf-managed-tournaments-breadcrumb a:focus-visible {
    color: var(--tf-red);
}

.tf-managed-tournaments-breadcrumb span {
    color: #c9c2ba;
}

.tf-managed-tournaments-breadcrumb b {
    color: var(--tf-red);
}

.tf-managed-tournaments-heading h1 {
    margin: 0;
    color: var(--tf-ink);
    font-size: clamp(2.3rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-managed-tournaments-lead {
    margin: 0.75rem 0 0;
    color: var(--tf-muted);
    font-size: 1rem;
}

.tf-managed-tournaments-create {
    display: inline-flex;
    min-height: 2.875rem;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    border-radius: 999px;
    padding: 0.875rem 1.5rem;
    color: #ffffff;
    background: var(--tf-red);
    font-size: 0.875rem;
    font-weight: 800;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.tf-managed-tournaments-create i {
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.tf-managed-tournaments-create:hover,
.tf-managed-tournaments-create:focus-visible {
    color: #ffffff;
    background: var(--tf-red-strong);
    outline: 0;
}

.tf-managed-tournaments-create:focus-visible {
    box-shadow: 0 0 0 3px rgb(217 30 40 / 18%);
}

.tf-managed-tournaments-summary {
    display: flex;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--tf-line);
    margin: 0;
    background: var(--tf-surface);
}

.tf-managed-tournaments-summary > div {
    display: flex;
    min-width: max-content;
    flex-direction: column;
    gap: 0.3125rem;
    padding: 0.875rem 1.375rem;
}

.tf-managed-tournaments-summary > div + div {
    border-left: 1px solid var(--tf-line);
}

.tf-managed-tournaments-summary dd {
    margin: 0;
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}

.tf-managed-tournaments-summary dd.is-red {
    color: var(--tf-red) !important;
    background: transparent !important;
}

.tf-managed-tournaments-summary dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-managed-tournaments-controls {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.tf-managed-tournaments-tabs {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tf-managed-tournaments-tabs a {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--tf-line);
    padding: 0.5625rem 0.9375rem;
    color: var(--tf-muted);
    background: var(--tf-surface);
    font-size: 0.8125rem;
    font-weight: 700;
}

.tf-managed-tournaments-tabs a:hover,
.tf-managed-tournaments-tabs a:focus-visible {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
    outline: 0;
}

.tf-managed-tournaments-tabs a.is-selected {
    border-color: var(--tf-ink);
    color: #ffffff;
    background: var(--tf-ink);
}

.tf-managed-tournaments-tabs b {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
}

.tf-managed-tournaments-tabs a.is-selected b {
    color: var(--tf-red);
}

.tf-managed-tournaments-search {
    width: 13.75rem;
}

.tf-managed-tournaments-search .tf-form-field {
    gap: 0;
}

.tf-managed-tournaments-search .tf-form-search,
.tf-managed-tournaments-search input[type="search"] {
    width: 100%;
}

.tf-managed-tournaments-search input[type="search"] {
    min-height: 2.375rem;
    border: 1px solid var(--tf-line);
    border-radius: 0;
    padding: 0.625rem 0.875rem;
    color: var(--tf-ink);
    background: var(--tf-surface);
    font-size: 0.8125rem;
}

.tf-managed-tournaments-search input[type="search"]:focus {
    border-color: var(--tf-ink);
    box-shadow: none;
    outline: 0;
}

.tf-managed-tournaments-table-frame {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-top: 3px solid var(--tf-red);
    background: var(--tf-surface);
}

.tf-managed-tournaments-table-scroll {
    overflow-x: auto;
}

.tf-managed-tournaments-table {
    width: 100%;
    min-width: 68rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.tf-managed-tournaments-table col.is-tournament {
    width: 31%;
}

.tf-managed-tournaments-table col.is-date {
    width: 11%;
}

.tf-managed-tournaments-table col.is-status {
    width: 16%;
}

.tf-managed-tournaments-table col.is-number {
    width: 9.5%;
}

.tf-managed-tournaments-table col.is-pending {
    width: 11%;
}

.tf-managed-tournaments-table col.is-confirmed {
    width: 10%;
}

.tf-managed-tournaments-table col.is-actions {
    width: 8.5%;
}

.tf-managed-tournaments-table thead {
    background: #fcfbfa;
}

.tf-managed-tournaments-table th {
    border-bottom: 1px solid var(--tf-line);
    padding: 0.8125rem 1.375rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf-managed-tournaments-table th.is-number {
    text-align: right;
}

.tf-managed-tournaments-table td {
    border-bottom: 1px solid var(--tf-line-soft);
    padding: 1rem 1.375rem;
    color: var(--tf-ink);
    vertical-align: middle;
}

.tf-managed-tournaments-table tbody tr:last-child td {
    border-bottom: 0;
}

.tf-managed-tournaments-table tbody tr:hover {
    background: #fcfbfa;
}

.tf-managed-tournament-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.3125rem;
}

.tf-managed-tournament-identity > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5625rem;
}

.tf-managed-tournament-identity a {
    overflow: hidden;
    color: var(--tf-ink);
    font-size: 0.96875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-managed-tournament-identity a:hover,
.tf-managed-tournament-identity a:focus-visible {
    color: var(--tf-red);
}

.tf-managed-tournament-identity span {
    flex: none;
    border: 1px solid var(--tf-line);
    padding: 0.1875rem 0.375rem;
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tf-managed-tournament-identity small {
    overflow: hidden;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-managed-tournament-date {
    font-family: var(--font-num);
    font-size: 0.78125rem;
    font-weight: 500;
    white-space: nowrap;
}

.tf-managed-tournament-status {
    display: inline-block;
    padding: 0.3125rem 0.5625rem;
    color: var(--tf-muted);
    background: var(--tf-line-soft);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf-managed-tournament-status.is-open {
    color: #ffffff;
    background: var(--tf-red);
}

.tf-managed-tournament-status.is-review {
    color: #ffffff;
    background: var(--tf-ink);
}

.tf-managed-tournament-number {
    font-family: var(--font-num);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
}

.tf-managed-tournament-number.has-pending {
    color: var(--tf-red);
}

/* Zero apagado: sem academia pendente a coluna não deve competir com os outros números. */
.tf-managed-tournament-number.is-zero {
    color: #a8a098;
}

.tf-managed-tournament-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4375rem;
}

.tf-managed-tournament-actions a {
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 1px solid var(--tf-line);
    color: var(--tf-muted);
    background: var(--tf-surface);
    font-family: var(--font-num);
    font-size: 0.59375rem;
    font-weight: 700;
}

.tf-managed-tournament-actions svg {
    width: 0.875rem;
    height: 0.875rem;
}

.tf-managed-tournament-actions a:hover,
.tf-managed-tournament-actions a:focus-visible {
    border-color: var(--tf-ink);
    color: var(--tf-ink);
    outline: 0;
}

.tf-managed-tournament-actions a.is-edit:hover,
.tf-managed-tournament-actions a.is-edit:focus-visible {
    border-color: var(--tf-red);
    color: var(--tf-red);
}

.tf-managed-tournaments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4375rem;
    border-top: 1px solid var(--tf-line);
    padding: 2.125rem 1.375rem;
    text-align: center;
}

.tf-managed-tournaments-empty strong {
    color: var(--tf-ink);
    font-size: 0.96875rem;
    font-weight: 800;
}

.tf-managed-tournaments-empty span {
    color: var(--tf-muted);
    font-size: 0.84375rem;
}

@media (max-width: 50rem) {
    .tf-managed-tournaments {
        padding-top: 1.75rem;
    }

    .tf-managed-tournaments-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tf-managed-tournaments-heading > div,
    .tf-managed-tournaments-summary,
    .tf-managed-tournaments-controls,
    .tf-managed-tournaments-search {
        width: 100%;
    }

    .tf-managed-tournaments-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        width: 100%;
        padding-bottom: 0.25rem;
    }

    .tf-managed-tournaments-tabs a {
        flex: none;
    }}

/* ===== Mi perfil — fiel ao mockup de Perfil ===== */
.tf-profile-redesign {
    width: min(100%, var(--tf-shell-max));
    margin-inline: auto;
    padding: 2rem var(--tf-shell-gutter) 5rem;
}

.tf-panel-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-panel-back span {
    color: var(--tf-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

/* Academy management panel */
.tf-academy-management-page {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--tf-shell-max));
    gap: 1.625rem;
    margin-inline: auto;
    padding: 2rem var(--tf-shell-gutter) 5rem;
}

.tf-academy-management-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: start;
    padding: 1.875rem 1.875rem 1.625rem;
    background: var(--tf-dark);
    color: #fff;
}

.tf-academy-management-hero-main { display: flex; min-width: 0; align-items: flex-start; gap: 1.125rem; }
.tf-academy-management-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.125rem; }

.tf-academy-management-mark {
    display: grid;
    place-items: center;
    width: 3.875rem;
    height: 3.875rem;
    flex: 0 0 auto;
    background: var(--tf-red);
    color: #fff;
    font-family: var(--font-num);
    font-size: 1.0625rem;
    font-weight: 700;
}

.tf-academy-management-summary { min-width: 0; }
.tf-academy-management-kicker,
.tf-academy-management-summary small,
.tf-academy-management-stats dd,
.tf-academy-management-section-header h2,
.tf-academy-member-status {
    font-family: var(--font-num);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.tf-academy-management-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; color: var(--tf-red); font-size: .65625rem; letter-spacing: .18em; }
.tf-academy-management-kicker span { padding: .25rem .5rem; background: #fff; color: var(--tf-dark); font-size: .59375rem; letter-spacing: .12em; }
.tf-academy-management-summary h1 { margin: .7rem 0 .65rem; color: #fff; font-size: clamp(2.25rem, 4vw, 2.625rem); letter-spacing: -.04em; line-height: 1; }
.tf-academy-management-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .875rem; color: #9c948c; }
.tf-academy-management-location { font-size: .875rem; }
.tf-academy-management-phone { font-family: var(--font-num); font-size: .78125rem; }
.tf-academy-management-meta i { width: 1px; height: .8125rem; background: #2a2521; }
.tf-academy-management-summary small { color: var(--tf-red); font-size: .6875rem; letter-spacing: .12em; }
.tf-academy-management-edit { min-height: auto; border-color: #fff; padding: .6875rem 1.25rem; color: #fff; font-size: .84375rem; font-weight: 800; line-height: 1.25; }
.tf-academy-management-edit:hover { background: #fff; color: var(--tf-dark); }

.tf-academy-management-stats {
    display: flex;
    margin: 0;
    border: 1px solid #2a2521;
}
.tf-academy-management-stats div { padding: .875rem 1.25rem; }
.tf-academy-management-stats div + div { border-left: 1px solid #2a2521; }
.tf-academy-management-stats dt { color: #fff; font-family: var(--font-num); font-size: 1.375rem; font-weight: 700; line-height: 1; }
.tf-academy-management-stats dt.is-accent { color: var(--tf-red); }
.tf-academy-management-stats dd { margin: .3125rem 0 0; color: #8b837c; font-size: .5625rem; letter-spacing: .14em; }

.tf-academy-management-section { display: flex; flex-direction: column; gap: 1rem; }
.tf-academy-management-section-header { display: flex; align-items: center; gap: .85rem; }
.tf-academy-management-section-header::after { flex: 1; height: 1px; background: var(--tf-border); content: ""; }
.tf-academy-management-section-header h2 { margin: 0; color: var(--tf-ink); }
.tf-academy-management-section-header b { padding: .25rem .45rem; background: var(--tf-red); color: #fff; font-family: var(--font-num); font-size: .625rem; }
.tf-academy-management-empty { margin: 0; border: 1px solid var(--tf-border); padding: 1.75rem; color: var(--tf-muted); text-align: center; }

.tf-academy-pending-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .875rem; }
.tf-academy-pending-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; border: 1px solid var(--tf-border); border-left: 3px solid var(--tf-red); padding: 1.125rem; }
.tf-academy-member-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #f0ede8; color: var(--tf-muted); font-family: var(--font-num); font-size: .6875rem; font-weight: 700; }
.tf-academy-pending-info { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.tf-academy-pending-info strong, .tf-academy-member-name strong { overflow: hidden; font-size: .9375rem; text-overflow: ellipsis; white-space: nowrap; }
.tf-academy-pending-info span, .tf-academy-member-belt { display: flex; align-items: center; gap: .5rem; color: var(--tf-muted); font-size: .8125rem; }
.tf-academy-belt { width: 1.375rem; height: .45rem; border: 1px solid var(--tf-border); background: #fff; }
.tf-academy-belt.is-blue { background: #2c6fd1; border-color: #2c6fd1; }
.tf-academy-belt.is-purple { background: #6b2fa8; border-color: #6b2fa8; }
.tf-academy-belt.is-brown { background: #8a5a2b; border-color: #8a5a2b; }
.tf-academy-belt.is-black { background: #14110f; border-color: #14110f; }
.tf-academy-pending-actions { grid-column: 1 / -1; display: flex; gap: .5rem; }
.tf-academy-pending-actions form { flex: 1; }
.tf-academy-pending-actions button, .tf-academy-member-row button { width: 100%; border: 1px solid var(--tf-ink); background: #fff; padding: .55rem .75rem; color: var(--tf-ink); font-size: .75rem; font-weight: 700; cursor: pointer; }
.tf-academy-pending-actions form:first-child button { border-color: var(--tf-red); background: var(--tf-red); color: #fff; }
.tf-academy-pending-actions button:hover, .tf-academy-member-row button:hover { border-color: var(--tf-red); color: var(--tf-red); }

.tf-academy-members-table { overflow: hidden; border: 1px solid var(--tf-border); }
.tf-academy-members-heading, .tf-academy-member-row { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) 7.5rem 10rem; gap: 1rem; align-items: center; padding: .85rem 1.35rem; }
.tf-academy-members-heading { border-bottom: 1px solid var(--tf-border); background: #fcfbfa; color: var(--tf-faint); font-family: var(--font-num); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tf-academy-member-row + .tf-academy-member-row { border-top: 1px solid #f0ede8; }
.tf-academy-member-row:hover { background: #fcfbfa; }
.tf-academy-member-name { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tf-academy-member-status { display: inline-block; justify-self: start; padding: .3rem .45rem; background: var(--tf-dark); color: #fff; }
.tf-academy-member-status.is-tournament { background: var(--tf-red); }
.tf-academy-member-row form { justify-self: end; }
.tf-academy-member-row button { width: auto; color: var(--tf-muted); }
.tf-academy-activity-list { border: 1px solid var(--tf-border); }
.tf-academy-activity-list p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .85rem 1.1rem; }
.tf-academy-activity-list p + p { border-top: 1px solid var(--tf-border); }
.tf-academy-activity-list span { color: var(--tf-muted); font-size: .8125rem; }

@media (max-width: 700px) {
    .tf-academy-management-page { gap: 1.75rem; padding-block: 1.5rem 3.5rem; }
    .tf-academy-management-hero { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
    .tf-academy-management-mark { width: 3.25rem; height: 3.25rem; font-size: 1rem; }
    .tf-academy-management-hero-side { align-items: stretch; }
    .tf-academy-management-edit { width: 100%; text-align: center; }
    .tf-academy-management-stats div { min-width: 0; flex: 1; padding: .75rem; }
    .tf-academy-members-heading { display: none; }
    .tf-academy-member-row { grid-template-columns: 1fr auto; padding: 1rem; }
    .tf-academy-member-belt { grid-column: 1; }
    .tf-academy-member-status { grid-column: 2; grid-row: 1; }
    .tf-academy-member-row form { grid-column: 1 / -1; justify-self: stretch; }
    .tf-academy-member-row button { width: 100%; }}

.tf-panel-back:hover,
.tf-panel-back:hover span,
.tf-panel-back:focus-visible,
.tf-panel-back:focus-visible span {
    color: var(--tf-red);
}

.tf-profile-redesign-hero {
    display: grid;
    gap: 0.6875rem;
    margin-top: 1.625rem;
}

.tf-profile-redesign-kicker {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-profile-redesign-kicker i {
    width: 1.5rem;
    height: 0.1875rem;
    background: var(--tf-red);
}

.tf-profile-redesign-hero h1 {
    margin: 0;
    color: var(--tf-ink);
    font-size: clamp(2.45rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-profile-redesign-hero p {
    margin: 0;
    color: var(--tf-muted);
    font-size: 1rem;
}

.tf-profile-redesign > .tf-auth-alert {
    margin-top: 1.5rem;
}

.tf-profile-redesign-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.625rem;
}

.tf-profile-redesign-form,
.tf-profile-redesign-panel {
    min-width: 0;
}

.tf-profile-redesign-panel {
    border: 1px solid var(--tf-line);
    background: var(--tf-surface);
}

.tf-profile-redesign-panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--tf-line);
    background: #fcfbfa;
}

.tf-profile-redesign-panel-header h2 {
    margin: 0;
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-profile-redesign-fields {
    display: grid;
    gap: 1.125rem;
    padding: 1.5rem;
}

.tf-profile-redesign-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.tf-profile-redesign .tf-form-field,
.tf-profile-redesign-phone .tf-form-field {
    gap: 0.4375rem;
}

.tf-profile-redesign .tf-form-field > span,
.tf-profile-redesign-phone .tf-form-field > span {
    color: var(--tf-ink);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Os `:not()` repetem os da regra base `.tf-form-field input:not(...)`: sem casar a
   especificidade dela, o raio, o padding e a borda padrão vencem por cascata e só os
   <select> adotam a caixa reta do mockup — País ficaria quadrado ao lado de Ciudad
   arredondado, na mesma linha. O wrapper .tf-profile-redesign-phone já está aqui dentro. */
.tf-profile-redesign .tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-profile-redesign .tf-form-field select {
    min-height: 2.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 0;
    padding: 0.6875rem 0.8125rem;
    color: var(--tf-ink);
    background-color: var(--tf-surface);
    font-size: 0.875rem;
}

.tf-profile-redesign .tf-form-field input:not([type="checkbox"]):not([type="radio"])[readonly],
.tf-profile-redesign .tf-form-field input:not([type="checkbox"]):not([type="radio"]):disabled,
.tf-profile-redesign .tf-form-field select:disabled {
    opacity: 1;
    color: var(--tf-faint);
    background-color: #f5f2ee;
    cursor: default;
}

.tf-profile-redesign .tf-form-help {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.65625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tf-profile-redesign-phone .tf-phone-grid {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.625rem;
}

.tf-profile-redesign-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--tf-line);
}

.tf-profile-redesign-actions button {
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1.625rem;
    color: white;
    background: var(--tf-red);
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
}

.tf-profile-redesign-actions button:hover,
.tf-profile-redesign-actions button:focus-visible {
    background: #a5151c;
}

.tf-profile-redesign-actions a {
    color: var(--tf-muted);
    font-size: 0.84375rem;
    font-weight: 700;
}

.tf-profile-redesign-summary {
    display: grid;
    gap: 1.125rem;
    padding: 1.625rem 1.375rem;
    color: white;
    background: var(--tf-dark);
}

.tf-profile-redesign-identity {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    min-width: 0;
}

.tf-profile-redesign-avatar {
    display: grid;
    flex: none;
    width: 3.375rem;
    height: 3.375rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--tf-red);
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 700;
}

.tf-profile-redesign-identity div {
    display: grid;
    gap: 0.3125rem;
    min-width: 0;
}

.tf-profile-redesign-identity strong {
    overflow-wrap: anywhere;
    font-size: 1.1875rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.tf-profile-redesign-identity small {
    color: #9c948c;
    font-family: var(--font-num);
    font-size: 0.65625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-profile-redesign-summary dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.tf-profile-redesign-summary dl div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid #2a2521;
}

.tf-profile-redesign-summary dl div + div {
    padding-top: 0.75rem;
}

.tf-profile-redesign-summary dt {
    color: var(--tf-on-dark-muted);
    font-family: var(--font-num);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-profile-redesign-summary dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: white;
    font-size: 0.84375rem;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 50rem) {
    .tf-profile-redesign {
        padding-top: 1.75rem;
    }

    .tf-profile-redesign-layout {
        grid-template-columns: 1fr;
    }

    .tf-profile-redesign-summary {
        grid-row: 1;
    }

    .tf-profile-redesign-row {
        grid-template-columns: 1fr;
    }

    .tf-profile-redesign-phone .tf-phone-grid {
        grid-template-columns: 1fr;
    }}

/* ===== Onboarding pós-cadastro =====
   O fundo escuro vive no wrapper, não no `<body>`: navegação com hx-boost troca
   apenas o conteúdo do body (defaultSwap innerHTML), então uma classe de tema no
   próprio body sobreviveria ao ir para o panel ou para "Mis atletas". */
.tf-welcome-page {
    display: flex;
    min-width: 20rem;
    min-height: 100vh;
    flex-direction: column;
    color: var(--tf-on-dark);
    background: var(--tf-dark);
}

.tf-welcome-shell {
    width: min(100%, 56.25rem);
    margin-inline: auto;
}

.tf-welcome-topbar {
    border-bottom: 1px solid var(--tf-dark-line);
}

.tf-welcome-topbar-inner {
    display: flex;
    min-height: 3.875rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 2rem;
}

.tf-welcome-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #ffffff;
    text-decoration: none;
}

.tf-welcome-brand:hover {
    color: #ffffff;
}

.tf-welcome-brand .tf-brand-icon {
    width: 3.875rem;
    height: 1.625rem;
    flex: 0 0 auto;
}

.tf-welcome-brand-name {
    white-space: nowrap;
    font-size: 1.1875rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
}

.tf-welcome-brand-name i {
    color: var(--tf-red);
    font-style: normal;
}

.tf-welcome-topbar p,
.tf-welcome-eyebrow,
.tf-welcome-option small,
.tf-welcome-option-action,
.tf-welcome-note > b {
    font-family: var(--font-num);
    font-weight: 700;
}

.tf-welcome-topbar p {
    margin: 0;
    color: var(--tf-on-dark-faint);
    font-size: 0.65625rem;
    letter-spacing: 0.14em;
}

.tf-welcome-main {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 3.5rem 2rem;
}

.tf-welcome-content {
    display: flex;
    max-width: 51.25rem;
    flex-direction: column;
    gap: 2.375rem;
}

.tf-welcome-heading {
    display: flex;
    max-width: 48rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
}

.tf-welcome-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    margin: 0;
    color: var(--tf-red);
    font-size: 0.71875rem;
    letter-spacing: 0.17em;
}

.tf-welcome-eyebrow span {
    width: 1.5rem;
    height: 0.25rem;
    background: var(--tf-red);
}

.tf-welcome-eyebrow b {
    font: inherit;
    text-transform: uppercase;
}

.tf-welcome-heading h1 {
    max-width: 50rem;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.tf-welcome-lede {
    max-width: 38.75rem;
    margin: 0;
    color: var(--tf-on-dark-muted);
    font-size: 1rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.tf-welcome-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tf-welcome-option {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.375rem;
    padding: 1.75rem 1.625rem;
    border: 1.5px solid var(--tf-dark-line);
    color: var(--tf-on-dark-muted);
    background: transparent;
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.tf-welcome-option:hover {
    border-color: var(--tf-on-dark-faint);
    color: var(--tf-on-dark-muted);
    transform: translateY(-1px);
}

.tf-welcome-option.is-primary {
    border-color: var(--tf-red);
    background: #1d1916;
}

.tf-welcome-option.is-primary:hover {
    border-color: var(--tf-red);
    background: #241f1b;
}

.tf-welcome-option-top {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tf-welcome-option-icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tf-dark-line);
    border-radius: 0.25rem;
    color: var(--tf-on-dark-muted);
    font-family: var(--font-num);
    font-size: 0.875rem;
}

.tf-welcome-option.is-primary .tf-welcome-option-icon {
    border-color: var(--tf-red);
    color: #ffffff;
    background: var(--tf-red);
}

.tf-welcome-option small {
    color: var(--tf-red);
    font-size: 0.59375rem;
    letter-spacing: 0.14em;
}

.tf-welcome-option-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5625rem;
}

.tf-welcome-option-copy strong {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.tf-welcome-option-copy > span {
    color: var(--tf-on-dark-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.tf-welcome-option-action {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    color: var(--tf-on-dark-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
}

.tf-welcome-option-action i {
    color: var(--tf-on-dark-faint);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-style: normal;
}

.tf-welcome-option.is-primary .tf-welcome-option-action {
    color: #ffffff;
}

.tf-welcome-option.is-primary .tf-welcome-option-action i {
    color: var(--tf-red);
}

.tf-welcome-note {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-top: 1.375rem;
    border-top: 1px solid var(--tf-dark-line);
}

.tf-welcome-note > b {
    flex: 0 0 auto;
    color: var(--tf-red);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
}

.tf-welcome-note p {
    margin: 0;
    color: #8b837c;
    font-size: 0.84375rem;
    line-height: 1.5;
    text-wrap: pretty;
}

@media (max-width: 42rem) {
    .tf-welcome-topbar-inner {
        padding-inline: 1.25rem;
    }

    .tf-welcome-topbar p {
        max-width: 9rem;
        text-align: right;
        line-height: 1.45;
    }

    .tf-welcome-main {
        align-items: flex-start;
        padding: 2.5rem 1.25rem 3rem;
    }

    .tf-welcome-content {
        gap: 2rem;
    }

    .tf-welcome-heading h1 {
        font-size: clamp(2.25rem, 11vw, 3rem);
    }

    .tf-welcome-options {
        grid-template-columns: 1fr;
    }

    .tf-welcome-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }}

/* Tournament registration management — Tatame operations layout. */
.tf-registration-management-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.35rem;
    margin-inline: auto;
    padding: 1.85rem var(--tf-shell-gutter) 5.5rem;
}

.tf-registration-management-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-registration-management-back span {
    color: #57514c;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.tf-registration-management-back:hover,
.tf-registration-management-back:focus-visible {
    color: var(--tf-red);
}

.tf-registration-management-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
}

.tf-registration-management-hero > div {
    display: grid;
    gap: 0.6rem;
}

.tf-registration-management-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-registration-management-kicker > span {
    width: 1.5rem;
    height: 0.18rem;
    background: var(--tf-red);
}

.tf-registration-management-hero h1 {
    margin: 0;
    color: #14110f;
    font-size: clamp(2.25rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.tf-registration-management-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-registration-management-page .tf-registration-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.tf-registration-management-page .tf-registration-stat {
    min-width: 0;
    gap: 0.35rem;
    border: 1px solid #e7e2dc;
    border-top: 3px solid #14110f;
    border-radius: 0;
    padding: 1.1rem 1.25rem;
    box-shadow: none;
}

.tf-registration-management-page .tf-registration-stat.is-ok {
    border-top-color: #14110f;
}

.tf-registration-management-page .tf-registration-stat.is-warn {
    border-top-color: var(--tf-red);
}

.tf-registration-management-page .tf-registration-stat.is-danger {
    border-top-color: #a8a098;
}

.tf-registration-management-page .tf-registration-stat strong,
.tf-registration-management-page .tf-registration-stat.is-ok strong {
    color: #14110f;
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.tf-registration-management-page .tf-registration-stat.is-warn strong {
    color: var(--tf-red);
}

.tf-registration-management-page .tf-registration-stat.is-danger strong {
    color: #8b837c;
}

.tf-registration-management-page .tf-registration-stat span {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
}

.tf-registration-management-page .tf-registration-stat small {
    color: #8b837c;
    font-size: 0.73rem;
    line-height: 1.35;
}

.tf-registration-checkin-panel {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 1.6rem;
    color: #fff;
    background: #14110f;
}

.tf-registration-checkin-copy {
    display: grid;
    max-width: 39rem;
    gap: 0.4rem;
}

.tf-registration-checkin-copy > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.tf-registration-checkin-copy h2 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.tf-registration-checkin-state {
    padding: 0.25rem 0.5rem;
    color: #fff;
    background: #57514c;
    font-family: var(--font-num);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-registration-checkin-state.is-published {
    background: var(--tf-ok);
}

.tf-registration-checkin-copy p {
    margin: 0;
    color: #9c948c;
    font-size: 0.82rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.tf-registration-checkin-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
}

.tf-registration-checkin-actions form {
    margin: 0;
}

.tf-registration-checkin-actions button,
.tf-registration-checkin-actions a {
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tf-red);
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    color: #fff;
    background: var(--tf-red);
    font: 800 0.8rem var(--font-sans);
    cursor: pointer;
}

.tf-registration-checkin-actions button:hover,
.tf-registration-checkin-actions a:hover {
    border-color: var(--tf-red-strong);
    color: #fff;
    background: var(--tf-red-strong);
}

.tf-registration-checkin-actions button.is-secondary,
.tf-registration-checkin-actions a {
    border-color: #8b837c;
    background: transparent;
}

.tf-registration-list-panel {
    min-width: 0;
    border: 1px solid #e7e2dc;
    background: #fff;
}

.tf-registration-list-header {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.65rem;
    border-bottom: 1px solid #e7e2dc;
    padding: 0.85rem 1.35rem;
    background: #fcfbfa;
}

.tf-registration-list-header > span {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--tf-red);
}

.tf-registration-list-header h2 {
    margin: 0;
    color: #14110f;
    font-family: var(--font-num);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-registration-management-page .tf-registration-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(9rem, 1fr) minmax(12rem, 1.4fr) auto;
    gap: 0.85rem;
    padding: 1.1rem 1.35rem;
}

.tf-registration-management-page .tf-registration-filters .tf-form-field {
    min-width: 0;
}

.tf-registration-management-page .tf-registration-filters .tf-form-field > span {
    color: #14110f;
    font-size: 0.72rem;
    font-weight: 700;
}

.tf-registration-management-page .tf-registration-filters input,
.tf-registration-management-page .tf-registration-filters select {
    min-height: 2.45rem;
    border-color: #e7e2dc;
    border-radius: 0;
    color: #14110f;
    background-color: #fff;
    font-size: 0.82rem;
}

.tf-registration-management-page .tf-registration-filters > button {
    min-height: 2.45rem;
    align-self: end;
    border: 1px solid #14110f;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    color: #fff;
    background: #14110f;
    font: 800 0.75rem var(--font-sans);
    cursor: pointer;
}

.tf-registration-management-page .tf-registration-filters > button:hover {
    border-color: var(--tf-red);
    background: var(--tf-red);
}

.tf-registration-management-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.tf-registration-management-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tf-registration-management-table th {
    padding: 0.72rem 1.15rem;
    color: #8b837c;
    background: #fcfbfa;
    font-family: var(--font-num);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;
}

.tf-registration-management-table th:nth-child(1) { width: 14%; }
.tf-registration-management-table th:nth-child(2) { width: 16%; }
.tf-registration-management-table th:nth-child(3) { width: 25%; }
.tf-registration-management-table th:nth-child(4) { width: 9%; }
.tf-registration-management-table th:nth-child(5) { width: 9%; }
.tf-registration-management-table th:nth-child(6) { width: 14%; }
.tf-registration-management-table th:nth-child(7) { width: 13%; }

.tf-registration-management-table td {
    border-top: 1px solid #f0ece7;
    padding: 0.8rem 1.15rem;
    color: #57514c;
    font-size: 0.75rem;
    line-height: 1.35;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.tf-registration-management-table td > strong {
    display: block;
    color: #14110f;
    font-size: 0.8rem;
    font-weight: 800;
}

.tf-registration-management-table td > small {
    display: block;
    margin-top: 0.15rem;
    color: #a8a098;
    font-family: var(--font-num);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
}

.tf-registration-management-table .tf-registration-academy-note {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0;
}

.tf-registration-management-table .tf-registration-academy-note.is-pending,
.tf-registration-pcd-label {
    color: var(--tf-red);
}

.tf-registration-management-table .tf-status-pill {
    display: inline-flex;
    border: 0;
    border-radius: 0;
    padding: 0.28rem 0.45rem;
    color: #fff;
    background: #14110f;
    font-family: var(--font-num);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: normal;
}

.tf-registration-management-table .tf-status-pill.is-ok {
    color: #fff;
    background: #14110f;
}

.tf-registration-management-table .tf-status-pill.is-warn,
.tf-registration-management-table .tf-status-pill.is-danger {
    color: #fff;
    background: var(--tf-red);
}

.tf-registration-management-table .tf-status-pill.is-danger {
    background: #a8a098;
}

.tf-registration-pcd-label {
    font-weight: 700;
    text-transform: uppercase;
}

.tf-registration-empty {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 2.75rem 1.25rem;
    text-align: center;
}

.tf-registration-empty strong {
    color: #14110f;
    font-size: 0.9rem;
    font-weight: 800;
}

.tf-registration-empty p {
    margin: 0;
    color: #8b837c;
    font-size: 0.78rem;
}

.tf-registration-result-footer {
    display: flex;
    min-height: 3.2rem;
    align-items: center;
    border-top: 1px solid #e7e2dc;
    padding: 0.8rem 1.35rem;
}

.tf-registration-result-count {
    margin: 0;
    color: #57514c;
    font-size: 0.78rem;
}

@media (max-width: 62rem) {
    .tf-registration-management-page .tf-registration-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-registration-management-page .tf-registration-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-registration-management-page .tf-registration-filters > button {
        width: fit-content;
    }

    .tf-registration-management-table {
        min-width: 58rem;
    }}

@media (max-width: 42rem) {
    .tf-registration-management-page {
        gap: 1rem;
        padding-block: 1.4rem 3.5rem;
    }

    .tf-registration-management-hero h1 {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    .tf-registration-management-meta {
        display: grid;
        gap: 0.2rem;
    }

    .tf-registration-management-meta > span[aria-hidden] {
        display: none;
    }

    .tf-registration-management-page .tf-registration-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .tf-registration-management-page .tf-registration-stat {
        padding: 0.9rem;
    }

    .tf-registration-management-page .tf-registration-stat span {
        overflow-wrap: anywhere;
    }

    .tf-registration-checkin-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.25rem;
    }

    .tf-registration-checkin-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .tf-registration-management-page .tf-registration-filters {
        grid-template-columns: minmax(0, 1fr);
        padding: 1rem;
    }

    .tf-registration-management-page .tf-registration-filters > button {
        width: 100%;
    }

    .tf-registration-management-table-wrap {
        overflow: visible;
    }

    .tf-registration-management-table,
    .tf-registration-management-table tbody {
        display: block;
        min-width: 0;
    }

    .tf-registration-management-table thead {
        display: none;
    }

    .tf-registration-management-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 1rem;
        border-top: 1px solid #f0ece7;
        gap: 0.85rem 1rem;
    }

    .tf-registration-management-table td {
        display: grid;
        min-width: 0;
        gap: 0.2rem;
        border: 0;
        padding: 0;
    }

    .tf-registration-management-table td::before {
        content: attr(data-label);
        color: #8b837c;
        font-family: var(--font-num);
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .tf-registration-management-table td:nth-child(1),
    .tf-registration-management-table td:nth-child(2),
    .tf-registration-management-table td:nth-child(3) {
        grid-column: 1 / -1;
    }}

/* Tournament bracket management — Tatame operations layout. */
.tf-bracket-management-page {
    display: grid;
    width: min(100%, var(--tf-shell-max));
    gap: 1.35rem;
    margin-inline: auto;
    padding: 1.85rem var(--tf-shell-gutter) 5.5rem;
}

.tf-bracket-management-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-bracket-management-back span {
    color: #57514c;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.tf-bracket-management-back:hover,
.tf-bracket-management-back:focus-visible {
    color: var(--tf-red);
}

.tf-bracket-management-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
}

.tf-bracket-management-heading {
    display: grid;
    gap: 0.6rem;
}

.tf-bracket-management-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tf-bracket-management-kicker > span {
    width: 1.5rem;
    height: 0.18rem;
    background: var(--tf-red);
}

.tf-bracket-management-heading h1 {
    margin: 0;
    color: #14110f;
    font-size: clamp(2.25rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.tf-bracket-management-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf-bracket-management-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.tf-bracket-management-actions form {
    margin: 0;
}

.tf-bracket-management-actions button,
.tf-bracket-management-actions .tf-print-action {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tf-red);
    border-radius: 999px;
    padding: 0.58rem 1.1rem;
    color: #fff;
    background: var(--tf-red);
    font: 800 0.78rem var(--font-sans);
    cursor: pointer;
}

.tf-bracket-management-actions button:hover {
    border-color: var(--tf-red-strong);
    background: var(--tf-red-strong);
}

.tf-bracket-management-actions button.is-secondary,
.tf-bracket-management-actions .tf-print-action {
    border-color: #14110f;
    color: #14110f;
    background: transparent;
}

.tf-bracket-management-actions button.is-secondary:hover,
.tf-bracket-management-actions .tf-print-action:hover {
    color: #fff;
    background: #14110f;
}

.tf-bracket-management-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.tf-bracket-management-stats > div {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    border: 1px solid #e7e2dc;
    border-top: 3px solid #14110f;
    padding: 1.1rem 1.25rem;
    background: #fff;
}

.tf-bracket-management-stats > div.is-published {
    border-top-color: var(--tf-red);
}

.tf-bracket-management-stats > div.is-finalized {
    border-top-color: #a8a098;
}

.tf-bracket-management-stats strong {
    color: #14110f;
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tf-bracket-management-stats .is-published strong {
    color: var(--tf-red);
}

.tf-bracket-management-stats .is-finalized strong {
    color: #8b837c;
}

.tf-bracket-management-stats span {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tf-bracket-management-stats small {
    color: #8b837c;
    font-size: 0.73rem;
    line-height: 1.35;
}

.tf-bracket-category-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    border: 1px solid #e7e2dc;
    padding: 1rem 1.35rem;
    background: #fff;
}

.tf-bracket-category-toolbar > div {
    display: grid;
    gap: 0.15rem;
}

.tf-bracket-category-toolbar h2 {
    margin: 0;
    color: #14110f;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tf-bracket-category-toolbar p {
    margin: 0;
    color: #57514c;
    font-size: 0.78rem;
}

.tf-bracket-category-toolbar .tf-form-field {
    display: flex;
    min-width: 11rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.65rem;
}

.tf-bracket-category-toolbar .tf-form-field > span {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-bracket-category-toolbar .tf-form-field select {
    min-width: 7.5rem;
    min-height: 2.2rem;
    border-color: #e7e2dc;
    border-radius: 0;
    color: #14110f;
    background-color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}

.tf-bracket-category-list {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
}

.tf-bracket-category-panel {
    min-width: 0;
    border: 1px solid #e7e2dc;
    border-left: 3px solid #e7e2dc;
    background: #fff;
}

.tf-bracket-category-panel.has-bracket {
    border-left-color: var(--tf-red);
}

.tf-bracket-category-panel > .tf-tournament-panel-collapse > .tf-tournament-panel-summary {
    min-height: 3.8rem;
    border-bottom: 0;
    padding: 0.85rem 1.2rem;
    background: #fff;
}

.tf-bracket-category-panel > .tf-tournament-panel-collapse[open] > .tf-tournament-panel-summary {
    border-bottom: 1px solid #e7e2dc;
}

.tf-bracket-category-heading {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.tf-bracket-category-heading h3 {
    margin: 0;
    color: #14110f;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.tf-bracket-category-heading > small {
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.tf-bracket-category-panel .tf-tournament-panel-summary-meta {
    gap: 0.65rem;
    color: #57514c;
    font-family: var(--font-num);
    font-size: 0.62rem;
    font-weight: 400;
}

.tf-bracket-category-panel .tf-tournament-panel-summary-meta > small {
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.tf-bracket-category-panel .tf-tournament-panel-summary-meta > small + small::before {
    content: "·";
    margin-right: 0.65rem;
    color: #8b837c;
}

.tf-bracket-category-panel .tf-tournament-panel-summary-meta .tf-status-pill {
    border: 0;
    border-radius: 0;
    padding: 0.28rem 0.5rem;
    color: #fff;
    background: #a8a098;
    font-family: var(--font-num);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.tf-bracket-category-panel .tf-status-pill.is-borrador {
    background: var(--tf-red);
}

.tf-bracket-category-panel .tf-status-pill.is-en_curso,
.tf-bracket-category-panel .tf-status-pill.is-por_finalizar {
    background: #14110f;
}

.tf-bracket-category-panel .tf-status-pill.is-finalizada {
    background: var(--tf-ok);
}

.tf-bracket-category-panel .tf-status-pill.is-sin_llave,
.tf-bracket-category-panel .tf-status-pill.is-insuficiente {
    background: #b8b1aa;
}

.tf-bracket-category-panel .tf-bracket-note {
    margin: 0;
    padding: 1rem 1.25rem;
    color: #57514c;
    background: #fcfbfa;
    font-size: 0.78rem;
}

.tf-bracket-category-panel .tf-bracket-waiting {
    padding: 1.25rem 1.25rem 0;
}

.tf-bracket-category-panel .tf-bracket-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin: 1rem 1.25rem;
    border: 1px solid #e7e2dc;
    padding: 1rem;
    background: #fcfbfa;
}

.tf-bracket-category-panel .tf-bracket-action-copy {
    display: grid;
    margin-right: auto;
    gap: 0.2rem;
}

.tf-bracket-category-panel .tf-bracket-action-copy strong {
    color: #14110f;
    font-size: 0.84rem;
    font-weight: 800;
}

.tf-bracket-category-panel .tf-bracket-action-copy span {
    color: #57514c;
    font-size: 0.75rem;
}

.tf-bracket-category-panel .tf-bracket-actions.is-draft {
    border: 0;
    border-top: 1px solid #f0ece7;
    margin: 0;
    padding: 1rem 1.25rem;
    background: #fff;
}

.tf-bracket-category-panel .tf-tournament-action-button {
    min-height: 2.25rem;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.tf-bracket-category-panel .tf-bracket-swap,
.tf-bracket-category-panel .tf-bracket-relocate {
    border-color: #f0ece7;
    padding-inline: 1.25rem;
}

.tf-bracket-category-panel .tf-form-field input:not([type="checkbox"]):not([type="radio"]),
.tf-bracket-category-panel .tf-form-field select {
    border-radius: 0;
}

.tf-bracket-category-panel .tf-bracket-rounds-scroll {
    border-top: 1px solid #f0ece7;
    padding: 1.25rem;
    background: #fff;
}

.tf-bracket-category-panel .tf-bracket-round {
    width: 14.5rem;
}

.tf-bracket-category-panel .tf-bracket-round > h2 {
    margin-bottom: 0.7rem;
    color: #8b837c;
    font-family: var(--font-num);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
}

.tf-bracket-category-panel .tf-bracket-match {
    border-radius: 0;
    box-shadow: none;
}

.tf-bracket-category-panel .tf-bracket-match:hover {
    box-shadow: none;
    transform: none;
}

.tf-bracket-category-panel .tf-bracket-match-label {
    position: static;
    border: 0;
    border-bottom: 1px solid #f0ece7;
    border-radius: 0;
    margin: 0;
    padding: 0.42rem 0.65rem;
    color: #8b837c;
    background: #fcfbfa;
    font-family: var(--font-num);
    font-size: 0.52rem;
    letter-spacing: 0.13em;
}

.tf-bracket-category-panel .tf-bracket-entrant {
    min-height: 2.2rem;
    padding: 0.45rem 0.65rem;
}

.tf-bracket-category-panel .tf-bracket-entrant strong {
    font-size: 0.75rem;
    font-weight: 700;
}

.tf-bracket-category-panel .tf-bracket-placeholder {
    border-radius: 0;
    color: #a8a098;
    background: #fff;
}

.tf-bracket-category-panel .tf-bracket-champion {
    border-color: #e7e2dc;
    border-radius: 0;
    background: #fcfbfa;
    box-shadow: none;
}

.tf-bracket-category-panel .tf-bracket-podium {
    border-top-color: #f0ece7;
    padding: 1.25rem;
}

.tf-bracket-category-panel .tf-bracket-medalist {
    border-radius: 0;
}

@media (max-width: 62rem) {
    .tf-bracket-management-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 42rem) {
    .tf-bracket-management-page {
        gap: 1rem;
        padding-block: 1.4rem 3.5rem;
    }

    .tf-bracket-management-heading h1 {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    .tf-bracket-management-meta {
        display: grid;
        gap: 0.2rem;
    }

    .tf-bracket-management-meta > span[aria-hidden] {
        display: none;
    }

    .tf-bracket-management-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .tf-bracket-management-actions form,
    .tf-bracket-management-actions button,
    .tf-bracket-management-actions .tf-print-action {
        width: 100%;
    }

    .tf-bracket-management-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .tf-bracket-management-stats > div {
        padding: 0.9rem;
    }

    .tf-bracket-management-stats span {
        overflow-wrap: anywhere;
    }

    .tf-bracket-category-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 1rem;
    }

    .tf-bracket-category-toolbar .tf-form-field {
        width: 100%;
        justify-content: space-between;
    }

    .tf-bracket-category-toolbar .tf-form-field select {
        min-width: 10rem;
    }

    .tf-bracket-category-panel > .tf-tournament-panel-collapse > .tf-tournament-panel-summary {
        display: grid;
        gap: 0.8rem;
        padding: 1rem;
    }

    .tf-bracket-category-panel .tf-tournament-panel-summary-meta {
        width: 100%;
        flex-wrap: wrap;
    }

    .tf-bracket-category-panel .tf-tournament-panel-summary-meta svg {
        margin-left: auto;
    }

    .tf-bracket-category-panel .tf-bracket-actions {
        align-items: stretch;
        flex-direction: column;
        margin: 0.85rem;
    }

    .tf-bracket-category-panel .tf-bracket-action-copy {
        margin: 0 0 0.35rem;
    }

    .tf-bracket-category-panel .tf-bracket-actions form,
    .tf-bracket-category-panel .tf-bracket-actions button {
        width: 100%;
    }

    .tf-bracket-category-panel .tf-bracket-swap,
    .tf-bracket-category-panel .tf-bracket-relocate,
    .tf-bracket-category-panel .tf-bracket-relocate-form {
        align-items: stretch;
        flex-direction: column;
    }

    .tf-bracket-category-panel .tf-bracket-swap .tf-form-field,
    .tf-bracket-category-panel .tf-bracket-relocate-form .tf-form-field {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    .tf-bracket-category-panel .tf-bracket-rounds-scroll {
        max-width: 100%;
        padding: 1rem;
    }}

@media print {
    .tf-bracket-management-back,
    .tf-bracket-management-actions,
    .tf-bracket-management-stats,
    .tf-bracket-category-toolbar {
        display: none !important;
    }}

/* ===== Resultados públicos ===== */
.tf-public-results-page {
    min-height: 100vh;
    padding-block: 1.4rem 4.5rem;
    background: #faf9f7;
}

.tf-public-results-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tf-public-results-back:hover {
    color: #a5151c;
}

.tf-public-results-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    padding-top: 2.5rem;
}

.tf-public-results-heading {
    min-width: 0;
}

.tf-public-results-kicker,
.tf-public-results-section-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--tf-red);
    font-family: var(--font-num);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-public-results-kicker > span,
.tf-public-results-section-title > span {
    width: 1.5rem;
    height: 0.22rem;
    flex: 0 0 auto;
    background: var(--tf-red);
}

.tf-public-results-kicker b {
    font: inherit;
}

.tf-public-results-heading h1 {
    max-width: 47rem;
    margin-top: 0.8rem;
    font-size: clamp(2.5rem, 4.2vw, 3.35rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.tf-public-results-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
    color: var(--tf-muted);
    font-size: 0.94rem;
}

.tf-public-results-meta strong {
    color: inherit;
    font-weight: 500;
}

.tf-public-results-hero-side {
    display: grid;
    justify-items: end;
    gap: 0.75rem;
}

.tf-public-results-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--tf-line);
    border-radius: 0.7rem;
    background: var(--tf-surface);
}

.tf-public-results-stats > div {
    display: flex;
    min-height: 4.4rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.8rem 1.1rem;
}

.tf-public-results-stats > div + div {
    border-left: 1px solid var(--tf-line);
}

.tf-public-results-stats dd {
    margin: 0;
    color: var(--tf-ink);
    font-family: var(--font-num);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}

.tf-public-results-stats dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-public-results-stats .is-primary {
    background: var(--tf-dark);
}

.tf-public-results-stats .is-primary dd {
    color: #fff;
}

.tf-public-results-actions {
    display: flex;
    gap: 0.55rem;
}

.tf-public-results-actions button,
.tf-public-results-publication a {
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tf-border);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    color: var(--tf-ink);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
}

.tf-public-results-actions button:hover:not(:disabled) {
    border-color: var(--tf-ink);
}

.tf-public-results-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.tf-public-results-ranking,
.tf-public-results-categories {
    margin-top: 2.2rem;
}

.tf-public-results-section-title {
    margin-bottom: 1rem;
}

.tf-public-results-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.tf-public-results-podium > article {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.7rem;
    background: var(--tf-surface);
}

.tf-public-results-podium-main {
    display: flex;
    min-height: 6.3rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.3rem 1rem;
}

.tf-public-results-podium-main > div:first-child {
    min-width: 0;
}

.tf-public-results-podium-main p {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-public-results-podium-main h3 {
    margin-top: 0.55rem;
    overflow-wrap: anywhere;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.tf-public-results-podium-main > div:first-child > span {
    display: block;
    margin-top: 0.35rem;
    color: var(--tf-faint);
    font-size: 0.73rem;
}

.tf-public-results-points {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
}

.tf-public-results-points strong {
    font-family: var(--font-num);
    font-size: 1.85rem;
    line-height: 1;
}

.tf-public-results-points span {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-public-results-podium > article > dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--tf-line);
}

.tf-public-results-podium > article > dl > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
}

.tf-public-results-podium > article > dl > div + div {
    border-left: 1px solid var(--tf-line);
}

.tf-public-results-podium dd {
    margin: 0;
    font-family: var(--font-num);
    font-size: 0.82rem;
    font-weight: 700;
}

.tf-public-results-podium dt {
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.48rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tf-public-results-podium > article.is-first {
    border-color: var(--tf-dark);
    color: #fff;
    background: var(--tf-dark);
}

.tf-public-results-podium > article.is-first .tf-public-results-podium-main p,
.tf-public-results-podium > article.is-first .tf-public-results-points strong {
    color: var(--tf-red-bright);
}

.tf-public-results-podium > article.is-first .tf-public-results-podium-main > div:first-child > span,
.tf-public-results-podium > article.is-first .tf-public-results-points span,
.tf-public-results-podium > article.is-first dt {
    color: #9c948c;
}

.tf-public-results-podium > article.is-first > dl,
.tf-public-results-podium > article.is-first > dl > div + div {
    border-color: #2a2521;
}

.tf-public-results-ranking-frame {
    overflow: hidden;
    margin-top: 0.9rem;
    border: 1px solid var(--tf-line);
    border-radius: 0.65rem;
    background: var(--tf-surface);
}

.tf-public-results-ranking-scroll {
    overflow-x: auto;
}

.tf-public-results-ranking-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    text-align: left;
}

.tf-public-results-ranking-table th {
    padding: 0.75rem 1.1rem;
    color: var(--tf-faint);
    background: #f5f2ee;
    font-family: var(--font-num);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tf-public-results-ranking-table td {
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--tf-line-soft);
    color: var(--tf-muted);
    font-size: 0.78rem;
}

.tf-public-results-ranking-table td:first-child,
.tf-public-results-ranking-table td:nth-child(n + 4) {
    font-family: var(--font-num);
}

.tf-public-results-ranking-table td:nth-child(2),
.tf-public-results-ranking-table td:last-child {
    color: var(--tf-ink);
    font-weight: 800;
}

.tf-public-results-ranking-table td:nth-child(n + 4),
.tf-public-results-ranking-table th:nth-child(n + 4) {
    text-align: right;
}

.tf-public-results-ranking-table tr.is-top-three td:first-child {
    color: var(--tf-red);
    font-weight: 800;
}

.tf-public-results-scoring {
    border-top: 1px solid var(--tf-line);
    padding: 0.75rem 1.1rem;
    color: var(--tf-faint);
    background: #faf9f7;
    font-family: var(--font-num);
    font-size: 0.57rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.tf-public-results-ranking-empty,
.tf-public-results-empty {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    border: 1px dashed var(--tf-border);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.tf-public-results-ranking-empty strong,
.tf-public-results-empty strong {
    font-size: 0.95rem;
    font-weight: 800;
}

.tf-public-results-ranking-empty p,
.tf-public-results-empty p {
    color: var(--tf-muted);
    font-size: 0.82rem;
}

.tf-public-results-filters {
    display: grid;
    gap: 0.8rem;
}

.tf-public-results-filters .tf-form-field {
    gap: 0;
}

.tf-public-results-search-control {
    position: relative;
}

.tf-public-results-filters .tf-form-search input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 2.9rem;
    border-color: var(--tf-line);
    border-radius: 999px;
    padding-right: 6rem;
    background: var(--tf-surface);
    font-size: 0.83rem;
}

.tf-public-results-search-control > button {
    position: absolute;
    top: 50%;
    right: 1rem;
    color: var(--tf-red);
    background: transparent;
    font-family: var(--font-num);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-50%);
}

.tf-public-results-belt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tf-public-results-belt-filters button {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--tf-line);
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--tf-ink);
    background: var(--tf-surface);
    font-size: 0.73rem;
    font-weight: 800;
}

.tf-public-results-belt-filters button > i,
.tf-public-results-card > header > i {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 0.13rem;
    background: #fff;
}

.tf-public-results-belt-filters button > b {
    min-width: 1.35rem;
    border-radius: 999px;
    padding: 0.15rem 0.35rem;
    color: var(--tf-muted);
    background: #f1efec;
    font-family: var(--font-num);
    font-size: 0.58rem;
    text-align: center;
}

.tf-public-results-belt-filters button.is-active {
    border-color: var(--tf-dark);
    color: #fff;
    background: var(--tf-dark);
}

.tf-public-results-belt-filters button.is-active > b {
    color: #fff;
    background: #332e2a;
}

.tf-public-results-belt-filters .is-all > i {
    border-color: #c4bcb5;
}

.tf-public-results-belt-filters .is-white > i,
.tf-public-results-card > header > i.is-white {
    border-color: #c4bcb5;
}

.tf-public-results-belt-filters .is-gray > i,
.tf-public-results-card > header > i.is-gray { background: #888; }
.tf-public-results-belt-filters .is-yellow > i,
.tf-public-results-card > header > i.is-yellow { background: #e4bb10; }
.tf-public-results-belt-filters .is-orange > i,
.tf-public-results-card > header > i.is-orange { background: #dd7b19; }
.tf-public-results-belt-filters .is-green > i,
.tf-public-results-card > header > i.is-green { background: #25804a; }
.tf-public-results-belt-filters .is-blue > i,
.tf-public-results-card > header > i.is-blue { background: #1e4fd8; }
.tf-public-results-belt-filters .is-purple > i,
.tf-public-results-card > header > i.is-purple { background: #6b3fa0; }
.tf-public-results-belt-filters .is-brown > i,
.tf-public-results-card > header > i.is-brown { background: #7a4a21; }
.tf-public-results-belt-filters .is-black > i,
.tf-public-results-card > header > i.is-black { background: #14110f; }

.tf-public-results-count {
    color: var(--tf-muted);
    font-family: var(--font-num);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-public-results-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.tf-public-results-card {
    overflow: hidden;
    border: 1px solid var(--tf-line);
    border-radius: 0.6rem;
    background: var(--tf-surface);
}

.tf-public-results-card > header {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
}

.tf-public-results-card > header > i {
    width: 0.45rem;
    height: 1.45rem;
    margin-top: 0.05rem;
}

.tf-public-results-card h3 {
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.15;
}

.tf-public-results-card header p {
    margin-top: 0.25rem;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tf-public-results-card ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-public-results-card li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    border-top: 1px solid var(--tf-line-soft);
    padding: 0.75rem 1rem;
}

.tf-public-results-medal {
    display: inline-flex;
    width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tf-ink);
    background: #c4bcb5;
    font-family: var(--font-num);
    font-size: 0.58rem;
    font-weight: 800;
}

.tf-public-results-card li.is-gold .tf-public-results-medal {
    background: #d2a900;
}

.tf-public-results-card li.is-bronze .tf-public-results-medal {
    color: #fff;
    background: #b08258;
}

.tf-public-results-card li > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.tf-public-results-card li strong {
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-public-results-card li small {
    overflow: hidden;
    color: var(--tf-faint);
    font-family: var(--font-num);
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-public-results-card li em {
    color: #a8a09a;
    font-family: var(--font-num);
    font-size: 0.52rem;
    font-style: normal;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.tf-public-results-card li.is-gold em {
    color: #bd9500;
}

.tf-public-results-empty {
    margin-top: 0.85rem;
}

.tf-public-results-publication {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    border-radius: 0.6rem;
    padding: 1rem 1.15rem;
    color: #fff;
    background: var(--tf-dark);
}

.tf-public-results-publication strong {
    font-size: 0.82rem;
    font-weight: 800;
}

.tf-public-results-publication a {
    min-height: 2.2rem;
    flex: 0 0 auto;
    border-color: #3a342f;
    color: #fff;
}

.tf-public-results-publication a:hover {
    border-color: #fff;
}

@media (max-width: 62rem) {
    .tf-public-results-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-public-results-hero-side {
        justify-items: start;
    }

    .tf-public-results-podium,
    .tf-public-results-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 42rem) {
    .tf-public-results-page {
        padding-block: 1.1rem 3rem;
    }

    .tf-public-results-hero {
        gap: 1.4rem;
        padding-top: 1.75rem;
    }

    .tf-public-results-heading h1 {
        font-size: clamp(2.15rem, 11vw, 2.8rem);
    }

    .tf-public-results-hero-side,
    .tf-public-results-stats,
    .tf-public-results-actions {
        width: 100%;
    }

    .tf-public-results-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tf-public-results-stats > div {
        min-height: 4rem;
        padding: 0.7rem;
    }

    .tf-public-results-stats dd {
        font-size: 1.25rem;
    }

    .tf-public-results-actions button {
        flex: 1 1 0;
    }

    .tf-public-results-podium,
    .tf-public-results-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-public-results-ranking-table {
        min-width: 40rem;
    }

    .tf-public-results-belt-filters {
        flex-wrap: nowrap;
        margin-inline: -1rem;
        overflow-x: auto;
        padding-inline: 1rem;
        scrollbar-width: none;
    }

    .tf-public-results-belt-filters::-webkit-scrollbar {
        display: none;
    }

    .tf-public-results-belt-filters button {
        flex: 0 0 auto;
    }

    .tf-public-results-publication {
        align-items: stretch;
        flex-direction: column;
    }}

@media print {
    .tf-public-results-back,
    .tf-public-results-actions,
    .tf-public-results-filters,
    .tf-public-results-publication {
        display: none !important;
    }

    .tf-public-results-page {
        padding: 0;
    }

    .tf-public-results-card {
        break-inside: avoid;
    }}