/* ---------------------------------------------------------------------------
   Lane by Athletica - painel administrativo em computador

   O painel desktop mantem a linguagem visual anterior, que continua adequada a
   gestao em ecra grande. Esta folha e independente da aplicacao mobile: os
   tokens abaixo traduzem a paleta atual para os nomes que o painel usa, para
   que a cor do clube continue a ser um unico token configuravel.
   --------------------------------------------------------------------------- */

:root {
    --brand-primary: var(--brand);
    --brand-primary-dark: var(--brand-ink);
    --brand-primary-soft: var(--brand-soft);

    --bg: #F6F8FB;
    --surface: #FFFFFF;
    --surface-muted: #F1F4F8;

    --text: #152033;
    --text-muted: #667085;
    --text-subtle: #98A2B3;
    --text-inverse: #FFFFFF;

    --border: #E4E7EC;
    --border-strong: #D0D5DD;

    --success: #16845B;
    --success-soft: #E7F6EF;
    --warning: #B7791F;
    --warning-soft: #FDF4E3;
    --danger: #D92D20;
    --danger-soft: #FEF0EF;
    --info: var(--brand);
    --info-soft: var(--brand-soft);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xs: 8px;
    --radius-full: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    --font-sans: var(--font);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 0.75rem;   --text-sm: 0.8125rem; --text-base: 0.9375rem;
    --text-md: 1rem;      --text-lg: 1.125rem;  --text-xl: 1.375rem;
    --text-2xl: 1.75rem;  --text-3xl: 2.125rem;

    --header-height: 60px;
    --bottom-nav-height: 0px;
    --sidebar-width: 252px;
    --content-max: 1180px;

    --duration: 160ms;
}
/* ---------------------------------------------------------------------------
   Lane by Athletica - aplicacao publica (PWA)
   Mobile-first. O desktop e uma versao centrada da mesma interface.
   --------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 650;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand-primary);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-5) 0;
}

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.icon {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--surface);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-sm) 0;
    box-shadow: var(--shadow-md);
}

.skip-link:focus {
    left: 0;
}

/* ---------------------------------------------------------------------------
   Estrutura
   --------------------------------------------------------------------------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height) + env(safe-area-inset-top));
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: var(--text);
    font-weight: 650;
}

.app-header__brand:hover { text-decoration: none; }

.app-header__logo {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--brand-primary-soft);
    flex: none;
}

.app-header__logo--fallback {
    display: grid;
    place-items: center;
    background: var(--brand-primary);
    color: var(--brand-contrast);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-header__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.app-header__title strong {
    font-size: var(--text-md);
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__title span {
    font-size: var(--text-xs);
    color: var(--text-subtle);
    font-weight: 500;
}

.app-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-main {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) calc(var(--bottom-nav-height) + var(--space-10));
}

.app-main--wide { max-width: var(--content-max); }

@media (min-width: 56.25rem) {
    .app-main {
        padding-bottom: var(--space-12);
    }
}

.page-head {
    margin-bottom: var(--space-5);
}

.page-head__eyebrow {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 650;
    color: var(--brand-primary);
    margin-bottom: var(--space-2);
}

.page-head p {
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.section {
    margin-top: var(--space-8);
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.section__head h2 {
    font-size: var(--text-lg);
}

.section__link {
    font-size: var(--text-sm);
    font-weight: 600;
}

.stack { display: grid; gap: var(--space-3); }
.stack-4 { display: grid; gap: var(--space-4); }
.stack-5 { display: grid; gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }

/* ---------------------------------------------------------------------------
   Navegacao inferior (mobile)
   --------------------------------------------------------------------------- */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--bottom-nav-height);
    color: var(--text-subtle);
    font-size: var(--text-xs);
    font-weight: 550;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.bottom-nav__item:hover { text-decoration: none; color: var(--text-muted); }

.bottom-nav__item[aria-current="page"] {
    color: var(--brand-primary);
}

.bottom-nav__item[aria-current="page"] .icon {
    stroke-width: 2.1;
}

@media (min-width: 56.25rem) {
    .bottom-nav { display: none; }
    .app-main { padding-bottom: var(--space-12); }
}

.top-nav {
    display: none;
    gap: var(--space-1);
}

@media (min-width: 56.25rem) {
    .top-nav { display: flex; }
}

.top-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 550;
    font-size: var(--text-sm);
}

.top-nav__item:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.top-nav__item[aria-current="page"] {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

/* ---------------------------------------------------------------------------
   Cartoes
   --------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: var(--space-4); }

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.card__head h2, .card__head h3 { font-size: var(--text-md); }

.card-link {
    display: block;
    color: inherit;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.card-link:hover {
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.card-link:active { transform: translateY(0); }

/* Cartao de competicao */
.competition-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--space-4);
    align-items: start;
}

.competition-card__date {
    display: grid;
    place-items: center;
    align-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    line-height: 1;
}

.competition-card__date strong {
    font-size: var(--text-xl);
    font-weight: 700;
}

.competition-card__date span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 650;
}

.competition-card__body { min-width: 0; }

.competition-card__body h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-1);
}

.competition-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.competition-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.competition-cover {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background: var(--surface-muted);
}

/* ---------------------------------------------------------------------------
   Botoes
   --------------------------------------------------------------------------- */

.btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--brand-primary);
    color: var(--brand-contrast);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease),
        color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.btn:hover { background: var(--brand-primary-dark); text-decoration: none; color: var(--brand-contrast); }
.btn:active { transform: scale(0.99); }

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn--secondary:hover { background: var(--surface-muted); color: var(--text); }

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.btn--ghost:hover { background: var(--surface-muted); color: var(--text); }

.btn--soft {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.btn--soft:hover { background: #dbe8ff; color: var(--brand-primary-dark); }

.btn--danger {
    background: var(--danger);
    color: #fff;
}

.btn--danger:hover { background: #b42318; }

.btn--danger-ghost {
    background: transparent;
    color: var(--danger);
    border-color: transparent;
}

.btn--danger-ghost:hover { background: var(--danger-soft); color: var(--danger); }

.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--lg { min-height: 52px; font-size: var(--text-md); }

.btn--icon {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
}

.btn--icon:hover { background: var(--surface-muted); color: var(--text); }

.btn.is-loading {
    color: transparent;
    position: relative;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    color: var(--brand-contrast);
    animation: spin 0.7s linear infinite;
}

.btn--secondary.is-loading::after,
.btn--ghost.is-loading::after { color: var(--text-muted); }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.btn-row--end { justify-content: flex-end; }

/* Barra de accao fixa em mobile */
.action-bar {
    position: sticky;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    z-index: 30;
    margin: var(--space-6) calc(var(--space-4) * -1) 0;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}

@media (min-width: 56.25rem) {
    .action-bar {
        position: static;
        margin: var(--space-6) 0 0;
        padding: 0;
        background: none;
        border: 0;
        backdrop-filter: none;
    }
}

/* ---------------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------------- */

/*
 * O atributo hidden tem de ganhar a qualquer display declarado por uma classe.
 * Sem isto, um .field escondido continuava a aparecer — display: grid é mais
 * específico do que a regra do próprio browser para [hidden] — e os campos de
 * alvo dos comunicados e das notificações mostravam-se todos ao mesmo tempo.
 */
[hidden] { display: none !important; }

.field {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.field__error {
    font-size: var(--text-xs);
    color: var(--danger);
    font-weight: 550;
}

.input,
.select,
.textarea {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 46px;
    padding: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.input-file {
    width: 100%;
    padding: var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: var(--text-sm);
}

.field-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 40rem) {
    .field-grid--2 { grid-template-columns: 1fr 1fr; }
    .field-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.checkbox,
.radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.checkbox input,
.radio input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--brand-primary);
    flex: none;
}

.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
}

.switch input {
    width: 44px;
    height: 26px;
    accent-color: var(--brand-primary);
    flex: none;
}

/* Campo de PIN */
.pin-input {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.pin-input input {
    width: 56px;
    height: 64px;
    text-align: center;
    font-size: var(--text-2xl);
    font-weight: 650;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-mono);
    -moz-appearance: textfield;
}

.pin-input input::-webkit-outer-spin-button,
.pin-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pin-input input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.pin-input input.is-filled {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

/* ---------------------------------------------------------------------------
   Chips e badges
   --------------------------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.chip--brand { background: var(--brand-primary-soft); color: var(--brand-primary); }
.chip--success { background: var(--success-soft); color: var(--success); }
.chip--warning { background: var(--warning-soft); color: var(--warning); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--outline { background: transparent; border: 1px solid var(--border-strong); }

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    display: grid;
    place-items: center;
    font-weight: 650;
    font-size: var(--text-sm);
    flex: none;
}

.avatar--lg { width: 52px; height: 52px; font-size: var(--text-md); }
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }

/* ---------------------------------------------------------------------------
   Alertas
   --------------------------------------------------------------------------- */

.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.alert .icon { margin-top: 1px; }
.alert strong { display: block; margin-bottom: 2px; }

.alert--info { background: var(--info-soft); border-color: #cfe0ff; color: #14417c; }
.alert--success { background: var(--success-soft); border-color: #bfe6d4; color: #10603f; }
.alert--warning { background: var(--warning-soft); border-color: #f2dfb8; color: #8a5a12; }
.alert--danger { background: var(--danger-soft); border-color: #f8cfcc; color: #a5231a; }

/* ---------------------------------------------------------------------------
   Listas
   --------------------------------------------------------------------------- */

.list {
    display: grid;
}

.list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    color: inherit;
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.list__item:last-child { border-bottom: 0; }
.list__item:hover { background: var(--surface-muted); text-decoration: none; }

.list__item--static { cursor: default; }
.list__item--static:hover { background: none; }

.list__body { min-width: 0; flex: 1; }

.list__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.list__chevron { color: var(--text-subtle); flex: none; }

/* ---------------------------------------------------------------------------
   Seleccao de provas
   --------------------------------------------------------------------------- */

.event-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.event-counter.is-full {
    background: var(--success-soft);
    color: var(--success);
}

.event-list { display: grid; gap: var(--space-3); }

.event-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.event-option:hover { border-color: var(--brand-primary); }

.event-option input {
    width: 22px;
    height: 22px;
    accent-color: var(--brand-primary);
    flex: none;
}

.event-option__body { flex: 1; min-width: 0; }

.event-option__name { font-weight: 600; }

.event-option__note {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.event-option.is-selected {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.event-option.is-blocked {
    opacity: 0.55;
    cursor: not-allowed;
}

.event-option.is-blocked:hover { border-color: var(--border-strong); }

.single-event {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--brand-primary-soft);
    border: 1px solid #cfe0ff;
}

.single-event__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 650;
    color: var(--brand-primary);
}

.single-event__name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
}

/* ---------------------------------------------------------------------------
   Estados vazios e carregamento
   --------------------------------------------------------------------------- */

.empty-state {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-5);
    color: var(--text-muted);
}

.empty-state__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--surface-muted);
    color: var(--text-subtle);
}

.empty-state__icon .icon { width: 24px; height: 24px; }

.empty-state h3 { color: var(--text); font-size: var(--text-md); }
.empty-state p { max-width: 42ch; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-muted) 25%, #e9edf3 37%, var(--surface-muted) 63%);
    background-size: 400% 100%;
    animation: skeleton 1.3s ease-in-out infinite;
    border-radius: var(--radius-xs);
}

@keyframes skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.skeleton--line { height: 12px; margin-bottom: var(--space-2); }
.skeleton--card { height: 96px; border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------------
   Modal e bottom sheet
   --------------------------------------------------------------------------- */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(16, 24, 40, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: fade var(--duration) var(--ease);
}

@media (min-width: 40rem) {
    .sheet-backdrop { align-items: center; padding: var(--space-5); }
}

.sheet {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-lg);
    animation: sheet-up 220ms var(--ease);
}

@media (min-width: 40rem) {
    .sheet { border-radius: var(--radius-lg); animation: fade var(--duration) var(--ease); }
}

.sheet__handle {
    width: 40px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    margin: 0 auto var(--space-4);
}

@media (min-width: 40rem) { .sheet__handle { display: none; } }

.sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@keyframes sheet-up {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

/* ---------------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------------- */

.toast-region {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom));
    z-index: 80;
    display: grid;
    gap: var(--space-2);
    width: min(92vw, 460px);
    pointer-events: none;
}

@media (min-width: 56.25rem) {
    .toast-region { bottom: var(--space-6); }
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: #101828;
    color: #fff;
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    animation: sheet-up 200ms var(--ease);
    pointer-events: auto;
}

.toast--success { background: #10603f; }
.toast--error { background: #a5231a; }

/* ---------------------------------------------------------------------------
   Entrada / seleccao de atleta
   --------------------------------------------------------------------------- */

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-content: start;
    padding: var(--space-8) var(--space-4) var(--space-10);
    max-width: 460px;
    margin: 0 auto;
}

.auth-brand {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.auth-brand__logo {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.auth-brand__logo--fallback {
    display: grid;
    place-items: center;
    background: var(--brand-primary);
    color: var(--brand-contrast);
    font-size: var(--text-xl);
    font-weight: 700;
}

.auth-brand p { color: var(--text-muted); }

.athlete-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.athlete-option:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.athlete-option__body { flex: 1; min-width: 0; }
.athlete-option__name { font-weight: 600; }
.athlete-option__meta { font-size: var(--text-sm); color: var(--text-muted); }

.guest-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    border: 1px solid #f2dfb8;
    color: #8a5a12;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* Barra de administrador na app publica */
.admin-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #101828;
    color: #fff;
    font-size: var(--text-sm);
}

.admin-bar a { color: #fff; font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Detalhe de competicao
   --------------------------------------------------------------------------- */

.detail-hero {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: var(--space-5);
}

.detail-hero__body { padding: var(--space-5); }

.detail-meta {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.detail-meta__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.detail-meta__row .icon { color: var(--text-subtle); margin-top: 1px; }
.detail-meta__row strong { display: block; font-weight: 600; }
.detail-meta__row span { color: var(--text-muted); }

/* --- Marca Lane ----------------------------------------------------------- */

.lane-logo { height: 24px; width: auto; display: block; }
.admin-brand__lane { height: 13px; margin-top: 4px; color: var(--text-muted); }

.lane-band {
    display: grid;
    place-items: center;
    background: #0B0B0D;
    color: #EEECDF;
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-bottom: var(--space-5);
}
.lane-band .lane-logo { height: 28px; }
.lane-band__sub {
    margin-top: 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #8A8A93;
}

.pin-reveal {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
    padding: var(--space-5);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    border-radius: var(--radius-sm);
}

/* Impressao simples de listas */
@media print {
    .app-header, .bottom-nav, .action-bar, .btn, .toast-region { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
}
/* ---------------------------------------------------------------------------
   Lane by Athletica - painel administrativo
   Carrega depois de tokens.css e app.css: reutiliza botoes, inputs,
   cartoes, chips e alertas da aplicacao publica.
   --------------------------------------------------------------------------- */

.admin-body {
    background: var(--bg);
}

.admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-width: 64rem) {
    .admin-layout {
        grid-template-columns: var(--sidebar-width) 1fr;
    }
}

/* --- Sidebar ------------------------------------------------------------- */

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 300px);
    z-index: 70;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    transform: translateX(-102%);
    transition: transform 220ms var(--ease);
    overflow-y: auto;
}

.admin-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

@media (min-width: 64rem) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        width: auto;
        transform: none;
        box-shadow: none;
    }
}

.admin-sidebar__backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(16, 24, 40, 0.4);
    animation: fade var(--duration) var(--ease);
}

