/* Reset mínimo, scopeado a lo justo — nada de resets globales agresivos. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Cualquier componente que se muestre/oculte con el atributo `hidden`
   (modales, avisos, barras…) tiene que quedar oculto de verdad pase lo
   que pase — sin esto, una clase con `display: flex/grid/etc.` propia
   (misma especificidad que `[hidden]`, pero declarada después en la
   cascada) gana y el elemento se queda visible aunque el JS ya haya
   puesto `el.hidden = true`. Bug real encontrado en producción: la X
   de cerrar el modal de instalar la PWA "no hacía nada" — sí cambiaba
   el atributo, pero `.crk-modal { display: flex }` lo seguía pintando
   igual. Esta regla, con !important, evita tener que acordarse de
   repetir el arreglo en cada componente nuevo que use `hidden`. */
[hidden] { display: none !important; }

/* ---- Pantalla de carga propia (splash) ---- */
.crk-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.3s ease;
}
.crk-splash--hide { opacity: 0; pointer-events: none; }
.crk-splash__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.crk-splash__icon {
	position: relative;
	width: 25vw;
	max-width: 110px;
	min-width: 64px;
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.35));
}

body.crk-body {
	margin: 0;
	background: var(--crk-bg);
	color: var(--crk-text);
	color-scheme: dark;
	font-family: var(--crk-font);
	font-size: 16px;
	line-height: 1.5;
	min-height: 100vh;
	min-height: 100dvh; /* iOS: 100vh no descuenta la barra de direcciones dinámica, así que el fixed de abajo "saltaba" al hacer scroll */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

.crk-container {
	width: 100%;
	max-width: var(--crk-container);
	margin: 0 auto;
	padding: 0 var(--crk-space-4);
}
.crk-body--marketing .crk-container { max-width: 1100px; }

/* ---- Topbar ---- */
.crk-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	/* La zona segura de arriba (notch/cámara) es hueco por encima del
	   contenido real de la cabecera, no un espacio donde se centra el
	   logo — por eso se suma a la altura en vez de sustituirla, y se
	   deja como padding para que el contenido siga centrado en los
	   60px de siempre, ahora empujado por debajo de esa zona. Sin esto,
	   el logo y el resto de la cabecera se dibujaban debajo del reloj y
	   los iconos del sistema al abrir la PWA instalada a pantalla
	   completa — visible en pruebas reales del cliente. */
	height: calc(var(--crk-header-h) + var(--crk-safe-top));
	padding-top: var(--crk-safe-top);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: var(--crk-space-4);
	padding-right: var(--crk-space-4);
	background: var(--crk-surface);
	border-bottom: 1px solid var(--crk-border);
}
.crk-logo { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; }
.crk-logo span { color: var(--crk-primary); }
.crk-topbar__actions { display: flex; align-items: center; gap: var(--crk-space-3); }

@media (max-width: 480px) {
	.crk-topbar { padding-left: var(--crk-space-3); padding-right: var(--crk-space-3); }
	.crk-topbar__actions { gap: 6px; }
	.crk-topbar__actions .crk-btn { padding: 8px 12px; font-size: 0.78rem; }
}

/* ---- Bottom nav (mobile/tablet) ---- */
.crk-bottom-nav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	/* `min-height`, no `height` — con box-sizing: border-box, una altura
	   fija se comería el padding-bottom de abajo por dentro. En un
	   iPhone real con zona segura (~34px instalado como PWA), eso dejaba
	   solo ~30px de los 64px para los iconos y el texto: se veían
	   apretados/tocando el borde. Con min-height, el padding SUMA en vez
	   de restar, así que los 64px de contenido quedan intactos siempre. */
	min-height: var(--crk-bottomnav-h);
	display: flex;
	background: var(--crk-surface);
	border-top: 1px solid var(--crk-border);
	/* Leaflet mueve el mapa con transform (translate3d) para el pan/zoom,
	   lo que le abre su propio contexto de composición GPU — en algunos
	   WebKit (Safari/PWA instalada en iOS) eso puede acabar pintándose
	   por encima de un elemento fixed normal aunque tenga menos z-index
	   en apariencia, porque no comparten la misma "capa". z-index alto
	   de sobra + forzar esta barra a su propia capa GPU con translateZ
	   es la manera estándar de dejarlo sin ambigüedad — confirmado real
	   en pruebas del cliente: el menú se veía por detrás del mapa. */
	z-index: 500;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	/* `env(safe-area-inset-bottom)` puede ser 0 de verdad en casos reales
	   (abierto desde una pestaña normal en vez del icono de la pantalla de
	   inicio, ciertos WebView…) — bug real reportado: el menú pegado
	   contra el borde inferior. Un mínimo de 12px garantiza que el menú
	   nunca toque el borde del todo, tenga o no zona seguridad real el
	   dispositivo. */
	padding-bottom: max(12px, var(--crk-safe-bottom));
}
.crk-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-decoration: none;
	color: var(--crk-text-muted);
	font-size: 0.7rem;
}
.crk-bottom-nav__item.is-active { color: var(--crk-primary); }
.crk-bottom-nav__icon { width: 22px; height: 22px; }
.crk-nav-badge {
	position: absolute;
	top: -4px;
	right: -8px;
	background: var(--crk-accent);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	min-width: 15px;
	height: 15px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	line-height: 1;
}

