/* ============================================================
   club.css — utilidades de identidad C.A.F. TENIS para /admin y /panel
   (docs/IDENTIDAD-VISUAL.md: celeste #00b5f0, bordó #7f2f37,
    amarillo #f6d106, petróleo #09688a)
   Define SOLO clases nuevas: no altera el look de pantallas existentes.
   ============================================================ */

/* Botón institucional (bordó) — acción primaria de las pantallas del club */
.btn-club,
.btn-club:focus {
    background-color: #7f2f37;
    border-color: #7f2f37;
    color: #ffffff;
    font-weight: 600;
}
.btn-club:hover,
.btn-club:active {
    background-color: #632329;
    border-color: #632329;
    color: #ffffff;
}
.btn-club:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(127, 47, 55, .35);
}

/* Botón secundario (bordó outline) — acciones "volver / salir" del club */
.btn-club-outline,
.btn-club-outline:focus {
    background-color: transparent;
    border-color: #7f2f37;
    color: #7f2f37;
    font-weight: 600;
}
.btn-club-outline:hover,
.btn-club-outline:active {
    background-color: #7f2f37;
    border-color: #7f2f37;
    color: #ffffff;
}
.btn-club-outline:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(127, 47, 55, .35);
}

/* Badges institucionales */
.badge-club-celeste {
    background-color: #00b5f0;
    color: #ffffff;
}
.badge-club-bordo {
    background-color: #7f2f37;
    color: #ffffff;
}
.badge-club-petroleo {
    background-color: #09688a;
    color: #ffffff;
}

/* Título de página con el acento amarillo pelota */
.page-title-club {
    border-left: 4px solid #f6d106;
    padding-left: 12px;
}

/* Foto en el avatar del topbar (socio): la imagen llena el círculo */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Modal de recorte del avatar (Cropper.js) — acota la imagen fuente en el modal */
#avatar-crop-img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
}

/* Campanita (S5): ítems de notificación en el dropdown (socio y admin) */
.notif-menu { max-height: 72vh; overflow-y: auto; }
.notif-item { white-space: normal; border-radius: 8px; }
.notif-item > .bi { color: #09688a; font-size: 1rem; }
.notif-unread { background: rgba(0, 181, 240, .08); }
.notif-item-title { font-weight: 600; font-size: .85rem; color: #33454c; }
.notif-item-body { color: #6b7a80; font-size: .8rem; }
.notif-item-when { color: #9aa7ac; font-size: .7rem; margin-top: .1rem; }
.notif-vertodas { color: #09688a; font-weight: 600; font-size: .82rem; border-top: 1px solid rgba(0,0,0,.06); margin-top: .2rem; }
/* Separación estados (recordatorios permanentes, arriba) vs eventos (por fecha) */
.notif-estado-sep { margin: .15rem .25rem; }
.notif-actividad-sep { background: #f6f8f9; color: #7c8a90; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding-top: .35rem; padding-bottom: .35rem; }

/* ============================================================
   Panel del socio — pelota de turnos + botones de tipo de partido (D)
   Pelota de tenis en amarillo CAF con el saldo; tipos de partido como
   tarjetas con gradiente bordó + ícono + subtítulo.
   ============================================================ */

/* Pelota de tenis con el saldo de turnos (hero del wizard de reserva) */
.turnos-ball {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    margin: 1.25rem 0 .25rem;
}
.turnos-ball svg {
    width: 86px;
    height: 86px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .20));
}
.turnos-ball .turnos-cap {
    font-size: .82rem;
    font-weight: 700;
    color: #09688a;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Horario de apertura de mañana (arriba del wizard, centrado, siempre visible) */
.reserva-horario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    text-align: center;
    margin: .25rem 0 1rem;
}
.reserva-horario .reserva-horario-lbl {
    font-size: .75rem;
    font-weight: 700;
    color: #6b7b82;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.reserva-horario .reserva-horario-lbl i { color: #09688a; }
.reserva-horario .reserva-horario-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: #09688a;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* Reloj del servidor en vivo (reemplaza la pelota en los pasos de reserva) */
.reloj-servidor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: max-content;
    max-width: 100%;
    margin: 1.5rem auto .25rem;
    padding: .8rem 1.6rem;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #09688a, #00b5f0);
    box-shadow: 0 5px 16px rgba(9, 60, 80, .28);
}
.reloj-servidor .reloj-servidor-lbl {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    opacity: .9;
}
.reloj-servidor .reloj-servidor-hora {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

/* Botones de tipo de partido: grilla de tarjetas (gradiente bordó + ícono + subtítulo) */
.tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
}
.tipo-grid form { margin: 0; }
.tipo-card {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    padding: 1rem .85rem;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    background: linear-gradient(135deg, #8a3540, #6d262e);
    box-shadow: 0 3px 10px rgba(127, 47, 55, .28);
    transition: transform .12s ease, box-shadow .12s ease;
}
.tipo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(127, 47, 55, .38);
    color: #ffffff;
}
.tipo-card:active { transform: translateY(0); }
.tipo-card:focus-visible {
    outline: 3px solid #f6d106;
    outline-offset: 2px;
}
.tipo-card .tipo-ic { font-size: 1.5rem; opacity: .95; }
.tipo-card .tipo-nombre { font-weight: 800; font-size: 1.02rem; margin-top: .2rem; line-height: 1.12; }

@media (prefers-reduced-motion: reduce) {
    .tipo-card { transition: none; }
    .tipo-card:hover { transform: none; }
}


/* Botón "Comprar turnos" de la pelota de turnos del panel (pagos online). Lleva a la ÚNICA
   página de compra (/pagos/turnos) y vuelve a donde estaba el socio. */
.turnos-comprar {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .6rem; padding: .45rem 1rem;
    background: #0787a6; color: #fff; border-radius: 8px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
}
.turnos-comprar:hover { background: #12556b; color: #fff; }