@media (min-width: 64rem) {
    .admin-sidebar__backdrop { display: none; }
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
    min-width: 0;
}

.admin-brand:hover { text-decoration: none; }

.admin-brand__mark {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary);
    color: var(--brand-contrast);
    display: grid;
    place-items: center;
    font-weight: 700;
    flex: none;
    object-fit: cover;
}

.admin-brand__text { min-width: 0; line-height: 1.2; }
.admin-brand__text strong { display: block; font-size: var(--text-md); font-weight: 650; }
.admin-brand__text span { font-size: var(--text-xs); color: var(--text-subtle); }

.admin-nav {
    display: grid;
    gap: 2px;
}

.admin-nav__group {
    margin-top: var(--space-4);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 650;
    color: var(--text-subtle);
    margin-bottom: var(--space-2);
}

.admin-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 550;
    font-size: var(--text-base);
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.admin-nav__item:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.admin-nav__item[aria-current="page"] {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 600;
}

.admin-nav__item .icon { color: currentColor; }

.admin-nav__count {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--text-subtle);
}

.admin-sidebar__footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    display: grid;
    gap: var(--space-3);
}

.admin-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.admin-user__body { min-width: 0; line-height: 1.25; }
.admin-user__body strong { display: block; font-size: var(--text-sm); }
.admin-user__body span {
    font-size: var(--text-xs);
    color: var(--text-subtle);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Topbar e conteudo --------------------------------------------------- */

.admin-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding: 0 var(--space-4);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 64rem) {
    .admin-topbar { padding: 0 var(--space-8); }
    .admin-topbar__toggle { display: none; }
}

.admin-topbar__title {
    font-size: var(--text-md);
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-content {
    flex: 1;
    padding: var(--space-6) var(--space-4) var(--space-12);
    max-width: var(--content-max);
    width: 100%;
}

@media (min-width: 64rem) {
    .admin-content { padding: var(--space-8); }
}

.admin-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.admin-page-head h1 { font-size: var(--text-2xl); }
.admin-page-head p { color: var(--text-muted); margin-top: var(--space-1); }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.breadcrumb .icon { width: 14px; height: 14px; }

/* --- Metricas ------------------------------------------------------------ */

.stat-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: var(--space-8);
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-2);
}

.stat-card__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 550;
}

.stat-card__label .icon { width: 18px; height: 18px; color: var(--brand-primary); }

.stat-card__value {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-card__hint { font-size: var(--text-xs); color: var(--text-subtle); }

.admin-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 64rem) {
    .admin-grid--2 { grid-template-columns: 3fr 2fr; align-items: start; }
}

/* --- Filtros ------------------------------------------------------------- */

.filters {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
    .filters { grid-template-columns: 2fr repeat(3, 1fr) auto; align-items: end; }
}

.filters .field { margin-bottom: 0; }

.search-field { position: relative; }

.search-field .icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
}

.search-field .input { padding-left: var(--space-10); }

/* --- Tabelas ------------------------------------------------------------- */

.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.table-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.table-card__head h2 { font-size: var(--text-md); }

.table-wrap { width: 100%; overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.table th {
    text-align: left;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 650;
    color: var(--text-subtle);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-muted); }

.table__primary { font-weight: 600; }
.table__sub { font-size: var(--text-sm); color: var(--text-muted); }
.table__actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.table td:last-child { text-align: right; }

/* --- Provas agrupadas ---------------------------------------------------- */

.group-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.group-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.group-card__head h3 { font-size: var(--text-base); }

.limit-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.limit-control .select {
    min-height: 36px;
    padding: var(--space-1) var(--space-6) var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    width: auto;
}

.prova-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.prova-row:last-child { border-bottom: 0; }
.prova-row__body { flex: 1; min-width: 0; }
.prova-row__name { font-weight: 600; }
.prova-row__note { font-size: var(--text-sm); color: var(--text-muted); }

/* --- Diversos ------------------------------------------------------------ */

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    max-width: 760px;
}

.form-card + .form-card { margin-top: var(--space-5); }

.form-section-title {
    font-size: var(--text-md);
    font-weight: 650;
    margin: var(--space-6) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.form-section-title:first-child { margin-top: 0; }

.form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

.form-actions--split { justify-content: space-between; }

.file-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.file-preview img {
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-xs);
}

.admin-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
}

.admin-login__card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.admin-login__brand {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.quick-actions {
    display: grid;
    gap: var(--space-2);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 550;
    font-size: var(--text-sm);
}

.quick-action:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    text-decoration: none;
}

.quick-action .icon { color: var(--brand-primary); }
.quick-action .chevron { margin-left: auto; color: var(--text-subtle); }

.color-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.color-field input[type="color"] {
    width: 52px;
    height: 46px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

.pagination {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-5);
}

/* Escolha multipla compacta (escaloes e generos ao criar uma prova). */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2) var(--space-3);
}

.check-grid .checkbox { align-items: center; gap: var(--space-2); }

/* Escolha entre alternativas (periodicidade da quota, por exemplo).
   Cartoes lado a lado em ecra largo, empilhados em mobile. */
.choice-row {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

@media (min-width: 40rem) {
    .choice-row { grid-template-columns: 1fr 1fr; }
}

.choice {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--surface);
    transition: border-color .15s ease, background .15s ease;
}

.choice:hover { border-color: var(--brand-primary); }

.choice:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft, var(--surface-muted));
}

/* --- Area Website -------------------------------------------------------- */
/* Publicacoes do WordPress, listadas e editadas a partir da Lane. */

.website-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.website-row__thumb {
    width: 52px;
    height: 38px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-muted);
}

.website-row__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.website-row__thumb--empty svg { width: 18px; height: 18px; }

.website-preview {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.website-preview img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* Campo de texto longo: escrever uma noticia precisa de espaco. */
.input--tall {
    min-height: 340px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.65;
}

/* ===========================================================================
   Estrelas do Marco — identidade do painel (Lane 1.5.0)

   Camada final: as mesmas páginas e os mesmos componentes, com a identidade
   do clube. A sidebar usa o azul-marinho e o amarelo do website; o conteúdo
   fica claro, com menos sombras, raios mais contidos e uma hierarquia de
   texto mais firme. Nada aqui muda a estrutura das páginas.
   =========================================================================== */

:root {
    --club-navy: #0A2547;
    --club-navy-line: rgba(255, 255, 255, 0.08);
    --club-yellow: #F5D40C;

    --bg: #F3F5F9;
    --surface-muted: #F6F8FB;
    --border: #E2E6ED;
    --border-strong: #CDD4DF;
    --text: #0E1A2B;
    --text-muted: #566275;
    --text-subtle: #8792A3;

    --radius-xs: 7px;
    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgba(10, 37, 71, 0.05);

    --sidebar-width: 264px;
    --header-height: 64px;
    --content-max: 1280px;
}

.admin-body { background: var(--bg); color: var(--text); }

.admin-body h1,
.admin-body h2,
.admin-body h3 { font-weight: 700; letter-spacing: -0.02em; }

/* --- Sidebar ------------------------------------------------------------- */

.admin-sidebar {
    background: var(--club-navy);
    border-right: 0;
    color: #fff;
    padding: 20px 14px 16px;
    gap: 18px;
}

.admin-brand {
    color: #fff;
    gap: 12px;
    padding: 2px 8px 18px;
    border-bottom: 1px solid var(--club-navy-line);
}

.admin-brand:hover { text-decoration: none; }

.admin-brand__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: none;
}

.admin-brand__text strong {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.admin-brand__text span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.admin-nav { gap: 1px; }

.admin-nav__group {
    margin: 16px 0 6px;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.38);
}