/* ---- Barra "Instalar app" + modal de instrucciones ---- */
.crk-install-bar {
	position: fixed;
	left: 0; right: 0;
	bottom: max(12px, var(--crk-safe-bottom));
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--crk-space-3);
	padding: var(--crk-space-3) var(--crk-space-4);
	background: var(--crk-surface);
	border-top: 1px solid var(--crk-border);
	font-size: 0.85rem;
}
.crk-install-bar__close {
	all: unset;
	cursor: pointer;
	color: var(--crk-text-muted);
	font-size: 1rem;
	line-height: 1;
	padding: 4px 6px;
	flex-shrink: 0;
}
.crk-install-bar__close:hover { color: var(--crk-text); }
/* En las pantallas de la app hay que dejarla por encima del menú
   inferior fijo, no debajo — en marketing (sin bottom-nav) va pegada
   de verdad al borde. */
.crk-body--app .crk-install-bar { bottom: calc(var(--crk-bottomnav-h) + var(--crk-safe-bottom)); }
@media (min-width: 1024px) {
	.crk-body--app .crk-install-bar { bottom: max(12px, var(--crk-safe-bottom)); }
}

/* ---- Botón de pánico ---- */
.crk-panic-btn {
	position: fixed;
	right: var(--crk-space-3);
	/* Más arriba que antes, por encima también de la barra de instalar
	   (que ocupa esa misma franja inferior) — para que no se solapen
	   por defecto antes de que el usuario lo mueva a su gusto. Arrastrable
	   de verdad (ver el script en crk_render_panic_button()); una vez
	   se mueve una vez, la posición pasa a left/top fijos en píxeles y
	   esto dejar de aplicar. */
	bottom: 35%;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--crk-danger);
	color: #fff;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
	z-index: 450;
	cursor: grab;
	touch-action: none;
	user-select: none;
}
.crk-panic-btn.is-dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(239, 68, 68, 0.6); }
@media (min-width: 1024px) {
	.crk-panic-btn { bottom: 35%; right: var(--crk-space-4); }
}

/* Siempre centrado, tipo lightbox — un usuario real lo pidió
   explícitamente después de que la versión "hoja desde abajo" en
   móvil generara confusión con dónde estaba realmente la X de cerrar. */
.crk-modal {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--crk-space-4);
}
.crk-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.crk-modal__panel {
	position: relative;
	background: var(--crk-surface);
	border-radius: var(--crk-radius-lg);
	padding: var(--crk-space-5) var(--crk-space-4);
	width: 100%;
	max-width: var(--crk-container);
	max-height: 85vh;
	overflow-y: auto;
}
.crk-modal__close {
	position: absolute;
	top: var(--crk-space-3);
	right: var(--crk-space-3);
	background: none;
	border: none;
	color: var(--crk-text-muted);
	font-size: 1.1rem;
	cursor: pointer;
	padding: var(--crk-space-2);
	line-height: 1;
}

.crk-install-steps__list { list-style: none; margin: 0 0 var(--crk-space-2); padding: 0; display: flex; flex-direction: column; gap: var(--crk-space-3); }
.crk-install-steps__list li { display: flex; align-items: center; gap: var(--crk-space-3); font-size: 0.9rem; }
.crk-step-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--crk-primary); }

/* ---- Sidebar nav (laptop/desktop) ---- */
.crk-sidebar-nav { display: none; }

@media (min-width: 1024px) {
	.crk-bottom-nav { display: none; }
	.crk-sidebar-nav {
		display: flex;
		flex-direction: column;
		gap: var(--crk-space-2);
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: 220px;
		padding: var(--crk-space-5) var(--crk-space-3);
		background: var(--crk-surface);
		border-right: 1px solid var(--crk-border);
	}
	.crk-sidebar-nav__item {
		display: flex;
		align-items: center;
		gap: var(--crk-space-3);
		padding: var(--crk-space-3);
		border-radius: var(--crk-radius-md);
		text-decoration: none;
		color: var(--crk-text-muted);
	}
	.crk-sidebar-nav__item.is-active,
	.crk-sidebar-nav__item:hover { color: var(--crk-text); background: var(--crk-surface-alt); }
	.crk-app-main { margin-left: 220px; }
}

