/* App del club: install sheet and "App en tu teléfono" card. */
.crar-sheet {
	--s-navy: #212d45;
	--s-gold: #ffc03d;
	--s-ink: #4b4f58;
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: flex-end; justify-content: center;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.crar-sheet__bg {
	position: absolute; inset: 0; background: rgba(17, 24, 39, .5);
	opacity: 0; transition: opacity .25s ease;
}
.crar-sheet__panel {
	position: relative; width: 100%; max-width: 480px;
	background: #fff; color: var(--s-ink);
	border-radius: 24px 24px 0 0;
	padding: 26px 22px calc(20px + env(safe-area-inset-bottom));
	box-shadow: 0 -20px 50px -20px rgba(17, 24, 39, .45);
	transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .25, 1.05);
	max-height: 88vh; overflow-y: auto;
}
.crar-sheet.is-open .crar-sheet__bg { opacity: 1; }
.crar-sheet.is-open .crar-sheet__panel { transform: none; }
@media (min-width: 640px) {
	.crar-sheet { align-items: center; padding: 24px; }
	.crar-sheet__panel { border-radius: 24px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
	.crar-sheet.is-open .crar-sheet__panel { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.crar-sheet__panel, .crar-sheet__bg { transition: none; }
}
.crar-sheet__x {
	position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
	border: 0; border-radius: 50%; background: #f3f4f7; color: var(--s-navy);
	display: grid; place-items: center; cursor: pointer; padding: 0;
}
.crar-sheet__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.crar-sheet__head { display: flex; gap: 16px; align-items: center; padding-right: 48px; }
.crar-sheet .crar-sheet__panel:focus, .crar-sheet .crar-sheet__panel:focus-visible { outline: none !important; }
.crar-sheet__icon { width: 56px; height: 56px; border-radius: 14px; flex: none; box-shadow: 0 8px 18px -8px rgba(33, 45, 69, .55); }
.crar-sheet__title { margin: 0 0 4px; font: 600 20px/1.2 Outfit, Inter, sans-serif; color: var(--s-navy); }
.crar-sheet__lead { margin: 0; font-size: 15px; line-height: 1.45; }
.crar-sheet__steps { counter-reset: s; list-style: none; margin: 20px 0 4px; padding: 0; display: grid; gap: 10px; }
.crar-sheet__steps li {
	counter-increment: s; position: relative; padding: 12px 14px 12px 50px;
	background: #f6f7fa; border-radius: 14px; font-size: 15px; line-height: 1.45;
}
.crar-sheet__steps li::before {
	content: counter(s); position: absolute; left: 12px; top: 10px;
	width: 26px; height: 26px; border-radius: 50%; background: var(--s-navy); color: #fff;
	display: grid; place-items: center; font: 600 13px/1 Inter, sans-serif;
}
.crar-sheet__steps b { color: var(--s-navy); }
.crar-share { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: #0a84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crar-sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.crar-sheet__go, .crar-sheet__later {
	appearance: none; border: 0; border-radius: 999px; min-height: 50px; padding: 0 22px;
	font: 600 16px/1 Inter, sans-serif; cursor: pointer;
}
.crar-sheet__go { background: var(--s-gold); color: var(--s-navy); }
.crar-sheet__go:hover { background: #ffae00; }
.crar-sheet__later { background: transparent; color: var(--s-ink); }
.crar-sheet__later:hover { background: #f3f4f7; }
.crar-sheet button:focus-visible { outline: 3px solid var(--s-navy); outline-offset: 2px; }

/* Card in "Mi cuenta" */
.crar-appcard { display: flex; gap: 18px; align-items: flex-start; margin-top: 18px; }
.crar-appcard__icon { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: 0 8px 18px -8px rgba(33, 45, 69, .55); }
.crar-appcard__body { min-width: 0; }
.crar-appcard .crar-section { margin-bottom: 6px; }
.crar-appcard .crar-muted { margin: 0 0 14px; }
.crar-btn--gold { background: var(--gold, #ffc03d); color: var(--navy, #212d45) !important; }
.crar-btn--gold::before { background: #ffae00; }
.crar-btn[hidden] { display: none !important; }
@media (max-width: 480px) {
	.crar-appcard { flex-direction: column; }
}

/* Sync / offline notice */
.crar-sync {
	position: fixed; left: 0; right: 0; margin: 0 auto; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 99990;
	display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(560px, calc(100vw - 24px));
	padding: 10px 12px 10px 16px; border-radius: 999px;
	background: #212d45; color: #fff; font: 500 14px/1.35 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-shadow: 0 14px 34px -14px rgba(17, 24, 39, .6);
	transform: translateY(140%); opacity: 0; pointer-events: none;
	transition: transform .35s cubic-bezier(.2, .9, .25, 1.05), opacity .25s ease;
}
.crar-sync.is-on { transform: none; opacity: 1; pointer-events: auto; }
.crar-sync--tabbar { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .crar-sync--tabbar { bottom: calc(20px + env(safe-area-inset-bottom)); } }
.crar-sync__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ffc03d; }
.crar-sync--busy .crar-sync__dot { animation: crar-pulse 1s ease-in-out infinite; }
.crar-sync--ok .crar-sync__dot { background: #3ccf8e; }
.crar-sync--off { border-radius: 18px; }
.crar-sync--off .crar-sync__dot { background: #ff8a65; }
.crar-sync button { appearance: none; border: 0; border-radius: 999px; background: #ffc03d; color: #212d45; font: 600 13px/1 inherit; font-family: inherit; padding: 9px 14px; cursor: pointer; flex: none; }
.crar-sync .crar-sync__x { background: rgba(255, 255, 255, .12); color: #fff; width: 30px; height: 30px; padding: 0; font-size: 18px; }
.crar-sync button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes crar-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .crar-sync { transition: none; } .crar-sync--busy .crar-sync__dot { animation: none; } }