.admin-nav__item {
    position: relative;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 550;
}

.admin-nav__item .icon { width: 18px; height: 18px; opacity: 0.85; }

.admin-nav__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.admin-nav__item[aria-current="page"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 650;
}

/* O acento amarelo é o mesmo do header do website. */
.admin-nav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--club-yellow);
}

.admin-nav__item[aria-current="page"] .icon { color: var(--club-yellow); opacity: 1; }

.admin-sidebar__footer {
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--club-navy-line);
}

.admin-user { gap: 10px; padding: 0 4px; }

.admin-user__avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.admin-user__body { flex: 1; }
.admin-user__body strong { color: #fff; font-size: 13px; }
.admin-user__body span { color: rgba(255, 255, 255, 0.5); }

/* Terminar sessão é um botão dentro de um formulário (ver admin/logout.php),
   e não uma ligação: o aspeto tem de ser o mesmo de sempre. */
.admin-user__sair { display: flex; flex: none; margin: 0; }

.admin-user__logout {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.admin-user__logout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.admin-user__logout .icon { width: 18px; height: 18px; }

.admin-sidebar__lane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 0;
    color: #EEECDF;
}

.admin-sidebar__lane .lane-logo { height: 12px; opacity: 0.7; }

.admin-sidebar__lane span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    font-variant-numeric: tabular-nums;
}

.admin-sidebar__backdrop { background: rgba(10, 37, 71, 0.55); }

/* --- Topbar -------------------------------------------------------------- */

.admin-topbar {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border);
}

.admin-topbar__title { font-size: 15px; font-weight: 650; color: var(--text); }

.admin-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.admin-topbar__link:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }

@media (max-width: 40rem) {
    .admin-topbar__link span { display: none; }
}

/* --- Conteúdo ------------------------------------------------------------ */

.admin-content { margin: 0 auto; padding: 28px 20px 64px; }

@media (min-width: 64rem) {
    .admin-content { padding: 34px 40px 72px; }
}

