{{--
    Estética común del sitio público de un club de tenis.

    Vive en un parcial y no copiada en cada vista porque son 6 páginas (home,
    torneos, detalle de torneo, ranking, jugadores, login/registro) que tienen
    que verse igual: si el CSS se duplica, la primera que se retoca deja a las
    otras desalineadas.

    Paleta: la del logo del club (naranja de polvo de ladrillo + verde pelota),
    no la corporativa de Taxes.
--}}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Anton&display=swap" rel="stylesheet">

<style>
    :root {
        --clay:        #d86000;
        --clay-dark:   #a34700;
        --clay-deep:   #7c2d12;
        --ball:        #a8c000;
        --grass:       #60a830;
        --negro:       #111111;
        --tx-dark:     #1a1512;
        --tx-grey:     #7c6f66;
        --tx-light-bg: #fdf8f4;
        --display: 'Anton', 'Montserrat', sans-serif;
    }
    * { box-sizing: border-box }
    body {
        margin: 0;
        font-family: 'Montserrat', sans-serif;
        color: var(--tx-dark);
        background: var(--tx-light-bg);
    }
    a { text-decoration: none }

    /* ═══════════ NAV ═══════════ */
    .nav {
        background: var(--negro);
        padding: 14px 32px;
        display: flex; align-items: center; gap: 28px;
        position: relative; z-index: 5;
    }
    .nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
    .nav-brand img { height: 56px; width: auto }
    .nav-links { display: flex; gap: 22px; flex: 1; flex-wrap: nowrap }
    .nav-links a {
        color: #fff;
        font-weight: 700; font-size: 13.5px;
        text-transform: uppercase; letter-spacing: .6px;
        padding-bottom: 3px; white-space: nowrap;
    }
    .nav-links a:hover { color: var(--ball) }
    .nav-links a.activo { border-bottom: 2px solid var(--clay); color: #fff }
    .nav-cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0 }
    .btn-nav {
        font-weight: 700; font-size: 12.5px;
        text-transform: uppercase; letter-spacing: .6px;
        padding: 11px 22px; border-radius: 4px;
        transition: background .12s, color .12s;
    }
    .btn-nav--full  { background: var(--clay); color: #fff; border: 2px solid var(--clay) }
    .btn-nav--full:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #fff }
    .btn-nav--ghost { background: transparent; color: #fff; border: 2px solid #fff }
    .btn-nav--ghost:hover { background: #fff; color: var(--negro) }

    /* ═══════════ ENCABEZADO DE PÁGINA INTERNA ═══════════ */
    .page-head {
        background: var(--negro);
        color: #fff;
        padding: 34px 32px 42px;
        position: relative; overflow: hidden;
    }
    .page-head::after {
        content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
        background: linear-gradient(160deg, var(--clay) 0%, #c25400 100%);
        clip-path: polygon(52% 0, 100% 0, 100% 100%, 0 100%);
        opacity: .9;
    }
    .page-head-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1 }
    .page-head h1 {
        font-family: var(--display);
        text-transform: uppercase;
        font-size: clamp(28px, 4vw, 44px);
        letter-spacing: .5px;
        margin: 0 0 6px;
    }
    .page-head p { margin: 0; color: rgba(255,255,255,.75); font-size: 15px }
    .back-link { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600 }
    .back-link:hover { color: var(--ball) }

    /* ═══════════ CONTENEDOR ═══════════ */
    .container-page { max-width: 1180px; margin: 28px auto 40px; padding: 0 24px }

    .panel {
        background: #fff; border: 1px solid #f2e6db; border-radius: 14px;
        padding: 22px; margin-bottom: 18px;
        box-shadow: 0 2px 10px rgba(124,45,18,.05);
    }
    .panel-titulo {
        font-family: var(--display); text-transform: uppercase;
        font-size: 19px; letter-spacing: .5px; color: var(--tx-dark);
        margin: 0 0 14px;
    }

    /* ═══════════ BADGES ═══════════ */
    .badge-genero { color: #fff }
    .badge-genero-masc { background: #2563eb }
    .badge-genero-feme { background: #db2777 }
    .badge-genero-mixt { background: #7c3aed }
    .pill {
        display: inline-block; padding: 3px 12px; border-radius: 999px;
        font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
    }
    .pill-clay { background: #fdece0; color: var(--clay-dark) }
    .pill-ball { background: #eef6d5; color: #5c6f00 }

    /* ═══════════ BOTONES ═══════════ */
    .btn-clay {
        background: var(--clay); color: #fff; border: none;
        font-weight: 700; padding: 11px 24px; border-radius: 4px;
        text-transform: uppercase; font-size: 13px; letter-spacing: .5px;
    }
    .btn-clay:hover { background: var(--clay-dark); color: #fff }

    /* ═══════════ FOOTER ═══════════ */
    .site-footer {
        background: var(--negro);
        color: #9b8d83;
        padding: 26px 24px;
        text-align: center;
        font-size: 13px;
        border-top: 4px solid var(--clay);
    }
    .site-footer a { color: var(--ball) }

    /* ═══════════ RESPONSIVE ═══════════ */
    @media (max-width: 1100px) {
        .nav { gap: 18px; padding: 12px 20px }
        .nav-links { gap: 15px }
        .nav-links a { font-size: 12.5px }
        .nav-brand img { height: 46px }
    }
    @media (max-width: 900px) {
        /* Con 6 ítems el menú no entra: pasa a una fila propia que se desliza */
        .nav { flex-wrap: wrap; gap: 12px }
        .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px }
        .nav-cta { margin-left: auto }
    }
    @media (max-width: 600px) {
        .nav-brand img { height: 40px }
        .btn-nav { padding: 8px 14px; font-size: 11.5px }
        .page-head { padding: 24px 18px 30px }
        .page-head::after { width: 42% }
        .container-page { padding: 0 16px; margin-top: 20px }
        .panel { padding: 16px }
    }
</style>