/* `--crk-installbar-h` la fija pwa-install.js con la altura real
   (offsetHeight) de la barra de "Instalar app" mientras está visible, y
   la deja en 0px cuando no lo está — así este padding solo crece cuando
   hace falta de verdad. Sin esto, con la barra visible (solo pasa fuera
   de la PWA instalada), el mapa/contenido no reservaba sitio para ella
   y quedaba tapado. */
.crk-app-main { padding-bottom: calc(var(--crk-bottomnav-h) + var(--crk-safe-bottom) + var(--crk-space-5) + var(--crk-installbar-h, 0px)); }

/* ---- Buttons ---- */
.crk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--crk-space-2);
	padding: 12px 20px;
	border-radius: var(--crk-radius-pill);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.crk-btn--block { display: flex; width: 100%; }
/* Bug real: esta clase se usaba ya en varios sitios (barra de
   instalar, notificaciones, tarjetas de recarga del monedero) pero
   nunca se había definido — esos botones llevaban desde que se
   crearon renderizando a tamaño completo en vez de compacto, lo que
   en una tarjeta estrecha (como las de recarga del monedero) se veía
   desproporionadamente grande. */
.crk-btn--sm { padding: 8px 14px; font-size: 0.8rem; }
.crk-btn--primary { background: var(--crk-primary); color: #fff; }
.crk-btn--primary:hover { background: var(--crk-primary-hover); }
.crk-btn--accent { background: var(--crk-accent); color: #fff; }
.crk-btn--accent:hover { background: var(--crk-accent-hover); }
.crk-btn--ghost { background: transparent; border-color: var(--crk-border); color: var(--crk-text); }
.crk-btn--ghost:hover { border-color: var(--crk-primary); }
.crk-btn--danger { background: transparent; border-color: var(--crk-danger); color: var(--crk-danger); }
.crk-btn--danger:hover { background: rgba(239,68,68,0.1); }
.crk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.crk-btn-row { display: flex; gap: var(--crk-space-3); }
.crk-btn-row .crk-btn { flex: 1; }

/* ---- Toggle switch (2FA, ubicación por toggle…) ---- */
.crk-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--crk-space-3); }
.crk-toggle-row__text strong { display: block; font-size: 0.9rem; }
.crk-toggle-row__text span { display: block; font-size: 0.8rem; color: var(--crk-text-muted); margin-top: 2px; }
.crk-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.crk-switch input { opacity: 0; width: 0; height: 0; }
.crk-switch__track { position: absolute; inset: 0; background: var(--crk-surface-alt); border: 1px solid var(--crk-border); border-radius: 999px; transition: background .15s ease; cursor: pointer; }
.crk-switch__track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.crk-switch input:checked + .crk-switch__track { background: var(--crk-primary); border-color: var(--crk-primary); }
.crk-switch input:checked + .crk-switch__track::before { transform: translateX(18px); }

/* ---- Cards / lists ---- */
.crk-card {
	background: var(--crk-surface);
	border: 1px solid var(--crk-border);
	border-radius: var(--crk-radius-lg);
	padding: var(--crk-space-5);
}
.crk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--crk-space-3); }
.crk-list-item {
	display: flex;
	align-items: center;
	gap: var(--crk-space-3);
	background: var(--crk-surface);
	border: 1px solid var(--crk-border);
	border-radius: var(--crk-radius-md);
	padding: var(--crk-space-3);
	text-decoration: none;
}
.crk-avatar { width: 48px; height: 48px; border-radius: var(--crk-radius-pill); object-fit: cover; background: var(--crk-surface-alt); flex-shrink: 0; }
.crk-list-item__body { flex: 1; min-width: 0; }
.crk-list-item__name { font-weight: 600; margin: 0 0 2px; }
.crk-list-item__meta { color: var(--crk-text-muted); font-size: 0.85rem; margin: 0; }