.admin-page-head {
    align-items: flex-end;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.admin-page-head h1 { font-size: 26px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.admin-page-head p { margin-top: 6px; font-size: 14px; }

.breadcrumb { gap: 6px; margin-bottom: 10px; font-size: 13px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-primary); }
.breadcrumb .icon { width: 14px; height: 14px; color: var(--text-subtle); }

/* --- Métricas ------------------------------------------------------------ */

.stat-grid { gap: 16px; margin-bottom: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat-card {
    gap: 4px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.stat-card__label { gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); }

.stat-card__label .icon {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.stat-card__value {
    margin-top: 8px;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.stat-card__hint { font-size: 12.5px; color: var(--text-subtle); }

/* --- Superfícies --------------------------------------------------------- */

.card,
.table-card,
.form-card,
.filters,
.group-card {
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.card__head h2,
.card__head h3,
.table-card__head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.table-card__head { padding: 15px 20px; }

.table th {
    padding: 10px 20px;
    background: var(--surface-muted);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--text-subtle);
}

.table td { padding: 13px 20px; font-size: 14px; }
.table tbody tr:hover { background: #F8FAFD; }
.table__primary { font-weight: 650; color: var(--text); }
.table__sub { font-size: 12.5px; }

/* --- Botões, campos e etiquetas ------------------------------------------ */

.btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 650;
}

.btn .icon { width: 17px; height: 17px; }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn--sm .icon { width: 15px; height: 15px; }
.btn--lg { min-height: 48px; font-size: 15px; }
.btn--icon { width: 40px; padding: 0; }
.btn--secondary { border-color: var(--border-strong); }

.input,
.select,
.textarea {
    min-height: 42px;
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
}

.chip { padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 650; }

.alert { border-radius: 10px; }

.empty-state { padding: 44px 24px; }
.empty-state__icon { background: var(--brand-primary-soft); color: var(--brand-primary); }

/* --- Ações rápidas ------------------------------------------------------- */

.quick-actions { gap: 8px; }

.quick-action {
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.quick-action > .icon:first-child {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.quick-action .chevron { width: 16px; height: 16px; transition: transform var(--duration) var(--ease); }

.quick-action:hover { background: #fff; border-color: var(--brand-primary); color: var(--text); }
.quick-action:hover .chevron { color: var(--brand-primary); transform: translateX(2px); }

/* --- Entrada no painel --------------------------------------------------- */

.admin-login {
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(13, 78, 166, 0.55), transparent 70%),
        var(--club-navy);
    align-content: center;
    gap: 22px;
}

.admin-login__card {
    border: 0;
    border-radius: var(--radius-lg);
    padding: 36px 32px 30px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.admin-login__logo { width: 92px; height: 92px; object-fit: contain; }

.admin-login__lane {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.admin-login__lane .lane-logo { height: 12px; color: #EEECDF; }
.admin-login .text-muted a { color: var(--brand-primary); }

/* ===========================================================================
   Lane Club (2.0)

   Camada de trabalho em computador: mais informação por ecrã, menos
   decoração. Números em linha em vez de cartões grandes, painéis com
   cabeçalho e listas densas, separadores e listas de chave/valor.
   =========================================================================== */

.surface-club { --club-accent: var(--brand-primary); }

.admin-brand__product { display: block; margin-top: 4px; color: rgba(255, 255, 255, .78); font-size: 13px; }
.admin-brand__product .product-logo { font-size: 13px; }
.admin-login__product { font-size: 30px; color: var(--club-navy); margin: 0; line-height: 1; }
.admin-login__product .product-logo { font-size: clamp(24px, 7.5vw, 30px); }

/*
 * O login num telemóvel pequeno transbordava 68px a 320px. A grelha tinha uma
 * coluna de largura automática, e o logótipo "LANE club" (que não quebra) a
 * 30px, mais o recuo do cartão, dava 368px — a coluna crescia e empurrava a
 * página para o lado. Agora a coluna tem teto e pode encolher, e o logótipo e
 * o recuo acompanham o espaço.
 */
.admin-login { grid-template-columns: minmax(0, 420px); justify-content: center; }
.admin-login__card { min-width: 0; padding: clamp(24px, 7vw, 36px) clamp(18px, 6vw, 32px) clamp(22px, 6vw, 30px); }

/* --- Pesquisa ------------------------------------------------------------- */

.club-search { position: relative; flex: 1; max-width: 520px; min-width: 0; }
.club-search > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.club-search input {
    width: 100%; height: 40px; padding: 0 70px 0 38px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted);
    font: inherit; font-size: 14px; color: var(--text);
}
.club-search input:focus { outline: none; border-color: var(--brand-primary); background: #fff; box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.club-search__kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font: 600 11px/1 var(--font-mono); color: var(--text-subtle);
    border: 1px solid var(--border); border-radius: 5px; padding: 3px 5px; background: #fff;
}
.club-search__results {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 40px -12px rgba(10, 37, 71, .28); padding: 6px; max-height: 70vh; overflow-y: auto;
}
.club-search__group { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.club-search__item { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.club-search__item strong { font-size: 14px; font-weight: 650; }
.club-search__item span { font-size: 12.5px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.club-search__item:hover, .club-search__item[aria-selected="true"] { background: var(--brand-primary-soft); text-decoration: none; }
.club-search__empty { padding: 14px 12px; font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 45rem) {
    .club-search__kbd { display: none; }
    .club-search input { padding-right: 12px; }
    .admin-topbar__actions .admin-topbar__link { padding: 0 8px; }

    /*
     * Num telemóvel a barra tem três coisas a disputar a mesma linha: o menu,
     * a pesquisa e a ação principal da página. Quem cede é a PESQUISA — um
     * campo mais estreito continua a funcionar, mas um botão cortado ao meio
     * ("Registar resultad") não diz o que faz.
     *
     * A pesquisa encolhe até 88 px; o botão fica com a largura que o seu
     * texto precisa.
     */
    .club-search { flex: 1 1 88px; min-width: 88px; }
    .admin-topbar__actions { flex: 0 0 auto; min-width: 0; }
    .admin-topbar__actions > .btn { flex: none; white-space: nowrap; }

    /* As páginas com dois botões no topo não cabem numa linha: o secundário
       fica só com o ícone, que é o que sobra quando o espaço acaba. */
    .admin-topbar__actions > .btn + .btn span { display: none; }
}

/* Ecrãs muito estreitos: a pesquisa sai da barra. Está sempre a um toque no
   menu, e o que interessa aqui é ver a ação da página. */
@media (max-width: 24rem) {
    .club-search { display: none; }
}

/* --- Números em linha ----------------------------------------------------- */

.figures {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 24px; overflow: hidden;
}
.figure { padding: 14px 18px 15px; border-right: 1px solid var(--border); min-width: 0; }
.figure:last-child { border-right: 0; }
.figure__label { display: block; font-size: 12px; font-weight: 650; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure__value { display: block; margin-top: 4px; font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--text); }
.figure__hint { display: block; margin-top: 2px; font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.figure { color: inherit; text-decoration: none; }
a.figure:hover { background: var(--surface-muted); text-decoration: none; }

@media (max-width: 45rem) {
    .figures { grid-template-columns: 1fr 1fr; }
    .figure:nth-child(2n) { border-right: 0; }
    .figure { border-bottom: 1px solid var(--border); }
}

/* --- Painéis -------------------------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.panel + .panel { margin-top: 20px; }
.panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); min-height: 50px; }
.panel__head h2 { font-size: 14.5px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.panel__head .panel__count { font-size: 12.5px; font-weight: 650; color: var(--text-subtle); }
.panel__head > :last-child:not(h2) { margin-left: auto; }
.panel__body { padding: 16px; }
.panel__empty { padding: 22px 16px; font-size: 13.5px; color: var(--text-muted); }

.lines { display: grid; }
.line {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0;
}
.line:last-child { border-bottom: 0; }
a.line:hover { background: #F8FAFD; text-decoration: none; }
.line__main { flex: 1; min-width: 0; }
.line__title { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line__meta { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line__aside { flex: none; font-size: 13px; font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.line__date { flex: none; width: 52px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); line-height: 1.2; }
.line__date strong { display: block; font-size: 15px; color: var(--text); }
.line--alert .line__title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); margin-right: 8px; vertical-align: 2px; }

/* --- Disposição ----------------------------------------------------------- */

.split { display: grid; gap: 20px; align-items: start; }
@media (min-width: 68.75rem) {
    .split { grid-template-columns: minmax(0, 1fr) 360px; }
    .split--wide-aside { grid-template-columns: minmax(0, 1fr) 420px; }
}

.cols-2 { display: grid; gap: 20px; }
@media (min-width: 56.25rem) { .cols-2 { grid-template-columns: 1fr 1fr; } }

/* --- Separadores ---------------------------------------------------------- */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: -6px 0 22px; overflow-x: auto; }
.tabs a {
    padding: 10px 14px; font-size: 14px; font-weight: 650; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.tabs .tabs__count { font-weight: 600; color: var(--text-subtle); margin-left: 4px; }

/* --- Chave / valor -------------------------------------------------------- */

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.kv dt { color: var(--text-muted); font-weight: 600; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* --- Tabelas mais densas em ecrã largo ------------------------------------ */

@media (min-width: 80rem) {
    .table--dense td { padding-top: 9px; padding-bottom: 9px; }
    .table--dense th { padding-top: 8px; padding-bottom: 8px; }
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Escolhas em lista (atletas de um grupo, permissões) ------------------ */

.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; }
.check-list label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.check-list label:hover { background: var(--surface-muted); }
.check-list input { width: 18px; height: 18px; accent-color: var(--brand-primary); flex: none; }
.check-list small { color: var(--text-subtle); margin-left: auto; font-size: 12px; }
.check-group { margin-top: 16px; }
.check-group:first-child { margin-top: 0; }
.check-group__title { font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 6px 8px; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-muted); color: var(--text-muted); white-space: nowrap; }
.pill--brand { background: var(--brand-primary-soft); color: var(--brand-primary); }
.pill--ok { background: var(--success-soft); color: var(--success); }
.pill--warn { background: var(--warning-soft); color: var(--warning); }
.pill--danger { background: var(--danger-soft); color: var(--danger); }
.pill-row { display: flex; flex-wrap: wrap; gap: 4px; }

.meter { height: 6px; border-radius: 3px; background: var(--surface-muted); overflow: hidden; min-width: 60px; }
.meter > span { display: block; height: 100%; background: var(--brand-primary); border-radius: 3px; }
.meter--warn > span { background: var(--warning); }

.admin-brand__text .admin-brand__product .product-logo,
.admin-brand__text .admin-brand__product .product-logo__suffix { display: inline-flex; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
.admin-brand__text .admin-brand__product .product-logo .lane-logo { height: 11px; color: #EEECDF; }

/* ===========================================================================
   SISTEMA VISUAL DA LANE CLUB  (2.0.1)
   ===========================================================================

   Porque existe esta secção
   -------------------------
   Esta folha carrega a folha da PWA e acrescenta o painel por cima. Os
   controlos herdados eram os do telemóvel: 44-46 px de altura e letra de
   16 px, feitos para o polegar. Num ecrã grande, com rato, ficavam grandes,
   desalinhados entre si e davam à aplicação um ar improvisado.

   Aqui define-se UMA escala para tudo o que é Lane Club. Está toda presa a
   .surface-club, a classe do body do painel: a PWA e a Lane Coach não são
   tocadas por nada do que está abaixo.

   A escala
   --------
   Controlos    32 / 38 / 44 px de altura — sm, normal, lg. Botões, campos,
                selects e pesquisas partilham-na, por isso alinham sempre.
   Letra        12.5 px auxiliar · 13.5 px corpo · 14 px controlos · 22 px H1.
   Raios        8 controlos · 12 cartões · 14 superfícies grandes.
   Ritmo        4 / 8 / 12 / 16 / 20 / 28 px. Nada fora disto.
   =========================================================================== */

.surface-club {
    --ctl-h: 38px;
    --ctl-h-sm: 32px;
    --ctl-h-lg: 44px;
    --ctl-r: 8px;
    --ctl-px: 12px;
    --ctl-font: 14px;

    --card-r: 12px;
    --surface-r: 14px;

    --gap-block: 20px;
    --gap-section: 28px;

    --focus-ring: 0 0 0 3px var(--brand-primary-soft);
}

/* --- Tipografia ----------------------------------------------------------- */

.surface-club h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.surface-club h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.surface-club h3 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

/* Cabeçalho de página: título, uma linha de contexto e as ações à direita. */
.surface-club .admin-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: var(--gap-block);
}
.surface-club .admin-page-head > div { min-width: 0; }
.surface-club .admin-page-head h1 { margin: 0; }
.surface-club .admin-page-head p {
    margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted);
    line-height: 1.45; max-width: 68ch;
}
.surface-club .admin-page-head form { margin: 0; }

/* --- Controlos: uma só altura --------------------------------------------- */

.surface-club .btn,
.surface-club .input,
.surface-club .select,
.surface-club .search-field input,
.surface-club .club-search input {
    min-height: var(--ctl-h);
    height: var(--ctl-h);
    border-radius: var(--ctl-r);
    font-size: var(--ctl-font);
}

.surface-club .textarea {
    min-height: 96px;
    height: auto;
    border-radius: var(--ctl-r);
    font-size: var(--ctl-font);
    padding: 9px var(--ctl-px);
    line-height: 1.5;
}

.surface-club .input,
.surface-club .select,
.surface-club .search-field input {
    padding: 0 var(--ctl-px);
    border-color: var(--border-strong);
}

/* A seta do select desenhada uma vez, em todo o painel: antes cada página
   resolvia isto à sua maneira e havia selects com e sem indicador. */
.surface-club .select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23667085%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

.surface-club .input:focus,
.surface-club .select:focus,
.surface-club .textarea:focus,
.surface-club .search-field input:focus,
.surface-club .club-search input:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--focus-ring);
}

.surface-club .input::placeholder,
.surface-club .textarea::placeholder { color: var(--text-subtle); }

.surface-club .input:disabled,
.surface-club .select:disabled,
.surface-club .textarea:disabled {
    background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed;
}

/* Campos numéricos e de data não precisam da largura toda: um ano ou um valor
   em euros num campo de 600 px é o que faz um formulário parecer cru. */
.surface-club .input[type="date"],
.surface-club .input[type="time"] { max-width: 200px; }
.surface-club .input--num { max-width: 160px; text-align: right; font-variant-numeric: tabular-nums; }
.surface-club .input--short { max-width: 280px; }

/* --- Botões --------------------------------------------------------------- */

.surface-club .btn {
    padding: 0 16px;
    font-weight: 600;
    gap: 7px;
    white-space: nowrap;
    box-shadow: none;
}
.surface-club .btn .icon { width: 16px; height: 16px; }
.surface-club .btn--sm { min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 11px; font-size: 13px; border-radius: 7px; }
.surface-club .btn--sm .icon { width: 14px; height: 14px; }
.surface-club .btn--lg { min-height: var(--ctl-h-lg); height: var(--ctl-h-lg); padding: 0 20px; font-size: 15px; }
.surface-club .btn--icon { width: var(--ctl-h); height: var(--ctl-h); padding: 0; }
.surface-club .btn--block { width: 100%; }

/* Hierarquia: uma ação principal cheia, o resto discreto. */
.surface-club .btn--secondary { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
.surface-club .btn--secondary:hover { background: var(--surface-muted); }
.surface-club .btn--ghost { background: transparent; border: 1px solid transparent; color: var(--text-muted); }
.surface-club .btn--ghost:hover { background: var(--surface-muted); color: var(--text); }
.surface-club .btn--danger-ghost { background: transparent; border: 1px solid transparent; color: var(--danger); }
.surface-club .btn--danger-ghost:hover { background: var(--danger-soft); }

.surface-club .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/*
 * A enviar. Existia só na folha da PWA: na filiação e na Lane Club, escolher
 * uma fotografia não mudava nada no ecrã durante o envio — e num telemóvel,
 * com uma foto de vários MB, são segundos de silêncio em que a pessoa volta a
 * tocar. O botão fica com o rótulo que o JavaScript lhe der ("A enviar…") e
 * uma roda na cor do próprio texto, para servir botões cheios e discretos.
 */
.surface-club .btn.is-busy { pointer-events: none; opacity: .85; }
.surface-club .btn.is-busy::before {
    content: ""; flex: none; width: 15px; height: 15px;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: spin .7s linear infinite;
}
.surface-club .btn.is-busy .icon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Barra de ações de um formulário: principal à direita, secundárias à
   esquerda, separada do conteúdo por uma linha. */
.surface-club .form-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.surface-club .form-actions__end { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Campos e grelhas de formulário --------------------------------------- */

.surface-club .field { gap: 6px; margin-bottom: 16px; }
.surface-club .field__label { font-size: 13px; font-weight: 600; color: var(--text); }
.surface-club .field__hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.surface-club .field__error { font-size: 12.5px; font-weight: 600; color: var(--danger); }

/* Uma grelha só para os formulários todos. As colunas colapsam sozinhas. */
.surface-club .field-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 45rem) {
    .surface-club .field-grid--2 { grid-template-columns: 1fr 1fr; }
    .surface-club .field-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .surface-club .field-grid--2-1 { grid-template-columns: 2fr 1fr; }
    .surface-club .field-grid--1-2 { grid-template-columns: 1fr 2fr; }
    .surface-club .field--full { grid-column: 1 / -1; }
}

/* Secção dentro de um formulário longo: dá-lhe ritmo sem partir em cartões. */
.surface-club .form-section { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.surface-club .form-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.surface-club .form-section__head { margin-bottom: 14px; }
.surface-club .form-section__head h2 { margin: 0; }
.surface-club .form-section__head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }

.surface-club .checkbox,
.surface-club .check-list label {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.45; cursor: pointer;
}
.surface-club .checkbox input[type="checkbox"],
.surface-club .checkbox input[type="radio"],
.surface-club .check-list input {
    width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--brand-primary);
}
.surface-club .checkbox span small,
.surface-club .checkbox__hint { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* Interruptor em linha: rótulo à esquerda, caixa à direita, como nas
   definições. Substitui as checkboxes soltas no meio do formulário. */
.surface-club .switch-row {
    display: flex; align-items: center; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.surface-club .switch-row:last-child { border-bottom: 0; }
.surface-club .switch-row__body { flex: 1; min-width: 0; }
.surface-club .switch-row__body strong { display: block; font-size: 13.5px; font-weight: 600; }
.surface-club .switch-row__body span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.surface-club .switch-row input { flex: none; width: 17px; height: 17px; accent-color: var(--brand-primary); }

/* --- Cartões e superfícies ------------------------------------------------ */

.surface-club .form-card,
.surface-club .table-card,
.surface-club .panel,
.surface-club .figures {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-r);
    box-shadow: var(--shadow-xs);
}

.surface-club .form-card { padding: 20px; margin-bottom: var(--gap-block); }
.surface-club .form-card > h2:first-child { margin: 0 0 16px; }
.surface-club .panel + .panel { margin-top: var(--gap-block); }
.surface-club .panel__head { padding: 0 16px; min-height: 46px; }
.surface-club .panel__body { padding: 16px; }

/* --- Tabelas: uma só densidade -------------------------------------------- */

.surface-club .table-card { margin-bottom: var(--gap-block); overflow: hidden; }
.surface-club .table-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px; min-height: 46px; border-bottom: 1px solid var(--border);
}
.surface-club .table-card__head h2 { margin: 0; }
.surface-club .table-card__head > :last-child:not(h2) { margin-left: auto; }

.surface-club .table { font-size: 13.5px; }
.surface-club .table th {
    padding: 9px 14px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-subtle); background: var(--surface-muted);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.surface-club .table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.surface-club .table tbody tr:last-child td { border-bottom: 0; }
.surface-club .table tbody tr:hover { background: #F9FAFC; }
.surface-club .table__primary { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.surface-club .table__sub { display: block; font-size: 12.5px; color: var(--text-muted); }
.surface-club .table__actions { display: flex; gap: 6px; justify-content: flex-end; }
.surface-club .table td:last-child { text-align: right; }
.surface-club .table--dense td { padding-top: 8px; padding-bottom: 8px; }

/* --- Filtros -------------------------------------------------------------- */

.surface-club .filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 14px 16px; margin-bottom: var(--gap-block);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--card-r); box-shadow: var(--shadow-xs);
}
.surface-club .filters .field { margin-bottom: 0; min-width: 180px; flex: 1 1 180px; }
.surface-club .filters .field--narrow { flex: 0 1 160px; min-width: 140px; }
.surface-club .filters > .btn { flex: none; }
/* Os espaçadores vazios que algumas páginas usavam para empurrar o botão
   deixam de fazer falta e deixam de ocupar espaço. */
.surface-club .filters > div:empty { display: none; }

.surface-club .search-field { position: relative; }
.surface-club .search-field > .icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-subtle); pointer-events: none;
}
.surface-club .search-field input { padding-left: 34px; }

/* --- Estados: um só estilo ------------------------------------------------ */

.surface-club .chip,
.surface-club .pill,
.surface-club .badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
    white-space: nowrap; border: 0;
}

.surface-club .empty-state { padding: 40px 24px; text-align: center; }
.surface-club .empty-state__icon {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px;
    display: grid; place-items: center; background: var(--surface-muted); color: var(--text-subtle);
}
.surface-club .empty-state__icon .icon { width: 20px; height: 20px; }
.surface-club .empty-state h3 { margin: 0; font-size: 15px; font-weight: 650; }
.surface-club .empty-state p { margin: 5px auto 0; font-size: 13px; color: var(--text-muted); max-width: 46ch; line-height: 1.5; }
.surface-club .empty-state .btn { margin-top: 16px; }

/* --- Números -------------------------------------------------------------- */

.surface-club .figures { margin-bottom: var(--gap-block); }
.surface-club .stat-grid { gap: 12px; margin-bottom: var(--gap-block); }
.surface-club .stat-card {
    padding: 14px 16px; border-radius: var(--card-r);
    border: 1px solid var(--border); box-shadow: var(--shadow-xs);
}
.surface-club .stat-card__label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.surface-club .stat-card__value { font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.surface-club .stat-card__hint { font-size: 12px; color: var(--text-subtle); }

/* --- Estrutura e scroll --------------------------------------------------- */

/* O conteúdo respira nas margens e nunca fica colado ao fundo da janela. */
.surface-club .admin-content { padding: 24px 28px 64px; }
@media (max-width: 68.75rem) { .surface-club .admin-content { padding: 20px 20px 56px; } }
@media (max-width: 45rem)  { .surface-club .admin-content { padding: 16px 16px 48px; } }

/* Uma só barra de scroll, a da página. A sidebar tem a sua, própria e
   independente, para o menu longo não arrastar o conteúdo. */
.surface-club .admin-sidebar { overflow-y: auto; overscroll-behavior: contain; }
.surface-club .admin-main { min-width: 0; }

.surface-club .table-wrap { overflow-x: auto; }

/* Em ecrãs muito largos o conteúdo pode crescer, mas com limite: uma tabela
   de 2000 px perde o eixo de leitura. */
@media (min-width: 106.25rem) { .surface-club { --content-max: 1320px; } }

/* --- Ligações discretas --------------------------------------------------- */

.surface-club .admin-content a:not(.btn):not(.line):not(.figure):not(.tabs a):hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Filiação — o processo, passo a passo

   Usa os controlos e a escala da Lane Club (.surface-club continua no body):
   o que muda é a moldura. Aqui não há sidebar nem navegação — quem entra está
   a tratar de uma coisa só, do princípio ao fim.
   --------------------------------------------------------------------------- */

.fl-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }

.fl-top {
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px; height: 60px; flex: none;
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
}
.fl-top__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.fl-top__brand img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.fl-top__brand strong { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.fl-top__brand span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.fl-top__brand:hover { text-decoration: none; }

.fl-top__who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }
.fl-top__who strong { color: var(--text); font-weight: 600; }

.fl-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 24px 72px; min-width: 0; }
/*
 * Num ecra estreito as duas metades da barra nao encolhiam (as duas tem
 * white-space: nowrap) e sobrepunham-se: "Filiacao" ficava por baixo de "a
 * trabalhar como". O que sai e o que e cortesia; o nome de quem esta a
 * trabalhar fica, porque e o que identifica quem assina o processo.
 */
@media (max-width: 45rem) {
    .fl-main { padding: 20px 16px 56px; }
    .fl-top { padding: 0 16px; gap: 10px; }
    .fl-top__brand span { display: none; }
    .fl-top__cortesia { display: none; }
    .fl-top__who { gap: 8px; min-width: 0; }
    .fl-top__who > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- Passos --------------------------------------------------------------- */

/* Onde estou, onde já estive, o que falta. Uma linha só, sempre visível. */
.fl-passos { display: flex; align-items: flex-start; gap: 0; margin-bottom: 24px; }

.fl-passo { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; position: relative; }
.fl-passo::before {
    content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px);
    height: 2px; background: var(--border); border-radius: 2px;
}
.fl-passo:first-child::before { display: none; }
.fl-passo.is-feito::before, .fl-passo.is-atual::before { background: var(--brand-primary); }

.fl-passo__bolha {
    width: 28px; height: 28px; border-radius: 50%; margin: 0 auto;
    display: grid; place-items: center; flex: none;
    background: var(--surface); border: 2px solid var(--border);
    font-size: 12.5px; font-weight: 700; color: var(--text-subtle);
    position: relative; z-index: 1;
}
.fl-passo__bolha .icon { width: 14px; height: 14px; }
.fl-passo.is-feito .fl-passo__bolha { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.fl-passo.is-atual .fl-passo__bolha { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-primary-soft); }

.fl-passo__nome { text-align: center; font-size: 12.5px; font-weight: 650; color: var(--text-subtle); line-height: 1.3; padding: 0 4px; }
.fl-passo.is-atual .fl-passo__nome { color: var(--text); }
.fl-passo.is-feito .fl-passo__nome { color: var(--text-muted); }

a.fl-passo { text-decoration: none; }
a.fl-passo:hover .fl-passo__nome { color: var(--brand-primary); text-decoration: none; }

/*
 * Num ecrã estreito não cabem quatro nomes lado a lado. Antes mostrava-se a
 * primeira letra de cada um ("C", "D", "R"), que ninguém sabe ler. Agora os
 * passos que não são o atual ficam só com o número, e o atual diz o nome —
 * que é o que interessa saber: onde estou.
 */
@media (max-width: 38.75rem) {
    .fl-passo:not(.is-atual) .fl-passo__nome {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .fl-passo.is-atual .fl-passo__nome { white-space: nowrap; }
    .fl-passo.is-atual { flex: 1.6; }
}

/* --- Cartão do passo ------------------------------------------------------ */

.fl-cartao {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-xs); overflow: hidden;
}
.fl-cartao__head { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.fl-cartao__head h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.fl-cartao__head p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.45; max-width: 60ch; }
.fl-cartao__body { padding: 22px; }
.fl-cartao__foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-muted);
}
.fl-cartao__foot .fl-avancar { margin-left: auto; }

/* --- Atleta escolhido ----------------------------------------------------- */

/*
 * Num ecra estreito a etiqueta ("Menor - precisa de responsavel") nao encolhe
 * e comia a linha toda: o nome e a idade ficavam com 3 px e o texto quebrava
 * letra a letra. Com wrap e uma base real para o corpo, a etiqueta passa para
 * a linha de baixo em vez de esmagar o que esta ao lado.
 */
.fl-atleta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-muted); margin-bottom: 20px;
}
.fl-atleta__corpo { flex: 1 1 12rem; min-width: 0; }
.fl-atleta__corpo strong { display: block; font-size: 15px; font-weight: 700; }
.fl-atleta__corpo span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* --- Documentos ----------------------------------------------------------- */

.fl-doc {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.fl-doc + .fl-doc { margin-top: 10px; }
.fl-doc.is-feito { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: #FBFEFC; }

.fl-doc__icone {
    width: 38px; height: 38px; flex: none; border-radius: 10px;
    display: grid; place-items: center; background: var(--surface-muted); color: var(--text-subtle);
}
.fl-doc.is-feito .fl-doc__icone { background: var(--success-soft); color: var(--success); }
.fl-doc__icone .icon { width: 18px; height: 18px; }

.fl-doc__corpo { flex: 1; min-width: 0; }
.fl-doc__corpo strong { display: block; font-size: 14px; font-weight: 650; }
.fl-doc__corpo span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.fl-doc__accao { flex: none; display: flex; align-items: center; gap: 8px; }

/* O input de ficheiro nativo é feio e diferente em cada browser: fica
   escondido atrás de um botão igual aos outros. */
.fl-ficheiro { position: relative; overflow: hidden; display: inline-flex; }
.fl-ficheiro input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}
.fl-ficheiro input[type="file"]:focus-visible + .btn { box-shadow: var(--focus-ring); }

/* --- Revisão -------------------------------------------------------------- */

.fl-rev { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.fl-rev + .fl-rev { margin-top: 16px; }
.fl-rev__head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; background: var(--surface-muted); border-bottom: 1px solid var(--border);
}
.fl-rev__head h2 { margin: 0; font-size: 13.5px; }
.fl-rev__head a { margin-left: auto; font-size: 12.5px; font-weight: 600; }
.fl-rev__body { padding: 14px 16px; }

/* Lista do que falta: vermelha, curta, acionável. */
.fl-falta { margin: 0; padding: 0; list-style: none; }
.fl-falta li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--text); line-height: 1.45; padding: 5px 0;
}
.fl-falta li::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--warning); margin-top: 7px; flex: none;
}

