/* Estilos base, mobile-first. Sin dependencias externas (doc06 §4). */

:root {
    --color-bg: #f4f6f5;
    --color-surface: #ffffff;
    --color-surface-alt: #f9faf9;
    --color-text: #16201b;
    --color-muted: #667169;
    --color-primary: #1f7a3f;
    --color-primary-dark: #175c30;
    --color-primary-soft: #e8f5ec;
    --color-primary-contrast: #ffffff;
    --color-border: #e1e6e2;
    --color-danger: #b3261e;
    --color-danger-soft: #fbe9e7;
    --color-warning-soft: #fff4e0;
    --color-warning-text: #8a5a00;
    --shadow-sm: 0 1px 2px rgba(22, 32, 27, 0.06);
    --shadow-md: 0 4px 16px rgba(22, 32, 27, 0.08);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --header-height: 60px;
    --bottom-nav-height: 64px;
}

* {
    box-sizing: border-box;
}

/* Ninguna regla de "display" de un componente debe poder ganarle al
   atributo hidden nativo (ver .score-set, que sí lo necesitaba). */
[hidden] {
    display: none !important;
}

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.has-bottom-nav {
    padding-bottom: 0;
}

h1, h2, h3 {
    letter-spacing: -0.01em;
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 6px 6px;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

.clock-override-banner {
    background: #fef3c7;
    color: #78350f;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}

.impersonation-banner {
    background: var(--color-danger);
    color: #fff;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.impersonation-banner__form {
    display: inline;
}

.impersonation-banner .link-button {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}

/* --- Cabecera ------------------------------------------------------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--header-height);
}

.app-header__brand {
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.app-header__brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #e4f27a, #b8d13a 55%, #93a832 100%);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18);
    position: relative;
    flex: none;
}

.app-header__brand-mark::before, .app-header__brand-mark::after {
    content: "";
    position: absolute;
    inset: 2px 9px;
    border: 1.1px solid rgba(14, 42, 43, 0.5);
    border-radius: 50%;
}

.app-header__brand-mark::after {
    inset: 9px 2px;
}

.app-header__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.92rem;
}

.app-header__nav a {
    color: var(--color-muted);
    text-decoration: none;
    font-weight: 600;
    padding: var(--space-1) 0;
    border-bottom: 2px solid transparent;
}

.app-header__nav a:hover {
    color: var(--color-text);
}

.app-header__logout {
    margin: 0;
}

.app-header__nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    flex: none;
    order: 1;
}

.app-header__nav-toggle:hover {
    background: var(--color-primary-soft);
}

.app-header__switchers {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.locale-switcher, .sport-switcher {
    display: flex;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px;
    flex: none;
}

.locale-switcher a, .sport-switcher a {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-muted);
    white-space: nowrap;
}

.locale-switcher a.is-active, .sport-switcher a.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.app-header__logout .link-button {
    color: var(--color-muted);
}

@media (max-width: 767px) {
    body.has-bottom-nav .app-header__nav {
        display: none;
    }

    body.has-bottom-nav .app-main {
        padding-bottom: calc(var(--bottom-nav-height) + var(--space-4));
    }

    body.has-top-nav:not(.has-bottom-nav) .app-header__nav-toggle {
        display: inline-flex;
    }

    body.has-top-nav:not(.has-bottom-nav) .app-header__nav {
        display: none;
        flex-basis: 100%;
        order: 4;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-border);
    }

    body.has-top-nav:not(.has-bottom-nav) .app-header__nav.is-open {
        display: flex;
    }

    body.has-top-nav:not(.has-bottom-nav) .app-header__nav a,
    body.has-top-nav:not(.has-bottom-nav) .app-header__nav .app-header__logout .link-button {
        display: block;
        width: 100%;
        text-align: left;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border);
    }
}

/* --- Layout principal ------------------------------------------------ */

.app-main {
    padding: var(--space-3);
    max-width: 760px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .app-main {
        padding: var(--space-5) var(--space-4);
    }
}

.auth-page {
    background: radial-gradient(circle at top, #eef7f0 0%, var(--color-bg) 55%);
}

.auth-page .app-main {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
}

.auth-page .app-main > * {
    width: 100%;
    max-width: 400px;
}

.auth-page .card {
    box-shadow: var(--shadow-md);
}

/* --- Tarjetas ---------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.card h1 {
    margin-top: 0;
    font-size: 1.35rem;
}

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

.card p {
    color: var(--color-muted);
}

.card--danger {
    border-color: var(--color-danger);
    border-left-width: 4px;
}

.card--danger h2 {
    color: var(--color-danger);
}

.onboarding-step {
    opacity: 1;
}

.onboarding-step--done {
    background: var(--color-bg);
}

.onboarding-step__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.onboarding-step__head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.card__title {
    margin: 0 0 var(--space-3);
    font-size: 1.05rem;
}

.card--stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.card--stat .button {
    flex-shrink: 0;
    white-space: nowrap;
}

.card__big-number {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.dashboard-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.dashboard-tile__value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}

.dashboard-tile__label {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-4);
}

.detail-list dt {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.detail-list dd {
    margin: 0;
}

/* --- Hero (paneles de inicio) ------------------------------------------ */

.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-primary-contrast);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-3);
}

