/* ==========================================================================
   Sistema de diseño — Bento grid + soft minimal, con modo claro y oscuro.
   Va DESPUÉS de app.css: solo redefine tokens y suaviza componentes (radios
   grandes, sombras suaves en vez de bordes duros, mucho aire) y añade las
   piezas del bento (.crk-bento / .crk-tile). El tema lo pone theme.js en
   <html data-theme="light|dark"> antes de pintar; sin JS se queda oscuro.
   ========================================================================== */

/* ---------------- Tokens ---------------- */
:root,
:root[data-theme="dark"],
body.crk-landing-dark {
	color-scheme: dark;
	--crk-bg: #0c0d11;
	--crk-surface: #15161c;
	--crk-surface-alt: #1d1f27;
	--crk-border: rgba(255, 255, 255, 0.07);
	--crk-text: #f3f3f8;
	--crk-text-muted: #9b9dae;
	--crk-primary: #8467ff;
	--crk-primary-hover: #9b84ff;
	--crk-primary-soft: rgba(132, 103, 255, 0.16);
	--crk-accent: #ff7a63;
	--crk-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
	--crk-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px rgba(0, 0, 0, 0.35);
	--crk-tile-a: linear-gradient(135deg, rgba(132, 103, 255, 0.28), rgba(255, 92, 140, 0.16));
	--crk-tile-b: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(132, 103, 255, 0.12));
	--crk-glass-bg: rgba(26, 29, 40, 0.46);
	--crk-glass-text: rgba(255, 255, 255, 0.62);
	--crk-tagtext: #fff;
	--crk-topbar-bg: rgba(12, 13, 17, 0.72);
}

:root[data-theme="light"] {
	color-scheme: light;
	--crk-bg: #f4f3f0;
	--crk-surface: #ffffff;
	--crk-surface-alt: #f0eeea;
	--crk-border: rgba(30, 24, 50, 0.07);
	--crk-text: #17151f;
	--crk-text-muted: #7a7686;
	--crk-primary: #6c48ff;
	--crk-primary-hover: #5a37ec;
	--crk-primary-soft: rgba(108, 72, 255, 0.10);
	--crk-accent: #ff6b57;
	--crk-success: #16a34a;
	--crk-shadow-sm: 0 1px 2px rgba(30, 20, 60, 0.04);
	--crk-shadow-md: 0 1px 2px rgba(30, 20, 60, 0.04), 0 14px 34px rgba(30, 20, 60, 0.07);
	--crk-tile-a: linear-gradient(135deg, #efeaff, #ffe9f0);
	--crk-tile-b: linear-gradient(135deg, #e3f7fb, #efeaff);
	--crk-glass-bg: rgba(255, 255, 255, 0.62);
	--crk-glass-text: rgba(23, 21, 31, 0.55);
	--crk-tagtext: #17151f;
	--crk-topbar-bg: rgba(244, 243, 240, 0.78);
}

:root {
	--crk-radius-sm: 12px;
	--crk-radius-md: 18px;
	--crk-radius-lg: 28px;
	--crk-container: 520px;
}

body.crk-body { color-scheme: normal; background: var(--crk-bg); color: var(--crk-text); transition: background-color .25s ease, color .25s ease; }
:root[data-theme="light"] body.crk-body { color-scheme: light; }
:root[data-theme="dark"] body.crk-body,
:root:not([data-theme]) body.crk-body { color-scheme: dark; }

/* ---------------- Cabecera ---------------- */
.crk-topbar {
	background: var(--crk-topbar-bg);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 0;
}
.crk-logo { font-weight: 800; letter-spacing: -0.03em; }
.crk-theme-toggle {
	width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--crk-surface); color: var(--crk-text); box-shadow: var(--crk-shadow-sm), 0 0 0 1px var(--crk-border);
	transition: transform .2s ease, background-color .2s ease;
}
.crk-theme-toggle:active { transform: scale(0.9); }
.crk-theme-toggle svg { width: 19px; height: 19px; }
.crk-theme-toggle .crk-ico-sun { display: none; }
:root[data-theme="dark"] .crk-theme-toggle .crk-ico-sun,
:root:not([data-theme]) .crk-theme-toggle .crk-ico-sun { display: block; }
:root[data-theme="dark"] .crk-theme-toggle .crk-ico-moon,
:root:not([data-theme]) .crk-theme-toggle .crk-ico-moon { display: none; }
:root[data-theme="light"] .crk-theme-toggle .crk-ico-moon { display: block; }

/* ---------------- Superficies ---------------- */
.crk-card {
	background: var(--crk-surface);
	border: 1px solid var(--crk-border);
	border-radius: var(--crk-radius-lg);
	box-shadow: var(--crk-shadow-md);
}
.crk-list { gap: 10px; }
.crk-list-item {
	background: var(--crk-surface);
	border: 1px solid var(--crk-border);
	border-radius: 22px;
	box-shadow: var(--crk-shadow-sm);
	padding: 12px 14px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.crk-list-item:hover { transform: translateY(-1px); box-shadow: var(--crk-shadow-md); }
.crk-list-item--boosted { border-color: #f9a15b; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15); }
.crk-avatar { box-shadow: 0 0 0 2px var(--crk-surface); }
.crk-alert { border-radius: var(--crk-radius-md); }
.crk-alert--muted { background: var(--crk-surface); border-color: var(--crk-border); }

/* ---------------- Botones ---------------- */
.crk-btn { border-radius: 999px; font-weight: 700; letter-spacing: -0.005em; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.crk-btn:active { transform: scale(0.97); }
.crk-btn--primary { background: var(--crk-primary); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--crk-primary) 65%, transparent); }
.crk-btn--accent { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--crk-accent) 65%, transparent); }
.crk-btn--ghost { background: var(--crk-surface); border-color: var(--crk-border); box-shadow: var(--crk-shadow-sm); }
.crk-btn--ghost:hover { border-color: color-mix(in srgb, var(--crk-primary) 45%, transparent); background: var(--crk-primary-soft); }
.crk-btn--danger { background: transparent; }