/* --- Entrada por PIN ------------------------------------------------------ */

.fl-entrar {
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center; padding: 32px 20px; background: var(--bg);
}
.fl-entrar__cartao {
    width: 100%; max-width: 420px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px;
    box-shadow: 0 18px 44px -24px rgba(16, 24, 40, .35);
}
.fl-entrar__cartao h1 { margin: 16px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.fl-entrar__cartao > p { margin: 0 0 22px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.fl-entrar__marca { display: flex; align-items: center; gap: 12px; }
.fl-entrar__marca img { width: 34px; height: 34px; object-fit: contain; }
.fl-entrar__marca span { font-size: 12.5px; font-weight: 650; color: var(--text-muted); }

/* Números de seis dígitos: grandes, espaçados e tabulares. Escrevem-se a
   olhar para o teclado, não para o ecrã. */
.fl-codigo {
    font-size: 21px !important;
    height: 50px !important;
    letter-spacing: .38em;
    text-indent: .38em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-right: 0 !important;
}

.fl-entrar__nota {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
.fl-entrar__voltar { display: block; margin-top: 18px; text-align: center; font-size: 13px; }

/* Título de secção dentro de um formulário. Seis páginas já o usavam com
   este nome — em vez de lhes mudar a marcação, é ele que passa a seguir a
   escala do sistema. */
.surface-club .form-section-title {
    margin: 22px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    text-transform: none;
}
.surface-club .form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Cabeçalho de identidade de uma ficha (atleta, encarregado). Identifica de
   quem se está a falar antes de qualquer campo. */
.surface-club .athlete-summary {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
}
.surface-club .athlete-summary__id { min-width: 0; }
.surface-club .athlete-summary__id strong {
    display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
.surface-club .athlete-summary__id span {
    display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted);
}

/* Uma etiqueta cortada a meio não informa ninguém: em vez de reticências,
   passa a duas linhas e os números continuam alinhados entre si. */
.surface-club .figure__label {
    white-space: normal;
    overflow: visible;
    min-height: 2.6em;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
}
.surface-club .figure__hint { white-space: normal; overflow: visible; }

/* --- Identidade do staff -------------------------------------------------- */

/* O botão da conta, ao lado do de sair, na base da sidebar. */
.admin-user__acao {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center; border-radius: 8px;
    color: rgba(255, 255, 255, .62);
}
.admin-user__acao:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.admin-user__acao .icon { width: 17px; height: 17px; }

/* O número de staff é para ser lido em voz alta e decorado: grande,
   espaçado e tabular. */
.surface-club .staff-id {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--card-r);
    background: var(--surface-muted);
}
.surface-club .staff-id__etiqueta {
    display: block; font-size: 12px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}
.surface-club .staff-id__valor {
    display: block; margin-top: 4px;
    font-size: clamp(26px, 4vw, 32px); font-weight: 750;
    letter-spacing: .16em; font-variant-numeric: tabular-nums;
    color: var(--text); line-height: 1.1;
}
.surface-club .staff-id__nota {
    margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}

/* Campos de código: dígitos espaçados, largura do conteúdo. */
.surface-club .input--codigo {
    max-width: 220px;
    letter-spacing: .3em;
    text-indent: .3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 17px;
}

/* --- Filiação: abrir um processo novo ------------------------------------- */

.fl-abrir {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
    padding: clamp(20px, 4vw, 32px);
}
.fl-abrir h1 { margin: 0; font-size: clamp(20px, 3vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.fl-abrir p { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; max-width: 60ch; }

.fl-abrir__forma {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
}
.fl-abrir__forma .field { margin: 0; }
.field--inline { min-width: 160px; }

.fl-rodape {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 24px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5;
}
.fl-rodape .icon { flex: none; margin-top: 2px; color: var(--text-subtle); }

/* Aviso dentro de um passo. */
.fl-nota {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 20px; padding: 12px 14px;
    background: var(--brand-primary-soft); border-radius: 10px;
    font-size: 13.5px; line-height: 1.5; color: var(--brand-primary-dark, var(--text));
}
.fl-nota .icon { flex: none; margin-top: 2px; }

.fl-valor { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.fl-detalhe {
    font-size: 13px; font-weight: 600; color: var(--brand-primary);
    cursor: pointer; list-style: none; padding: 4px 0;
}
.fl-detalhe::-webkit-details-marker { display: none; }
.fl-detalhe::before { content: "+ "; font-weight: 700; }
details[open] > .fl-detalhe::before { content: "– "; }

/* ===========================================================================
   FUNDAÇÃO RESPONSIVE DA LANE CLUB  (2.0.2)
   ===========================================================================

   O problema que isto resolve
   ---------------------------
   O conteúdo estava preso a uma largura máxima fixa, encostado à esquerda.
   Num monitor grande sobrava um vazio enorme à direita — a aplicação parecia
   um retângulo perdido no meio do ecrã. Ao mesmo tempo, os saltos de layout
   estavam espalhados por dez larguras diferentes (620, 640, 720, 767, 768,
   900, 1100, 1280…), cada página com a sua.

   Os princípios
   -------------
   1. NENHUMA regra por dispositivo. Não há iPhone nem Samsung aqui: há
      espaço disponível. O layout responde ao espaço, seja ele qual for —
      um telemóvel pequeno, um dobrável a abrir, ou uma janela arrastada.

   2. FLUIDO ENTRE SALTOS. Espaçamentos, tipografia e larguras usam clamp()
      e min()/max(): entre dois saltos o desenho continua a adaptar-se, em
      vez de ficar congelado à espera do próximo breakpoint.

   3. SALTOS POR MOTIVO, não por moda. Três, e cada um tem uma razão:

        48rem (768px)   uma coluna passa a duas: há espaço para pares de campos
        64rem (1024px)  a barra lateral deixa de ser gaveta e fica fixa
        90rem (1440px)  há espaço para uma terceira coluna e mais densidade

      Larguras intermédias — dobráveis, tablets ao alto, janelas a meio —
      caem naturalmente entre eles, sem regra própria.

   4. LARGURA PELO CONTEÚDO. Uma tabela quer espaço; um texto quer 65-75
      caracteres por linha. Não é a mesma largura para tudo:

        --w-total   tudo o que é dados: tabelas, painéis, fichas
        --w-forma   formulários: largo o suficiente para duas colunas
        --w-texto   prosa: medida de leitura confortável
   =========================================================================== */

.surface-club {
    /* Larguras por tipo de conteúdo, não uma só para tudo. */
    --w-total: 1560px;
    --w-forma: 980px;
    --w-texto: 72ch;

    /* Goteira fluida: acompanha a janela em vez de saltar. */
    --gutter: clamp(16px, 2.4vw, 32px);
}

/* --- O container ---------------------------------------------------------- */

/*
 * O conteúdo ocupa a largura disponível até --w-total e fica centrado. Em
 * ecrãs largos deixa de haver um vazio só de um lado: o espaço distribui-se.
 */
.surface-club .admin-content {
    width: 100%;
    max-width: var(--w-total);
    margin-inline: auto;
    padding: clamp(16px, 2.2vw, 28px) var(--gutter) clamp(48px, 6vw, 72px);
}

/* A regra antiga limitava CADA filho à mesma largura, o que encaixotava
   tabelas e fichas. Agora a largura é escolhida por quem sabe o conteúdo. */
.surface-club .admin-content > * { max-width: none; }

/*
 * Um formulário sozinho não se estica até aos 1560: a partir de certa
 * largura, uma linha de campos deixa de se conseguir ler de uma vez. Dentro
 * de um .split ou de uma grelha, manda o contentor.
 */
.surface-club > .admin-layout .admin-content > .form-card,
.surface-club .admin-content > form > .form-card {
    max-width: var(--w-forma);
}

/* Prosa solta na página mantém a medida de leitura. */
.surface-club .admin-page-head p,
.surface-club .admin-content > p { max-width: var(--w-texto); }

/* --- Tipografia fluida ---------------------------------------------------- */

/*
 * Entre o telemóvel pequeno e o monitor grande há mais do que dois tamanhos.
 * O clamp() dá o mínimo legível, o máximo confortável, e tudo pelo meio.
 */
.surface-club h1 { font-size: clamp(19px, 1.35vw + 14px, 24px); }
.surface-club .fl-cartao__head h1 { font-size: clamp(18px, 1.2vw + 13px, 22px); }
.surface-club .stat-card__value,
.surface-club .figure__value { font-size: clamp(20px, 1.6vw + 12px, 26px); }

/* --- Grelhas que respiram -------------------------------------------------- */

/*
 * auto-fit + minmax: o número de colunas é decidido pelo espaço, não por uma
 * lista de breakpoints. Um dobrável a abrir ganha colunas a meio do gesto.
 */
.surface-club .figures {
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 16vw, 190px), 1fr));
}

.surface-club .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 20vw, 240px), 1fr));
}

