/* ============================================================================
   LOOP DESIGN SYSTEM — v0.9
   Una sola fuente de verdad para color, espacio, tipografía, forma y movimiento.
   Regla: ningún componente escribe un valor literal. Todo pasa por un token.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Rampa neutra (verde-tintada) ------------------------------------ */
  --ink-950: #060807;
  --ink-900: #0d100e;
  --ink-850: #141815;
  --ink-800: #1c221d;
  --ink-700: #272f28;
  --ink-600: #3a453b;
  --ink-400: #808b7e;
  --ink-300: #99a397;
  --ink-050: #f2f5ec;

  /* --- Rampa de marca (lima) ------------------------------------------- */
  --lime-200: #e4fcb2;
  --lime-300: #d7f78e;
  --lime-400: #c8f36b;
  --lime-500: #aee84b;
  --lime-600: #8aa94a;
  --lime-700: #4a641f;
  --lime-950: #141b09;

  /* --- Rampas de estado ------------------------------------------------ */
  --rose-300: #ff8fa5;
  --rose-700: #b81d43;
  --amber-400: #e0a35c;
  --cool-400: #7d94ff;

  /* --- Superficies ----------------------------------------------------- */
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-2: var(--ink-850);
  --surface-3: var(--ink-800);
  --line: var(--ink-700);
  --line-strong: var(--ink-600);

  /* --- Texto ----------------------------------------------------------- */
  --text: var(--ink-050);
  --text-muted: var(--ink-300);
  --text-subtle: var(--ink-400);

  /* --- Marca ------------------------------------------------------------
     --accent      superficie/relleno de marca (botones, anillos llenos)
     --accent-text marca usada COMO TEXTO (debe cumplir contraste AA)
     --accent-line marca usada como borde/decoración
     --accent-ink  texto sobre un relleno de marca                        */
  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-strong: var(--lime-500);
  --accent-text: var(--lime-400);
  --accent-line: var(--lime-400);
  --accent-ink: var(--lime-950);
  --accent-cool: var(--cool-400);

  /* Velos de marca: derivados, nunca hex sueltos */
  --accent-ghost: color-mix(in srgb, var(--accent-line) 7%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent-line) 14%, transparent);
  --accent-veil: color-mix(in srgb, var(--accent-line) 28%, transparent);
  --accent-edge: color-mix(in srgb, var(--accent-line) 45%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --accent-fade: color-mix(in srgb, var(--accent-line) 0%, transparent);

  /* --- Estado ---------------------------------------------------------- */
  --danger: var(--rose-300);
  --danger-soft: color-mix(in srgb, var(--danger) 8%, transparent);
  --danger-edge: color-mix(in srgb, var(--danger) 30%, transparent);
  --warn: var(--amber-400);
  --warn-edge: color-mix(in srgb, var(--warn) 24%, transparent);

  /* --- Capas sobre media (visor, stories): siempre sobre oscuro -------- */
  --scene: #050609;
  --scene-veil: #040408cc;
  --on-overlay: #ffffff;
  --on-overlay-muted: #c6cdc0;
  --overlay-fill: #ffffff14;
  --overlay-fill-strong: #ffffff2b;
  --overlay-line: #ffffff33;
  --overlay-sheen: #ffffffa8;
  --overlay-chip: rgb(10 10 14 / .68);
  --overlay-chip-strong: rgb(10 10 14 / .78);

  /* --- Cristal (barras flotantes) -------------------------------------- */
  --glass: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-rail: color-mix(in srgb, var(--bg) 86%, transparent);
  --glass-blur: blur(20px) saturate(140%);

  /* --- Atmósfera del lienzo -------------------------------------------- */
  --aurora-warm: color-mix(in srgb, var(--lime-400) 9%, transparent);
  --aurora-cool: color-mix(in srgb, var(--cool-400) 6%, transparent);
  --aurora-deep: color-mix(in srgb, var(--lime-700) 12%, transparent);

  /* --- Espacio (base 2px, escala de 11 pasos) -------------------------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 56px;

  /* --- Forma ----------------------------------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Tipografía ------------------------------------------------------
     Escala de 8 pasos. El mínimo del sistema es 11px y se reserva para
     micro-etiquetas en mayúsculas; el cuerpo vive en --fs-md/--fs-base.  */
  --font-sans: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --display-sm: clamp(26px, 3.4vw, 32px);
  --display-md: clamp(30px, 4.4vw, 38px);
  --display-lg: clamp(40px, 8vw, 58px);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-label: 0.14em;

  /* --- Elevación ------------------------------------------------------- */
  --shadow-xs: 0 2px 6px color-mix(in srgb, var(--shadow-hue) 22%, transparent);
  --shadow-sm: 0 8px 22px color-mix(in srgb, var(--shadow-hue) 30%, transparent);
  --shadow-md: 0 12px 30px color-mix(in srgb, var(--shadow-hue) 38%, transparent);
  --shadow-lg: 0 22px 70px color-mix(in srgb, var(--shadow-hue) 50%, transparent);
  --shadow-xl: 0 24px 80px color-mix(in srgb, var(--shadow-hue) 60%, transparent);
  --shadow-hue: #000000;
  --shadow: var(--shadow-lg);
  --glow-accent: 0 0 var(--space-9) var(--accent-veil);

  /* --- Movimiento ------------------------------------------------------ */
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --- Layout ---------------------------------------------------------- */
  --shell-max: 1180px;
  --feed-max: 760px;
  --rail-width: 194px;
  --panel-width: 250px;
  --tap-min: 44px;
  --gutter: var(--space-9);

  font-family: var(--font-sans);
}

/* ---------------------------------------------------------------------------
   TEMA CLARO
   No es una inversión: la marca cambia de rol. El lima sigue siendo relleno,
   pero como texto pasa a --lime-700 para cumplir contraste AA sobre claro.
   ------------------------------------------------------------------------ */
body.light {
  color-scheme: light;

  --bg: #f3f6ef;
  --surface: #ffffff;
  --surface-2: #e9eee4;
  --surface-3: #dee5d8;
  --line: #d7e0d2;
  --line-strong: #bcc8b6;

  --text: #141a13;
  --text-muted: #5c6759;
  --text-subtle: #66725f;

  --accent-text: var(--lime-700);
  --accent-line: var(--lime-700);
  --accent-hover: var(--lime-500);

  --danger: var(--rose-700);
  --warn: #9a5c22;

  --shadow-hue: #1d2a1a;
  --shadow-xs: 0 2px 6px color-mix(in srgb, var(--shadow-hue) 8%, transparent);
  --shadow-sm: 0 8px 22px color-mix(in srgb, var(--shadow-hue) 10%, transparent);
  --shadow-md: 0 12px 30px color-mix(in srgb, var(--shadow-hue) 12%, transparent);
  --shadow-lg: 0 22px 70px color-mix(in srgb, var(--shadow-hue) 14%, transparent);
  --shadow-xl: 0 24px 80px color-mix(in srgb, var(--shadow-hue) 16%, transparent);

  --glass: color-mix(in srgb, var(--surface) 90%, transparent);
  --glass-rail: color-mix(in srgb, var(--surface) 92%, transparent);

  --aurora-warm: color-mix(in srgb, var(--lime-400) 11%, transparent);
  --aurora-cool: color-mix(in srgb, var(--cool-400) 5%, transparent);
  --aurora-deep: color-mix(in srgb, var(--lime-600) 4%, transparent);
}