/* ---------------- Campos ---------------- */
.crk-input, .crk-select, .crk-textarea {
	background: var(--crk-surface-alt);
	border: 1px solid transparent;
	border-radius: 16px;
	color: var(--crk-text);
	transition: background-color .15s ease, box-shadow .15s ease;
}
.crk-input:focus, .crk-select:focus, .crk-textarea:focus { outline: 0; background: var(--crk-surface); box-shadow: 0 0 0 3px var(--crk-primary-soft), 0 0 0 1px var(--crk-primary); }
.crk-label { color: var(--crk-text-muted); font-weight: 600; }
.crk-switch__track { background: var(--crk-surface-alt); border-color: var(--crk-border); }
.crk-tag-option label { background: var(--crk-surface-alt); border-color: transparent; }
.crk-tag-option input:checked + label { background: var(--crk-primary-soft); color: var(--crk-primary); border-color: color-mix(in srgb, var(--crk-primary) 50%, transparent); }
.crk-chip { background: var(--crk-surface); border-color: var(--crk-border); box-shadow: var(--crk-shadow-sm); }
.crk-chip.is-active { background: var(--crk-primary); border-color: var(--crk-primary); }
.crk-seg { background: var(--crk-surface); box-shadow: var(--crk-shadow-sm); }
.crk-settings-tabs button { border-radius: 999px; }