/* O painel lateral aparece quando houver espaço real para ele, e a coluna
   principal nunca encolhe abaixo do legível. */
@media (min-width: 64rem) {
    .surface-club .split { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); }
    .surface-club .split--wide-aside { grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 460px); }
}

@media (min-width: 48rem) {
    .surface-club .cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
}

/* --- Formulários ---------------------------------------------------------- */

/*
 * As colunas dos formulários passam a nascer do espaço disponível. Assim
 * funcionam igual dentro de um painel estreito ou de uma página larga — o que
 * antes obrigava a saber, em cada sítio, quantas colunas cabiam.
 */
.surface-club .field-grid--2,
.surface-club .field-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

@media (min-width: 48rem) {
    .surface-club .field-grid--2-1 { grid-template-columns: 2fr 1fr; }
    .surface-club .field-grid--1-2 { grid-template-columns: 1fr 2fr; }
}

/* Um campo largo continua largo, mas nunca ultrapassa o contentor. */
.surface-club .input,
.surface-club .select,
.surface-club .textarea { max-width: 100%; }

/* --- Tabelas -------------------------------------------------------------- */

/*
 * TABELA EM CARTÃO — a definição toda, num sítio só.
 *
 * Abaixo de 48rem a tabela deixa de ser tabela e passa a cartões: uma linha
 * por cartão, com o nome da coluna (data-label) à frente de cada valor.
 *
 * Antes isto vivia em quatro blocos, em três camadas da folha (767px e três
 * vezes 47.99rem), cada um a corrigir o anterior. Aqui está tudo, e as regras
 * que o motivaram continuam a valer:
 *
 *   - a PRIMEIRA célula é o título do cartão, sem rótulo: ninguém precisa de
 *     ler "ATLETA" antes do nome do atleta;
 *   - cada outra célula é uma GRELHA de duas colunas (rótulo | valor), e não
 *     uma linha flex. Uma célula com duas coisas — campos e uma legenda, um
 *     valor e uma nota — empilha-as na coluna do valor. Em flex ficavam lado
 *     a lado com o rótulo e a legenda acabava com 26px de largura;
 *   - o valor quebra em vez de esticar a linha: nomes de competições e emails
 *     são longos e não têm espaços onde quebrar;
 *   - uma célula sem rótulo (tipicamente as ações) ocupa a linha toda,
 *     alinhada à esquerda, em vez de ficar a flutuar à direita.
 */
@media (max-width: 47.99rem) {
    .surface-club .table,
    .surface-club .table tbody,
    .surface-club .table tr,
    .surface-club .table td { display: block; width: 100%; }
    .surface-club .table thead { display: none; }

    .surface-club .table tr { padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .surface-club .table tbody tr:last-child { border-bottom: 0; }
    .surface-club .table tbody tr:hover { background: none; }

    .surface-club .table td {
        display: grid;
        grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
        column-gap: 16px;
        align-items: baseline;
        justify-items: end;
        padding: 4px 0;
        border: 0;
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .surface-club .table td::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1 / span 12;
        justify-self: start;
        align-self: start;
        padding-top: 2px;
        text-align: left;
        font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--text-subtle);
    }
    .surface-club .table td > * { grid-column: 2; min-width: 0; max-width: 100%; }
    .surface-club .table td:empty { display: none; }

    /* O título do cartão. */
    .surface-club .table td:first-child { display: block; padding-bottom: 10px; text-align: left; }
    .surface-club .table td:first-child::before { display: none; }
    .surface-club .table td:first-child .table__primary { font-size: 15px; font-weight: 700; }

    /* Sem rótulo: a linha toda, à esquerda. */
    .surface-club .table td:not([data-label]),
    .surface-club .table td[data-label=""] { display: block; text-align: left; padding-top: 12px; }
    .surface-club .table td:not([data-label])::before,
    .surface-club .table td[data-label=""]::before { display: none; }

    .surface-club .table__actions { justify-content: flex-start; flex-wrap: wrap; }

    /* Conteúdo que precisa da largura toda (um detalhe expandido, um bloco de
       texto): a célula põe o rótulo por cima em vez de ao lado. */
    .surface-club .table td.table__td--bloco { display: block; text-align: left; }
    .surface-club .table td.table__td--bloco::before { display: block; margin-bottom: 6px; }
}

/* Auditoria: o detalhe é JSON de antes/depois. Abre-se por um alvo de toque
   a sério e, quando aberto, tem a largura da célula e scroll próprio. */
.auditoria__ver {
    display: inline-flex; align-items: center; min-height: var(--ctl-h-sm);
    cursor: pointer; color: var(--brand-primary); font-size: 13px; font-weight: 600;
}
.auditoria__detalhe {
    margin: 6px 0 0; padding: 10px 12px; max-width: 100%; overflow-x: auto;
    font-size: 12px; line-height: 1.5; white-space: pre-wrap; text-align: left;
    background: var(--surface-muted); border-radius: 8px;
}

/* Onde a tabela tem mesmo de rolar, o scroll é dela e não da página. */
.surface-club .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Filtros e barras de ação --------------------------------------------- */

/* Em vez de colunas fixas, os filtros embrulham sozinhos. */
.surface-club .filters { grid-template-columns: none !important; }
.surface-club .filters .field { flex: 1 1 clamp(160px, 22vw, 240px); }