.crk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--crk-radius-pill); font-size: 0.72rem; font-weight: 600; }
.crk-badge--verified { background: rgba(34,197,94,0.15); color: var(--crk-success); }
.crk-badge--premium { background: rgba(124,92,255,0.15); color: var(--crk-primary); }
.crk-badge--gold { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.crk-badge--online { background: rgba(34,197,94,0.15); color: #22c55e; }
.crk-badge--boost { background: linear-gradient(135deg, #fbbf24, #f97316); color: #431407; }
.crk-list-item--boosted { border-color: #f97316; }

/* ---- Vídeo de perfil: botón de play propio, sin controles nativos hasta que se pulsa ---- */
.crk-profile-video-wrap { position: relative; }
.crk-profile-video { width: 100%; display: block; border-radius: var(--crk-radius-md); background: #000; }
.crk-profile-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: none;
	font-size: 1.3rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.crk-profile-video-wrap.is-playing .crk-profile-video__play { display: none; }

/* ---- Forms ---- */
.crk-field { display: flex; flex-direction: column; gap: var(--crk-space-2); margin-bottom: var(--crk-space-4); }
.crk-label { font-size: 0.85rem; color: var(--crk-text-muted); }
.crk-input, .crk-select, .crk-textarea {
	background: var(--crk-surface-alt);
	border: 1px solid var(--crk-border);
	border-radius: var(--crk-radius-sm);
	padding: 12px 14px;
	color: var(--crk-text);
	font-size: 1rem;
	font-family: inherit;
	width: 100%;
	/* Sin esto, un <input type="time"/date/color"> nativo (como el
	   selector de hora de Encuentros) se dibuja por dentro asumiendo
	   fondo claro — los dígitos salen en un gris casi negro que, sobre
	   el fondo oscuro real de este campo, se ve como si "desaparecieran".
	   Bug real reportado por el cliente. */
	color-scheme: dark;
}
.crk-input:focus, .crk-select:focus, .crk-textarea:focus { outline: 2px solid var(--crk-primary); outline-offset: 1px; }

.crk-alert {
	display: flex;
	gap: var(--crk-space-3);
	padding: var(--crk-space-4);
	border-radius: var(--crk-radius-md);
	background: rgba(255,107,87,0.1);
	border: 1px solid rgba(255,107,87,0.3);
	font-size: 0.9rem;
}
.crk-alert--muted { background: var(--crk-surface-alt); border-color: var(--crk-border); color: var(--crk-text-muted); }

/* ---- Landing / marketing ---- */
.crk-hero { padding: var(--crk-space-7) 0; text-align: center; }
.crk-hero h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 var(--crk-space-4); letter-spacing: -0.02em; }
.crk-hero p { color: var(--crk-text-muted); font-size: 1.05rem; margin: 0 auto var(--crk-space-6); max-width: 480px; }
.crk-hero__actions { display: flex; flex-direction: column; gap: var(--crk-space-3); align-items: center; }

@media (min-width: 600px) {
	.crk-hero h1 { font-size: 2.6rem; }
	.crk-hero__actions { flex-direction: row; justify-content: center; }
}

.crk-features { display: grid; grid-template-columns: 1fr; gap: var(--crk-space-4); padding: var(--crk-space-6) 0; }
@media (min-width: 600px) { .crk-features { grid-template-columns: repeat(3, 1fr); } }
.crk-feature { padding: var(--crk-space-5); }
.crk-feature h3 { margin: var(--crk-space-3) 0 var(--crk-space-2); font-size: 1.05rem; }
.crk-feature p { color: var(--crk-text-muted); font-size: 0.92rem; margin: 0; }

/* ---- Pricing ---- */
.crk-pricing { display: grid; grid-template-columns: 1fr; gap: var(--crk-space-4); padding: var(--crk-space-5) 0; }
@media (min-width: 600px) { .crk-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .crk-pricing--3col { grid-template-columns: repeat(3, 1fr); } }
.crk-pricing-toggle { display: flex; justify-content: center; margin-bottom: var(--crk-space-5); }
.crk-pricing-toggle__group { display: inline-flex; background: var(--crk-surface-alt); border-radius: var(--crk-radius-pill); padding: 4px; gap: 4px; }
.crk-pricing-toggle__group button { all: unset; cursor: pointer; padding: 8px 20px; border-radius: var(--crk-radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--crk-text-muted); }
.crk-pricing-toggle__group button.is-active { background: var(--crk-primary); color: #fff; }
.crk-pricing-card__feature { display: flex; align-items: flex-start; gap: 8px; }
.crk-pricing-card__feature svg { flex-shrink: 0; margin-top: 2px; color: var(--crk-success); }
.crk-pricing-card__feature--soon { opacity: 0.55; }
.crk-pricing-card__feature--soon svg { color: var(--crk-text-muted); }
.crk-pricing-card { position: relative; }
.crk-pricing-card--highlight { border-color: var(--crk-primary); }
.crk-pricing-card__price { font-size: 2rem; font-weight: 700; margin: var(--crk-space-3) 0; }
.crk-pricing-card__price small { font-size: 0.9rem; color: var(--crk-text-muted); font-weight: 400; }
.crk-pricing-card ul { list-style: none; margin: var(--crk-space-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--crk-space-2); font-size: 0.9rem; color: var(--crk-text-muted); }

/* ---- Map ---- */
.crk-map {
	height: min(60vh, 480px);
	border-radius: var(--crk-radius-lg);
	overflow: hidden;
	margin-bottom: var(--crk-space-5);
}

/* ---- Tag picker (identidad / intereses) ---- */
.crk-tag-group { display: flex; flex-wrap: wrap; gap: var(--crk-space-2); margin-bottom: var(--crk-space-4); }
.crk-tag-option { position: relative; }
.crk-tag-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crk-tag-option label {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--crk-radius-pill);
	border: 1px solid var(--crk-border);
	background: var(--crk-surface-alt);
	color: var(--crk-text-muted);
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s ease;
}
.crk-tag-option input:checked + label {
	background: var(--crk-primary);
	border-color: var(--crk-primary);
	color: #fff;
}
.crk-tag-option input:focus-visible + label { outline: 2px solid var(--crk-primary); outline-offset: 2px; }

.crk-tag-readonly { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--crk-radius-pill); background: var(--crk-surface-alt); color: var(--crk-text-muted); font-size: 0.78rem; }

/* ---- Galería de fotos ---- */
.crk-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--crk-space-2); margin-bottom: var(--crk-space-4); }
.crk-photo-slot {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--crk-radius-md);
	overflow: hidden;
	background: var(--crk-surface-alt);
	border: 1px solid var(--crk-border);
}
.crk-photo-slot img, .crk-photo-slot video { width: 100%; height: 100%; object-fit: cover; }
.crk-photo-slot__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--crk-text-muted);
	cursor: pointer;
	border: none;
	background: transparent;
	font-size: 1.6rem;
}
.crk-photo-slot__badge {
	position: absolute;
	bottom: 4px;
	left: 4px;
	font-size: 0.65rem;
	padding: 2px 6px;
	border-radius: var(--crk-radius-pill);
	background: rgba(0,0,0,0.6);
	color: #fff;
}
.crk-photo-slot__delete {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.6);
	color: #fff;
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1;
}
.crk-photo-slot select {
	position: absolute;
	bottom: 4px;
	left: 4px;
	right: 4px;
	font-size: 0.65rem;
	padding: 3px 4px;
	border-radius: var(--crk-radius-sm);
	border: none;
	background: rgba(0,0,0,0.7);
	color: #fff;
}