/* === COMPONENTES ======================================================== */
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; }
body::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .055; background-image: radial-gradient(var(--accent) 0.5px, transparent .5px); background-size: 26px 26px; mask-image: radial-gradient(120% 90% at 20% 0%, #000 0, transparent 70%); }
body::after { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background:
  radial-gradient(68% 52% at 8% -8%, var(--aurora-warm) 0, transparent 62%),
  radial-gradient(52% 44% at 96% 4%, var(--aurora-cool) 0, transparent 60%),
  radial-gradient(90% 70% at 50% 120%, var(--aurora-deep) 0, transparent 70%); }
.app-shell, .auth-screen, .loading-screen, .fatal-screen { position: relative; z-index: 1; }
button, input, textarea { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: var(--radius-xs); }
.app-shell { min-height: 100svh; padding-bottom: calc(var(--space-13) + var(--space-12) + env(safe-area-inset-bottom)); }
main { width: min(100% - (var(--gutter) * 2), var(--feed-max)); margin: 0 auto; }
.content-stage { width: min(100% - (var(--gutter) * 2), var(--shell-max)); margin: 0 auto; }
.content-stage main { width: min(100%, var(--feed-max)); margin: 0; }
.social-panel { display: none; }
.topbar { position: sticky; z-index: 12; top: 0; width: min(100% - (var(--gutter) * 2), var(--shell-max)); height: var(--space-13); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.topbar::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--gutter) * -1) calc(var(--space-8) * -1); background: var(--glass); backdrop-filter: var(--glass-blur); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--space-8)), transparent 100%); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); padding: 0; background: none; font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-display); }
.brand-mark { font-size: var(--fs-3xl); line-height: 1; color: var(--accent-text); transform: rotate(-24deg); display: inline-block; }
.brand-dot { color: var(--accent-text); }
.topbar-context { display: flex; align-items: center; gap: var(--space-4); color: var(--text-muted); font-size: var(--fs-micro); letter-spacing: .8px; text-transform: uppercase; }
.status-orbit { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--accent-line); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-soft); }
.top-actions { display: flex; align-items: center; gap: var(--space-4); }
.icon-button, .round-button, .more, .back-button { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-md); background: transparent; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.icon-button:hover, .round-button:hover, .more:hover { color: var(--text); background: var(--surface-2); }
.notification-button { position: relative; }
.notification-button b { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-micro); }
.status-orbit.offline { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
.nav-item, .rail-item { position: relative; }
.nav-badge { position: absolute; top: 5px; right: calc(50% - 25px); min-width: 15px; padding: 2px 4px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-micro); line-height: 1; }
.avatar-button { padding: 0; background: none; border-radius: var(--radius-circle); transition: transform var(--dur-fast) var(--ease-spring); }
.avatar-button:hover { transform: scale(1.06); }
.avatar { display: block; flex: 0 0 34px; flex-shrink: 0; width: 34px; min-width: 34px; height: 34px; min-height: 34px; aspect-ratio: 1 / 1; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--line); }
.avatar.sm { flex-basis: 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.avatar.md { flex-basis: 46px; width: 46px; min-width: 46px; height: 46px; min-height: 46px; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.avatar.xl { flex-basis: 92px; width: 92px; min-width: 92px; height: 92px; min-height: 92px; aspect-ratio: 1 / 1; border-radius: var(--radius-2xl); }
.avatar.media-fallback { object-fit: contain; padding: 8px; opacity: .75; }
.fallback { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-cool)); color: var(--accent-ink); font-weight: 800; font-size: var(--fs-sm); }
.page { padding: var(--space-10) 0 var(--space-13); }
.home-heading, .page-title { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-9); margin-bottom: var(--space-11); }
.home-heading-actions { display: flex; gap: var(--space-4); }
.home-heading-actions .round-button, .page-title .round-button { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); }
.home-heading-actions .round-button:hover, .page-title .round-button:hover { border-color: var(--accent-veil); background: var(--surface-2); color: var(--accent-text); transform: translateY(-1px); }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 0; font-size: var(--display-md); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: var(--fw-black); }
h2 em { color: var(--accent-text); font-style: normal; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4); border: 1px solid var(--accent-veil); border-radius: var(--radius-pill); background: var(--accent-ghost); color: var(--accent-text); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); font-weight: var(--fw-black); text-transform: uppercase; }
.eyebrow::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--accent); box-shadow: 0 0 var(--space-4) var(--accent-glow); }
.eyebrow span { color: var(--text-muted); }
.eyebrow-rule { display: none; }
.page-subtitle { max-width: 46ch; margin: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--fs-lg); line-height: var(--lh-snug); }
.page-orbit { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent-text); font-size: var(--display-sm); transform: rotate(-20deg); box-shadow: 0 0 0 7px var(--accent-ghost); }
.muted { color: var(--text-muted); }
.fineprint { max-width: 270px; margin: 18px auto 0; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.file-open-link { display: inline-block; margin: 4px auto 8px; text-decoration: none; }
.feed-switch { display: inline-flex; gap: var(--space-1); margin-bottom: var(--space-11); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); }
.feed-switch button { position: relative; display: grid; gap: var(--space-1); min-width: 116px; padding: var(--space-5) var(--space-8); border-radius: var(--radius-lg); background: none; color: var(--text-muted); text-align: left; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.feed-switch button:hover { color: var(--text); background: var(--surface-2); }
.feed-switch button span { font-size: var(--fs-md); font-weight: 800; }
.feed-switch button small { font-size: var(--fs-micro); color: var(--text-muted); }
.feed-switch button::after { display: none; }
.feed-switch .selected, .feed-switch .selected:hover { color: var(--accent-ink); background: var(--accent); box-shadow: var(--shadow-sm); }
.feed-switch .selected small { color: color-mix(in srgb, var(--accent-ink) 68%, transparent); }
.section-label, .feed-heading { display: flex; align-items: center; gap: var(--space-5); margin: 0 0 var(--space-6); color: var(--text-subtle); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); font-weight: var(--fw-black); text-transform: uppercase; }
.section-label::after, .feed-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.section-label small, .feed-heading small { order: 3; flex: 0 0 auto; }
.section-label small, .feed-heading small { font-size: var(--fs-micro); letter-spacing: 0; font-weight: 500; }
.quick-loops { margin-bottom: var(--space-12); }
.quick-loop-list { display: flex; align-items: flex-start; gap: var(--space-6); overflow-x: auto; padding: var(--space-1) var(--space-1) var(--space-5); scroll-snap-type: x proximity; scrollbar-width: none; }
.quick-loop-list > * { scroll-snap-align: start; }
.quick-loop-list::-webkit-scrollbar { display: none; }
.quick-loop { flex: 0 0 82px; display: grid; justify-items: center; gap: var(--space-4); padding: 0; border: 0; background: transparent; text-align: center; transition: transform var(--dur-fast) var(--ease-spring); }
.quick-loop:hover { transform: translateY(-3px); }
.quick-loop:hover .quick-loop-orbit-ring { filter: brightness(1.15); }
.quick-loop > span:nth-child(2) { display: grid; gap: var(--space-1); width: 100%; min-width: 0; }
.quick-loop strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.quick-loop small, .quick-loop i, .quick-loop-thumb { display: none; }
.quick-loop i { margin-left: auto; color: var(--accent-text); font-style: normal; }
.quick-loop-orbit { position: relative; flex: 0 0 72px; display: grid; place-items: center; width: 72px; height: 72px; aspect-ratio: 1; isolation: isolate; overflow: visible; }
.quick-loop-orbit-ring { position: absolute; z-index: 0; inset: 0; border: 0; border-radius: var(--radius-circle); background: conic-gradient(from 210deg, var(--accent), var(--accent-cool) 38%, var(--accent) 72%, var(--accent) 100%); transition: filter var(--dur-fast) var(--ease-out); }
.quick-loop-orbit-ring::after { content: ""; position: absolute; inset: 3px; border-radius: var(--radius-circle); background: var(--bg); }
.quick-loop-orbit .avatar { position: relative; z-index: 1; flex: 0 0 60px; width: 60px; min-width: 60px; height: 60px; min-height: 60px; aspect-ratio: 1; border: 0; border-radius: var(--radius-circle); }
.quick-loop-orbit b { position: absolute; z-index: 2; right: -1px; bottom: -1px; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 3px solid var(--bg); border-radius: var(--radius-circle); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-black); line-height: 1; }
.quick-loop-story.seen .quick-loop-orbit-ring { background: var(--line-strong); }
.quick-loop-own .quick-loop-orbit-ring { background: var(--line); }
.quick-loop-thumb { width: 34px; height: 48px; object-fit: cover; border-radius: var(--radius-xs); opacity: .82; }
.quick-loop-empty { display: flex; align-items: center; align-self: stretch; flex: 1 1 auto; min-width: 0; min-height: 72px; max-width: 42ch; padding: var(--space-5) var(--space-8); border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); color: var(--text-muted); font-size: var(--fs-xs); line-height: var(--lh-snug); text-wrap: pretty; }
.quick-loop-empty > span { display: block; }
.quick-loop-cta { margin-left: var(--space-1); white-space: nowrap; }
.quick-loop-cta { margin-left: 5px; padding: 0; background: none; color: var(--accent-text); font-size: inherit; font-weight: 700; }
.feed { display: grid; gap: var(--space-9); }
.post { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.post:hover { border-color: var(--accent-veil); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-head { min-height: 64px; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-7); }
.user-chip { display: flex; align-items: center; gap: var(--space-5); flex: 1; min-width: 0; background: none; text-align: left; }
.user-chip span { display: grid; gap: var(--space-2); min-width: 0; }
.user-chip strong { font-size: var(--fs-md); letter-spacing: var(--tracking-tight); }
.user-chip small { color: var(--text-muted); font-size: var(--fs-xs); }
.user-chip small i { color: var(--accent-text); font-style: normal; }
.post-context-mark { display: none; }
.post-time { color: var(--text-muted); font-size: var(--fs-micro); white-space: nowrap; }
.post-head { position: relative; }
.recommendation-more { margin-left: 6px; font-size: var(--fs-md); letter-spacing: 1px; }
.recommendation-reason { margin: 0; padding: 0 var(--space-7) var(--space-5); color: var(--text-subtle); font-size: var(--fs-micro); }
.recommendation-menu, .reason-popover { position: absolute; z-index: 4; right: 0; top: 48px; display: grid; gap: var(--space-2); min-width: 190px; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.recommendation-menu button { padding: 8px 10px; border-radius: var(--radius-xs); background: transparent; color: var(--text); text-align: left; font-size: var(--fs-xs); }
.recommendation-menu button:hover, .recommendation-menu button:focus-visible { background: var(--surface-2); color: var(--accent-text); }
.ranking-metrics { margin: 7px 0; color: var(--text-muted); font-size: var(--fs-micro); }
.reason-popover { top: 78px; min-width: 220px; padding: 12px; gap: var(--space-4); }
.reason-popover strong { color: var(--text); font-size: var(--fs-sm); }
.reason-popover p { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.reason-popover .secondary { justify-self: end; padding: 6px 9px; font-size: var(--fs-micro); }
.ranking-debug { margin: 18px 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--fs-micro); }
.ranking-debug summary { cursor: pointer; color: var(--accent-text); font-weight: 700; }
.ranking-debug p { margin: 7px 0 0; }
.more { width: 32px; height: 32px; font-size: var(--fs-base); letter-spacing: 2px; }
.post-image { width: 100%; height: auto; aspect-ratio: 1.12 / 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-2); }
.post-image.media-fallback { object-fit: contain; padding: 48px; opacity: .75; }
.post-media { position: relative; overflow: hidden; background: var(--surface-2); border-block: 1px solid var(--line); cursor: zoom-in; }
.post-media-slide { min-height: 180px; display: grid; place-items: center; }
.post-media-slide.is-hidden, .viewer-media.is-hidden { display: none; }
.post-media .post-image { display: block; width: 100%; height: auto; aspect-ratio: var(--media-ratio, 1.12 / 1); object-fit: cover; border-radius: 0; background: var(--surface-2); }
.post-media .post-video { display: block; width: 100%; height: auto; aspect-ratio: var(--media-ratio, 1.12 / 1); max-height: 72vh; object-fit: contain; border-radius: 0; background: var(--scene); }
.post-media .post-video { cursor: default; }
.filtered-content-placeholder { display: grid; place-items: center; align-content: center; gap: var(--space-5); min-height: 180px; padding: 28px; color: var(--text-muted); border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; }
.filtered-content-placeholder span { font-size: var(--fs-md); }
.filtered-reveal { padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--text); background: transparent; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.filtered-reveal:hover, .filtered-reveal:focus-visible { border-color: var(--accent-text); color: var(--accent-text); outline: none; }
.filtered-post-footer { min-height: 44px; }
.filtered-inline { color: var(--text-muted); }
.filtered-inline .filtered-reveal { margin-left: 4px; padding: 2px 7px; font-size: var(--fs-micro); }
.story-filter-placeholder { width: min(100%, 520px); min-height: min(62vh, 520px); }
.carousel-controls { position: absolute; inset: auto 10px 10px; display: flex; align-items: center; justify-content: center; gap: var(--space-6); pointer-events: none; }
.carousel-button, .viewer-nav, .viewer-close { border: 0; color: white; background: var(--overlay-chip); width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; pointer-events: auto; }
.carousel-position, .viewer-position { padding: 5px 9px; border-radius: var(--radius-pill); color: white; background: var(--overlay-chip); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; }
.field-hint, .caption-counter { color: var(--text-muted); font-size: var(--fs-xs); }
.media-picker { display: grid; place-items: center; gap: var(--space-2); min-height: 92px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.media-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.media-picker span { font-size: var(--fs-2xl); color: var(--accent-text); }
.media-picker strong { color: var(--text); font-size: var(--fs-md); }
.media-picker small { color: var(--text-muted); }
.media-picker.dragging, .media-picker:focus-visible { border-color: var(--accent-text); background: var(--accent-soft); outline: none; }
.media-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-4); min-height: 92px; }
.empty-media-preview { display: grid; grid-template-columns: 1fr; place-items: center; align-content: center; gap: var(--space-4); min-height: 160px; padding: var(--space-10); text-align: center; color: var(--text-muted); }
/* Más específico que .image-preview (que va después y fuerza un cuadrado). */
.image-preview.empty-media-preview { aspect-ratio: auto; }
.empty-media-preview .media-empty-mark { color: var(--accent-text); font-size: var(--fs-3xl); line-height: 1; }
.empty-media-preview strong { color: var(--text); font-size: var(--fs-md); }
.empty-media-preview small { font-size: var(--fs-xs); }
.media-preview > img { width: 100%; height: 220px; grid-column: 1 / -1; object-fit: cover; border-radius: var(--radius-lg); }
.create-media-card { position: relative; min-height: 100px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); }
.create-media-card img, .create-media-card video { width: 100%; height: 100px; display: block; object-fit: cover; }
.create-media-card button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 0; border-radius: 50%; color: white; background: var(--overlay-chip-strong); cursor: pointer; }
.create-media-card button[data-move-media] { top: auto; bottom: 5px; right: auto; font-size: var(--fs-md); }.create-media-card button[data-move-media][data-direction="up"] { left: 5px; }.create-media-card button[data-move-media][data-direction="down"] { left: 34px; }.create-media-card button:disabled { opacity: .35; cursor: default; }
.create-media-card span { position: absolute; bottom: 5px; left: 6px; padding: 2px 5px; border-radius: var(--radius-pill); color: white; background: var(--overlay-chip); font-size: var(--fs-micro); }
.upload-status { min-height: 26px; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.upload-cancel { padding: 6px 10px; font-size: var(--fs-xs); }
.media-viewer { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 38px; background: rgb(4 4 8 / .94); }
.story-viewer { position: fixed; z-index: 60; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto; background: var(--scene); color: var(--on-overlay); }
.story-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, var(--surface-3) 0, var(--scene) 55%); }
.story-progress, .story-viewer-head, .story-stage, .story-caption, .story-reply-form, .story-viewer-actions { position: relative; z-index: 1; }
.story-progress { display: flex; gap: var(--space-2); padding: 14px 18px 4px; }
.story-progress-segment { flex: 1; height: 3px; overflow: hidden; border-radius: var(--radius-xs); background: var(--overlay-fill-strong); }
.story-progress-segment i { display: block; width: 0; height: 100%; background: var(--accent-line); transition: width .1s linear; }
.story-progress-segment.complete i { width: 100%; }
.story-viewer-head { display: flex; align-items: center; gap: var(--space-5); padding: 8px 18px; }
.story-viewer-head > span { display: grid; gap: var(--space-1); }.story-viewer-head small { color: var(--on-overlay-muted); font-size: var(--fs-micro); }
.story-close { margin-left: auto; border: 0; background: transparent; color: var(--on-overlay); font-size: var(--fs-3xl); cursor: pointer; }
.story-stage { display: grid; place-items: center; min-height: 0; padding: 10px 16px; }
.story-viewer-media { max-width: min(92vw, 620px); max-height: 68vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.story-zone { position: absolute; top: 0; bottom: 0; width: 32%; border: 0; background: transparent; cursor: pointer; }.story-zone-prev { left: 0; }.story-zone-next { right: 0; }
.story-caption { min-height: 24px; padding: 4px 20px; text-align: center; font-size: var(--fs-md); }
.story-reply-form { display: flex; gap: var(--space-4); padding: 10px 18px; }.story-reply-form input { flex: 1; min-width: 0; border: 1px solid var(--overlay-line); border-radius: var(--radius-pill); padding: 10px 14px; color: var(--on-overlay); background: var(--overlay-fill); }.story-reply-form button { width: 42px; border: 0; border-radius: 50%; color: var(--accent-ink); background: var(--accent); }
.story-viewer-actions { display: flex; justify-content: center; align-items: center; gap: var(--space-5); padding: 4px 18px 16px; }.story-viewer-actions > span { color: var(--on-overlay-muted); font-size: var(--fs-xs); }
.profile-story-button { margin-top: 10px; width: fit-content; border: 1px solid var(--accent-line); border-radius: var(--radius-pill); padding: 7px 12px; color: var(--accent-text); background: transparent; font-size: var(--fs-xs); }
.profile-orbit-frame.has-story { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-edge); }
.close-friends-settings { display: grid; gap: var(--space-6); margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }.close-friends-settings h3 { margin: 0; }.close-friends-settings > button { justify-self: start; }.close-friends-settings ul { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }.close-friends-settings li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }.close-friends-settings small { color: var(--text-muted); }.settings-empty { color: var(--text-muted); }
.viewer-stage { max-width: min(92vw, 1100px); max-height: 88vh; display: grid; place-items: center; }
.viewer-media { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.viewer-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; font-size: var(--fs-3xl); }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; font-size: var(--display-sm); }
.viewer-prev { left: 18px; }.viewer-next { right: 18px; }.viewer-position { position: absolute; bottom: 22px; }
.post-body { padding: var(--space-7); }
.post-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-7); }
.action-cluster { display: flex; gap: var(--space-3); }
.action { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.action:hover { color: var(--text); background: var(--surface-3); transform: translateY(-1px); }
.action:active { transform: scale(.94); }
.action svg { width: 19px; height: 19px; }
.action.liked { color: var(--danger); border-color: var(--danger-edge); background: var(--danger-soft); }
.action.liked svg { fill: currentColor; }
.action.saved { color: var(--accent-text); border-color: var(--accent-veil); background: var(--accent-ghost); }
.action.saved svg { fill: currentColor; }
.action span { color: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.action span:empty { display: none; }
.caption { margin-bottom: var(--space-5); font-size: var(--fs-base); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.caption strong { margin-right: var(--space-2); color: var(--accent-text); font-weight: var(--fw-bold); }
.comments-link { padding: 0; background: none; color: var(--text-muted); font-size: var(--fs-sm); }
time { display: block; margin-top: var(--space-6); color: var(--text-subtle); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.load-more { justify-self: center; margin-top: var(--space-9); padding: var(--space-5) var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-bold); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.load-more:hover:not(:disabled) { border-color: var(--accent-veil); color: var(--accent-text); transform: translateY(-1px); }
.load-more:disabled { opacity: .55; }
.bottom-nav { position: fixed; z-index: 10; left: 50%; bottom: calc(var(--space-7) + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: end; justify-content: space-around; width: min(94% - var(--space-7), 560px); padding: var(--space-3) var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--glass); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); }
.nav-rail-label { display: none; }
.nav-item { flex: 1; display: grid; justify-items: center; align-content: end; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-1) 0; background: none; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }
.nav-item svg { width: 18px; height: 18px; }
.nav-item > span:not(.create-orbit) { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1; }
.nav-item.active { color: var(--accent-text); }
.nav-item.active::before { content: ""; position: absolute; top: 0; left: 50%; width: 18px; height: 2px; border-radius: var(--radius-pill); background: var(--accent); transform: translateX(-50%); box-shadow: 0 0 var(--space-5) var(--accent-glow); }
.nav-create { margin-top: -17px; }
.create-orbit { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent-text); background: var(--surface-2); box-shadow: 0 0 0 5px var(--accent-ghost), 0 0 18px var(--accent-soft); }
.nav-create .create-orbit { width: 46px; height: 46px; background: var(--accent); color: var(--accent-ink); }
.desktop-rail { display: none; }
.search-box { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-11); padding: var(--space-5) var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.search-box:focus-within { border-color: var(--accent-veil); box-shadow: 0 0 0 4px var(--accent-ghost); color: var(--accent-text); }
.search-box input { width: 100%; border: 0; outline: 0; background: none; color: var(--text); }
.result-row { display: flex; align-items: center; gap: var(--space-6); width: 100%; padding: var(--space-5) var(--space-2); background: none; text-align: left; }
.result-row > span:not(.result-arrow) { display: grid; gap: var(--space-2); }
.result-row small { color: var(--text-muted); font-size: var(--fs-sm); }
.result-arrow { margin-left: auto; color: var(--accent-text); transform: rotate(-45deg); }
.discover-section { margin: 24px 0 30px; }
.discover-people { display: grid; gap: var(--space-4); margin-bottom: var(--space-11); }
.discover-person { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur-fast) var(--ease-out); }
.discover-person:hover { border-color: var(--accent-veil); }
.discover-person .result-row { flex: 1; min-width: 0; border: 0; }
.discover-person > .small-follow { flex: 0 0 auto; }
.suggestion-reason { color: var(--accent-text); font-size: var(--fs-micro); }
.discover-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.discover-post { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: left; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.discover-post:hover { border-color: var(--accent-veil); transform: translateY(-2px); }
.discover-post-media { position: relative; overflow: hidden; width: 74px; height: 74px; border-radius: var(--radius-md); background: var(--surface-2); }
.discover-post-media img { width: 100%; height: 100%; object-fit: cover; }
.discover-post span:last-child { display: grid; gap: var(--space-2); min-width: 0; }
.discover-post strong, .discover-post small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover-post strong { color: var(--text); font-size: var(--fs-xs); }
.discover-post small { color: var(--text-muted); font-size: var(--fs-micro); }
.filtered-discover-post em { color: var(--accent-text); font-size: var(--fs-micro); font-style: normal; }
.discover-video-badge { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-size: var(--fs-micro); }
.search-hint, .empty { display: grid; justify-items: center; padding: var(--space-13) var(--space-9); border: 1px dashed var(--line-strong); border-radius: var(--radius-2xl); background: var(--surface); color: var(--text-muted); text-align: center; }
.search-hint span, .empty span { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: var(--space-8); border: 1px solid var(--accent-veil); border-radius: var(--radius-circle); background: var(--accent-ghost); box-shadow: 0 0 var(--space-12) var(--accent-soft); color: var(--accent-text); font-size: var(--fs-3xl); }
.empty h3 { margin-bottom: var(--space-4); color: var(--text); font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
.empty p { max-width: 300px; margin: 0 auto; line-height: 1.5; }
.empty.compact { padding: 35px 10px; }
.create-form { display: grid; gap: var(--space-9); }
.create-form label { display: grid; gap: var(--space-4); color: var(--text-subtle); font-size: var(--fs-micro); font-weight: var(--fw-black); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.create-form input, .create-form textarea, .create-form select { width: 100%; padding: var(--space-6) var(--space-7); border: 1px solid var(--line); border-radius: var(--radius-lg); outline: 0; resize: vertical; background: var(--surface); color: var(--text); font-size: var(--fs-md); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.create-form input:focus, .create-form textarea:focus, .create-form select:focus { border-color: var(--accent-veil); box-shadow: 0 0 0 4px var(--accent-ghost); }
.create-form input[type=file] { padding: 9px; font-size: var(--fs-xs); }
.image-preview { overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.form-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); color: var(--text-muted); font-size: var(--fs-sm); }
.form-meta strong { color: var(--text); }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: var(--tap-min); padding: 0 var(--space-9); border-radius: var(--radius-pill); font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.primary:active, .secondary:active { transform: scale(.97); }
.primary { background: linear-gradient(140deg, var(--accent-hover), var(--accent-strong)); color: var(--accent-ink); box-shadow: var(--shadow-xs); }
.primary:hover { box-shadow: var(--shadow-sm), 0 0 var(--space-10) var(--accent-veil); transform: translateY(-1px); }
.primary.following { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.secondary { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.secondary:hover { border-color: var(--accent-veil); background: var(--surface-3); }
.wide { width: 100%; min-height: 50px; border-radius: var(--radius-md); }
.create-submit .create-orbit { width: 24px; height: 24px; border-color: var(--accent-ink); color: var(--accent-ink); box-shadow: none; background: transparent; }
.activity-list { display: grid; gap: var(--space-4); }
.activity-row { display: flex; align-items: center; gap: var(--space-6); min-height: 72px; padding: var(--space-6) var(--space-7); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.activity-row:hover { border-color: var(--accent-veil); transform: translateX(2px); }
.activity-row.unread { border-color: var(--accent-veil); background: linear-gradient(100deg, var(--accent-soft), var(--surface) 62%); }
.activity-row p { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-md); line-height: 1.35; overflow-wrap: anywhere; }
.activity-row p small { display: block; margin-top: 5px; color: var(--text-muted); font-size: var(--fs-micro); }
.activity-icon { color: var(--danger); }
.activity-state { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.activity-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.small-follow { padding: var(--space-4) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.small-follow:hover { border-color: var(--accent-veil); background: var(--surface-3); color: var(--accent-text); }
.small-follow.reject { color: var(--text-muted); }
.profile-hero { position: relative; display: grid; grid-template-columns: minmax(92px, 116px) minmax(0, 1fr); align-items: center; column-gap: var(--space-10); margin-bottom: var(--space-9); padding: var(--space-11) var(--space-9) var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); overflow: hidden; text-align: left; }
.profile-hero::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; height: 104px; background: linear-gradient(140deg, var(--accent-soft), transparent 58%), radial-gradient(120% 140% at 88% 0%, var(--aurora-cool), transparent 62%); }
.profile-hero > * { position: relative; z-index: 1; }
.back-button { position: absolute; z-index: 2; top: var(--space-5); right: 0; left: auto; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); }
.back-button:hover { border-color: var(--accent-veil); color: var(--accent-text); }
.back-button svg { transform: none; }
.profile-orbit-frame { position: relative; z-index: 1; justify-self: center; width: 92px; min-width: 92px; height: 92px; margin: 0; }
.profile-orbit-frame::before, .profile-orbit-frame::after { content: ""; position: absolute; border: 1px solid var(--accent-line); border-radius: 50%; pointer-events: none; }
.profile-orbit-frame::before { inset: -9px 7px 8px -8px; opacity: .65; transform: rotate(-26deg); }
.profile-orbit-frame::after { inset: 7px -9px -8px 8px; border-color: var(--accent-edge); transform: rotate(28deg); }
.profile-orbit-frame > span { position: absolute; top: 1px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.profile-copy { min-width: 0; max-width: 380px; }
.profile-copy h2 { font-size: var(--display-sm); letter-spacing: var(--tracking-display); }
.profile-copy p { margin: 7px 0 0; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.profile-copy .profile-state, .profile-copy .handle { color: var(--accent-text); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.profile-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 16px; }
.profile-stats { display: flex; justify-content: space-around; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-stats span { display: grid; gap: var(--space-2); min-width: 82px; text-align: center; }
.profile-stats strong { font-size: var(--fs-2xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.profile-stats small { color: var(--text-subtle); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.profile-tabs { display: inline-flex; gap: var(--space-1); margin: var(--space-9) 0 var(--space-6); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.profile-tabs button { position: relative; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); color: var(--text-muted); background: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.profile-tabs button:hover { color: var(--text); background: var(--surface-2); }
.profile-tabs .active, .profile-tabs .active:hover { color: var(--accent-ink); background: var(--accent); }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-item { position: relative; }.grid-media-count, .grid-video-badge { position: absolute; top: 7px; right: 7px; min-width: 22px; padding: 3px 6px; border-radius: var(--radius-pill); color: white; background: var(--overlay-chip-strong); font-size: var(--fs-micro); text-align: center; }
.grid-item { overflow: hidden; aspect-ratio: 1; padding: 0; border-radius: var(--radius-md); background: var(--surface); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.grid-item:hover { transform: scale(1.02); box-shadow: var(--shadow-sm); z-index: 1; }
.grid-item img { width: 100%; height: 100%; object-fit: cover; }
.grid-item img.media-fallback { object-fit: contain; padding: 18px; opacity: .65; }
.loading-screen { display: grid; place-content: center; justify-items: center; gap: var(--space-5); min-height: 100vh; color: var(--text-muted); }
.loading-screen p { margin: 0; font-size: var(--fs-sm); }
.loading-mark { color: var(--text); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -2px; }
.loading-mark span { color: var(--accent-text); }
.loading-mark::after { content: ""; display: block; width: 42px; height: 2px; margin: var(--space-6) auto 0; background: var(--accent-line); animation: loading-pulse 1.1s ease-in-out infinite; }
.loading-skeleton { width: min(82vw, 560px); height: 14px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 220% 100%; animation: skeleton-shimmer 1.1s ease-in-out infinite; }
.loading-skeleton-wide { height: 180px; border-radius: var(--radius-lg); }
.loading-skeleton-short { width: min(48vw, 280px); }
@keyframes loading-pulse { 0%, 100% { transform: scaleX(.35); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes skeleton-shimmer { to { background-position: -120% 0; } }
.auth-screen { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; overflow: hidden; background: radial-gradient(circle at 50% 25%, var(--surface-3) 0, var(--surface) 25%, var(--bg) 63%); }
.auth-copy { position: relative; z-index: 1; width: min(340px, calc(100vw - 32px)); text-align: center; }
.auth-copy h1 { margin: 0 0 var(--space-10); font-size: var(--display-lg); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.auth-copy h1 em { color: var(--accent-text); font-style: normal; }
.auth-copy .muted { margin-bottom: 30px; font-size: var(--fs-base); line-height: 1.55; }
.auth-orbit { position: absolute; width: 320px; height: 320px; border: 1px solid var(--accent-veil); border-radius: 50%; animation: orbit-drift 12s linear infinite; }
.auth-orbit::before, .auth-orbit::after, .auth-orbit span { content: ""; position: absolute; border-radius: 50%; background: var(--accent); box-shadow: 0 0 35px var(--accent-glow); }
.auth-orbit::before { width: 8px; height: 8px; left: 24px; top: 60px; }
.auth-orbit::after { width: 5px; height: 5px; right: 45px; bottom: 38px; }
.auth-orbit span:nth-child(1) { width: 5px; height: 5px; left: 55px; bottom: 30px; }
.auth-orbit span:nth-child(2) { width: 7px; height: 7px; right: 15px; top: 95px; }
.auth-orbit span:nth-child(3) { width: 4px; height: 4px; right: 100px; top: 19px; }
@keyframes orbit-drift { to { transform: rotate(360deg); } }
.onboarding { width: min(360px, calc(100vw - 32px)); text-align: left; }
.onboarding h1 { margin-bottom: 10px; font-size: var(--display-md); letter-spacing: -2.5px; }
.onboarding .muted { margin-bottom: 22px; }
.onboarding .create-form { gap: var(--space-7); }
.onboarding .primary { margin-top: 6px; }
.check-row { display: flex !important; align-items: center; gap: var(--space-4) !important; }
.check-row input { width: auto !important; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 102px; padding: 11px 16px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-size: var(--fs-sm); font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.comment-list { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); border: 0; border-radius: var(--radius-lg); background: var(--surface-2); }
.comment-list p { margin: var(--space-3) 0; color: var(--text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.comment-list strong { color: var(--text); }
.comment-list button, .owner-controls button { padding: 0 3px; background: none; color: var(--text-muted); }
.comment-list .comment-more { margin-left: 4px; border: 0; cursor: pointer; opacity: .7; }
.comment-list .comment-more:hover, .comment-list .comment-more:focus-visible { color: var(--accent-text); opacity: 1; }
.inline-comment-form { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.inline-comment-form .secondary { flex: 0 0 auto; min-width: var(--tap-min); padding: 0 var(--space-5); }
.inline-comment-form .secondary svg { width: 16px; height: 16px; }
.inline-comment-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); }
.inline-comment-form .primary { padding: 9px 14px; font-size: var(--fs-xs); }
.owner-controls { display: flex; gap: var(--space-6); margin-top: 12px; }
.owner-controls button { font-size: var(--fs-xs); }
.owner-controls button:last-child { color: var(--danger); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.remote-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin: -6px 0 18px; padding: 12px 14px; border: 1px solid var(--danger-edge); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.4; }
.remote-notice .secondary { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: var(--fs-xs); }
.settings-list { display: grid; gap: var(--space-4); }
.settings-safety-nav, .safety-subpage-content { display: grid; gap: var(--space-7); }
.settings-safety-nav { margin-top: 24px; }
.settings-safety-nav h3, .safety-subpage-content h3 { margin: 0; font-size: var(--fs-lg); }
.settings-safety-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.settings-safety-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-safety-list li > span { display: grid; gap: var(--space-2); min-width: 0; color: var(--text); font-size: var(--fs-md); }
.settings-safety-list li small { color: var(--text-muted); font-size: var(--fs-xs); }
.safety-filter-form { display: grid; gap: var(--space-4); }
.safety-filter-form > label { color: var(--text-muted); font-size: var(--fs-xs); }
.safety-subpage-content { margin-top: 22px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); width: 100%; padding: var(--space-7); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: left; transition: border-color var(--dur-fast) var(--ease-out); }
.setting-row:hover { border-color: var(--accent-veil); }
.setting-row > span:first-child { display: flex; align-items: center; gap: var(--space-6); }
.setting-row > span:first-child > span { display: grid; gap: var(--space-2); }
.setting-row svg { color: var(--text-muted); }
.setting-row small { color: var(--text-muted); font-size: var(--fs-xs); }
.setting-row strong { font-size: var(--fs-md); }
.setting-row.danger strong { color: var(--danger); }
.setting-row > svg { transform: rotate(-45deg); color: var(--text-muted); }
.pill { padding: 5px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-micro); }
.version { margin-top: 30px; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
.fatal-screen { display: grid; place-content: center; gap: var(--space-6); max-width: 560px; min-height: 100vh; margin: auto; padding: 28px; }
.fatal-screen h1 { margin: 0; font-size: var(--display-md); letter-spacing: -2px; }
.fatal-screen p:not(.eyebrow) { color: var(--text-muted); line-height: 1.5; }
.social-panel { align-self: start; padding: 9px 0 0; color: var(--text-muted); }
.social-panel-title { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-3) var(--space-5); color: var(--accent-text); font-size: var(--fs-micro); font-weight: var(--fw-black); letter-spacing: var(--tracking-label); }
.social-panel-block { margin-top: var(--space-6); padding: var(--space-7); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.social-panel-block h3 { margin: 0 0 13px; color: var(--text); font-size: var(--fs-base); letter-spacing: -.2px; }
.panel-post, .panel-person, .panel-request { display: flex; align-items: center; gap: var(--space-5); width: 100%; padding: 8px 0; background: none; text-align: left; }
.panel-post:hover, .panel-person:hover { color: var(--text); }
.panel-post > span, .panel-person > span, .panel-request > span { display: grid; gap: var(--space-2); min-width: 0; }
.panel-post strong, .panel-person strong, .panel-request strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--fs-xs); }
.panel-post small, .panel-person small, .panel-request small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-micro); }
.panel-post time { margin: 0; font-size: var(--fs-micro); }
.panel-post i, .panel-person i { margin-left: auto; color: var(--accent-text); font-style: normal; }
.panel-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.panel-request-dot { flex: 0 0 7px; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.panel-placeholder { display: flex; align-items: center; gap: var(--space-5); margin-top: 18px; padding: 12px 0; color: var(--text-muted); }
.panel-placeholder > span { color: var(--accent-text); font-size: var(--fs-2xl); transform: rotate(-20deg); }
.panel-placeholder > div { display: grid; gap: var(--space-2); }
.panel-placeholder strong { color: var(--text); font-size: var(--fs-xs); }
.panel-placeholder small { font-size: var(--fs-micro); line-height: 1.3; }
.panel-placeholder em { margin-left: auto; color: var(--text-muted); font-size: var(--fs-micro); font-style: normal; text-transform: uppercase; }
body.light::before { opacity: .08; }
body.light .bottom-nav { background: var(--glass); }
@media (min-width: 980px) {
  .app-shell { padding-bottom: var(--space-11); padding-left: var(--rail-width); }
  .topbar { width: min(100% - (var(--gutter) * 2), var(--shell-max)); }
  .topbar .brand { display: none; }
  .content-stage { width: min(100% - (var(--gutter) * 2), var(--shell-max)); display: grid; grid-template-columns: minmax(0, var(--feed-max)); justify-content: center; gap: var(--space-11); }
  .content-stage main { width: 100%; }
  .desktop-rail { position: fixed; z-index: 11; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--rail-width); padding: var(--space-11) var(--space-9); border-right: 1px solid var(--line); background: var(--glass-rail); backdrop-filter: var(--glass-blur); }
  body.light .desktop-rail { background: var(--glass-rail); }
  .rail-brand { margin: 0 0 var(--space-12); font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-display); }
  .rail-brand span { color: var(--accent-text); }
  .rail-kicker { margin: 0 0 16px; color: var(--text-muted); font-size: var(--fs-micro); letter-spacing: 1.5px; }
  .rail-item { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); margin: var(--space-1) 0; border: 1px solid transparent; border-radius: var(--radius-pill); background: none; color: var(--text-muted); text-align: left; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .rail-item:hover { color: var(--text); background: var(--surface-2); }
  .rail-item .nav-badge { position: static; top: auto; right: auto; margin-left: auto; }
  .rail-item.active { color: var(--accent-text); border-color: var(--accent-veil); background: var(--accent-ghost); box-shadow: none; }
  .rail-item > span:not(.create-orbit) { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .rail-item .create-orbit { width: 30px; height: 30px; }
  .rail-note { display: flex; align-items: center; gap: var(--space-5); margin-top: auto; color: var(--text-muted); }
  .bottom-nav { display: none; }
}
@media (min-width: 1280px) {
  .content-stage.has-social-panel { grid-template-columns: minmax(0, var(--feed-max)) var(--panel-width); }
  .content-stage:not(.has-social-panel) { grid-template-columns: minmax(640px, 900px); }
  .content-stage.has-social-panel .social-panel { display: block; }
}
@media (max-width: 520px) {
  main, .content-stage main { width: 100%; }
  .content-stage { width: min(100% - (var(--space-7) * 2), var(--feed-max)); }
  .topbar { width: min(100% - (var(--space-7) * 2), var(--shell-max)); height: var(--space-13); }
  .topbar-context { display: none; }
  .page { padding-top: 17px; }
  .quick-loop { flex-basis: 76px; }
  .profile-hero { grid-template-columns: 1fr; justify-items: center; row-gap: var(--space-2); text-align: center; }
  .profile-orbit-frame { grid-column: 1; }
  .profile-copy { grid-column: 1; width: min(100%, 380px); }
  .profile-copy p { margin-left: auto; margin-right: auto; }
  .profile-actions { grid-column: 1; justify-content: center; }
  .post-media .post-image, .post-media .post-video { aspect-ratio: var(--media-ratio, 1 / 1); }
  .auth-copy { width: min(280px, calc(100vw - 24px)); }
  .auth-copy h1 { font-size: var(--display-lg); letter-spacing: -3px; }
}

/* === CHAT DE CÍRCULO ====================================================
   Un hilo de grupo necesita autoría visible: hay más de dos personas. La
   burbuja propia reutiliza el relleno de marca de los directos.
   ====================================================================== */
.circle-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.circle-message { display: grid; gap: var(--space-2); width: fit-content; max-width: min(78%, 46ch); }
.circle-message.theirs { align-self: flex-start; justify-items: start; }
.circle-message.mine { align-self: flex-end; justify-items: end; }
.circle-message.starts-run { margin-top: var(--space-5); }
.circle-message-author { display: inline-flex; align-items: center; gap: var(--space-3); padding: 0; background: none; color: var(--text-muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.circle-message-author:hover { color: var(--accent-text); }
.circle-message-bubble { position: relative; padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xs); background: var(--surface-2); }
.circle-message.mine .circle-message-bubble { border-color: var(--accent-veil); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl); background: linear-gradient(140deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); }
.circle-message-bubble.deleted { background: transparent; border-style: dashed; color: var(--text-subtle); font-style: italic; }
.circle-message-bubble p { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); overflow-wrap: anywhere; white-space: pre-wrap; }
.circle-message-bubble small { display: block; margin-top: var(--space-2); font-size: var(--fs-micro); opacity: .7; }
.circle-message-remove { position: absolute; top: var(--space-2); right: var(--space-2); width: 22px; height: 22px; border-radius: var(--radius-circle); background: transparent; color: inherit; font-size: var(--fs-sm); line-height: 1; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.circle-message:hover .circle-message-remove, .circle-message:focus-within .circle-message-remove { opacity: .75; }
.circle-message-remove:hover { opacity: 1; }

/* Inbox unificado: una fila de Círculo se distingue por la pila de avatares
   y una etiqueta, no por vivir en otra lista. */
.message-row-circle .inbox-stack { flex: 0 0 auto; }
.inbox-tag { margin-left: var(--space-3); padding: 2px var(--space-4); border: 1px solid var(--accent-veil); border-radius: var(--radius-pill); background: var(--accent-ghost); color: var(--accent-text); font-size: var(--fs-micro); font-style: normal; font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.circle-card-row { display: flex; align-items: stretch; gap: var(--space-4); }
.circle-card-row .circle-card { flex: 1; min-width: 0; }
.circle-card-chat { display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.circle-card-chat svg { width: 17px; height: 17px; }
.circle-chat-cta { display: inline-flex; align-items: center; gap: var(--space-3); }
.circle-chat-cta .message-unread { background: var(--accent-ink); color: var(--accent); }


/* === MÓVIL ===============================================================
   Reordenación para pantallas estrechas. Nada aquí cambia el marcado: solo
   cómo se reparte el espacio cuando no cabe en una fila.
   ====================================================================== */
@media (max-width: 520px) {
  /* Cabeceras de página: título y acciones en la misma fila, el subtítulo a
     todo el ancho debajo. display: contents deja que el título y el subtítulo
     participen directamente en la rejilla de la cabecera. */
  .home-heading, .page-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; align-items: center; column-gap: var(--space-6); row-gap: 0; margin-bottom: var(--space-10); }
  .home-heading > div:first-child, .page-title > div:first-child { display: contents; }
  .home-heading .eyebrow, .page-title .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .home-heading h2, .page-title h2 { grid-column: 1; min-width: 0; }
  .home-heading .page-subtitle, .page-title .page-subtitle { grid-column: 1 / -1; font-size: var(--fs-base); }
  .home-heading-actions, .page-title > .primary, .page-title > .secondary { grid-column: 2; }
  .home-heading-actions { gap: var(--space-3); }
  .home-heading-actions .round-button { width: 40px; height: 40px; }
  .page-orbit { display: none; }

  /* Selector Amigos / Para ti: dos mitades iguales a todo el ancho. */
  .feed-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: var(--space-10); }
  .feed-switch button { min-width: 0; padding: var(--space-4) var(--space-6); text-align: center; }
  .feed-switch button small { display: none; }

  /* Acciones del post: iconos compactos, sin pastillas de 44px. */
  .post-actions { margin-bottom: var(--space-5); }
  .action-cluster { gap: var(--space-2); }
  .action { min-height: 34px; padding: 0 var(--space-4); }

  /* Descubrir: miniatura arriba y texto debajo, en vez de una columna
     estrecha que cortaba los textos a cuatro letras. */
  .discover-post { grid-template-columns: 1fr; align-items: start; gap: var(--space-4); padding: var(--space-3); }
  .discover-post-media { width: 100%; height: auto; aspect-ratio: 1; }
  .discover-post > span:last-child { padding: 0 var(--space-2) var(--space-2); }

  /* Actividad: si hay botones, van debajo del texto en vez de estrujarlo. */
  .activity-row { flex-wrap: wrap; row-gap: var(--space-5); }
  .activity-row .activity-actions { flex: 1 0 100%; justify-content: flex-start; padding-left: calc(46px + var(--space-6)); }

  /* Estadísticas del perfil: en mayúsculas espaciadas "PUBLICACIONES" no cabe
     en un tercio de pantalla de 320px y empujaba la tercera tarjeta fuera. */
  .profile-stats > button, .profile-stats > span { min-width: 0; padding: var(--space-6) var(--space-3); }
  .profile-stats small { letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }

  /* Pestañas del perfil: se deslizan en horizontal en vez de salirse. */
  .profile-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-tabs { width: 100%; }
  .profile-tabs button { flex: 1 0 auto; padding: var(--space-4); }

  /* Cabeceras de hilo (directos y Círculos): título de chat, no de portada. */
  .message-thread-header { min-height: 0; }
  .message-thread-header .eyebrow { display: none; }
  .message-thread-header h2 { font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
  .message-thread-header .page-subtitle { margin-top: var(--space-1); font-size: var(--fs-sm); }

  /* Lista de Círculos: el acceso al chat es un botón redondo, no una pastilla
     estirada a toda la altura de la tarjeta. */
  .circle-card-row { align-items: center; }
  .circle-card-chat { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; border-radius: var(--radius-circle); }
}

/* La × de un mensaje propio va en la misma línea que la hora. */
.circle-message-bubble { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: end; }
.circle-message-bubble p { grid-column: 1 / -1; }
.circle-message-bubble small { grid-column: 1; }
.circle-message-remove { position: static; grid-column: 2; grid-row: 2; width: 22px; height: 22px; margin: 0; }
/* === MOVIMIENTO =========================================================
   Cada efecto corre una vez por causa real: la vista cambió, el post es
   nuevo, la imagen acaba de decodificarse, el usuario acaba de pulsar.
   Todo queda anulado bajo prefers-reduced-motion (al final del archivo).
   ====================================================================== */

@keyframes loop-page-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: none; } }
.content-stage .page.is-entering { animation: loop-page-in var(--dur-base) var(--ease-out) both; }

/* Me gusta: el corazón se hincha y suelta un anillo. */
@keyframes loop-like-pop { 0% { transform: scale(1); } 35% { transform: scale(1.34) rotate(-8deg); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes loop-like-ring { from { opacity: .55; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
.action.is-bursting svg { animation: loop-like-pop var(--dur-slow) var(--ease-spring) both; }
.action.is-bursting::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--danger); border-radius: var(--radius-pill); animation: loop-like-ring var(--dur-slow) var(--ease-out) both; pointer-events: none; }
.action { position: relative; }

/* Guardado: el marcador cae en su sitio. */
@keyframes loop-save-drop { 0% { transform: translateY(-4px) scale(.85); } 55% { transform: translateY(2px) scale(1.12); } 100% { transform: none; } }
.action.saved svg { animation: loop-save-drop var(--dur-base) var(--ease-spring) both; }

/* Las imágenes aparecen al decodificarse: nada de saltos duros. */
/* Solo se atenúa la imagen que el JS ha tomado a su cargo: si el script no
   corre, la media se ve igualmente. */
.post-media img[data-reveal-bound]:not(.is-loaded), .grid-item img[data-reveal-bound]:not(.is-loaded), .discover-post-media img[data-reveal-bound]:not(.is-loaded) { opacity: 0; }
.post-media img, .grid-item img, .discover-post-media img { transition: opacity var(--dur-base) var(--ease-out); }

/* Insignias y contadores entran con un rebote corto. */
@keyframes loop-badge-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.nav-badge, .message-unread, .notification-button b { animation: loop-badge-pop var(--dur-base) var(--ease-spring) both; }

/* El indicador de la barra inferior se despliega. */
@keyframes loop-nav-mark { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
.nav-item.active::before { animation: loop-nav-mark var(--dur-base) var(--ease-spring) both; }

/* Diálogos y menús emergentes. */
@keyframes loop-dialog-in { from { opacity: 0; transform: translateY(var(--space-4)) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes loop-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.share-dialog, .circle-dialog, .recommendation-menu, .reason-popover, .mention-suggestions, .message-reaction-picker { animation: loop-dialog-in var(--dur-fast) var(--ease-out) both; }
.media-viewer, .story-viewer { animation: loop-scrim-in var(--dur-fast) var(--ease-out) both; }
.media-viewer .viewer-stage { animation: loop-dialog-in var(--dur-base) var(--ease-spring) both; }

/* El aviso flotante llega con muelle. */
.toast { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring); }

/* La burbuja de story respira mientras haya Loops sin ver. */
@keyframes loop-orbit-spin { to { transform: rotate(360deg); } }
.quick-loop-story.unseen .quick-loop-orbit-ring { animation: loop-orbit-spin 9s linear infinite; }

/* Estados vacíos: la órbita late muy despacio. */
@keyframes loop-orbit-breathe { 0%, 100% { box-shadow: 0 0 var(--space-12) var(--accent-soft); } 50% { box-shadow: 0 0 var(--space-13) var(--accent-veil); } }
.empty span, .search-hint span { animation: loop-orbit-breathe 4.5s var(--ease-in-out) infinite; }

/* Las filas de una lista entran escalonadas al cambiar de vista. */
@keyframes loop-row-in { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: none; } }
.page.is-entering .activity-row, .page.is-entering .message-row, .page.is-entering .discover-person, .page.is-entering .circle-card, .page.is-entering .setting-row { animation: loop-row-in var(--dur-base) var(--ease-out) both; }
.page.is-entering :is(.activity-row, .message-row, .discover-person, .circle-card, .setting-row):nth-child(1) { animation-delay: 20ms; }
.page.is-entering :is(.activity-row, .message-row, .discover-person, .circle-card, .setting-row):nth-child(2) { animation-delay: 60ms; }
.page.is-entering :is(.activity-row, .message-row, .discover-person, .circle-card, .setting-row):nth-child(3) { animation-delay: 100ms; }
.page.is-entering :is(.activity-row, .message-row, .discover-person, .circle-card, .setting-row):nth-child(n+4) { animation-delay: 140ms; }

/* Congela las transiciones mientras se cambia de tema: evita que una
   propiedad transicionada se quede en el color del tema anterior. */
/* Áreas táctiles: en dispositivos sin puntero fino, todo control alcanza
   --tap-min sin cambiar su tamaño visual. Los controles con caja propia
   crecen; los enlaces en línea amplían solo su zona de impacto. */
@media (hover: none), (pointer: coarse) {
  /* Controles con forma de botón: 44px de alto real, es su tamaño natural. */
  .small-follow, .profile-story-button, .setting-row, .result-row { min-height: var(--tap-min); }
  /* Controles compactos: tamaño visual intacto, zona de impacto de 44px. */
  .action, .more, .comment-more, .avatar-button, .carousel-button, .circle-message-remove, .circle-card-chat, .brand, .round-button,
  .comments-link, .quick-loop-cta, .owner-controls button, .profile-tabs button, .feed-switch button { position: relative; }
  .action::after, .more::after, .comment-more::after, .avatar-button::after, .carousel-button::after, .circle-message-remove::after, .circle-card-chat::after, .brand::after, .round-button::after,
  .comments-link::after, .quick-loop-cta::after, .owner-controls button::after, .profile-tabs button::after, .feed-switch button::after {
    content: ""; display: block; position: absolute; top: 50%; left: 50%;
    width: max(100%, var(--tap-min)); height: max(100%, var(--tap-min));
    transform: translate(-50%, -50%);
  }
  /* En táctil el borrado de un mensaje no depende del hover: va junto a la hora. */
  .circle-message-remove { position: relative; top: auto; right: auto; opacity: .7; }
}
/* Entrada escalonada del feed. Se respeta prefers-reduced-motion abajo. */
@keyframes loop-rise { from { opacity: 0; transform: translateY(var(--space-6)); } to { opacity: 1; transform: none; } }
.feed > .post.is-entering { animation: loop-rise var(--dur-slow) var(--ease-out) both; }

body.theme-switching, body.theme-switching *, body.theme-switching *::before, body.theme-switching *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.messages-page { max-width: 760px; margin: 0 auto; }
.message-inbox { display: grid; gap: var(--space-5); }
.message-row { display:flex; align-items:center; gap: var(--space-7); width:100%; padding:14px; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--surface); color:inherit; text-align:left; }
.message-row > span:not(.avatar) { display:grid; gap: var(--space-2); flex:1; min-width:0; } .message-row small { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-thread-title { display:flex; align-items:center; gap: var(--space-6); } .message-thread-title > div { flex:1; }
.message-thread { min-height:45vh; max-height:60vh; overflow:auto; display:flex; flex-direction:column; gap: var(--space-4); padding:12px 0; scrollbar-width:none; }
.message-thread::-webkit-scrollbar { display:none; }
.message-item { position:relative; display:flex; align-items:center; width:fit-content; max-width:72%; min-width:0; flex:0 0 auto; overflow:visible; }
.message-item.theirs { align-self:flex-start; margin-right:auto; }
.message-item.mine { align-self:flex-end; margin-left:auto; }
.message-bubble { position:relative; z-index:1; flex:0 1 auto; overflow:visible; max-width:100%; padding:10px 13px 27px; border:1px solid var(--line); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xs); background:var(--surface-2); color:var(--text); box-shadow:var(--shadow-xs); transition:transform .18s ease, box-shadow .18s ease; }
.message-bubble.theirs { align-self:flex-start; }
.message-bubble.mine { align-self:flex-end; border-color:var(--accent-veil); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl); background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:var(--accent-ink); box-shadow:0 9px 24px var(--accent-soft); }
.message-bubble p { margin:0; text-align:left; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; font-weight:600; }
.message-bubble small { position:absolute; right:10px; bottom:6px; display:block; margin:0; color:inherit; text-align:right; line-height:1.2; opacity:0; font-size: var(--fs-micro); pointer-events:none; transform:translateY(3px); transition:opacity .18s ease, transform .18s ease; }
.message-bubble.theirs .message-timestamp { right:auto; left:10px; text-align:left; }
.message-bubble:hover small, .message-bubble:focus-within small { opacity:.68; transform:translateY(0); }
.message-bubble--sent { transform-origin:100% 100%; will-change:transform, opacity, filter, clip-path, border-radius; animation:message-send-unfold .74s cubic-bezier(.16,.86,.18,1.08) both; }
.message-bubble--sent::after { content:""; position:absolute; inset:1px; pointer-events:none; border-radius:inherit; background:linear-gradient(118deg, transparent 30%, var(--overlay-sheen) 48%, transparent 65%); mix-blend-mode:soft-light; animation:message-send-sheen .74s ease-out both; }
.message-send-pulse { position:fixed; z-index:30; width:42px; height:42px; border:1px solid var(--accent-edge); border-radius: var(--radius-lg); pointer-events:none; background:radial-gradient(circle at 36% 30%, var(--lime-200), var(--accent-edge) 44%, var(--accent-fade) 72%); box-shadow:0 0 0 0 var(--accent-edge), inset 0 1px 0 var(--overlay-line); transform:translate(-50%, -50%) scale(.88); animation:message-send-button-press .52s cubic-bezier(.16,.86,.18,1.08) both; }
@keyframes message-send-unfold { 0% { opacity:0; border-radius: var(--radius-pill); clip-path:inset(37% 46% 37% 46% round 999px); transform:translate3d(var(--message-origin-x, 0), var(--message-origin-y, 0), 0) scale(.09, .17) rotate(0); filter:blur(4px) saturate(1.35); } 20% { opacity:1; border-radius: var(--radius-pill); clip-path:inset(26% 30% 26% 30% round 999px); transform:translate3d(var(--message-launch-x, 0), var(--message-launch-y, 0), 0) scale(.3, .36) rotate(2deg); filter:blur(1px) saturate(1.18); } 55% { opacity:1; border-radius: var(--radius-2xl); clip-path:inset(4% 5% 4% 4% round 28px); transform:translate3d(var(--message-arc-x, 0), var(--message-arc-y, 0), 0) scale(.82, .9) rotate(1deg); filter:blur(0) saturate(1.05); } 78% { opacity:1; border-radius: var(--radius-xl) var(--radius-xs) var(--radius-xl) var(--radius-xl); clip-path:inset(0 round 18px); transform:translate3d(-7px, 4px, 0) scale(1.045, .97) rotate(-.6deg); } 100% { opacity:1; border-radius: var(--radius-xl) var(--radius-xs) var(--radius-xl) var(--radius-xl); clip-path:inset(0 round 18px); transform:translate3d(0, 0, 0) scale(1); filter:blur(0) saturate(1); } }
@keyframes message-send-button-press { 0% { opacity:0; transform:translate(-50%, -50%) scale(.74); box-shadow:0 0 0 0 var(--accent-edge), inset 0 1px 0 var(--overlay-line); } 26% { opacity:1; transform:translate(-50%, -50%) scale(.93, .72); box-shadow:0 0 0 5px var(--accent-edge), inset 0 1px 0 var(--overlay-line); } 64% { opacity:.7; transform:translate(-50%, -50%) scale(1.25, .9); box-shadow:0 0 0 14px var(--accent-fade), inset 0 1px 0 var(--overlay-fill-strong); } 100% { opacity:0; transform:translate(-50%, -50%) scale(1.55, 1.04); box-shadow:0 0 0 24px var(--accent-fade), inset 0 1px 0 transparent; } }
@keyframes message-send-sheen { 0% { opacity:0; transform:translateX(-68%); } 34% { opacity:.9; } 100% { opacity:0; transform:translateX(68%); } }
.message-compose { display:flex; gap: var(--space-4); align-items:flex-end; margin-top: var(--space-6); }
.message-compose textarea { flex:1; min-height:46px; max-height:160px; padding: var(--space-5) var(--space-7); border:1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); font-size: var(--fs-md); line-height: var(--lh-snug); resize:none; outline:0; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.message-compose textarea:focus { border-color: var(--accent-veil); box-shadow: 0 0 0 4px var(--accent-ghost); }
.message-compose .primary { flex:0 0 auto; width:48px; min-width:48px; padding:0; border-radius: var(--radius-circle); }
.message-compose .message-attachment-button { flex:0 0 42px; width:42px; height:46px; align-self:center; border:1px solid var(--line); color: var(--accent-text); font-size: var(--fs-2xl); font-weight:300; line-height:1; }
.message-compose .message-attachment-button:hover { border-color:var(--accent-edge); color:var(--text); }
.message-controls { position:absolute; z-index:3; top:50%; right:calc(100% + 8px); display:flex; align-items:center; gap: var(--space-1); margin:0; padding:3px; border:1px solid var(--line); border-radius: var(--radius-sm); background:var(--surface); color:var(--text-muted); box-shadow:var(--shadow-sm); opacity:0; pointer-events:none; transform:translateY(-50%) scale(.92); transition:opacity .18s ease, transform .18s ease; }
.message-item.theirs .message-controls { right:auto; left:calc(100% + 8px); }
.message-item:hover .message-controls, .message-item:focus-within .message-controls, .message-item.actions-open .message-controls { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); }
.message-controls::before { content:""; position:absolute; top:-12px; bottom:-12px; width:18px; }
.message-item.mine .message-controls::before { right:-18px; }
.message-item.theirs .message-controls::before { left:-18px; }
.message-controls button { border:0; background:transparent; color:inherit; cursor:pointer; font-size: var(--fs-sm); padding:3px 5px; }
.message-controls button:hover, .message-controls button:focus-visible { color: var(--accent-text); }
.message-controls .message-report { color:var(--text-muted); }
.message-reaction-picker { position:absolute; z-index:4; top:calc(100% + 6px); left:0; display:flex; gap: var(--space-1); padding:3px; border:1px solid var(--line); border-radius: var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm); }
.message-item.mine .message-reaction-picker { right:0; left:auto; }
.message-reaction-picker[hidden] { display:none; }
.message-bubble:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.message-reply-note { margin:0; font-size: var(--fs-sm); color:var(--text-muted); } .message-block { font-size: var(--fs-xs); }
.message-quote { margin:0 0 6px; padding:4px 7px; border-left:2px solid currentColor; font-size: var(--fs-sm); opacity:.8; overflow-wrap:anywhere; }
/* El media adjunto a un mensaje no tenía ninguna regla: una imagen alta
   estiraba la burbuja hasta su altura natural y <video> ni siquiera queda
   cubierto por img { max-width: 100% }. */
.message-media { display:grid; gap:var(--space-2); margin:0 0 var(--space-4); }
.message-media img, .message-media video { width:100%; max-width:100%; max-height:min(320px, 42vh); border-radius:var(--radius-md); object-fit:cover; background:var(--surface-3); }
.message-media video { object-fit:contain; background:var(--scene); }
.message-reaction { display:inline-block; font-size: var(--fs-sm); margin:3px 3px 0 0; }
.message-unread { min-width:20px; padding:2px 6px; border-radius: var(--radius-pill); background:var(--accent); color:var(--accent-ink); font-size: var(--fs-xs); text-align:center; }
.message-bubble.failed { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn-edge); }
.message-bubble p { overflow-wrap:anywhere; white-space:pre-wrap; }
@media (hover:none), (max-width:520px) {
  .message-item { width:100%; max-width:100%; flex:0 0 100%; padding-bottom:34px; }
  .message-item.theirs { justify-content:flex-start; }
  .message-item.mine { justify-content:flex-end; }
  .message-item:focus-within .message-controls, .message-item.actions-open .message-controls { opacity:1; pointer-events:auto; }
  .message-controls { top:auto; right:0; bottom:5px; transform:scale(.92); }
  .message-item.theirs .message-controls { right:auto; left:0; }
  .message-item:hover .message-controls, .message-item:focus-within .message-controls, .message-item.actions-open .message-controls { transform:scale(1); }
  .message-controls::before { display:none; }
  .message-reaction-picker { top:auto; bottom:calc(100% + 6px); }
}
.reloop-context { display:flex; align-items:center; gap:var(--space-3); margin:0; padding:var(--space-4) var(--space-7); border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--text-muted); font-size:var(--fs-micro); font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.reloop-context::before { content:"↻"; color:var(--accent-text); font-size:var(--fs-sm); }
.inline-mention { display:inline; padding:0; border:0; background:none; color: var(--accent-text); font:inherit; font-weight:700; cursor:pointer; }
.mention-suggestions { position:absolute; z-index:20; display:grid; gap: var(--space-2); width:min(280px, 90vw); margin-top:4px; padding:6px; border:1px solid var(--line); border-radius: var(--radius-md); background:var(--surface); box-shadow:var(--shadow-md); }
.create-form label, .inline-comment-form { position:relative; }
.mention-suggestions button { display:grid; gap: var(--space-1); padding:7px 9px; border:0; border-radius: var(--radius-xs); background:transparent; color:inherit; text-align:left; cursor:pointer; }
.mention-suggestions button.active, .mention-suggestions button:hover, .mention-suggestions button:focus-visible { background:var(--surface-2); }
.mention-suggestions small { color:var(--text-muted); }
.profile-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.profile-stats > button, .profile-stats > span { display:grid; gap: var(--space-2); padding:var(--space-7) var(--space-5); border:1px solid var(--line); border-radius: var(--radius-xl); background:var(--surface); color:inherit; cursor:pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.profile-stats > button:hover, .profile-stats > button:focus-visible { border-color: var(--accent-veil); transform: translateY(-2px); }
.profile-stats strong, .profile-stats small { text-align:center; }
.profile-list { display:grid; gap: var(--space-4); }
.profile-list-row { display:flex; align-items:center; gap: var(--space-5); padding:10px 12px; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--surface); }
.profile-list-row .user-chip { flex:1; min-width:0; }
.profile-list-row .small-follow { flex:0 0 auto; }
.share-dialog { width:min(440px, calc(100vw - 28px)); max-height:min(720px, calc(100vh - 40px)); overflow:auto; padding:24px; border:1px solid var(--line); border-radius: var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-xl); }
.modal-backdrop { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:20px; background:var(--scene-veil); }
.share-dialog h2 { margin:0 0 18px; }
.share-actions { display:flex; gap: var(--space-4); flex-wrap:wrap; margin-bottom:14px; }
.share-search input { width:100%; margin-bottom:10px; }
.share-recipient-list { display:grid; gap: var(--space-4); }
.share-recipient { display:flex; align-items:center; gap: var(--space-5); width:100%; padding:9px; border:1px solid var(--line); border-radius: var(--radius-md); background:var(--surface-2); color:inherit; text-align:left; cursor:pointer; }
.share-recipient:hover, .share-recipient:focus-visible { border-color: var(--accent-text); }
.share-recipient > span { display:grid; min-width:0; flex:1; }
.share-recipient small { color:var(--text-muted); }
.share-recipient b { color: var(--accent-text); font-size: var(--fs-xs); }
.circle-dialog { width:min(460px, calc(100vw - 28px)); max-height:min(720px, calc(100vh - 40px)); overflow:auto; padding:24px; border:1px solid var(--line); border-radius: var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-xl); }
.circle-dialog h2 { margin:0 0 8px; }
.circle-dialog form { display:grid; gap: var(--space-7); margin-top:18px; }
.circle-dialog label { display:grid; gap: var(--space-4); color:var(--text-muted); font-size: var(--fs-sm); }
.circle-dialog input, .circle-dialog textarea { width:100%; }
.circle-invite-results { display:grid; gap: var(--space-4); max-height:260px; overflow:auto; }
.circle-invite-result { display:flex; align-items:center; gap: var(--space-5); width:100%; padding:9px; border:1px solid var(--line); border-radius: var(--radius-md); background:var(--surface-2); color:inherit; text-align:left; }
.circle-invite-result:not(:disabled) { cursor:pointer; }
.circle-invite-result:not(:disabled):hover, .circle-invite-result[aria-selected="true"] { border-color: var(--accent-text); }
.circle-invite-result:disabled { cursor:not-allowed; opacity:.58; }
.circle-invite-result > span { display:grid; min-width:0; flex:1; }
.circle-invite-result small { color:var(--text-muted); }
.circle-invite-result b { color: var(--accent-text); font-size: var(--fs-xs); }
.circle-dialog-status { min-height:18px; margin:0; color:var(--text-muted); font-size: var(--fs-sm); }
.circle-dialog-status[data-state="error"] { color:var(--danger); }
.circle-dialog-status[data-state="success"] { color: var(--accent-text); }
.circle-dialog-actions { display:flex; justify-content:flex-end; gap: var(--space-4); }
.message-post-share { display:grid; gap: var(--space-2); width:100%; padding:9px; border:1px solid currentColor; border-radius: var(--radius-md); background:transparent; color:inherit; text-align:left; cursor:pointer; }
.message-post-share p { font-size: var(--fs-sm); }
.message-post-share span { font-size: var(--fs-xs); opacity:.72; }
.message-post-unavailable { padding:8px; border:1px dashed currentColor; border-radius: var(--radius-sm); font-size: var(--fs-sm); opacity:.75; }
.rail-circles { display:flex; align-items:center; gap: var(--space-5); margin-top:auto; border:0; background:none; color:var(--text-muted); cursor:pointer; }
.circles-page, .circle-page { max-width:760px; margin:0 auto; }
.circle-list, .circle-member-list, .circle-feed, .circle-invites { display:grid; gap: var(--space-4); }
.circle-card, .circle-invite, .circle-member, .circle-share-button { display:flex; align-items:center; gap: var(--space-6); width:100%; padding:12px; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--surface); color:inherit; text-align:left; }
.circle-card, .circle-member, .circle-share-button { cursor:pointer; }
.circle-card:hover, .circle-card:focus-visible, .circle-member:hover, .circle-member:focus-visible, .circle-share-button:hover, .circle-share-button:focus-visible { border-color: var(--accent-text); }
.circle-card > span:nth-child(2), .circle-member > span { display:grid; gap: var(--space-2); min-width:0; flex:1; }
.circle-card small, .circle-invite small, .circle-member small { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.circle-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--accent-line); border-radius:50%; color: var(--accent-text); }
.circle-invites { margin:0 0 18px; padding:14px; border:1px solid var(--accent-edge); border-radius: var(--radius-lg); background:var(--surface-2); }
.circle-invite { flex-wrap:wrap; }
.circle-invite > span { display:grid; gap: var(--space-1); flex:1; min-width:140px; }
.circle-share-row { padding:10px; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--surface); }
.circle-share-post { display:grid; gap: var(--space-3); padding:10px; border-radius: var(--radius-md); background:var(--surface-2); }
.circle-share-post p { margin:0; overflow-wrap:anywhere; }
.circle-share-picker { display:grid; gap: var(--space-4); margin-top:18px; }
.circle-share-button { justify-content:space-between; }
.circle-share-button span { color: var(--accent-text); font-size: var(--fs-xs); }

/* v0.6.2 message interaction primitives */
.secondary-header { display:flex; align-items:center; gap: var(--space-7); min-height:76px; margin-bottom:25px; }
.secondary-header-copy { flex:1; min-width:0; }
.secondary-header-copy h2 { overflow-wrap:break-word; }
.secondary-back { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:1px solid var(--line); border-radius: var(--radius-md); background:var(--surface); color:var(--text-muted); }
.secondary-back:hover, .secondary-back:focus-visible { border-color: var(--accent-text); color:var(--text); }
.secondary-header > .secondary { flex:0 0 auto; display:inline-flex; align-items:center; gap: var(--space-4); }
.secondary-header > .secondary svg, .stacked-actions .secondary svg, .circle-share-cta .primary svg { width:16px; height:16px; }
.avatar { border-radius:50%; }
.avatar.xs { flex-basis:26px; width:26px; min-width:26px; height:26px; min-height:26px; border-radius:50%; font-size: var(--fs-micro); }
.avatar.sm { border-radius:50%; }
.avatar.md { border-radius:50%; }
.avatar.lg { flex-basis:72px; width:72px; min-width:72px; height:72px; min-height:72px; border-radius:50%; font-size: var(--fs-xl); }
.avatar.xl { border-radius:50%; }
.user-list { display:grid; gap: var(--space-2); max-width:620px; }
.user-row { display:flex; align-items:center; gap: var(--space-6); min-height:66px; padding:9px 0; border-bottom:1px solid var(--line); }
.user-row-main { display:flex; align-items:center; gap: var(--space-6); flex:1; min-width:0; padding:0; background:none; text-align:left; }
.user-row-main > span { display:grid; gap: var(--space-2); min-width:0; }
.user-row-main strong, .user-row-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-row-main small { color:var(--text-muted); font-size: var(--fs-xs); }
.member-badge { padding:5px 8px; border:1px solid var(--accent-edge); border-radius: var(--radius-pill); color: var(--accent-text); font-size: var(--fs-micro); white-space:nowrap; }
.list-search { display:block; max-width:620px; margin:-7px 0 14px; }
.list-search input { width:100%; }
.info-panel, .dm-profile-card { max-width:620px; padding:20px; border:1px solid var(--line); border-radius: var(--radius-xl); background:var(--surface); }
.info-panel > p:not(.eyebrow) { color:var(--text-muted); line-height:1.55; }
.info-panel dl { display:grid; gap:0; margin:20px 0 0; }
.info-panel dl div { display:flex; justify-content:space-between; gap: var(--space-9); padding:12px 0; border-top:1px solid var(--line); }
.info-panel dt { color:var(--text-muted); font-size: var(--fs-sm); }
.info-panel dd { margin:0; font-size: var(--fs-sm); font-weight:700; }
.stacked-actions { display:grid; gap: var(--space-4); max-width:620px; margin-top:16px; }
.stacked-actions .secondary { display:flex; align-items:center; justify-content:center; gap: var(--space-4); min-height:44px; }
.circle-hero { margin:-3px 0 27px; }
.circle-members-summary { display:flex; align-items:center; gap: var(--space-6); width:100%; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:none; text-align:left; }
.circle-members-summary > span:nth-child(2) { display:grid; gap: var(--space-2); flex:1; }
.circle-members-summary small { color:var(--text-muted); font-size: var(--fs-xs); }
.circle-members-summary i { color: var(--accent-text); font-size: var(--fs-xl); font-style:normal; }
/* La pila mide lo que ocupan sus avatares: reservar 76px dejaba un hueco
   vacío cuando solo hay uno o dos. */
.avatar-stack { display:flex; flex: 0 0 auto; align-items:center; padding-left:4px; }
.avatar-stack .avatar { margin-left:-7px; border:2px solid var(--bg); }
.avatar-stack .avatar:first-child { margin-left:0; }
.avatar-stack b { display:grid; place-items:center; width:26px; height:26px; margin-left:-7px; border:2px solid var(--bg); border-radius:50%; background:var(--surface-3); color:var(--text); font-size: var(--fs-micro); }
.circle-share-cta { display:flex; align-items:center; justify-content:space-between; gap: var(--space-9); margin-top:24px; padding:16px; border:1px solid var(--accent-veil); border-radius: var(--radius-lg); background:linear-gradient(120deg,var(--accent-ghost),transparent); }
.circle-share-cta .eyebrow { margin-bottom:6px; }
.circle-share-cta .muted { margin:0; font-size: var(--fs-sm); line-height:1.4; }
.circle-share-cta .primary { display:inline-flex; align-items:center; gap: var(--space-4); flex:0 0 auto; }
.text-danger-action { margin-top:24px; padding:10px 0; background:none; color:var(--danger); font-size: var(--fs-sm); }
.circle-share-post { display:grid; gap: var(--space-3); width:100%; padding:14px; border:0; background:var(--surface-2); color:inherit; text-align:left; }
.circle-share-post span { color: var(--accent-text); font-size: var(--fs-xs); }
.circle-share-option { display:flex; align-items:center; gap: var(--space-6); width:100%; padding:12px; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--surface-2); color:inherit; text-align:left; }
.circle-share-option:hover, .circle-share-option:focus-visible { border-color: var(--accent-text); }
.circle-share-option > b { color: var(--accent-text); font-size: var(--fs-xs); }
.circle-share-preview { display:grid; gap: var(--space-2); flex:1; min-width:0; }
.circle-share-preview span { overflow:hidden; color:var(--text-muted); font-size: var(--fs-xs); text-overflow:ellipsis; white-space:nowrap; }
.message-thread-header { display:flex; align-items:center; gap: var(--space-6); min-height:76px; margin-bottom:13px; }
.message-thread-header > div { flex:1; min-width:0; }
.message-thread-header h2 { font-size:clamp(22px,4vw,32px); }
.dm-profile-card { display:grid; justify-items:center; text-align:center; }
.dm-profile-card h3 { margin:14px 0 5px; font-size: var(--fs-xl); }
.dm-profile-card p { margin-bottom:16px; }
.dm-profile-card .secondary { display:inline-flex; align-items:center; gap: var(--space-4); }
.rail-item:nth-of-type(3) { margin-top:8px; }
@media (max-width: 520px) {
  /* Volver y título ocupan la primera fila; las acciones bajan a una segunda
     fila a partes iguales. Antes compartían fila y, con dos botones, el título
     se quedaba en ~57px y se partía letra a letra. */
  .secondary-header { flex-wrap: wrap; align-items: center; gap: var(--space-5); row-gap: var(--space-6); }
  .secondary-header-copy { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .secondary-header > .primary, .secondary-header > .secondary { flex: 1 1 0; justify-content: center; min-height: var(--tap-min); padding: 0 var(--space-5); }
  .secondary-header-copy h2 { font-size: var(--fs-3xl); }
  .circle-share-cta { display:grid; gap: var(--space-6); }
  .circle-share-cta .primary { width:100%; justify-content:center; }
  .message-thread-header { gap: var(--space-5); }
  .message-thread-header .secondary-back { flex-basis: var(--tap-min); width: var(--tap-min); height: var(--tap-min); }
}

/* === COSMÉTICOS (v0.10) ==================================================
   Un cosmético equipado nunca trae CSS de la base de datos (ver
   src/economy/cosmetic-tokens.mjs): solo puede resolver a una de estas
   clases, ya definidas aquí. Cambian el borde/resplandor decorativo del
   perfil, nunca el color del texto — así el contraste del propio design
   system nunca depende de qué cosmético lleve puesto cada usuario.
   Catálogo inicial completo en docs/COSMETICS.md; solo unos pocos tokens
   tienen tratamiento visual propio todavía, el resto llega con el contenido
   de v0.10.3.
   ====================================================================== */
.profile-hero.profile-accent-aurora { border-color: color-mix(in srgb, #7C5CFF 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, #7C5CFF 18%, transparent) inset; }
.profile-hero.profile-accent-midnight { border-color: color-mix(in srgb, #3B5BFF 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, #3B5BFF 18%, transparent) inset; }
.profile-hero.profile-accent-solar { border-color: color-mix(in srgb, #FFB74A 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, #FFB74A 18%, transparent) inset; }
.profile-orbit-frame.avatar-frame-aurora::after,
.profile-orbit-frame.avatar-frame-midnight::after,
.profile-orbit-frame.avatar-frame-solar::after {
  content: ""; position: absolute; inset: -3px; border-radius: var(--radius-circle); border: 2px solid transparent; pointer-events: none;
}
.profile-orbit-frame.avatar-frame-aurora::after { border-color: color-mix(in srgb, #7C5CFF 60%, transparent); }
.profile-orbit-frame.avatar-frame-midnight::after { border-color: color-mix(in srgb, #3B5BFF 60%, transparent); }
.profile-orbit-frame.avatar-frame-solar::after { border-color: color-mix(in srgb, #FFB74A 60%, transparent); }

/* === PERSONALIZACIÓN DE PERFIL (v0.10.1) =================================
   Extiende el mecanismo de tokens de arriba a los 7 slots públicos de
   perfil. Mismo invariante: solo borde/resplandor/superficie decorativa,
   nunca `color` de texto (§20), y los efectos respetan
   prefers-reduced-motion (§21). Ver src/economy/cosmetic-tokens.mjs.
   ====================================================================== */
.profile-hero.profile-accent-orbital { border-color: color-mix(in srgb, var(--accent-line) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-line) 18%, transparent) inset; }
.profile-hero.profile-accent-lime-pulse { border-color: color-mix(in srgb, var(--lime-400) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime-400) 22%, transparent) inset; }
.profile-orbit-frame.avatar-frame-orbital::after, .profile-orbit-frame.avatar-frame-signal::after { content: ""; position: absolute; inset: -3px; border-radius: var(--radius-circle); border: 2px solid transparent; pointer-events: none; }
.profile-orbit-frame.avatar-frame-orbital::after { border-color: color-mix(in srgb, var(--accent-line) 60%, transparent); }
.profile-orbit-frame.avatar-frame-signal::after { border-color: color-mix(in srgb, #FFB74A 60%, transparent); }

/* Banner (§18): una franja decorativa detrás de la cabecera del perfil, nunca
   texto libre ni una URL arbitraria — solo un gradiente resuelto por token. */
.profile-banner { position: absolute; inset: 0 0 auto 0; height: 104px; z-index: 0; pointer-events: none; }
.profile-banner-neon-orbit { background: linear-gradient(135deg, color-mix(in srgb, var(--lime-400) 24%, transparent), color-mix(in srgb, var(--cool-400) 18%, transparent) 60%, transparent); }
.profile-banner-pulse { background: linear-gradient(135deg, color-mix(in srgb, #3B5BFF 22%, transparent), color-mix(in srgb, #7C5CFF 16%, transparent) 65%, transparent); }

/* Background (§19): solo la superficie de la página de perfil, nunca la app
   entera; mantiene contraste y jerarquía sobre el mismo --bg base. */
.profile-page.profile-background-void { background: color-mix(in srgb, var(--ink-900) 55%, var(--bg)); }
.profile-page.profile-background-eclipse { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, #3B5BFF 6%, transparent), transparent 60%) var(--bg); }
.profile-page.profile-background-lunar { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--cool-400) 7%, transparent), transparent 60%) var(--bg); }

/* Badge (§22): un punto decorativo junto al nombre — nunca la misma forma
   que la verificación/moderación, para no hacerse pasar por una insignia oficial. */
.profile-cosmetic-badge { display: inline-block; width: 9px; height: 9px; margin-left: var(--space-3); border-radius: 50%; vertical-align: middle; background: var(--accent-line); }
.profile-cosmetic-badge.profile-badge-pulse { background: #3B5BFF; box-shadow: 0 0 8px color-mix(in srgb, #3B5BFF 60%, transparent); }
.profile-cosmetic-badge.profile-badge-signal { background: #FFB74A; box-shadow: 0 0 8px color-mix(in srgb, #FFB74A 60%, transparent); }

/* Title (§23): texto predefinido del catálogo, nunca libre. */
.profile-cosmetic-title { margin: 2px 0 0; color: var(--accent-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }

/* Effect (§21): movimiento muy sutil, nunca mueve el layout, respeta
   prefers-reduced-motion y no compite con la interacción. */
.profile-hero.profile-effect-pulse { animation: loop-cosmetic-pulse 2.8s var(--ease-in-out) infinite; }
@keyframes loop-cosmetic-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-line) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-line) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .profile-hero.profile-effect-pulse { animation: none; } }

/* Showcase (§25): compacto, de solo lectura salvo en el propio perfil. */
.profile-showcase { margin: 0 0 var(--space-9); }
.profile-showcase .section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.showcase-edit { padding: var(--space-3) var(--space-6); }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.showcase-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); min-height: 84px; }
.showcase-card.empty { border-style: dashed; background: transparent; }
.showcase-card-rarity { color: var(--text-subtle); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.showcase-card strong { font-size: var(--fs-sm); }
.showcase-card small { color: var(--text-muted); font-size: var(--fs-xs); }

/* === Personalizar perfil / Editar showcase — hojas modales ============= */
.customize-profile-backdrop .customize-profile-sheet { width: min(560px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 40px)); display: flex; flex-direction: column; gap: var(--space-7); overflow: auto; padding: var(--space-9); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xl); }
.customize-profile-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.customize-profile-header h2 { margin: 0; font-size: var(--fs-lg); }
.customize-profile-header .viewer-close { position: static; width: 36px; height: 36px; font-size: var(--fs-xl); background: var(--surface-3); }
.customize-profile-preview { display: grid; place-items: center; padding: var(--space-8) 0; }
.profile-hero.mini { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; max-width: 280px; padding: var(--space-9); text-align: center; }
.profile-hero.mini .profile-copy { max-width: none; }
.customize-profile-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.customize-profile-tabs button { padding: var(--space-3) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer; }
.customize-profile-tabs button.active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-semibold); }
.customize-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-5); }
.customize-item-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); text-align: left; cursor: pointer; font: inherit; color: inherit; }
div.customize-item-card { cursor: default; opacity: .72; }
.customize-item-card.selected { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.customize-item-card strong { font-size: var(--fs-sm); }
.customize-item-card small { color: var(--text-subtle); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.customize-item-card em { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); }
.customize-item-swatch { width: 100%; height: 40px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line); }
.customize-item-swatch.token-orbital, .customize-item-swatch.token-signal { background: color-mix(in srgb, var(--accent-line) 30%, var(--surface-3)); }
.customize-item-swatch.token-lime-pulse { background: color-mix(in srgb, var(--lime-400) 35%, var(--surface-3)); }
.customize-item-swatch.token-midnight, .customize-item-swatch.token-pulse { background: color-mix(in srgb, #3B5BFF 30%, var(--surface-3)); }
.customize-item-swatch.token-aurora { background: color-mix(in srgb, #7C5CFF 30%, var(--surface-3)); }
.customize-item-swatch.token-solar { background: color-mix(in srgb, #FFB74A 30%, var(--surface-3)); }
.customize-item-swatch.token-eclipse, .customize-item-swatch.token-lunar, .customize-item-swatch.token-void { background: color-mix(in srgb, var(--cool-400) 24%, var(--surface-3)); }
.customize-item-swatch.token-neon-orbit, .customize-item-swatch.token-chromatic { background: linear-gradient(135deg, color-mix(in srgb, var(--lime-400) 30%, var(--surface-3)), color-mix(in srgb, var(--cool-400) 24%, var(--surface-3))); }
.customize-item-claim { align-self: stretch; padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center; cursor: pointer; }
.customize-item-locked { color: var(--text-subtle); font-size: var(--fs-xs); }
.showcase-editor-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.showcase-slot-editor { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.showcase-slot-index { color: var(--text-subtle); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.showcase-slot-empty { color: var(--text-subtle); font-size: var(--fs-xs); }
.showcase-slot-filled strong { display: block; font-size: var(--fs-sm); }
.showcase-slot-filled small { color: var(--text-muted); font-size: var(--fs-xs); }
.showcase-slot-controls { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.showcase-slot-controls button { padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text); cursor: pointer; }
.showcase-slot-controls button:disabled { opacity: .4; cursor: default; }
.showcase-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-5); }
.showcase-pick-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.showcase-pick-card.in-showcase { border-color: var(--accent-line); background: var(--accent-soft); }
.showcase-pick-card strong { font-size: var(--fs-sm); }
.showcase-pick-card small { color: var(--text-subtle); font-size: var(--fs-xs); }
.showcase-pick-card em { font-style: normal; color: var(--accent-text); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .customize-profile-backdrop .customize-profile-sheet { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .customize-profile-grid, .showcase-editor-slots, .showcase-picker-grid, .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}