/* Etiquetas de comunidad legibles en claro y en oscuro */
.crk-tagpill { color: var(--crk-tagtext); background: color-mix(in srgb, var(--tag, #7c5cff) 26%, transparent); border-color: color-mix(in srgb, var(--tag, #7c5cff) 45%, transparent); }
:root[data-theme="light"] .crk-tagpill { color: color-mix(in srgb, var(--tag, #6c48ff) 72%, #000); background: color-mix(in srgb, var(--tag, #6c48ff) 16%, #fff); border-color: color-mix(in srgb, var(--tag, #6c48ff) 35%, #fff); }
.crk-badge--verified, .crk-badge--online { color: var(--crk-success); }

/* ---------------- Menú inferior: cristal claro ---------------- */
.crk-bottom-nav {
	background:
		linear-gradient(var(--crk-glass-bg), var(--crk-glass-bg)) padding-box,
		linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.04) 65%, rgba(255, 255, 255, 0.32)) border-box;
}
.crk-bottom-nav__item { color: var(--crk-glass-text); }
:root[data-theme="light"] .crk-bottom-nav {
	background:
		linear-gradient(var(--crk-glass-bg), var(--crk-glass-bg)) padding-box,
		linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.3) 65%, rgba(255, 255, 255, 0.9)) border-box;
	box-shadow: 0 14px 34px rgba(40, 30, 90, 0.16), 0 2px 6px rgba(40, 30, 90, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .crk-bottom-nav__item.is-active,
:root[data-theme="light"] .crk-glass__track .crk-bottom-nav__item { color: var(--crk-primary); }
:root[data-theme="light"] .crk-glass__pill { background: linear-gradient(180deg, rgba(108, 72, 255, 0.16), rgba(108, 72, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
:root[data-theme="light"] .crk-glass__lens {
	background:
		radial-gradient(120% 90% at 28% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1) 60%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(236, 232, 255, 0.82));
	box-shadow: 0 16px 34px rgba(60, 40, 140, 0.22), 0 3px 8px rgba(60, 40, 140, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 2px 1px #fff, inset 0 -2px 2px rgba(108, 72, 255, 0.12);
}
:root[data-theme="light"] .crk-glass__lens::before { background: radial-gradient(90% 100% at calc(50% + var(--crk-lean, 0) * 26%) 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%); }
:root[data-theme="light"] .crk-glass__track { filter: drop-shadow(-0.6px 0 0 rgba(255, 60, 120, 0.35)) drop-shadow(0.6px 0 0 rgba(60, 180, 255, 0.35)); }
:root[data-theme="light"] .crk-nav-badge { box-shadow: 0 0 0 2px #fff; }
.crk-install-bar { border-radius: 20px; }

/* ==========================================================================
   Bento grid
   ========================================================================== */
.crk-bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}
.crk-tile {
	position: relative;
	min-width: 0;
	padding: 18px;
	border-radius: var(--crk-radius-lg);
	background: var(--crk-surface);
	border: 1px solid var(--crk-border);
	box-shadow: var(--crk-shadow-md);
	overflow: hidden;
}
.crk-tile--wide { grid-column: 1 / -1; }
.crk-tile--tall { grid-row: span 2; }
.crk-tile--a { background: var(--crk-tile-a); }
.crk-tile--b { background: var(--crk-tile-b); }
.crk-tile--flush { padding: 0; }
.crk-tile__label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--crk-text-muted); margin-bottom: 6px; }
.crk-tile__value { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.crk-tile__value small { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; color: var(--crk-text-muted); }
.crk-tile__hint { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--crk-text-muted); }
.crk-tile h2, .crk-tile h3 { margin-top: 0; }
.crk-tile .crk-toggle-row { padding: 0; border: 0; }
/* Dentro de un bento las tarjetas ya no llevan su propia caja doble */
.crk-tile > .crk-card { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; }

/* Mosaico de fotos: la primera grande, el resto pequeñas */
.crk-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crk-mosaic > * { border-radius: 20px; overflow: hidden; aspect-ratio: 1; background: var(--crk-surface-alt); }
.crk-mosaic > *:first-child { grid-column: span 2; grid-row: span 2; }
.crk-mosaic img, .crk-mosaic video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }

/* Personas cercanas como teselas */
.crk-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 0 var(--crk-space-5); padding: 0; }
.crk-person-tile {
	display: flex; flex-direction: column; gap: 10px; padding: 12px; text-decoration: none; color: inherit;
	border-radius: var(--crk-radius-lg); background: var(--crk-surface); border: 1px solid var(--crk-border); box-shadow: var(--crk-shadow-md);
	transition: transform .18s ease;
}
.crk-person-tile:hover { transform: translateY(-2px); }
.crk-person-tile__img { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--crk-surface-alt) center / cover no-repeat; }
.crk-person-tile__img .crk-online-dot, .crk-person-tile__img .crk-dot { position: absolute; right: 10px; bottom: 10px; }
.crk-person-tile strong { display: block; font-size: 0.95rem; }
.crk-person-tile span { font-size: 0.8rem; color: var(--crk-text-muted); }

/* ---------------- Pantallas ---------------- */
.crk-app-main .crk-container { max-width: var(--crk-container); }
.crk-hero h1 { letter-spacing: -0.04em; }
.crk-features { gap: 12px; }
.crk-feature { border-radius: var(--crk-radius-lg); }
.crk-feature:first-child { background: var(--crk-tile-a); }
.crk-feature:nth-child(2) { background: var(--crk-tile-b); }
@media (min-width: 600px) { .crk-features { grid-template-columns: 1.3fr 1fr 1fr; } }

.crk-settings-panel .crk-card, .crk-settings-panel .crk-alert { margin-bottom: 12px; }
.crk-persons__col { border-radius: 22px; background: var(--crk-surface-alt); border-color: transparent; }
/* (sombras de las tarjetas de la baraja: ver app.css — solo la de delante lleva sombra marcada) */
.crk-deck__btn { box-shadow: var(--crk-shadow-md); }
.crk-exp__tile { border-radius: 24px; }
.crk-faq__item { border-radius: 22px; box-shadow: var(--crk-shadow-sm); }
.crk-modal__panel { border-radius: 28px; }

/* Escritorio: el bento respira en más columnas */
@media (min-width: 1024px) {
	:root { --crk-container: 760px; }
	.crk-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.crk-tile--wide { grid-column: span 4; }
	.crk-tile--half { grid-column: span 2; }
	.crk-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.crk-list-item, .crk-btn, .crk-person-tile, body.crk-body { transition: none; }
}

/* Lista de datos dentro de una tesela */
.crk-dl { margin: 0; display: grid; gap: 8px; }
.crk-dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.crk-dl dt { color: var(--crk-text-muted); }
.crk-dl dd { margin: 0; font-weight: 700; text-align: right; }
.crk-mosaic.crk-profile-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.crk-mosaic.crk-profile-gallery--single { grid-template-columns: 1fr; }
.crk-mosaic.crk-profile-gallery--single > * { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
.crk-mosaic .crk-profile-video-wrap { position: relative; }

.crk-seg--buttons { margin: 0; }
.crk-seg--buttons button {
	flex: 1; padding: 10px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
	font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--crk-text-muted); transition: background-color .15s ease, color .15s ease;
}
.crk-seg--buttons button.is-active { color: #fff; background: var(--crk-primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--crk-primary) 40%, transparent); }
.crk-settings-tabs { scrollbar-width: none; }
.crk-settings-tabs::-webkit-scrollbar { display: none; }

body.crk-landing-dark .crk-theme-toggle { display: none; }

.crk-deck__actions { margin-bottom: var(--crk-space-3); }

/* Posición del menú idéntica en todas las pantallas: el padding inferior del contenedor desplazaba el 'sticky' (70px) en páginas largas y no en cortas. */
.crk-app-main { padding-bottom: 0; }
.crk-bottom-nav { bottom: max(var(--crk-space-3), var(--crk-safe-bottom)); }

/* ---- Fotos y vídeos: subida dinámica, brillo de carga, portadas ---- */
.crk-fx { opacity: 0; filter: blur(12px); transform: scale(1.04); }
.crk-fx.is-in { opacity: 1; filter: none; transform: none; transition: opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.crk-photo-slot:has(.crk-fx:not(.is-in)),
.crk-mosaic > *:has(.crk-fx:not(.is-in)),
.crk-exp__tile:has(.crk-fx:not(.is-in)) {
	background: linear-gradient(100deg, var(--crk-surface-alt) 30%, color-mix(in srgb, var(--crk-surface-alt) 55%, var(--crk-surface)) 50%, var(--crk-surface-alt) 70%);
	background-size: 250% 100%;
	animation: crk-shimmer 1.4s linear infinite;
}
@keyframes crk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.crk-photo-slot { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.crk-photo-slot--add { border-style: dashed; background: transparent; }
.crk-photo-slot--add:hover, .crk-photo-grid.is-drop .crk-photo-slot--add { border-color: var(--crk-primary, currentColor); background: color-mix(in srgb, var(--crk-primary, #7c5cff) 8%, transparent); }
.crk-photo-grid.is-drop { outline: 2px dashed var(--crk-primary, #7c5cff); outline-offset: 6px; border-radius: 18px; }
.crk-photo-slot__plus { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--crk-text-muted); pointer-events: none; }
.crk-photo-slot__plus small { font-size: .7rem; }
.crk-photo-slot__play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); pointer-events: none; }
.crk-photo-slot__play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.crk-photo-slot[hidden] { display: none; }

.crk-photo-slot.is-new { animation: crk-pop .6s cubic-bezier(.2,1.3,.3,1); }
@keyframes crk-pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
.crk-photo-slot.is-failed { animation: crk-shake .4s; }
.crk-photo-slot.is-removing { opacity: .5; pointer-events: none; }

.crk-photo-slot.is-uploading img { filter: saturate(.85) brightness(.75); transform: scale(1.02); }
.crk-upload__ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--crk-surface-alt), var(--crk-surface)); }
.crk-upload__veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.crk-upload__ring {
	--p: 0;
	width: 54px; height: 54px; border-radius: 50%;
	background: conic-gradient(var(--crk-primary, #7c5cff) calc(var(--p) * 1%), rgba(255,255,255,.28) 0);
	display: grid; place-items: center; position: relative;
	transition: background .2s;
}
.crk-photo-slot { --p: 0; }
.crk-upload__ring { background: conic-gradient(var(--crk-primary, #7c5cff) calc(var(--p, 0) * 1%), rgba(255,255,255,.28) 0); }
.crk-upload__ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(15,15,25,.72); backdrop-filter: blur(6px); }
.crk-upload__pct { position: relative; z-index: 1; font-size: .72rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.crk-photo-slot.is-queued .crk-upload__ring { opacity: .55; animation: crk-pulse 1.2s ease-in-out infinite; }
@keyframes crk-pulse { 50% { transform: scale(.92); } }

.crk-photo-slot__confirm {
	position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background: rgba(12,12,20,.72); backdrop-filter: blur(8px); color: #fff; font-size: .82rem;
	animation: crk-fade .18s ease;
}
.crk-photo-slot__confirm button { border: 0; border-radius: 999px; padding: 6px 18px; font-size: .78rem; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; }
.crk-photo-slot__confirm button[data-media-yes] { background: #e5484d; }
@keyframes crk-fade { from { opacity: 0; } }

.crk-toast-stack { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 450; pointer-events: none; padding: 0 16px; }
.crk-toast-stack .crk-toast { position: static; left: auto; bottom: auto; background: var(--crk-text, #111); color: var(--crk-bg, #fff); border-radius: 999px; padding: 10px 18px; font-size: .85rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2,1.2,.3,1); max-width: 92vw; text-align: center; }
.crk-toast-stack .crk-toast.is-in { opacity: 1; transform: none; }
.crk-toast-stack .crk-toast.is-error { background: #e5484d; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.crk-fx, .crk-fx.is-in, .crk-photo-slot.is-new, .crk-upload__ring { animation: none !important; transition: none !important; filter: none; transform: none; }
}

/* ---- Transición entre pantallas ---- */
@keyframes crk-page-in { from { opacity: 0; transform: translateY(14px) scale(.992); } }
@keyframes crk-progress { from { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } to { transform: scaleX(.92); opacity: .9; } }
/* :not(.crk-chat) además de :not(.crk-bottom-nav) — .crk-chat-header
   pasa a position:fixed en la conversación abierta (ver app.css), y
   position:fixed solo se fija de verdad al viewport si NINGÚN
   ancestro tiene transform (crea un "containing block" nuevo, ahí
   donde lo haya, aunque sea solo mientras dura una animación). Con
   esta animación aplicándole un transform a .crk-chat en cada carga
   de la conversación, la cabecera dejaba de estar fija de verdad
   durante los primeros 0.55s — bug real encontrado probando el
   propio arreglo del "fixed": el navegador de pruebas lo pilló con la
   animación todavía en marcha (`animationPlayState: running`) y la
   cabecera aparecía centenares de píxeles más abajo de donde debía. */
.crk-app-main > :not(.crk-bottom-nav):not(.crk-chat),
body > main.crk-container {
	animation: crk-page-in .55s cubic-bezier(.22, 1, .36, 1) backwards;
}
.crk-app-main > :not(.crk-bottom-nav):nth-child(2) { animation-delay: .05s; }
.crk-app-main > :not(.crk-bottom-nav):nth-child(3) { animation-delay: .1s; }
.crk-app-main > :not(.crk-bottom-nav):nth-child(4) { animation-delay: .15s; }
.crk-app-main > :not(.crk-bottom-nav):nth-child(n+5) { animation-delay: .2s; }
/* Velocidad elegida en el admin (data-crk-nav en <html>; por defecto "fast", "smooth" = lo de arriba).
   "Rápido" es solo un fundido, SIN desplazamiento: acortar el movimiento de la versión suave
   (subir 8 px al salir y bajar 14 px al entrar en 0,07+0,2 s) se veía como un salto. */
@keyframes crk-fade-in { from { opacity: 0; } }
html[data-crk-nav="fast"] .crk-app-main > :not(.crk-bottom-nav):not(.crk-chat),
html[data-crk-nav="fast"] body > main.crk-container { animation: crk-fade-in .2s ease-out backwards; animation-delay: 0s; }
html[data-crk-nav="fast"].crk-leaving .crk-app-main > :not(.crk-bottom-nav):not(.crk-chat),
html[data-crk-nav="fast"].crk-leaving body > main.crk-container { transform: none; transition: opacity .1s ease-in; }
html[data-crk-nav="instant"] .crk-app-main > :not(.crk-bottom-nav),
html[data-crk-nav="instant"] body > main.crk-container { animation: none; }
/* Con las transiciones nativas activas, la entrada propia sobra. */
html[data-crk-vt] .crk-app-main > :not(.crk-bottom-nav) { animation: none; }
/* ...también cuando la regla de velocidad de arriba (más específica) quisiera animar la página. */
html[data-crk-vt][data-crk-nav] .crk-app-main > :not(.crk-bottom-nav):not(.crk-chat),
html[data-crk-vt][data-crk-nav] body > main.crk-container { animation: none; }
html.crk-leaving .crk-app-main > :not(.crk-bottom-nav):not(.crk-chat),
html.crk-leaving body > main.crk-container {
	opacity: 0;
	transform: translateY(-8px) scale(.996);
	transition: opacity .17s ease-in, transform .17s ease-in;
}
html.crk-leaving::after {
	content: "";
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
	background: linear-gradient(90deg, var(--crk-primary), #ff5c8c);
	transform-origin: left; animation: crk-progress 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
	.crk-app-main > :not(.crk-bottom-nav), body > main.crk-container { animation: none; }
	html.crk-leaving .crk-app-main > :not(.crk-bottom-nav), html.crk-leaving body > main.crk-container { transition: none; }
	html.crk-leaving::after { animation: none; }
}


/* Mosaico de Mi perfil: barra de controles en flujo (etiquetas + visibilidad), sin solapes */
.crk-photo-slot__bar { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.crk-photo-slot__bar form { display: block; width: 100%; margin: 0; }
.crk-photo-slot .crk-photo-slot__bar .crk-photo-slot__tags { position: static; max-width: 100%; }
.crk-photo-slot .crk-photo-slot__bar select {
	position: static; display: block; width: 100%; height: 28px; padding: 0 4px; border: 0; border-radius: 999px; text-align: center; text-align-last: center; cursor: pointer; color: #fff; /* 16 px (suelo de campos): sin flecha para que «Premium» quepa */
	background-color: rgba(20, 20, 43, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	-webkit-appearance: none; appearance: none;
}
.crk-photo-slot .crk-photo-slot__delete { top: 6px; right: 6px; width: 26px; height: 26px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Chat: campo de texto con un único marco (la píldora), sin el aro global del input */
.crk-chat__input-pill .crk-input,
.crk-chat__input-pill .crk-input:focus { background: none; box-shadow: none; outline: 0; border: 0; }
.crk-chat__input-pill { transition: border-color .2s, box-shadow .2s; }
.crk-chat__input-pill:focus-within { border-color: var(--crk-primary); box-shadow: 0 0 0 3px var(--crk-primary-soft); }

/* Chat abierto: el menú va en el flujo bajo el campo; el `bottom` del menú flotante lo subía encima del campo */
body.crk-screen--chat .crk-bottom-nav { bottom: auto; margin-top: var(--crk-space-2); }