.hero--admin {
    background: linear-gradient(135deg, #22293a 0%, #14181f 100%);
}

.hero__eyebrow {
    margin: 0 0 var(--space-1);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.hero__title {
    margin: 0 0 var(--space-2);
    font-size: 1.5rem;
}

.hero__match {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.hero__vs {
    opacity: 0.7;
    font-weight: 400;
    font-size: 1rem;
}

.hero__rival a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.hero__meta {
    margin: 0 0 var(--space-3);
    opacity: 0.9;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hero .button {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-primary-contrast);
}

.hero .button:not(.button--ghost) {
    background: var(--color-primary-contrast);
    color: var(--color-primary-dark);
}

.hero .button--ghost {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--color-primary-contrast);
}

/* --- Botones y enlaces --------------------------------------------- */

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

button:hover, .button:hover {
    background: var(--color-primary-dark);
    color: var(--color-primary-contrast);
}

button:active, .button:active {
    transform: scale(0.98);
}

.button--ghost {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

.button--ghost:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.button--danger {
    background: var(--color-danger);
}

.button--danger:hover {
    background: #8f1e18;
}

.link-button {
    background: none;
    color: var(--color-primary);
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

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

label {
    display: block;
    font-weight: 600;
    margin: var(--space-3) 0 var(--space-1);
    font-size: 0.92rem;
}

label:first-of-type {
    margin-top: 0;
}

input, select, textarea {
    width: 100%;
    padding: 0.6rem var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

form button[type="submit"] {
    margin-top: var(--space-3);
}

.field-error {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin: var(--space-1) 0 0;
}

.field-hint {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: var(--space-1) 0 0;
}

.settings-field {
    margin-bottom: var(--space-3);
}

.settings-field__hint {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: var(--space-1) 0 0;
}

/* --- Avisos flash ------------------------------------------------------ */

.flash {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-weight: 500;
}

.flash--success {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border: 1px solid #bfe3c6;
}

.flash--error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid #f3c3bd;
}

.flash--info {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    border: 1px solid #f0dca6;
}

/* --- Avisos / notificaciones en panel ----------------------------------- */

.notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.notice-list__item {
    background: var(--color-warning-soft);
    border: 1px solid #f3dfae;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

.notice-list__item a {
    color: var(--color-warning-text);
    font-weight: 600;
    text-decoration: none;
}

.notice-list__item a:hover {
    text-decoration: underline;
}

/* --- Accesos rápidos (panel admin) -------------------------------------- */

.quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

@media (min-width: 560px) {
    .quick-links {
        grid-template-columns: repeat(4, 1fr);
    }
}

.quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quick-link:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* --- Búsqueda ------------------------------------------------------ */

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.search-form input {
    flex: 1;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* --- Tablas ------------------------------------------------------------ */

.table-scroll {
    overflow-x: auto;
    margin-top: var(--space-3);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th, td {
    text-align: left;
    padding: 0.65rem var(--space-2);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

th {
    color: var(--color-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

tbody tr:hover {
    background: var(--color-surface-alt);
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.table-actions form {
    display: inline;
}

/* --- Tabla → tarjetas en móvil (doc09 U-2) ------------------------------
   Cada <td> lleva un atributo data-label con el texto de su cabecera; en
   pantallas estrechas la tabla deja de comportarse como tabla y cada fila
   se convierte en una tarjeta con "etiqueta: valor" por línea. Las celdas
   sin data-label (una acción sola, sin cabecera) no llevan etiqueta. */

@media (max-width: 640px) {
    .table-responsive thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .table-responsive table,
    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive td {
        display: block;
        width: 100%;
    }

    .table-responsive tr[hidden] {
        display: none;
    }

    .table-responsive tbody tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: var(--space-2);
        margin-bottom: var(--space-3);
        background: var(--color-surface);
    }

    .table-responsive td {
        border-bottom: 1px solid var(--color-border);
        padding: 0.5rem 0;
        white-space: normal;
        text-align: left;
    }

    .table-responsive td:last-child {
        border-bottom: none;
    }

    .table-responsive td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-2);
        text-align: right;
    }

    .table-responsive td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-muted);
        text-align: left;
        flex-shrink: 0;
    }

    /* Un valor sin espacios (una clave de traducción, un código) no se
       parte solo: sin esto se sale de la tarjeta en vez de ajustarse. */
    .table-responsive td[data-label] {
        overflow-wrap: anywhere;
    }

    /* Celdas con contenido ancho (un formulario, un desplegable de
       acciones): la etiqueta pasa a ir encima en vez de al lado. */
    .table-responsive td.table-cell-block[data-label] {
        display: block;
        text-align: left;
    }

    .table-responsive td.table-cell-block[data-label]::before {
        display: block;
        margin-bottom: var(--space-1);
    }
}

/* --- Objetivos táctiles de 44 px en móvil (doc09 U-6) -------------------
   Altura mínima con padding, nunca agrandando el texto: WCAG 2.5.5. */

@media (max-width: 640px) {
    .link-button,
    .table-responsive td a,
    .row-actions summary {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Barras de búsqueda y acciones que envuelven en móvil (doc09 U-7/U-8) */

@media (max-width: 640px) {
    .search-form > *,
    .table-actions > * {
        flex: 1 1 100%;
    }
}

/* --- Menú de acciones por fila (doc09 U-2, admin/phases/matches) ------- */

.row-actions summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary-dark);
    list-style: none;
}

.row-actions summary::-webkit-details-marker {
    display: none;
}

.row-actions summary::after {
    content: ' ▾';
}

.row-actions[open] summary::after {
    content: ' ▴';
}

.row-actions__panel {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 220px;
}

/* --- Secciones plegables de Textos (doc09 U-9) -------------------------- */

.translations-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.translations-group summary {
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    padding: var(--space-1) 0;
}

.translations-group .table-scroll {
    margin-top: var(--space-2);
}

/* --- Estados con color y texto (doc06 §4) ------------------------------ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge--neutral {
    background: #eef0ee;
    color: var(--color-muted);
}

.badge--pending {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.badge--success {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.badge--info {
    background: #e5edfb;
    color: #1c4f9c;
}

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

.checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    margin: 2px;
    font-weight: 400;
    font-size: 0.85rem;
    cursor: pointer;
}

.checkbox-chip input {
    width: auto;
}

/* Cuadrícula de disponibilidad semanal (doc09 U-12): en móvil las franjas
   de un día envuelven en varias líneas dentro de su celda en vez de forzar
   desplazamiento horizontal de toda la tabla; el checkbox crece a un
   tamaño que se pulsa cómodo con el dedo. */
@media (max-width: 640px) {
    .availability-slots {
        white-space: normal;
    }

    .checkbox-chip input {
        width: 20px;
        height: 20px;
    }
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 2px;
}

.legend-dot--free {
    background: var(--color-primary);
}

.legend-dot--blocked {
    background: var(--color-danger);
}

.slot-chip {
    display: inline-block;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    margin: 2px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.slot-chip--libre {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.slot-chip--bloqueado {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    text-decoration: line-through;
}

.ranking-list {
    list-style: none;
    margin: var(--space-3) 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ranking-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    cursor: grab;
}

.ranking-list__item:last-child {
    border-bottom: none;
}

.ranking-list__handle {
    color: var(--color-muted);
}

.ranking-list__position {
    width: 4.5rem;
    flex: none;
}

.ranking-list__name {
    flex: 1;
}

.row-problematic {
    background: var(--color-danger-soft);
}

.move-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.move-form input {
    width: auto;
    min-width: 5.5rem;
}

.score-set {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.score-set legend {
    font-weight: 600;
    padding: 0 var(--space-1);
}

.score-set select.games-select {
    width: auto;
    min-width: 4rem;
    font-size: 1.4rem;
    text-align: center;
    padding: var(--space-2);
}

.score-set input {
    width: auto;
}

/* --- Páginas de error ---------------------------------------------- */

.error-page {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

.error-page h1 {
    font-size: 1.6rem;
}

/* --- Barra de navegación inferior (móvil, jugador) — doc06 §4 ----------- */

.bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(8px);
        border-top: 1px solid var(--color-border);
        padding: var(--space-1) var(--space-1) max(var(--space-1), env(safe-area-inset-bottom));
        height: var(--bottom-nav-height);
    }
}

.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.bottom-nav__item:hover {
    color: var(--color-primary-dark);
}

.bottom-nav__icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* Selector de club (doc13 H17): una tarjeta-formulario por pertenencia. */
.club-select-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.club-select-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.club-select-list__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.club-select-list__info span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* --- Pie de página (doc13 H17: enlaces a las páginas legales) ---------- */

.app-footer {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    font-size: 0.82rem;
}

.app-footer a {
    color: var(--color-muted);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* --- Páginas legales ---------------------------------------------------- */

.legal-page h2 {
    font-size: 1.05rem;
    margin-top: var(--space-4);
}

.legal-page h3 {
    font-size: 0.95rem;
    margin-top: var(--space-3);
}

.legal-page__cookies-table td,
.legal-page__cookies-table th {
    white-space: normal;
}

.legal-page__version {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: calc(var(--space-1) * -1);
}

.legal-page__links {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
}

/* --- Alta de club por autoservicio (doc13 H17, tarea 17.8) -------------- */

.club-signup-form h2 {
    font-size: 1.05rem;
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.club-signup-form h2:first-of-type {
    margin-top: var(--space-3);
    padding-top: 0;
    border-top: none;
}

.club-signup-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.club-signup-form__phone {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.club-signup-form__phone-prefix {
    flex: none;
    padding: 0.6rem var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.audit-log__acting-user {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.club-signup-form__layer1 {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* --- Selector de plan (Suscripción, doc11 H16) -------------------------- */

.plan-picker__period {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-3);
}

.plan-picker__period legend {
    font-weight: 600;
    padding: 0;
}

.plan-picker__inline {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-1);
    font-weight: 400 !important;
    margin: 0 !important;
    white-space: nowrap;
}

.plan-picker__inline input[type="radio"] {
    width: auto !important;
}

/* --- Ayuda (doc12 H15) --------------------------------------------------- */

.help-search {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.help-search input[type="search"] {
    flex: 1;
}

.help-index__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.help-index__card {
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
}

.help-index__card:hover {
    border-color: var(--color-primary);
}

.help-show {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.help-show__back {
    margin: 0;
}

.help-toc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    padding: var(--space-2) var(--space-3);
}

.help-toc summary {
    cursor: pointer;
    font-weight: 600;
}

.help-toc ol {
    margin: var(--space-2) 0 0;
    padding-left: 1.2em;
}

.help-toc li {
    margin-bottom: var(--space-1);
}

.help-toc__sub {
    list-style: none;
    margin: var(--space-1) 0 var(--space-1) var(--space-2);
    padding: 0;
    font-size: 0.9em;
}

.help-toc__sub li {
    margin-bottom: var(--space-1);
}

.help-manual__missing {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
}

.help-search-results__list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.help-search-results__list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.help-search-results__manual {
    display: inline-block;
    margin-left: var(--space-2);
    font-size: 0.78rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    padding: var(--space-2);
    color: var(--color-muted);
    vertical-align: middle;
}

.help-link:hover {
    color: var(--color-primary);
}

.help-link svg {
    width: 16px;
    height: 16px;
}

.help-link--text {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .help-show {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        align-items: start;
        gap: var(--space-4);
    }

    .help-show__back,
    .help-show__print {
        grid-column: 1 / -1;
    }

    .help-toc {
        position: sticky;
        top: var(--space-3);
    }

    .help-toc summary {
        pointer-events: none;
    }

    .help-toc summary::-webkit-details-marker {
        display: none;
    }

    .help-toc summary::marker {
        content: '';
    }
}

/* --- Aviso de cookies (doc15 H18 §4.2) ----------------------------------- */

.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-text);
    color: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.cookie-notice p {
    margin: 0;
    font-size: 0.85rem;
    max-width: 60ch;
}

.cookie-notice a {
    color: var(--color-surface);
    text-decoration: underline;
}

.cookie-notice__form {
    margin: 0;
}

.cookie-notice button {
    white-space: nowrap;
}

@media print {
    .app-header,
    .app-footer,
    .help-show__back,
    .help-show__print,
    .help-toc,
    .clock-override-banner,
    .impersonation-banner,
    .cookie-notice {
        display: none !important;
    }
}

/* Vídeo explicativo en el alta de club (mismo fichero que la landing). */
.signup-video {
    margin: 0 0 24px;
}

.signup-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: #0e2a2b;
    box-shadow: var(--shadow-md);
}

.signup-video figcaption {
    margin-top: 8px;
    font-size: 0.92rem;
    color: var(--color-muted);
}