/* ---- Profile view (perfil ajeno) ---- */
.crk-profile-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--crk-space-2); margin-bottom: var(--crk-space-4); }
.crk-profile-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--crk-radius-md); }
.crk-profile-gallery--single { grid-template-columns: 1fr; }

/* ---- Mensajes: lista de conversaciones ---- */
.crk-conv-item { position: relative; text-decoration: none; }
.crk-conv-item__badge {
	position: absolute;
	top: var(--crk-space-3);
	right: var(--crk-space-3);
	background: var(--crk-accent);
	color: #fff;
	font-size: 0.7rem;
	min-width: 20px;
	height: 20px;
	border-radius: var(--crk-radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

/* ---- Chat ---- */
.crk-chat { display: flex; flex-direction: column; height: calc(100dvh - var(--crk-header-h) - var(--crk-safe-top) - var(--crk-bottomnav-h) - var(--crk-safe-bottom)); }
.crk-chat__messages { flex: 1; overflow-y: auto; padding: var(--crk-space-4); display: flex; flex-direction: column; gap: var(--crk-space-2); }
.crk-bubble { position: relative; max-width: 75%; padding: 10px 14px; border-radius: var(--crk-radius-lg); font-size: 0.92rem; line-height: 1.4; word-break: break-word; }
.crk-bubble--theirs { align-self: flex-start; background: var(--crk-surface-alt); border-bottom-left-radius: 4px; }
.crk-bubble--mine { align-self: flex-end; background: var(--crk-primary); color: #fff; border-bottom-right-radius: 4px; padding-right: 30px; }
/* El recibo de abajo se saca del flujo con float — sin este clearfix, un
   float como único/último contenido puede dejar la burbuja sin alto
   propio (colapsa), aunque en la práctica casi siempre hay texto/imagen
   antes que ya le da altura. */
.crk-bubble::after { content: ''; display: table; clear: both; }

/* Recibo de "✓ Enviado" / "✓✓ Leído" — al lado del propio texto, no en
   su línea aparte debajo (pedido explícito: "queda horrible" separado).
   float:right hace que el texto normal fluya alrededor y el recibo
   quede pegado al final de la última línea, estilo WhatsApp — no en un
   bloque propio a menos que la burbuja vaya justa de ancho. */
.crk-bubble__receipt { float: right; margin: 3px 0 0 8px; font-size: 0.68rem; opacity: .75; letter-spacing: -1px; line-height: 1; }

/* Borrar un mensaje propio — discreto por defecto, más visible al
   pasar por encima de la burbuja (o siempre, en pantallas táctiles sin
   hover real). */
.crk-bubble__delete { all: unset; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .12s ease, background .12s ease; }
.crk-bubble--mine:hover .crk-bubble__delete { opacity: 1; }
.crk-bubble__delete:hover { background: rgba(0,0,0,.2); color: #fff; }
@media (hover: none) { .crk-bubble__delete { opacity: .55; } }

/* Borrar una conversación entera desde la lista */
.crk-conv-item-wrap { position: relative; }
.crk-conv-item__delete { all: unset; position: absolute; top: 50%; right: var(--crk-space-3); transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--crk-text-muted); opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.crk-conv-item-wrap:hover .crk-conv-item__delete { opacity: 1; }
.crk-conv-item__delete:hover { background: var(--crk-surface-alt); color: var(--crk-danger); }
@media (hover: none) { .crk-conv-item__delete { opacity: .5; } }
/* ---- Compositor de chat (rediseño estilo WhatsApp, pedido explícito
   del cliente con captura de referencia — solo aspecto visual, todo el
   comportamiento debajo es el mismo de siempre: mismos ids, mismos
   listeners de messages.js). ---- */
.crk-chat__form { display: flex; align-items: flex-end; gap: 6px; padding: 8px var(--crk-space-3); border-top: 1px solid var(--crk-border); background: var(--crk-surface); }

.crk-chat__round-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; padding: 0; color: var(--crk-text-muted); cursor: pointer; flex-shrink: 0; transition: background .12s ease, color .12s ease, transform .1s ease; }
.crk-chat__round-btn:hover { background: var(--crk-surface-alt); color: var(--crk-text); }
.crk-chat__round-btn:active { transform: scale(.92); }
.crk-chat__round-btn.is-recording { background: var(--crk-danger); color: #fff; animation: crk-pulse 1.2s ease-in-out infinite; }
.crk-chat__round-btn--send { background: var(--crk-primary); color: #fff; }
.crk-chat__round-btn--send:hover { background: var(--crk-primary-hover); }
.crk-chat__record-timer { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--crk-danger); font-weight: 600; margin-right: 2px; align-self: center; }
@keyframes crk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Campo de texto como una sola píldora redondeada — el input pierde su
   propio fondo/borde de formulario normal, los hereda del contenedor,
   para no tocar el `.crk-input` compartido con el resto de la app. */
.crk-chat__input-pill { flex: 1; display: flex; align-items: center; background: var(--crk-surface-alt); border: 1px solid var(--crk-border); border-radius: 22px; padding: 0 var(--crk-space-4); min-height: 40px; }
.crk-chat__input-pill:focus-within { border-color: var(--crk-primary); }
.crk-chat__input-pill .crk-input { background: none; border: none; padding: 9px 0; font-size: 0.95rem; }
.crk-chat__input-pill .crk-input:focus { outline: none; }

/* Botón "+" y su menú flotante de adjuntos */
.crk-chat__plus-wrap { position: relative; flex-shrink: 0; }
.crk-chat__plus-btn[aria-expanded="true"] { background: var(--crk-surface-alt); color: var(--crk-primary); transform: rotate(45deg); }
.crk-chat__plus-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	background: var(--crk-surface-alt);
	border: 1px solid var(--crk-border);
	border-radius: var(--crk-radius-md);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 170px;
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
	z-index: 20;
}
.crk-chat__plus-item { all: unset; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--crk-radius-sm); font-size: 0.88rem; color: var(--crk-text); cursor: pointer; }
.crk-chat__plus-item:hover, .crk-chat__plus-item:focus-visible { background: var(--crk-surface); }
.crk-chat__plus-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.crk-chat__plus-icon--photo { background: rgba(124,92,255,.18); color: var(--crk-primary); }
.crk-chat__plus-icon--video { background: rgba(255,107,87,.18); color: var(--crk-accent); }
.crk-chat__plus-icon--doc   { background: rgba(34,197,94,.18); color: var(--crk-success); }

.crk-chat__attach-preview { display: flex; align-items: center; gap: var(--crk-space-2); padding: 0 var(--crk-space-3) var(--crk-space-2); font-size: 0.8rem; color: var(--crk-text-muted); }
.crk-chat__attach-preview button { all: unset; cursor: pointer; color: var(--crk-danger); font-weight: 600; }
.crk-bubble__image { display: block; max-width: 100%; border-radius: var(--crk-radius-md); margin-bottom: 4px; }
.crk-bubble__file { display: inline-block; color: inherit; text-decoration: underline; }
.crk-bubble__audio { display: block; max-width: 220px; height: 34px; }
.crk-bubble--mine .crk-bubble__audio { filter: invert(1) grayscale(1) brightness(1.7); }
.crk-bubble__video { display: block; max-width: 240px; max-height: 320px; border-radius: var(--crk-radius-md); margin-bottom: 4px; background: #000; }
.crk-chat-header { display: flex; align-items: center; gap: var(--crk-space-3); padding: var(--crk-space-3) var(--crk-space-4); border-bottom: 1px solid var(--crk-border); }
.crk-chat-header .crk-avatar { width: 36px; height: 36px; }
.crk-typing-indicator { padding: 6px var(--crk-space-4); font-size: 0.8rem; color: var(--crk-text-muted); font-style: italic; }

/* ---- Imágenes efímeras (Premium): "de un solo vistazo" ---- */
/* "De un solo vistazo" (foto o vídeo): al más puro estilo WhatsApp, ni
   emisor ni receptor ven nunca el adjunto en el propio hilo — solo un
   aviso en cursiva con borde discontinuo, para que se distinga de un
   texto normal a simple vista. */
.crk-bubble__ephemeral {
	all: unset;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	font-style: italic;
	padding: 6px 10px;
	border: 1px dashed currentColor;
	border-radius: var(--crk-radius-md);
	opacity: .85;
}
.crk-bubble__ephemeral--pending { cursor: default; }
.crk-bubble__ephemeral--seen { cursor: default; opacity: .6; }
.crk-bubble__ephemeral:not(.crk-bubble__ephemeral--seen):not(.crk-bubble__ephemeral--pending):hover { opacity: 1; }
.crk-chat__ephemeral-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 1.1rem; opacity: .45; transition: opacity .12s ease, background .12s ease; }
.crk-chat__ephemeral-toggle:hover { background: var(--crk-surface-alt); }
.crk-chat__ephemeral-toggle:has(input:checked) { opacity: 1; background: var(--crk-surface-alt); }
.crk-chat__ephemeral-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Ajustes con pestañas (mismo patrón que el panel de admin, paleta oscura) ---- */
.crk-settings-tabs {
	display: flex;
	gap: var(--crk-space-2);
	overflow-x: auto;
	padding-bottom: var(--crk-space-2);
	margin-bottom: var(--crk-space-4);
	-webkit-overflow-scrolling: touch;
}
.crk-settings-tabs button {
	all: unset;
	cursor: pointer;
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: var(--crk-radius-pill);
	font-size: 0.85rem;
	color: var(--crk-text-muted);
	border: 1px solid var(--crk-border);
}
.crk-settings-tabs button.is-active { background: var(--crk-primary); border-color: var(--crk-primary); color: #fff; }

.crk-settings-panel { display: none; }
.crk-settings-panel.is-active { display: block; }

/* ---- Footer (marketing) ---- */
.crk-footer { border-top: 1px solid var(--crk-border); padding: var(--crk-space-6) 0; color: var(--crk-text-muted); font-size: 0.85rem; text-align: center; }

/* ---- Encuentros: selector de fecha/hora propio ---- */
.crk-datepicker-field { position: relative; }
.crk-datetime-trigger { text-align: left; cursor: pointer; background: var(--crk-surface-alt); }
.crk-datepicker {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--crk-surface);
	border: 1px solid var(--crk-border);
	border-radius: var(--crk-radius-md);
	padding: var(--crk-space-3);
	box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.crk-datepicker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--crk-space-2); }
.crk-datepicker__month-label { font-weight: 600; font-size: 0.9rem; text-transform: capitalize; }
.crk-datepicker__nav { all: unset; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.1rem; color: var(--crk-text-muted); }
.crk-datepicker__nav:hover { background: var(--crk-surface-alt); color: var(--crk-text); }
.crk-datepicker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.7rem; color: var(--crk-text-muted); margin-bottom: 4px; }
.crk-datepicker__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--crk-space-3); }
.crk-datepicker__day { all: unset; cursor: pointer; text-align: center; padding: 7px 0; border-radius: 999px; font-size: 0.82rem; }
.crk-datepicker__day:hover { background: var(--crk-surface-alt); }
.crk-datepicker__day.is-today { color: var(--crk-primary); font-weight: 700; }
.crk-datepicker__day.is-selected { background: var(--crk-primary); color: #fff; }
.crk-datepicker__day.is-disabled { color: var(--crk-border); cursor: not-allowed; pointer-events: none; }
.crk-datepicker__day.is-empty { visibility: hidden; }
.crk-datepicker__time { margin-bottom: var(--crk-space-3); }

/* ---- Encuentros: resultados de búsqueda de dirección ---- */
.crk-address-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--crk-border); border-radius: var(--crk-radius-sm); overflow: hidden; }
.crk-address-results li + li { border-top: 1px solid var(--crk-border); }
.crk-address-results button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; font-size: 0.82rem; cursor: pointer; }
.crk-address-results button:hover { background: var(--crk-surface-alt); }

