/* EL CLUB, WALLET (F3-T2e; boceto de la central de la F3 aprobado el 2026-10-27, apartados 2 y 6): la pestaña «Wallet» del Programa (el estado de
   las credenciales, los avisos fijos y la vista previa del pase en Apple y en Google con los colores de la marca) y los pases del socio en su ficha.
   Las vistas previas usan las --club-* de la marca (como el pase de verdad, iguales en claro y en oscuro); lo demás, las fichas --limpia-*. Va
   detrás de plano-club-canales.css y antes de la hoja limpia. Aparte, para no pisar las piezas de las otras ramas de la F3. */

.club-wallet-dato { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.club-wallet-valor { font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 600; color: var(--limpia-tinta); overflow-wrap: anywhere; }

.club-wallet-aviso { min-height: 40px; }
.club-wallet-interruptor { flex: none; position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--limpia-neutro-fondo); border: 1px solid var(--limpia-borde); }
.club-wallet-interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--limpia-tinta-3); }
.club-wallet-interruptor[aria-checked="true"] { background: var(--limpia-morado); border-color: var(--limpia-morado); }
.club-wallet-interruptor[aria-checked="true"]::after { left: 16px; background: #fff; }

@media (min-width: 720px) { .club-wallet-zona-previa { grid-column: 1 / -1; } }
.club-wallet-pases { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.club-wallet-pase-caja { display: flex; flex-direction: column; gap: 6px; width: min(100%, 300px); }
.club-wallet-rotulo { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--limpia-tinta-3); }
.club-wallet-explica { max-width: 300px; align-self: center; }

.club-wallet-pase-a, .club-wallet-pase-g {
    width: 100%; overflow: hidden; background: var(--club-tarjeta, #162238); color: var(--club-texto-tarjeta, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25); font-family: system-ui, -apple-system, sans-serif;
}
.club-wallet-pase-a { border-radius: 14px; }
.club-wallet-pase-g { border-radius: 22px; }
.club-wallet-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.club-wallet-logo img { display: block; max-height: 28px; max-width: 140px; }
.club-wallet-logo-texto { font-weight: 700; letter-spacing: .06em; }
.club-wallet-puntos { text-align: right; }
.club-wallet-puntos small, .club-wallet-campos small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--club-acento, #c9a227); }
.club-wallet-pase-g .club-wallet-campos small { color: inherit; opacity: .75; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11px; }
.club-wallet-puntos b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.club-wallet-tira { height: 92px; background-color: var(--club-principal, #1e2d4a); background-size: cover; background-position: center; }
.club-wallet-heroe { height: 96px; margin-top: 12px; background-color: var(--club-principal, #1e2d4a); background-size: cover; background-position: center; }
/* «Imagen grande del pase» (bocetos del logo del club, B, 2026-11-03): el logo entero, con margen, sobre el color principal (13/117 y 23/358 en
   Apple; 17/117 y 34/358 en Google), y sobre la placa si el principal es oscuro. */
.club-wallet-imagen { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; max-width: 420px; }
.club-wallet-opcion { display: block; font-size: .75rem; color: var(--limpia-tinta-3); }
.club-wallet-tira-marca, .club-wallet-heroe-marca { display: grid; place-items: center; box-sizing: border-box; }
.club-wallet-tira-marca { padding: 10px 19px; }
.club-wallet-heroe-marca { padding: 14px 28px; }
.club-wallet-tira-marca img, .club-wallet-heroe-marca img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; }
.club-wallet-tira-marca img.club-placa, .club-wallet-heroe-marca img.club-placa { padding: 6px 10px; border-radius: 8px; box-sizing: border-box; }
.club-wallet-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px; }
.club-wallet-campos-3 { grid-template-columns: 1fr 1fr 1fr; padding: 10px 14px; }
.club-wallet-campos b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.club-wallet-pase-g .club-wallet-campos b { font-weight: 500; }
.club-wallet-codigo {
    display: flex; flex-direction: column; align-items: center; gap: 2px; width: 132px; margin: 4px auto 14px; padding: 8px 8px 4px;
    border-radius: 6px; background: #fff; color: #111; font: 600 11px ui-monospace, monospace;
}
.club-wallet-pase-g .club-wallet-codigo { width: 140px; margin-bottom: 6px; border-radius: 12px; padding: 10px 10px 4px; }
.club-wallet-codigo .club-qr { width: 100%; height: auto; }
.club-wallet-cab-g { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; font-size: 13.5px; }
.club-wallet-cab-g i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--club-tarjeta, #162238); font: 700 15px Georgia, serif; font-style: normal; }
.club-wallet-socio { margin: 6px 16px 0; font-size: 22px; font-weight: 500; }

/* Los pases del socio en su ficha (apartado 6). */
.club-pases-socio { display: flex; flex-direction: column; gap: 6px; }
.club-linea-pase { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--limpia-borde-fino); }
.club-linea-pase:first-of-type { border-top: 0; }
.club-linea-pase-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--limpia-neutro-fondo); color: var(--limpia-tinta-2); }
.club-linea-pase-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.club-linea-pase-tx b { font-weight: 600; font-size: .9rem; }
.club-linea-pase-tx span { font-size: .8rem; color: var(--limpia-tinta-3); }
.club-linea-pase-sin .club-linea-pase-tx b { color: var(--limpia-tinta-2); font-weight: 500; }
@media (max-width: 599.98px) {
    .club-linea-pase .mud-button-root { min-height: 44px; }
    .club-wallet-pases { justify-content: center; }
    .club-wallet-explica { align-self: stretch; max-width: none; }
}