@media (max-width: 47.99rem) {
    .surface-club .filters { padding: 12px; gap: 10px; }
    .surface-club .filters .field,
    .surface-club .filters > .btn { flex: 1 1 100%; }
    .surface-club .form-actions__end { margin-left: 0; width: 100%; }
    .surface-club .form-actions__end .btn { flex: 1; }

    /*
     * No telemóvel, a ficha de um atleta tem ~3000px de altura e o "Guardar"
     * estava no fim: corrigir um campo lá em cima obrigava a descer três ecrãs
     * cheios para gravar. A barra de ações fica presa ao fundo do ecrã enquanto
     * o formulário está à vista, e segue com ele quando ele acaba — cada
     * formulário tem a sua. Respeita a área segura do iPhone.
     */
    .surface-club .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 6;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    /* Dentro de um cartão de formulário, a barra vai de borda a borda. */
    .surface-club .form-card > .form-actions:last-child {
        margin: 20px -20px -20px;
        padding-inline: 20px;
        border-radius: 0 0 var(--card-r) var(--card-r);
        box-shadow: 0 -6px 18px -14px rgba(16, 24, 40, .35);
    }
}

/* --- Cabeçalho da página --------------------------------------------------- */

@media (max-width: 47.99rem) {
    .surface-club .admin-page-head { gap: 12px; }
    .surface-club .admin-page-head > *:last-child { width: 100%; }
    .surface-club .admin-page-head .btn { width: 100%; justify-content: center; }
}

/* --- Topbar --------------------------------------------------------------- */

/* A pesquisa encolhe antes de empurrar seja o que for para fora. */
.surface-club .admin-topbar { gap: clamp(8px, 1.5vw, 16px); padding-inline: var(--gutter); }
.surface-club .club-search { min-width: 0; flex: 1 1 auto; max-width: min(520px, 100%); }

@media (max-width: 47.99rem) {
    .surface-club .admin-topbar__actions .admin-topbar__link span { display: none; }
}

/* --- Áreas de toque em ecrãs sem rato ------------------------------------- */

/*
 * Num ecrã tátil os alvos crescem — não por ser telemóvel, mas por ser dedo.
 * É o ponteiro que decide, não a largura.
 *
 * E a letra dos campos sobe para 16px. Abaixo disso o Safari do iPhone faz
 * zoom ao focar o campo e deixa a página ampliada: era o que acontecia em
 * TODOS os formulários da Lane Club e da filiação, que usavam 14px. Resolver
 * isto com maximum-scale=1 no viewport é proibido (33-B.8): tira o zoom a
 * quem precisa dele para ler.
 *
 * A mesma regra vale para janelas estreitas com rato: um formulário de uma
 * coluna, a 360px, lê-se melhor com a letra do telemóvel.
 */
@media (pointer: coarse), (max-width: 47.99rem) {
    .surface-club {
        --ctl-h: 44px;
        --ctl-h-sm: 40px;
        --ctl-h-lg: 50px;
        --ctl-font: 16px;
    }

    .surface-club .btn--sm { padding-inline: 14px; }
    .surface-club .table__actions .btn { min-height: var(--ctl-h-sm); }

    /*
     * Botões só com ícone (limpar filtro, apagar, mais ações) ficavam com a
     * largura do ícone: 26-32px, abaixo do que um dedo acerta à primeira.
     * Quadrados, com o lado da altura do controlo.
     */
    .surface-club .btn--icon,
    .surface-club .btn:has(> .icon:only-child),
    .surface-club .filters > .btn,
    .surface-club .table__actions .btn--ghost { min-width: var(--ctl-h-sm); justify-content: center; }
}

/* --- Modais e sheets ------------------------------------------------------- */

.surface-club .modal,
.surface-club .sheet {
    width: min(100% - 2 * var(--gutter), 560px);
    max-height: min(88vh, 88dvh);
}

@media (max-width: 47.99rem) {
    .surface-club .modal { width: 100%; max-width: none; border-radius: 16px 16px 0 0; }
}

/* --- Filiação -------------------------------------------------------------- */

.fl-main {
    max-width: min(100%, 900px);
    padding: clamp(18px, 3vw, 28px) var(--gutter, clamp(16px, 2.4vw, 32px)) clamp(48px, 6vw, 72px);
}

/*
 * A filiação no telemóvel é a experiência principal, não uma versão reduzida:
 * quando for aberta às famílias, a maior parte vai fazê-la toda no telemóvel.
 *
 *   - o cartão perde o recuo duplo (página + cartão), que roubava ~40px de
 *     largura a cada campo;
 *   - a barra de ações fica presa ao fundo do ecrã, na zona do polegar, e o
 *     botão principal está sempre à mão — sem descer um formulário longo
 *     para o encontrar. Respeita a área segura do iPhone;
 *   - cada documento ocupa a linha toda, com o botão de anexar grande.
 */
.fl-cartao__intro { padding: 16px 22px 0; }
.fl-cartao__passo { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 47.99rem) {
    .fl-main { padding-inline: 12px; }

    .fl-cartao { overflow: visible; border-radius: 12px; }

    /* O sticky só se move dentro do pai. No passo 3 o formulário de navegação
       contém apenas a barra (os documentos ficam fora, cada um com o seu
       formulário), e a barra ficava presa a si própria. Com display: contents
       o pai passa a ser o cartão; o formulário continua a submeter igual. */
    .fl-cartao > form { display: contents; }
    .fl-cartao__head { padding: 16px; border-radius: 12px 12px 0 0; }
    .fl-cartao__body { padding: 16px; }
    .fl-cartao__intro { padding: 16px 16px 0; }

    .fl-cartao__foot {
        position: sticky;
        bottom: 0;
        z-index: 5;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 0 0 12px 12px;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 -6px 18px -12px rgba(16, 24, 40, .35);
    }
    /* Uma linha: recuar (só a seta) e o botão principal a ocupar o resto.
       O "Passo x de y" já está no indicador lá em cima. */
    .fl-cartao__foot { flex-wrap: nowrap; }
    .fl-cartao__foot .fl-avancar { margin-left: 0; flex: 1 1 auto; min-width: 0; justify-content: center; }
    .fl-cartao__foot .fl-recuar { flex: none; width: var(--ctl-h); padding: 0; justify-content: center;
                                  border: 1px solid var(--border-strong); }
    .fl-recuar__txt,
    .fl-cartao__passo {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }

    .fl-doc { flex-wrap: wrap; }
    .fl-doc__accao { width: 100%; justify-content: flex-end; }
    .fl-doc__accao > form:has(.fl-ficheiro) { flex: 1 1 100%; }

    /* O botão da ficha oficial tem o rótulo mais comprido do processo: a toda
       a largura, e pode quebrar em vez de sair do ecrã num telemóvel pequeno. */
    .fl-ficha__accoes .btn { width: 100%; justify-content: center; white-space: normal; height: auto;
                             min-height: var(--ctl-h); text-align: center; }
    .fl-doc__accao .fl-ficheiro,
    .fl-doc__accao .fl-ficheiro .btn { width: 100%; justify-content: center; }

    .fl-abrir__forma .field,
    .fl-abrir__forma .btn { flex: 1 1 100%; }
}

/* --- Impressão ------------------------------------------------------------- */

@media print {
    .surface-club .admin-sidebar,
    .surface-club .admin-topbar { display: none; }
    .surface-club .admin-content { max-width: none; padding: 0; }
}

/* --- Itens de grelha que não encolhem -------------------------------------- */

/*
 * Um item de grelha tem min-width: auto por omissão, o que significa "nunca
 * mais estreito do que o meu conteúdo". Basta uma tabela lá dentro para o
 * item empurrar a grelha toda para fora do ecrã — e o scroll aparece na
 * página, não na tabela.
 *
 * min-width: 0 devolve a decisão à grelha. É o que faz o overflow-x da
 * .table-wrap funcionar de facto.
 */
.surface-club .split > *,
.surface-club .cols-2 > *,
.surface-club .field-grid > *,
.surface-club .figures > *,
.surface-club .stat-grid > * { min-width: 0; }

.surface-club .table-wrap { min-width: 0; max-width: 100%; }

/* --- Barra superior em ecrãs estreitos ------------------------------------ */

/*
 * A barra tem três coisas: o menu, a pesquisa e a ação da página. As ligações
 * para a Lane Coach, a aplicação e o website são atalhos — vivem também na
 * conta e no rodapé da sidebar.
 *
 * Num ecrã estreito, atalhos duplicados não valem o espaço da ação principal:
 * saem, em vez de empurrarem a barra para fora do ecrã.
 */
.surface-club .admin-topbar__actions { min-width: 0; flex-wrap: nowrap; }
.surface-club .admin-topbar__actions > .btn { min-width: 0; }

@media (max-width: 47.99rem) {
    .surface-club .admin-topbar__link { display: none; }
    .surface-club .admin-topbar__actions .btn { padding-inline: 12px; }
}

/*
 * Só em ecrãs mesmo estreitos a ação encolhe até ao ícone. Acima disso o
 * rótulo mantém-se: é a ação principal da página, e um ícone sozinho obriga
 * a adivinhar. Há espaço porque os atalhos secundários já saíram.
 */
@media (max-width: 22rem) {
    .surface-club .club-search { flex-shrink: 3; }
    .surface-club .admin-topbar__actions > .btn {
        flex: 0 1 auto;
        min-width: var(--ctl-h);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-inline: 10px;
    }
    .surface-club .admin-topbar__actions > .btn .icon { flex: none; }
}

/* --- Filiação: documentos por responsável --------------------------------- */

/* Cabeçalho de bloco dentro do passo dos documentos: separa o que é de quem. */
.fl-bloco {
    margin: 26px 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.fl-bloco:first-child { margin-top: 0; }

/* O que o clube trata depois não se veste de aviso: não é falha de ninguém. */
.fl-doc.is-clube { background: var(--surface-muted); border-style: dashed; }

/* --- A ficha oficial ------------------------------------------------------- */

.fl-ficha {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: var(--surface);
}

.fl-ficha__estado {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
}
.fl-ficha__estado .icon { flex: none; margin-top: 2px; }
.fl-ficha__estado.is-ok { color: var(--success); }

.fl-ficha__passos {
    margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5;
}

.fl-ficha__accoes { margin-bottom: 14px; }

/* Enquanto o modelo oficial não existe, não há botão nenhum: há uma
   explicação. Um botão que não produz nada é pior do que a verdade. */
.fl-ficha__aviso {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--surface-muted);
    font-size: 13px; color: var(--text-muted); line-height: 1.5;
}
.fl-ficha__aviso .icon { flex: none; margin-top: 2px; color: var(--text-subtle); }

.btn.is-disabled { opacity: .5; pointer-events: none; }

/* --- Exame médico: trabalho do clube --------------------------------------- */

.fl-exame {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    margin-top: 12px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted);
}
.fl-exame .field { margin: 0; }

/* Na revisão: o que fica para o clube, sem cara de erro. */
.fl-depois {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 22px; padding: 12px 14px;
    border: 1px dashed var(--border-strong); border-radius: 10px;
    background: var(--surface-muted);
    font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
}
.fl-depois .icon { flex: none; margin-top: 2px; color: var(--text-subtle); }
.fl-depois strong { display: block; color: var(--text); font-weight: 650; }

/* Um número de documento lê-se dígito a dígito. */
.fl-valor--sensivel { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media (max-width: 47.99rem) {
    .fl-exame .field,
    .fl-exame .btn { flex: 1 1 100%; }
}

/* ===========================================================================
   FILIAÇÃO 2.0.5 — maior/menor, ficha oficial e estado dos documentos
   ---------------------------------------------------------------------------
   O que estes componentes têm em comum: dizem uma consequência, não um
   estado abstrato. "Menor" não informa ninguém; "vai precisar de encarregado"
   informa.
   =========================================================================== */

/* A consequência da data de nascimento, escrita enquanto se escreve a data. */
.fl-idade {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
}

.fl-idade.is-maior {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
    background: color-mix(in srgb, var(--success) 8%, var(--surface));
    color: var(--text);
}

.fl-idade.is-menor {
    border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
    background: color-mix(in srgb, var(--warning) 9%, var(--surface));
    color: var(--text);
}

/* Subtítulo dentro de uma secção de formulário. */
.fl-sub {
    margin: 22px 0 2px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text);
}