/* ---- Lightbox: fotos de perfil y del chat sin salir de la página ----
   z-index 100 se quedaba por DEBAJO de la barra "Instalar app" (400) y
   del modal genérico (600) — bug real encontrado en pruebas: con el
   lightbox abierto, esa barra (y su botón "Instalar") se pintaba
   encima, tapando literalmente la parte de abajo (incluida la marca de
   agua de "de un solo vistazo"). Por encima de todo lo demás salvo el
   splash inicial (9999, que nunca coincide con el lightbox abierto). */
.crk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 700;
	background: rgba(0,0,0,0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--crk-space-5);
}
.crk-lightbox__img, .crk-lightbox__video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--crk-radius-md); }
.crk-lightbox__close {
	position: absolute;
	top: var(--crk-space-4);
	right: var(--crk-space-4);
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.crk-lightbox__close:hover { background: rgba(255,255,255,0.22); }

/* "Protegido" (adjuntos de un solo vistazo): no evita una captura de
   pantalla real — eso no se puede impedir desde una web/PWA — solo
   quita el camino fácil de guardarlo (arrastrar, menú contextual,
   callout de iOS) y deja una marca de agua visible como disuasorio y
   trazabilidad. */
.crk-lightbox--protected .crk-lightbox__img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none; /* la imagen no tiene controles propios que pulsar */
}
.crk-lightbox--protected .crk-lightbox__video {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none; /* los controles nativos (play/pausa) siguen activos — ver controlsList en lightbox.js */
}
.crk-lightbox__watermark {
	position: absolute;
	left: 50%;
	bottom: var(--crk-space-5);
	transform: translateX(-50%);
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 0.78rem;
	padding: 6px 14px;
	border-radius: 999px;
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100% - var(--crk-space-5) * 2);
	overflow: hidden;
	text-overflow: ellipsis;
}
.crk-profile-gallery img, .crk-bubble__image { cursor: zoom-in; }

/* ---- Recorte de foto de perfil ---- */
.crk-avatar-crop__viewport {
	position: relative;
	width: 240px;
	height: 240px;
	max-width: 100%;
	margin: var(--crk-space-3) auto var(--crk-space-4);
	border-radius: 50%;
	overflow: hidden;
	background: #000;
	cursor: grab;
	touch-action: none;
}
.crk-avatar-crop__viewport:active { cursor: grabbing; }
.crk-avatar-crop__viewport img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: none;
	transform-origin: center center;
	-webkit-user-drag: none;
	user-select: none;
}
.crk-avatar-crop__zoom { width: 100%; margin: 0 0 var(--crk-space-4); accent-color: var(--crk-primary); }
.crk-avatar-crop__actions { display: flex; gap: var(--crk-space-3); justify-content: center; }
.crk-avatar-crop__actions .crk-btn { flex: 1; }

/* ---- Punto verde de "en línea", superpuesto en la esquina del avatar ---- */
.crk-avatar-wrap { position: relative; display: inline-flex; }
.crk-online-dot {
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid var(--crk-surface);
}

/* ---- Barra deslizante genérica (radio de búsqueda, etc.) ---- */
.crk-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--crk-surface-alt);
	outline: none;
	cursor: pointer;
}
.crk-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--crk-primary);
	border: 3px solid var(--crk-surface);
	box-shadow: 0 0 0 1px var(--crk-primary);
	cursor: pointer;
}
.crk-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--crk-primary);
	border: 3px solid var(--crk-surface);
	box-shadow: 0 0 0 1px var(--crk-primary);
	cursor: pointer;
}