/* Qual dos modelos oficiais vai sair, e quem assina. */
.fl-ficha__modelo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--brand-primary-soft);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.fl-ficha__modelo strong {
    display: block;
    font-size: 13.5px;
}

.fl-ficha__modelo .icon {
    flex: none;
    margin-top: 2px;
    color: var(--brand-primary);
}

/* A ficha assinada deixou de corresponder aos dados. Não se apaga: avisa-se. */
.fl-ficha__alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    font-size: 13px;
    line-height: 1.5;
}

.fl-ficha__alerta strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
}

.fl-ficha__alerta .icon {
    flex: none;
    margin-top: 2px;
    color: var(--warning);
}

/* ===========================================================================
   FICHA ADMINISTRATIVA DA FILIAÇÃO (2.0.5)
   ---------------------------------------------------------------------------
   Uma página de trabalho, não um formulário. Duas colunas quando há espaço —
   o que se faz (documentos, ficha, histórico) à esquerda, o que se consulta
   (atleta, responsável, federação, épocas) à direita — e uma coluna quando
   não há. A largura vem do conteúdo (33-H.6): isto são dados, logo --w-total.
   =========================================================================== */

.fl-migalhas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.fl-migalhas a { color: inherit; }
.fl-migalhas a:hover { color: var(--brand-primary); }

/* --- Topo: estado e pendências ------------------------------------------ */

.fl-adm-topo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.fl-adm-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.fl-adm-estado__rotulo {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-muted);
}

.fl-adm-falta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
    background: color-mix(in srgb, var(--warning) 8%, var(--surface));
    font-size: 13px;
    line-height: 1.5;
}

.fl-adm-falta .icon { flex: none; margin-top: 2px; color: var(--warning); }
.fl-adm-falta strong { display: block; margin-bottom: 2px; font-size: 13.5px; }
.fl-adm-falta ul { margin: 4px 0 0; padding-left: 18px; }
.fl-adm-falta li { margin-bottom: 2px; }

.fl-adm-falta.is-ok {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
    background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.fl-adm-falta.is-ok .icon { color: var(--success); }

.fl-adm-falta.is-clube {
    border-color: var(--border);
    background: var(--surface-muted);
}

.fl-adm-falta.is-clube .icon { color: var(--text-muted); }

/* --- A grelha da ficha --------------------------------------------------- */

.fl-adm {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* min-width: 0 — sem isto um documento de nome comprido empurra a página
   inteira para fora do ecrã em vez de encolher (33-H.7). */
.fl-adm > * { min-width: 0; }

.fl-adm__principal,
.fl-adm__lado {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

@media (min-width: 64rem) {
    .fl-adm { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

@media (min-width: 90rem) {
    .fl-adm { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
    .fl-adm-topo { grid-template-columns: auto 1fr; align-items: stretch; }
    .fl-adm-topo .fl-adm-falta.is-clube { grid-column: 1 / -1; }
}

/* --- Um documento -------------------------------------------------------- */

.fl-adm-doc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.fl-adm-doc:last-child { border-bottom: 0; padding-bottom: 0; }
.fl-adm-doc:first-child { padding-top: 0; }

.fl-adm-doc__icone {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
}

.fl-adm-doc.is-feito .fl-adm-doc__icone {
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: var(--success);
}

.fl-adm-doc__corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.fl-adm-doc__corpo strong { flex-basis: 100%; font-size: 13.5px; }
.fl-adm-doc__corpo .table__sub { word-break: break-word; }

.fl-adm-doc__accoes {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.fl-adm-doc__envio { display: contents; }

/* O input de ficheiro está escondido dentro do label, que é o botão. */
.fl-adm-doc__envio label { cursor: pointer; }

.fl-adm-doc__validade {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.fl-adm-doc__validade .field__label { margin: 0; white-space: nowrap; }
.fl-adm-doc__validade .input { width: auto; min-width: 150px; }

/* --- Formulário lateral -------------------------------------------------- */

.fl-adm-form { display: grid; gap: 12px; }
.fl-adm-form > * { min-width: 0; }
.fl-adm-form textarea.input { min-height: 74px; resize: vertical; line-height: 1.5; }

/* --- Épocas -------------------------------------------------------------- */

.fl-adm-epocas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.fl-adm-epocas li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

.fl-adm-epocas li.is-atual {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    font-weight: 600;
}

/* --- Histórico ----------------------------------------------------------- */

.fl-adm-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.fl-adm-hist li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.fl-adm-hist li:last-child { border-bottom: 0; padding-bottom: 0; }

.fl-adm-hist__quando,
.fl-adm-hist__quem { font-size: 12.5px; color: var(--text-muted); }

@media (min-width: 48rem) {
    .fl-adm-hist li {
        grid-template-columns: 140px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: baseline;
    }
}

/* A descrição de um painel: o head é só o título (e uma ação), por isso a
   explicação é a primeira linha do corpo. */
.panel__nota {
    margin: -2px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ===========================================================================
   AÇÃO DESTRUTIVA (2.0.6)
   ---------------------------------------------------------------------------
   Um painel à parte, no fim da ficha, em vermelho contido: discreto o
   suficiente para não gritar, claro o suficiente para ninguém lá carregar a
   pensar que está a guardar.
   =========================================================================== */

.surface-club .panel--perigo {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
}

.surface-club .panel--perigo .panel__head {
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--danger) 24%, var(--border));
}

.surface-club .panel--perigo .panel__head h2 { color: var(--danger); }

/* ---------------------------------------------------------------------------
   Os meus avisos (Lane Club)

   A caixa de entrada da conta. Cada linha abre o conteúdo de que fala — uma
   inscrição que chegou abre essa inscrição, e não o painel.
   --------------------------------------------------------------------------- */

.inbox { list-style: none; margin: 0; padding: 0; }

.inbox__item + .inbox__item { border-top: 1px solid var(--border); }

.inbox__link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    color: inherit;
    text-decoration: none;
}

.inbox__link:hover { background: var(--surface-hover, rgba(0, 0, 0, .02)); }

.inbox__icone {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--radius-md, 10px);
    background: var(--surface-sunken, #F1F3F7);
    color: var(--text-subtle, #667085);
}

.inbox__corpo { min-width: 0; }
.inbox__corpo strong { display: block; font-size: var(--text-sm, 14px); font-weight: 600; }
.inbox__corpo span {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm, 13px);
    color: var(--text-subtle, #667085);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.inbox__quando {
    font-size: var(--text-xs, 12px);
    color: var(--text-subtle, #667085);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.inbox__ponto {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--primary, #175CD3);
}

.inbox__item--novo .inbox__corpo strong { font-weight: 700; }
.inbox__item--novo .inbox__icone { background: var(--primary-soft, #EAF1FC); color: var(--primary, #175CD3); }

/* Telemóvel: a data passa para baixo do texto em vez de espremer a coluna. */
@media (max-width: 40rem) {
    .inbox__link { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 4px; }
    .inbox__quando { grid-column: 2; grid-row: 2; }
    .inbox__ponto { grid-column: 3; grid-row: 1 / span 2; }
    .inbox__icone { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------------------
   Tabelas: o nome tem prioridade sobre a etiqueta

   Uma etiqueta de estado (.pill) não parte linhas — e numa tabela isso fazia
   dela a coluna mais larga de todas. No painel, "Inscrições até 24 de
   setembro de 2026, 23:59" ocupava 296 px e deixava o nome da competição com
   127, a partir em seis linhas.

   Dentro de uma tabela a etiqueta parte linhas como qualquer outro texto. Fora
   dela continua numa linha só, que é onde isso faz sentido.
   --------------------------------------------------------------------------- */

.table .pill { white-space: normal; }

/* A primeira coluna é quase sempre o nome da coisa: dá-se-lhe a largura que
   um nome precisa antes de as outras a espremerem. */
.table th:first-child,
.table td:first-child { min-width: 12ch; }

@media (min-width: 64rem) {
    .table th:first-child,
    .table td:first-child { min-width: 20ch; }
}

/* Ver a nota em lane.css: com o teclado aberto, o campo sobe o suficiente
   para a barra de ação vir com ele. */
.surface-club input:focus,
.surface-club textarea:focus,
.surface-club select:focus {
    scroll-margin-top: calc(var(--header-height) + 16px);
    scroll-margin-bottom: 120px;
}

/* ===========================================================================
   Eliminar definitivamente — a zona de perigo
   ========================================================================
   Uma ação destas não pode parecer uma ação normal. O painel do impacto tem
   a cor do perigo e os números em destaque: o que trava um engano não é mais
   um «tem a certeza?», é ver que vão 42 presenças atrás do atleta. */

.surface-club .panel--danger { border-color: var(--danger); }
.surface-club .panel--danger .panel__head { border-bottom-color: var(--danger); }
.surface-club .panel--danger .panel__head h2 { color: var(--danger); }

.lista-impacto {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: grid; gap: 6px;
}
.lista-impacto li {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13.5px; color: var(--text);
}
.lista-impacto li strong {
    min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 800; color: var(--danger);
}
.lista-impacto--suave li strong { color: var(--text-2); }

/* A zona de perigo no fim de uma ficha: separada do resto, e a dizer porquê. */
.surface-club .zona-perigo {
    margin-top: 28px; padding: 16px 18px;
    border: 1px solid var(--danger); border-radius: var(--radius-md);
    background: var(--danger-soft);
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.surface-club .zona-perigo__texto { flex: 1 1 18rem; min-width: 0; }
.surface-club .zona-perigo__texto strong { display: block; font-size: 14px; font-weight: 800; color: var(--danger); }
.surface-club .zona-perigo__texto span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 3px; }

/* ===========================================================================
   Lane Club no telemóvel: barra de navegação inferior
   ========================================================================
   A Lane Club é instalável desde a 2.0 — manifesto, ícone e service worker
   próprios. Mas uma aplicação no ecrã principal que obriga a abrir uma gaveta
   para chegar a tudo não se comporta como uma aplicação.

   Esta barra dá-lhe o que falta: os destinos do trabalho diário a um toque,
   sempre no sítio, como em qualquer app de telemóvel. A gaveta continua, com
   as 22 áreas, atrás do "Menu" — e no computador nada disto aparece, porque
   lá a barra lateral já está sempre à vista. */

.club-tabs { display: none; }

@media (max-width: 63.99rem) {
    .club-tabs {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 60;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .club-tabs__item {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 3px;
        /* 52px + área segura: o mesmo alvo de toque da barra da Lane. */
        min-height: 52px;
        padding: 7px 4px 8px;
        border: 0;
        background: none;
        font: inherit;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text-muted);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .club-tabs__item .icon { width: 22px; height: 22px; }
    .club-tabs__item[aria-current="page"] { color: var(--brand-primary); }
    .club-tabs__item:active { background: var(--surface-muted); }

    /* O conteúdo tem de acabar acima da barra, senão a última linha de uma
       tabela fica debaixo dela e ninguém lhe chega. */
    .surface-club .admin-main,
    .surface-club .admin-content { padding-bottom: calc(52px + env(safe-area-inset-bottom) + 16px); }

    /* A barra de ações dos formulários é sticky: passa a assentar em cima
       desta, em vez de a tapar. */
    .surface-club .form-actions[class] { bottom: calc(52px + env(safe-area-inset-bottom)); }
}