/* ─────────────────────────────────────────────────────────────
   Serclai — Design System
   Paleta: Deep Intelligence (azul marino profundo + crema, beige acento)
   Sofisticada, sobria, B2B premium. Sensación intelectual y calma
   analítica — perfecta para una plataforma de líderes conscientes
   con peso técnico. El azul marino aporta autoridad; el beige
   cálido (accent) equilibra para no caer en lo frío corporativo.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paleta canónica Deep Intelligence — 5 hex inalterados.
     Estos son los únicos colores "primitivos" que se usan en la
     paleta; todo lo demás son derivados (con alpha o tonos cercanos
     calculados para bordes/hovers).
       #F5F1EB  crema cálida   — fondos y texto en dark
       #D7C8B6  beige cálido   — accent y primary en dark
       #44556B  azul gris medio— texto suave / accent / líneas en dark
       #1F2A38  azul marino    — primary y FONDO (--bg) en dark
       #2B2B2B  casi negro     — tarjetas (--surface) en dark
  */

  /* Color — Fondos */
  --bg: #F5F1EB;          /* crema cálida, base de toda la app */
  --bg-rgb: 245, 241, 235; /* --bg sin envolver: velos de barras translúcidas que siguen al tema */
  --surface: #F5F1EB;     /* cards y modales — crema de paleta (sin blanco puro; look plano, se separan por sombra/borde) */
  --surface-2: #EBE5DA;   /* sidebar, secciones — derivado natural
                             entre bg y accent (no introduce hue nuevo). */

  /* Color — Tinta */
  --ink: #1F2A38;         /* azul marino casi negro */
  --ink-hover: #2D2C2A;   /* hover de superficies con bg --ink — derivado
                             cálido cercano; en dark se invierte a un tono
                             más claro que el crema (--ink) para que el par
                             ink/surface siga siendo legible al pasar el ratón */
  --ink-soft: #44556B;    /* azul gris medio (texto cuerpo) */
  --ink-mute: #8A93A1;    /* gris azulado claro (captions) — derivado claro de #44556B */
  --line: #E2DBCD;        /* bordes sutiles — derivado claro de #D7C8B6 */
  --line-strong: #C9BFAD; /* inputs activos — derivado medio de #D7C8B6 */

  /* Color — Primario (azul marino profundo) */
  --primary: #1F2A38;       /* CTA principal */
  --primary-text: #F5F1EB;  /* texto/icono SOBRE --primary (crema sobre navy) */
  --primary-bg: #DDE3EB;    /* hover/bg de chips — derivado claro de #1F2A38 */
  --primary-hover: #0F1A28; /* hover muy oscuro — derivado oscuro de #1F2A38 */
  /* RGB sin envolver para usar en rgba() — color-mix() aún no es
     soportado consistentemente en todos los navegadores. */
  --primary-rgb: 31, 42, 56;
  --surface-rgb: 245, 241, 235; /* --surface sin envolver, para velos/bordes
                                   rgba() sobre bg --ink que deben invertirse
                                   con el tema (p.ej. panel .chat-frame) */

  /* P-080 (J): los aliases --coral/--coral-bg/--coral-rgb se retiraron — se
     llamaban "coral" pero contenían el AZUL de marca (reliquia del rebrand) y
     despistaban (P-090). Todos los usos son ahora var(--primary*) directos.
     --coral-soft se queda: es un color PROPIO, no un alias. */
  --coral-soft: #44556B;

  /* Estados — coherentes pero externos a la paleta canónica. */
  --success: #2C5F4E;       /* verde profundo */
  --success-soft: #6E8C82;
  --warning: #B08344;       /* ámbar tostado, dialoga con #D7C8B6 */
  --warning-bg: #F0E5D5;
  --danger: #8B3D3D;        /* rojo seco */
  --danger-bg: #F0DCDC;
  --danger-soft: #C9908F;

  /* Acento secundario — beige cálido #D7C8B6. Equilibra el azul
     frío del primario aportando calidez puntual. Para badges,
     dividers, highlights muy específicos. No usar como CTA. */
  --accent: #D7C8B6;
  --accent-bg: #ECE4D6;     /* derivado claro de #D7C8B6 */
  --accent-strong: #B68A5A; /* derivado saturado para "VIP / Premium" */

  --shadow-sm: 0 1px 2px rgba(31, 42, 56, 0.05);
  --shadow-md: 0 4px 12px rgba(31, 42, 56, 0.07);
  --shadow-lg: 0 20px 40px rgba(31, 42, 56, 0.10);

  /* Typography
     - --display: Sora (sans-serif geométrica) para titulares,
       hero copy, números grandes, números de saldo. Le da un toque
       moderno-tech a la app sin caer en lo corporativo frío.
     - --sans: Inter para todo el cuerpo, UI labels, botones.
       Es la workhorse: legible a cualquier tamaño.
     - --serif: ALIAS retrocompatible — la clase .serif y todos los
       usos de var(--serif) en HTMLs ahora se renderizan en Sora.
       Si en el futuro quieres volver a una serif clásica, basta
       cambiar este valor (todo lo demás funciona sin cambios). */
  --display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla";
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla";
  --serif: var(--display);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE — auto cuando el SO está en modo oscuro
   Invertimos los ROLES manteniendo los mismos 5 hex de Deep
   Intelligence. La regla mental:
     light: bg claro + ink oscuro
     dark:  bg oscuro + ink claro
   Lo que era "el fondo crema" pasa a ser "el texto crema", y
   lo que era "el azul marino del primary" pasa a ser "el bg".
   El primary (CTA) se mueve al beige cálido para destacar sobre
   el bg azul oscuro.
   ───────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────
   DARK MODE — dos activadores posibles:
   1. prefers-color-scheme: dark del SO (modo "Sistema" por defecto)
   2. html.theme-dark (cuando el usuario lo fuerza desde Configuración)
   Si el usuario fuerza light con html.theme-light, las reglas del
   @media NO aplican (el selector `:root:not(.theme-light)` lo evita).
   ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    /* Fondos invertidos */
    /* [Decisión Jordi 24/09] La WEB en oscuro vuelve al navy de siempre: fondo
       #1F2A38 (Azul Profundo), tarjeta #2B2B2B y líneas #44556B, para que tarjetas
       y bordes se separen del fondo. Las APPS (iOS/Android) sí usan #44556B de fondo;
       la web NO iguala ese fondo (se probó y Jordi prefiere el navy aquí). */
    --bg: #1F2A38;
    --bg-rgb: 31, 42, 56;
    --surface: #2B2B2B;
    --surface-2: #15202C;
    --surface-rgb: 43, 43, 43;
    --ink: #F5F1EB;
    --ink-hover: #FFFFFF;
    --ink-soft: #D7C8B6;
    --ink-mute: #8A93A1;
    --line: #44556B;
    --line-strong: #6B7A92;
    --primary: #D7C8B6;
    --primary-text: #1F2A38;
    --primary-bg: #3A4B5F;
    --primary-hover: #E8DDC9;
    --primary-rgb: 215, 200, 182;
    --coral-soft: #D7C8B6;
    --success: #6E9C82;
    --success-soft: #4E7A66;
    --warning: #D4A05E;
    --warning-bg: #3F3525;
    --danger: #C56862;
    --danger-bg: #3F2828;
    --danger-soft: #8B3D3D;
    --accent: #44556B;
    --accent-bg: #2D3B4A;
    --accent-strong: #D7C8B6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);
  }
}
/* Override manual del usuario: forzar dark aunque el SO esté en light. */
html.theme-dark {
  /* [Decisión Jordi 24/09] Ver el bloque @media de arriba: la web vuelve al navy
     #1F2A38 de fondo (las apps sí usan #44556B, la web no lo iguala). */
  --bg: #1F2A38;
  --bg-rgb: 31, 42, 56;
  --surface: #2B2B2B;
  --surface-2: #15202C;
  --surface-rgb: 43, 43, 43;
  --ink: #F5F1EB;
  --ink-hover: #FFFFFF;
  --ink-soft: #D7C8B6;
  --ink-mute: #8A93A1;
  --line: #44556B;
  --line-strong: #6B7A92;
  --primary: #D7C8B6;
  --primary-text: #1F2A38;
  --primary-bg: #3A4B5F;
  --primary-hover: #E8DDC9;
  --primary-rgb: 215, 200, 182;
  --coral-soft: #D7C8B6;
  --success: #6E9C82;
  --success-soft: #4E7A66;
  --warning: #D4A05E;
  --warning-bg: #3F3525;
  --danger: #C56862;
  --danger-bg: #3F2828;
  --danger-soft: #8B3D3D;
  --accent: #44556B;
  --accent-bg: #2D3B4A;
  --accent-strong: #D7C8B6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* Overrides de selectores dark — duplicamos para ambos activadores
   (prefers-color-scheme + html.theme-dark) usando :is() y otra regla
   gemela. Es verboso pero claro. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .feed-filter.on, :root:not(.theme-light) .feed-filter.on:hover,
  :root:not(.theme-light) .btn-mini.coral, :root:not(.theme-light) .btn-mini.coral:hover,
  :root:not(.theme-light) .msg-pill.contacto,
  :root:not(.theme-light) .msg-tab.active .msg-count { color: var(--primary-text) !important; }
  :root:not(.theme-light) .nav,
  :root:not(.theme-light) .feed-search-sticky,
  :root:not(.theme-light) .feed-filters,
  :root:not(.theme-light) .tipo-pills { background: rgba(var(--bg-rgb), 0.85) !important; }
  :root:not(.theme-light) .nav.scrolled,
  :root:not(.theme-light) .feed-search-sticky.scrolled { background: rgba(var(--bg-rgb), 0.92) !important; }
  :root:not(.theme-light) img { filter: brightness(0.92); }
  :root:not(.theme-light) .hub-card-avatar img, :root:not(.theme-light) .modal-card img, :root:not(.theme-light) .avatar img,
  :root:not(.theme-light) .feed-thumb img, :root:not(.theme-light) .prod-card-thumb img, :root:not(.theme-light) .ig-cell img { filter: none; }
  :root:not(.theme-light) input, :root:not(.theme-light) textarea, :root:not(.theme-light) select {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }
  :root:not(.theme-light) input::placeholder, :root:not(.theme-light) textarea::placeholder {
    color: var(--ink-mute) !important;
    opacity: 1;
  }
}
html.theme-dark .feed-filter.on, html.theme-dark .feed-filter.on:hover,
html.theme-dark .btn-mini.coral, html.theme-dark .btn-mini.coral:hover,
html.theme-dark .msg-pill.contacto,
html.theme-dark .msg-tab.active .msg-count { color: var(--primary-text) !important; }
html.theme-dark .nav,
html.theme-dark .feed-search-sticky,
html.theme-dark .feed-filters,
html.theme-dark .tipo-pills { background: rgba(var(--bg-rgb), 0.85) !important; }
html.theme-dark .nav.scrolled,
html.theme-dark .feed-search-sticky.scrolled { background: rgba(var(--bg-rgb), 0.92) !important; }
html.theme-dark img { filter: brightness(0.92); }
html.theme-dark .hub-card-avatar img, html.theme-dark .modal-card img, html.theme-dark .avatar img,
html.theme-dark .feed-thumb img, html.theme-dark .prod-card-thumb img, html.theme-dark .ig-cell img { filter: none; }
html.theme-dark input, html.theme-dark textarea, html.theme-dark select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.theme-dark input::placeholder, html.theme-dark textarea::placeholder {
  color: var(--ink-mute) !important;
  opacity: 1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Evita scroll horizontal en móvil. Usamos `clip` (con `hidden` de
     fallback para navegadores antiguos): `hidden` fuerza `overflow-y`
     de `visible` a `auto`, convirtiendo html/body en contenedores de
     scroll; en iOS Safari eso rompe `position: fixed`/`sticky` (el banner
     demo y los navbars dejan de anclarse al viewport y se escapan al
     hacer scroll, dejando un hueco). `clip` recorta igual sin crear
     contenedor de scroll, así que el viewport sigue siendo el scroller. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Emoji a prueba de Windows: fuente de emoji propia (Twemoji COLR, ~465 KB)
   como ÚLTIMO fallback del stack. Solo se descarga en sistemas cuyo set de
   emoji nativo NO tiene un glifo (p.ej. Windows 10/11 sin actualizar, donde
   los emoji nuevos como el corazón anatómico salían como cuadraditos □). En
   Mac y Windows al día el emoji nativo gana y esta fuente nunca se descarga. */
@font-face {
  font-family: "Twemoji Mozilla";
  src: url("https://cdn.jsdelivr.net/npm/twemoji-colr-font@15.0.3/twemoji.woff2") format("woff2");
  font-display: swap;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Evita que elementos anchos rompan el layout en móvil. Ver nota en
     `html`: `clip` recorta sin romper position:fixed/sticky en iOS Safari. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Asegura ancho correcto en iOS Safari */
  min-height: 100%;
  min-height: -webkit-fill-available;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

input, textarea, select { font: inherit; }

/* ── Layout ─────────────────────────────────────────────────── */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-sm {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Typography ─────────────────────────────────────────────── */

/* La clase .serif sigue existiendo por compat con muchos HTMLs.
   Tras el cambio Source Serif 4 → Sora, los pesos también suben
   porque Sora a 400 se ve algo ligera para titulares: usamos 600
   por defecto para que tengan presencia. */
.serif { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
.italic { font-style: italic; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: clamp(44px, 7vw, 84px); letter-spacing: -0.03em; line-height: 1.04; font-weight: 700; }
h2 { font-size: clamp(32px, 4.5vw, 52px); }
h3 { font-size: clamp(24px, 2.6vw, 32px); }
h4 { font-size: 20px; }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 500;
  font-family: var(--sans);
}

.muted { color: var(--ink-soft); }
.subtle { color: var(--ink-mute); }

/* ── Logo ───────────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.logo-mark { color: var(--ink); display: inline-flex; }

/* Badge "App próximamente" junto a la marca Serclai del header.
   Aditivo: se renderiza tras el wordmark en los logos del header
   (.logo, .sidebar-logo, .gsidebar-logo, .ia-sidebar-brand). Usa el
   acento cálido de la paleta (pensado para badges) → funciona en claro
   y oscuro porque las vars --accent* se invierten por tema. */
.logo-soon {
  /* "App próximamente" RETIRADO: el literal ya no se usa. Lo reemplaza el botón
     "Descargar app" que inyecta pwa.js. Oculto en todas partes (browser y PWA). */
  display: none !important;
  align-items: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-bg);
  color: var(--accent-strong);
  border: 1px solid var(--accent);
  white-space: nowrap;
  text-transform: none;
  vertical-align: middle;
  flex-shrink: 0;
}

/* «App próximamente» CENTRADO en el header → logo a la izquierda, badge
   al centro, menú a la derecha. Se posiciona absoluto respecto al
   contenedor del header, así que queda centrado pase lo que pase con el
   ancho del logo o del menú. En las sidebars verticales (.sidebar-logo /
   .gsidebar-logo / .ia-sidebar-brand) el badge sigue inline junto a la
   marca: ahí no hay header horizontal con menú a la derecha.
 */

/* Escritorio: nav top .nav — centrado sólo con ancho de sobra (>=1100px).
   Más estrecho, algunas páginas (sobre, blog…) mantienen el menú completo
   a la derecha sin colapsar, así que el badge se queda inline junto al
   logo para no solaparse. */
@media (min-width: 1100px) {
  .nav .nav-inner { position: relative; }
  .nav .nav-inner .logo-soon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all var(--t-base);
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
}
.btn:hover { background: var(--ink-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-coral { background: var(--primary); color: var(--primary-text); }  /* la letra SIGUE a su fondo: --primary-text lo calcula el tema (claro: crema sobre navy; oscuro: navy sobre tostado; con paleta de líder, el que se lea) */
.btn-coral:hover { background: var(--primary-hover); }

/* Estado deshabilitado UNIFICADO de .btn (CTAs de migración aún no disponibles,
   CTAs de publicación apagados, etc.).
   [Paridad apps 24/09] Como `SerclaiButton` de iOS (Components.swift, BK-01): el
   relleno es la TINTA de la marca al 80 % y la letra va a plena fuerza. Antes se
   apagaba el botón ENTERO al 45 % (dos reglas repetidas), que dejaba la etiqueta
   casi ilegible, y el :hover lo cambiaba de color como si se pudiera pulsar.
   El fantasma (.btn-ghost, «Comprado») conserva su aspecto propio, como el
   secundario de iOS. */
.btn:disabled, .btn[disabled],
.btn.is-disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
  filter: none;
}
.btn:not(.btn-ghost):disabled, .btn:not(.btn-ghost)[disabled],
.btn:not(.btn-ghost).is-disabled, .btn:not(.btn-ghost)[aria-disabled="true"],
.btn:not(.btn-ghost):disabled:hover, .btn:not(.btn-ghost)[disabled]:hover,
.btn:not(.btn-ghost).is-disabled:hover, .btn:not(.btn-ghost)[aria-disabled="true"]:hover {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  border-color: transparent;
  color: var(--bg);
}
.btn:disabled:hover, .btn[disabled]:hover,
.btn.is-disabled:hover, .btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}
/* Los apagados por clase/aria (suelen ser <a>/<span>) no capturan clics. */
.btn.is-disabled, .btn[aria-disabled="true"] { pointer-events: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink); transform: translateY(-1px); }

.btn-link {
  background: transparent;
  color: var(--ink);
  padding: 8px 0;
}
.btn-link:hover { color: var(--primary); transform: none; box-shadow: none; }

.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-block { width: 100%; }

/* ── Nav ────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 235, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
  /* Pack M-4: dejar que el badge del chip sobresalga del nav. */
  overflow: visible;
}
.nav .container,
.nav-inner { overflow: visible; }
.nav.scrolled { border-bottom-color: var(--line); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links > a { color: var(--ink-soft); font-size: 14px; font-weight: 500; transition: color var(--t-fast); }
.nav-links > a:hover { color: var(--ink); }

/* Enlaces inyectados arriba (Home/IA/Mi espacio/Perfil) cuando hay sesión */
.nav-links > a.nav-top-link {
  position: relative;
  padding: 6px 0;
  text-decoration: none;
}
.nav-links > a.nav-top-link.active {
  color: var(--primary);
  font-weight: 600;
}
.nav-links > a.nav-top-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--surface);
}
.lang-toggle button {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  transition: all var(--t-fast);
}
.lang-toggle button.active {
  background: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
}

/* ── Cards ──────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: all var(--t-base);
}
.card:hover { border-color: var(--line-strong); }

/* ── Pills / chips ──────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}
.pill .dot {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  display: inline-block;
}
.pill .dot.success { background: var(--success); }

/* ── Form ───────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* ── Auth pages ─────────────────────────────────────────────── */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 48px 40px;
  box-shadow: var(--shadow-lg);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--ink-mute);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.btn-social {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--t-fast);
}
.btn-social:hover { background: var(--surface-2); border-color: var(--ink); transform: translateY(-1px); }

/* ── Dashboard / App layout ─────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.app-sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  padding: 0 12px 4px;
}

.app-greeting { margin-bottom: 24px; }
.app-greeting h1 { font-size: 36px; margin-bottom: 8px; }
/* Cuando estás en una sección concreta del dashboard (Contenido,
   Clientes, Wallet, etc.) el saludo "Welcome, X" no aporta nada
   y crea un hueco visual grande entre el header y el contenido
   de la sección activa. Lo ocultamos. Solo aparece cuando el
   .app-shell no está activo (vista hub vacía). */
body.view-dashboard .app-greeting { display: none; }

/* Hub de espacios: vista por defecto del tab "Mi espacio" */
/* En /app, por defecto se ve el HUB (lista de espacios); el dashboard
   solo aparece si el body tiene la clase .view-dashboard (la añade el
   JS cuando el hash es uno del sidebar: #conexiones, #contenidos, …). */
.hub-view { display: block; padding: 32px 24px 80px; max-width: 760px; margin: 0 auto; }
.app-shell { display: none; }
body.view-dashboard .hub-view { display: none; }
body.view-dashboard .app-shell { display: grid; }

/* Navegación por secciones: en modo dashboard, dentro de .app-main
   solo se ve UNA sección a la vez (la que tiene .section-active).
   El resto está oculto para no generar ruido visual. La función
   mostrarSeccionActiva() del JS marca la activa según el hash.
   Forzamos !important para sobrescribir el inline style="display:none"
   que algunas <section> tienen (anchors vacíos para deep-linking
   futuro). */
body.view-dashboard .app-main > section[id] { display: none !important; }
body.view-dashboard .app-main > section[id].section-active {
  display: block !important;
  /* En la sección activa también quitamos los separadores que cada
     <section> traía por defecto (border-top + padding/margin top),
     porque ya no hay sección "vecina" arriba de la que separar. */
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Ocultar spacers entre secciones en modo dashboard (no hay secciones apiladas) */
body.view-dashboard .app-main > .section-spacer { display: none !important; }
/* El primer hijo de cada sección activa hereda el margin-top del navegador
   (~23px en h2), que suma al padding-top del app-main y crea exceso de espacio.
   Lo anulamos para que todas las tabs arranquen igual de arriba. */
body.view-dashboard .app-main > section[id].section-active > *:first-child { margin-top: 0 !important; }

.hub-grid { display: grid; gap: 12px; }
.hub-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: all .15s;
}
.hub-card:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.hub-card-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary-bg);
  overflow: hidden;
  flex-shrink: 0;
}
.hub-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hub-card-body { flex: 1; min-width: 0; }
.hub-card-title { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.hub-card-sub { font-size: 13px; color: var(--ink-mute); }
.hub-card-chevron { color: var(--ink-mute); flex-shrink: 0; }
.hub-card-loading { padding: 32px; text-align: center; color: var(--ink-mute); }
/* Chevron `›` del hub como toggle de ACORDEÓN: pliega/despliega la lista de
   contenidos del líder. Botón sin cromo; su chevron apunta hacia abajo cuando
   está desplegado (por defecto) y a la derecha al plegarse. Rota SOLO el chevron
   dentro del toggle — el indicador de "entrar" de las tarjetas simples (Tu
   espacio / líder sin lista) usa `.hub-card-chevron` suelto y no se ve afectado. */
.hub-lider-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 6px; margin: -6px -2px -6px 0;
  cursor: pointer; color: var(--ink-mute); flex-shrink: 0; border-radius: 8px;
}
.hub-lider-toggle:hover { background: var(--surface-2); color: var(--ink); }
.hub-lider-toggle .hub-card-chevron { transition: transform .18s ease; }
.hub-card-lider:not(.is-collapsed) .hub-lider-toggle .hub-card-chevron { transform: rotate(90deg); }
.hub-card-lider.is-collapsed .hub-lider-conts { display: none; }
/* P-038: líder con lista de Contenidos + archivar en el hub */
/* Hover de la cabecera del líder: redondeada COMPLETA por defecto (tarjeta sin contenidos
   desplegados o plegada) para que no asomen esquinas en punta bajo la tarjeta redondeada. Solo
   cuando está DESPLEGADA con contenidos debajo se cuadra el borde inferior, para unirse a ellos. */
.hub-card-lider .hub-lider-head:hover { background: var(--surface-2); border-radius: var(--r-lg); }
.hub-card-lider:not(.is-collapsed):has(.hub-lider-conts) .hub-lider-head:hover { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.hub-lider-conts { border-top: 1px solid var(--line); }
.hub-cont-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.hub-cont-row:last-child { border-bottom: none; }
.hub-cont-row:hover { background: var(--surface-2); }
/* P-070 (2): miniatura del Contenido a la izquierda del título. */
.hub-cont-row-thumb {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
  overflow: hidden; background: var(--surface-2, rgba(0,0,0,.06));
}
.hub-cont-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-cont-row-body { flex: 1; min-width: 0; }
.hub-cont-row-title { font-size: 14px; font-weight: 500; color: var(--ink); }
/* P-070 (4): globito rojo con pendientes por completar, por Contenido.
   P-090: rojo REAL (el mismo degradado que .nav-chip-badge), no var(--primary),
   que desde el rebrand es un alias del azul de marca. */
.hub-cont-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: linear-gradient(180deg, #FF4C4F 0%, #E5384D 100%); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.hub-cont-arch {
  flex-shrink: 0; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2, rgba(0,0,0,.06)); color: var(--ink-mute);
  font-size: 11px; font-weight: 600; cursor: pointer;
  /* P-070 (3): siempre visible (antes solo aparecía al hover). */
  opacity: 1; transition: background .15s, color .15s;
}
.hub-cont-arch:hover { background: var(--primary); color: #fff; }
.hub-card-arch { cursor: default; }
.hub-empty { padding: 60px 24px; text-align: center; color: var(--ink-mute); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }

/* Botón "Mis espacios" del sidebar (volver al hub) */
.sidebar-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mute);
  padding: 4px 12px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  transition: all .15s;
}
.sidebar-back:hover { color: var(--ink); background: var(--surface); }

/* ── Avatar chip del nav top (link al 4º tab "Perfil") ─────────── */
.nav-chip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: all .15s;
  /* Importante: dejar que el badge sobresalga del pill sin cortarse. */
  overflow: visible;
  position: relative;
}
.nav-links { overflow: visible; }   /* el nav padre también */
.nav-chip-link:hover { background: var(--surface-2); border-color: var(--line-strong); }
.nav-chip-link.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.nav-chip-avatar,
.nav-chip-fallback {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-chip-fallback {
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px;
}
.nav-chip-link span {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pack M-4: badge rojo de chats pendientes en la esquina superior
   derecha del avatar. El wrap tiene tamaño explícito y el badge se
   posiciona con `transform translate` para clavarlo en la esquina
   sin depender del width interno del badge (que varía con el número). */
.nav-chip-avatar-wrap {
  position: relative;
  display: inline-flex;       /* inline-flex centra el avatar limpio */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  line-height: 0;
  flex-shrink: 0;
  overflow: visible;
}
.nav-chip-badge {
  position: absolute;
  /* Anclamos al corner top-right del wrap y desplazamos por transform.
     Eso garantiza el centro del badge sobre la esquina (cualquier nº). */
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FF4C4F 0%, #E5384D 100%);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  box-shadow:
    0 0 0 2px var(--bg),
    0 2px 6px rgba(229, 56, 77, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  font-family: var(--sans);
  z-index: 9999;
  box-sizing: border-box;
  white-space: nowrap;
  clip-path: none !important;
  mask: none !important;
  animation: nav-badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}
/* IMPORTANTE: cada keyframe MANTIENE el translate(40%, -40%) que
   posiciona el badge en la esquina superior derecha del wrap.
   Sin esto, el navegador sobreescribe el transform base al final
   de la animación y el badge se desplaza al corner exacto (0,0),
   quedando mal posicionado tras el primer render. */
@keyframes nav-badge-pop {
  0%   { transform: translate(40%, -40%) scale(0);    opacity: 0; }
  60%  { transform: translate(40%, -40%) scale(1.15); opacity: 1; }
  100% { transform: translate(40%, -40%) scale(1);    opacity: 1; }
}
/* En las tabs móviles del bottom-nav (Pack G) — bnav-avatar también
   puede llevar el mismo badge si extendemos. Por ahora solo nav top. */

/* Pack L-1: notificaciones in-app. Tarjeta de aviso con estado leída/
   no-leída (punto rojo + fondo crema suave). Mantiene el estilo
   publish-card pero con un ribete a la izquierda para escaneabilidad. */
.notif-card {
  border-left: 3px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.notif-card:hover {
  border-left-color: var(--primary);
}
.notif-card-unread {
  background: var(--primary-bg);
  border-left-color: var(--primary);
}
.notif-card-unread:hover {
  background: var(--primary-bg);
}
.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5aab7a;
  flex-shrink: 0;
}

/* Pack L-5: cuerpo del aviso. Colapsado a 3 líneas si es largo;
   al hacer click sobre la card se expande. */
.notif-cuerpo-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.notif-cuerpo-clamped::after {
  content: "Click para ver más ↓";
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--primary);
  font-weight: 500;
}
.notif-cuerpo a {
  color: var(--primary);
  text-decoration: underline;
  word-break: break-all;
}
.notif-cuerpo a:hover {
  opacity: 0.8;
}
.notif-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Pack M-2: preview gating para visitantes anónimos ──────────
   Vídeo/audio limitados a 15s, imagen con blur, texto recortado a
   N frases con fade. Overlay con CTA "Crear cuenta" sobre el media.
   Aplicado mediante clase `.is-gated` en el wrap del media y
   `.is-gated-img` en imágenes (img/cover de audio).
   ──────────────────────────────────────────────────────────── */
.modal-media-wrap,
.pub-media-wrap {
  position: relative;
}
.is-gated-img {
  filter: blur(22px);
  transform: scale(1.06);  /* evita ver el borde del blur */
}
.preview-gate-overlay {
  position: absolute;
  inset: 0;                  /* cubre toda la zona del media o bloque texto */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.92) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 4;
  padding: 24px;
  animation: pg-fade-in .25s ease-out;
}
@keyframes pg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.preview-gate-card {
  max-width: 380px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}
.preview-gate-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 8px;
}
.preview-gate-title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.preview-gate-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 16px;
}
.preview-gate-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.preview-gate-actions .btn {
  text-decoration: none;
}
/* Pack M-11: modal "Regístrate" centrado en pantalla. Se monta solo
   para anónimos y se abre con cualquier click no permitido (whitelist).
   Reusa .preview-gate-card pero centrado sobre toda la viewport. */
.preview-gate-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.preview-gate-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pg-fade-in .25s ease-out;
}
.preview-gate-card-modal {
  max-width: 440px;
  width: 100%;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  position: relative;
  animation: pg-card-in .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pg-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.preview-gate-close {
  margin-top: 18px;
  background: transparent;
  border: 0;
  font-size: 13px;
  color: var(--ink-mute);
  font-family: var(--sans);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.preview-gate-close:hover {
  color: var(--ink-soft);
  background: var(--surface);
}

/* Fade del texto recortado. Lucero pidió "blur que ocupe mitad de
   pantalla" — para texto eso es: la mitad superior se lee normal,
   la mitad inferior queda blurreada con un overlay encima con CTA.
   En vez de fade suave usamos blur fuerte sobre todo el bloque y un
   overlay CTA que cubra la zona blurreada. */
.preview-text-fade {
  position: relative;
  max-height: 220px;          /* deja ver "lo que viene" pero claramente bloqueado */
  overflow: hidden;
  filter: blur(7px);
  opacity: 0.7;
  user-select: none;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

/* Pack M-7: estado "Comprado" del 3er botón del feed/modal. Mantiene
   el tamaño y forma del coral original (no salta el layout), en verde con
   tick. Es CLICABLE: lleva al contenido ya comprado (/espacio?...&contenido=). */
.btn.is-bought,
.feed-cta-btn.is-bought {
  background: rgba(52, 132, 86, 0.18);
  color: #3A8C5C;
  border: 1px solid rgba(52, 132, 86, 0.55);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.btn.is-bought:hover,
.feed-cta-btn.is-bought:hover {
  background: rgba(52, 132, 86, 0.30);
  border-color: rgba(52, 132, 86, 0.85);
}

/* Pack M-5: FAB "Nueva publicación" en el home. Solo se monta para
   líderes (decisión JS), por eso no llevamos display:none por defecto.
   En mobile (≤720px) sube por encima de la bottom-nav. */
.home-fab {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(var(--primary-rgb), 0.35),
              0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.home-fab:hover {
  transform: translateY(-2px);
  background: var(--primary-hover);
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.40);
}
.home-fab svg { flex-shrink: 0; }
@media (max-width: 720px) {
  .home-fab {
    right: 16px;
    bottom: 92px;  /* deja sitio a la bottom-nav (.serclai-bnav) */
    padding: 12px 16px;
    font-size: 13px;
  }
  /* En móvil, el FAB se compacta a círculo si la pantalla es muy
     estrecha — el texto se oculta para no chocar con el espacio. */
  .home-fab span { display: none; }
  .home-fab { padding: 14px; }
}

/* ── (legacy) estilos antiguos del perfil IG en /app#mi-perfil ── */
.ig-profile {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  padding: 16px 0 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.ig-avatar-wrap {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--success-soft));
  padding: 4px;
  flex-shrink: 0;
  position: relative;
}
.ig-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 3px solid var(--bg);
  display: block;
}
.ig-avatar-edit {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform var(--t-fast), background var(--t-fast);
  padding: 0;
}
.ig-avatar-edit:hover {
  /* F-067: usar el hover de marca (como .btn-coral:hover) en vez del naranja
     huérfano que había hardcodeado aquí y que no pertenecía a la paleta Serclai. */
  background: var(--primary-hover);
  transform: scale(1.06);
}
.ig-avatar-edit svg { display: block; }
.ig-meta { flex: 1; min-width: 0; }
.ig-nameline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.ig-handle {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.ig-verified {
  color: var(--primary);
  display: inline-flex;
  align-items: center;
}
.ig-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ig-buttons .btn { font-size: 13px; padding: 7px 14px; }

/* Items del dropdown "Más" (cabecera lider-perfil) */
.dd-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;background:none;border:none;cursor:pointer;
  text-align:left;font-size:13.5px;color:var(--ink);
  border-radius:var(--r-sm);transition:background .12s;
  font-family:inherit;
}
.dd-item:hover{background:var(--surface)}
.dd-item svg{flex-shrink:0;color:var(--ink-mute)}
.dd-item:hover svg{color:var(--primary)}
.ig-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--ink-soft);
}
.ig-stats strong { color: var(--ink); font-weight: 600; }
.ig-bio { font-size: 14px; line-height: 1.5; color: var(--ink); }
.ig-displayname { font-weight: 500; font-size: 14px; color: var(--ink-mute); margin-bottom: 4px; }
.ig-spec { color: var(--ink-mute); font-size: 13px; margin-bottom: 8px; }
.ig-bio-text { color: var(--ink-soft); margin: 0; white-space: pre-wrap; }

.ig-tabs {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--line);
  margin: 0 0 24px;
}
.ig-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 14px 24px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-mute);
  cursor: pointer;
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.ig-tab.active { color: var(--ink); border-top-color: var(--ink); }

.ig-tabs-vertical {
  display: flex;
  flex-direction: column;
  border-top: none;
  border-right: 1px solid var(--line);
  margin: 0;
  min-width: 180px;
  flex-shrink: 0;
}
.ig-tabs-vertical .ig-tab {
  justify-content: flex-start;
  border-top: 0;
  border-left: 2px solid transparent;
  border-right: none;
  margin-top: 0;
  margin-left: -2px;
  padding: 14px 20px;
}
.ig-tabs-vertical .ig-tab.active {
  border-top-color: transparent;
  border-left-color: var(--ink);
}
.ig-layout-sidebar {
  display: flex;
  gap: 0;
  align-items: flex-start;
  margin-top: 24px;
}
.ig-layout-content {
  flex: 1;
  min-width: 0;
  padding-left: 32px;
}
.ig-left-col {
  display: flex;
  flex-direction: column;
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
}
.ig-left-col .ig-profile {
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  align-items: flex-start;
}
.ig-left-col .ig-avatar-wrap {
  width: 80px;
  height: 80px;
}
.ig-left-col .ig-avatar-edit {
  width: 26px;
  height: 26px;
  bottom: 1px;
  right: 1px;
}
.ig-left-col .ig-avatar-edit svg { width: 13px; height: 13px; }
.ig-left-col .ig-nameline { flex-wrap: wrap; gap: 4px; }
.ig-left-col .ig-nameline .ig-handle { font-size: 15px; }
.ig-left-col .ig-nameline .ig-verified svg { width: 16px; height: 16px; }
.ig-left-col .ig-buttons {
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ig-left-col .ig-buttons .btn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  font-size: 13px;
}
.ig-left-col .ig-bio { font-size: 13px; line-height: 1.5; }
.ig-left-col .ig-tabs-vertical { border-right: none; }
.ig-left-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
/* Tabs y buscador dentro del feed-sidebar fijo */
.feed-sidebar .ig-tabs-vertical {
  border-right: none;
  min-width: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.feed-sidebar .ig-left-section {
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding: 10px 0;
}

/* Pack G+: 1 publicación por pantalla (snap-style). Thumb 4:5 vertical
   estilo Instagram para que ocupe la mayor parte del viewport y no
   se vean 2 cards a la vez. */
.ig-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 640px;
  margin: 0 auto;
}
.ig-cell {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-base);
}
.ig-cell:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ig-cell-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  background-size: cover;
  background-position: center;
  background-color: var(--primary-bg);
  position: relative;
}
.ig-cell-no-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 56px;
  color: var(--ink-mute);
  background: var(--primary-bg);
}
.ig-cell-tipo {
  position: absolute;
  top: 12px;
  right: 14px;
  color: #fff;
  font-size: 20px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.ig-cell-priv {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
/* Barra de acciones de celda: editar · publicar/despublicar · borrar.
   Flex horizontal anclada al bottom de la miniatura. Los 3 botones
   comparten el mismo contenedor → nunca se solapan. */
.ig-cell-action-bar {
  position: absolute;
  /* F-009: moved to the TOP so it doesn't overlap the video's clean control
     bar (.vc-bar), which sits at the bottom of an autoplaying video. */
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  z-index: 3;
}

.ig-cell-toggle {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  letter-spacing: 0.04em;
  font-family: var(--sans);
  white-space: nowrap;
  transition: background .12s ease, transform .12s ease;
}
.ig-cell-toggle:hover { background: rgba(0,0,0,0.85); transform: translateY(-1px); }
.ig-cell-toggle.is-priv { background: var(--primary); color: #fff; border-color: transparent; }
.ig-cell-toggle.is-priv:hover { background: var(--primary-hover); }
.ig-cell-toggle:disabled { opacity: 0.6; cursor: not-allowed; }

.ig-cell-edit {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s ease, transform .12s ease;
}
.ig-cell-edit:hover { background: rgba(0,0,0,0.85); transform: translateY(-1px); }
.ig-cell-edit svg { display: block; }

.ig-cell-delete {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  transition: background .12s ease, transform .12s ease;
}
.ig-cell-delete:hover { background: #c0392b; border-color: #c0392b; transform: translateY(-1px); }
.ig-cell-delete:disabled { opacity: 0.6; cursor: not-allowed; }
.ig-cell-overlay {
  padding: 16px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.ig-cell-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.ig-cell-stats {
  display: flex;
  flex-direction: row;
  gap: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-top: 6px;
}
.ig-cell-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ig-cell-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.ig-cell-actions select {
  font-size: 10px;
  padding: 3px 16px 3px 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.95);
  color: var(--ink);
  border: 0;
  flex: 1;
  min-width: 0;
}
.ig-cell-btn {
  font-size: 11px;
  padding: 4px 8px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: 500;
}
.ig-cell-btn.danger { color: var(--danger); }

@media (max-width: 720px) {
  .ig-profile { gap: 24px; padding: 12px 0 24px; }
  .ig-avatar-wrap { width: 90px; height: 90px; }
  .ig-handle { font-size: 18px; }
  .ig-stats { gap: 18px; font-size: 13px; }
  .ig-grid { gap: 2px; }
}
.sidebar-section { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 14px;
  transition: all var(--t-fast);
}
.sidebar-link:hover { background: var(--surface); color: var(--ink); }
.sidebar-link.active { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
.sidebar-icon { width: 18px; height: 18px; opacity: 0.7; }

.sidebar-footer {
  margin-top: auto;
  padding: 16px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-mute);
}

.app-main {
  padding: 32px 40px;
  max-width: 1100px;
}
.app-main h1 { font-size: 36px; margin-bottom: 8px; }

.section-spacer { height: 40px; }

/* ── Connection cards (dashboard) ───────────────────────────── */

.conn-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.conn-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--t-base);
}
.conn-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.conn-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--primary-bg);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.conn-body { flex: 1; }
.conn-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.conn-meta { font-size: 13px; color: var(--ink-mute); }
.conn-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-mute);
}
.conn-status.connected { background: rgba(45, 95, 63, 0.1); color: var(--success); }

/* ── Pack M-12: pantalla de Migraciones ──────────────────────────
   Hero con título + descripción + pasos.
   Grid de 3 cards de plataforma (Instagram, YouTube, Spotify) con
   acentos visuales propios de cada marca pero anclados al sistema. */
.migraciones-hero {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.migraciones-tips {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .migraciones-tips { grid-template-columns: 1fr; }
}
.migraciones-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.migraciones-tip-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  font-family: var(--sans);
}
.migraciones-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.migraciones-grid {
  /* 2×2 fijo en desktop — Instagram & YouTube arriba, Substack & Spotify
     abajo. Más equilibrado que 3+1 cuando hay 4 plataformas. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 720px) {
  .migraciones-grid { grid-template-columns: 1fr; }
}
.migracion-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.migracion-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.migracion-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.migracion-card-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.mc-instagram .migracion-card-logo {
  /* Gradiente oficial de Instagram: esta tarjeta es la FUENTE del contenido.
     (En Inicio/feed el contenido importado se muestra con la marca Serclai.) */
  background: radial-gradient(circle at 30% 107%,
              #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.mc-youtube .migracion-card-logo {
  background: #FF0000;
}
.mc-spotify .migracion-card-logo {
  background: #1DB954;
}
.mc-substack .migracion-card-logo {
  background: #FF6719;       /* naranja oficial Substack */
}
.migracion-card-meta {
  flex: 1;
  min-width: 0;
}
.migracion-card-meta h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--ink);
}
.migracion-card-meta p {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.4;
}
.migracion-card-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-mute);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.migracion-card-status[data-status="connected"] {
  background: rgba(45, 95, 63, 0.12);
  color: var(--success);
  border-color: rgba(45, 95, 63, 0.25);
}
.migracion-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 4px 0 18px;
  flex: 1;
}
.migracion-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.migracion-card-actions .btn { width: 100%; }
.migracion-sync-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 4px;
}
.migracion-sync-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.migraciones-footer {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.migraciones-footer strong { color: var(--ink-soft); }

/* Pack M-14: panel de items por plataforma con buscador, select-all,
   lista de items con checkbox y barra de progreso de import. */
.mig-items-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.mig-items-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease;
}
.mig-items-head:hover { background: var(--bg); }
.mig-items-headinfo { flex: 1; min-width: 200px; }
.mig-items-chevron {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform .25s ease, background .12s ease;
  flex-shrink: 0;
}
.mig-items-chevron:hover { background: var(--surface); color: var(--ink); }
/* Estado colapsado: ocultamos body + toolbar y rotamos el chevron */
.mig-items-card[data-collapsed="true"] .mig-items-body { display: none; }
.mig-items-card[data-collapsed="true"] .mig-items-toolbar { display: none; }
.mig-items-card[data-collapsed="true"] .mig-items-head { border-bottom: 0; }
.mig-items-card[data-collapsed="true"] .mig-items-chevron { transform: rotate(-90deg); }
.mig-items-head h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--ink);
}
.mig-items-head p {
  font-size: 12.5px;
  margin: 0;
}
.mig-items-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.mig-items-toolbar input[type="search"] {
  width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
}
.mig-items-toolbar input[type="search"]:focus { border-color: var(--primary); }
.mig-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.mig-select-all input { accent-color: var(--primary); }
.mig-items-list {
  max-height: 420px;
  overflow-y: auto;
}
/* Pack M-19: cada row es un div con head clicable + panel de config
   inline. El head conserva el mismo aspecto que antes; el panel solo
   aparece cuando data-selected="true". */
.mig-item {
  border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
.mig-item:last-child { border-bottom: 0; }
.mig-item-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
}
.mig-item-head:hover { background: var(--bg); }
.mig-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}
.mig-item-thumb {
  width: 80px;
  height: 45px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.mig-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}
.mig-item-tipo {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  border-radius: 4px;
  margin-right: 8px;
}
.mig-item-body { flex: 1; min-width: 0; }
.mig-item-titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.mig-item-meta {
  font-size: 12px;
  color: var(--ink-mute);
}
.mig-item.is-imported { opacity: 0.55; }
.mig-item.is-imported .mig-item-head::after {
  content: "✓ Importado";
  font-size: 11px;
  color: var(--success);
  font-weight: 600;
  flex-shrink: 0;
}
.mig-item-config {
  display: none;
  padding: 4px 20px 16px 52px;   /* mismo offset que el body (18 cb + 14 gap + 20 padding) */
  background: var(--bg);
  border-top: 1px dashed var(--line);
}
.mig-item[data-selected="true"] .mig-item-config { display: block; }
.mig-item-config-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.mig-item-config-row:last-child { margin-bottom: 0; }
.mig-item-config-label {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.mig-item-config select,
.mig-item-config input[type="text"],
.mig-item-config input[type="url"] {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.mig-item-config .tema-toggles { gap: 6px; }
.mig-item-config .tema-toggle { padding: 4px 10px; font-size: 12px; }

/* Pack M-19: tag input (hashtags escritos a mano con autocompletado) */
.mig-tag-input {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  cursor: text;
  transition: border-color .12s ease;
}
.mig-tag-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 71, 0.12);
}
.mig-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  /* Pack M-19 fix: usar el par ink/surface que se invierte
     correctamente en light y dark mode. Antes era ink+white →
     en dark mode el ink se vuelve crema y el white sobre crema
     era ilegible. */
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-pill);
  line-height: 1.2;
  user-select: none;
}
.mig-tag-chip-x {
  background: transparent;
  border: 0;
  color: var(--surface);
  opacity: 0.7;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
}
.mig-tag-chip-x:hover {
  opacity: 1;
  background: rgba(127, 127, 127, 0.22);
}
.mig-tag-input-field {
  flex: 1 1 80px;
  min-width: 80px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--ink);
  padding: 4px 2px;
}
.mig-tag-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
}
.mig-tag-suggest-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.mig-tag-suggest-item:hover,
.mig-tag-suggest-item.active {
  background: var(--bg);
  color: var(--primary);
}
.mig-tag-suggest-empty {
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Pack M-19 fix: typeahead reutilizable para los modales de Migraciones.
   Lista de resultados debajo del input mientras escribes. */
.typeahead-results {
  display: none;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  max-height: 320px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.typeahead-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.typeahead-item:last-child { border-bottom: 0; }
.typeahead-item:hover,
.typeahead-item.active {
  background: var(--bg);
}
.typeahead-item img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.typeahead-item .ta-avatar-round { border-radius: 50%; }
.typeahead-item .ta-body {
  flex: 1;
  min-width: 0;
}
.typeahead-item .ta-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.typeahead-item .ta-meta {
  font-size: 11.5px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.typeahead-empty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--ink-mute);
  text-align: center;
  font-style: italic;
}

/* Barra de progreso */
.mig-progress {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mig-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.mig-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
  transition: width .3s ease;
}
.mig-progress-label {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ── Import job tracker (Pack M-meta-export, 2026-05) ─────────
   UI fancy de progreso para imports asíncronos. Diseñada para ser
   REUSABLE entre IG / YouTube / Spotify: solo cambia el icono y el
   nombre de la plataforma en cada instancia.

   Estructura HTML esperada:
     .import-tracker
       .import-steps  (con .import-step.active|.done dentro)
       .import-bar    (con .import-bar-fill dentro)
       .import-status-text
       .import-current-item
       .import-counters (con .import-counter dentro)
       .import-meta
*/

.import-tracker {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin: 14px 0 0;
  transition: background .3s ease, border-color .3s ease;
}
.import-tracker.is-done {
  background: rgba(40, 167, 69, .06);
  border-color: rgba(40, 167, 69, .35);
}
.import-tracker.is-error {
  background: rgba(220, 53, 69, .06);
  border-color: rgba(220, 53, 69, .35);
}
.import-tracker.is-cancelled {
  background: rgba(255, 165, 0, .06);
  border-color: rgba(255, 165, 0, .35);
}

/* Botón Cancelar — fila final del tracker */
.import-cancel-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}
.import-cancel-btn {
  color: #c0392b;
  border-color: rgba(192, 57, 43, .3);
}
.import-cancel-btn:hover {
  background: rgba(192, 57, 43, .08);
  border-color: #c0392b;
  color: #c0392b;
}

/* Steps indicator (puntos conectados horizontales) */
.import-steps {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: relative;
}
.import-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 0 2px;
  min-width: 0;
}
.import-step span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-step::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line);
  transition: background .3s ease, box-shadow .3s ease;
  flex-shrink: 0;
}
.import-step.active::before {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(217, 67, 67, .18);
  animation: import-step-pulse 1.6s ease-in-out infinite;
}
.import-step.done::before {
  background: var(--primary);
  box-shadow: none;
}
.import-step.active, .import-step.done {
  color: var(--ink);
}
@keyframes import-step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 67, 67, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 67, 67, .08); }
}

/* Progress bar (10px alto + shimmer mientras está activa) */
.import-bar {
  height: 10px;
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.import-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
  transition: width .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.import-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  animation: import-bar-shimmer 1.4s linear infinite;
}
.import-bar.idle .import-bar-fill::after { display: none; }
.import-tracker.is-done .import-bar-fill::after,
.import-tracker.is-error .import-bar-fill::after { display: none; }
@keyframes import-bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Texto bajo la barra */
.import-status-text {
  font-size: 13.5px;
  font-weight: 500;
  margin: 12px 0 4px;
  color: var(--ink);
}
.import-current-item {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0 0 12px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.4em;  /* reserve space para evitar reflow */
}

/* Contadores (importados / ya tenías / fallos) */
.import-counters {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.import-counter strong {
  color: var(--ink);
  font-weight: 600;
}
.import-counter.ok strong   { color: #1e6b3a; }
.import-counter.skip strong { color: #b35a00; }
.import-counter.err strong  { color: #c0392b; }

/* Velocidad / ETA / archivo */
.import-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
}

/* ── "Lo que tienes en Serclai" — UI post-import ────────────────
   Cards por plataforma que enseñan al líder lo que ya tiene
   importado como publicaciones (origen='instagram'/'youtube'/...).
   Reusable: cualquier plataforma usa la misma estructura.
*/
.imported-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px) {
  .imported-grid { grid-template-columns: 1fr; }
}
.imported-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.imported-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.imported-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.imported-card-meta { flex: 1; min-width: 0; }
.imported-card-meta h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.imported-card-meta p {
  margin: 2px 0 0;
  font-size: 12.5px;
}
.imported-view-public {
  white-space: nowrap;
}
.imported-card-toolbar {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.imported-search,
.imported-tipo-filter {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
}
.imported-search { flex: 1; min-width: 200px; }
.imported-tipo-filter { min-width: 160px; }

/* Grid de thumbnails — 3-4 columnas adaptables */
.imported-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  padding: 14px 18px 18px;
}
.imported-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 12px;
  font-size: 13px;
}

/* Cada tile: thumb arriba + meta abajo */
.imported-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.imported-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}
.imported-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ink-soft);
  display: block;
}
.imported-thumb-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--bg) 0%, var(--line) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
}
.imported-thumb-fallback svg { width: 40%; height: 40%; opacity: .55; }
.imported-item-body {
  padding: 8px 10px 10px;
}
.imported-item-title {
  font-size: 12.5px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  color: var(--ink);
}
.imported-item-meta {
  font-size: 11px;
  color: var(--ink-mute);
  margin: 2px 0 0;
}

/* Badges sobre el thumb: tipo + visibilidad */
.imported-badge {
  position: absolute;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .65);
  color: white;
  letter-spacing: .3px;
  text-transform: uppercase;
  z-index: 1;
}
.imported-badge.is-tipo { top: 6px; left: 6px; }
.imported-badge.is-tipo[data-tipo="carrusel"] { background: rgba(67, 113, 217, .85); }
.imported-badge.is-tipo[data-tipo="mixto"]    { background: rgba(155, 67, 217, .85); }
.imported-badge.is-tipo[data-tipo="video"]    { background: rgba(220, 32, 32, .9); }   /* YouTube red */
/* P-001: reglas muertas de los tipos legacy podcast/articulo retiradas (el tipo
   guardado ya es canónico audio/texto; nada emite data-tipo con esos valores).
   P-011: ídem para 'reel' → 'video' (un reel ahora usa el badge de 'video'). */
.imported-badge.is-vis  { top: 6px; right: 6px; background: rgba(255, 165, 0, .9); }

/* Acciones flotantes (top-right cuando hover) */
.imported-actions {
  position: absolute;
  top: 6px; right: 6px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
}
.imported-item:hover .imported-actions { opacity: 1; }
.imported-action-btn {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft);
  padding: 0;
}
.imported-action-btn:hover { color: var(--primary); border-color: var(--primary); }
.imported-action-btn.is-danger:hover { color: #c0392b; border-color: #c0392b; }
.imported-action-btn svg { width: 14px; height: 14px; }

/* ── Sticky chip de jobs en curso ─────────────────────────────
   Esquina inferior derecha. Se muestra mientras hay imports en
   marcha en cualquier plataforma. Click → abre el modal de esa
   plataforma (si lo tiene), o navega a /app#migraciones. */
.import-chip-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 950;
  pointer-events: none;  /* contenedor transparente */
}
.import-chip {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  max-width: 340px;
  animation: import-chip-in .3s cubic-bezier(.4,0,.2,1);
}
@keyframes import-chip-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.import-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.import-chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}
.import-chip-icon svg { width: 18px; height: 18px; }
.import-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.import-chip-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.import-chip-status {
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.import-chip-bar {
  width: 70px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.import-chip-bar-fill {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width .3s ease;
}
.import-chip.is-done {
  background: rgba(40, 167, 69, .12);
  border-color: rgba(40, 167, 69, .5);
}
.import-chip.is-done .import-chip-icon { color: #1e6b3a; }
.import-chip.is-error {
  background: rgba(220, 53, 69, .12);
  border-color: rgba(220, 53, 69, .5);
}
.import-chip.is-error .import-chip-icon { color: #c0392b; }
.import-chip.is-cancelled {
  background: rgba(255, 165, 0, .12);
  border-color: rgba(255, 165, 0, .5);
}
.import-chip.is-cancelled .import-chip-icon { color: #b35a00; }

/* ── Chat demo (animated) ───────────────────────────────────── */

.chat-frame {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 28px;
  /* Par ink/surface (precedente Pack M-19): los blancos del panel van en
     rgba(var(--surface-rgb), α) para que en dark (bg crema) el texto y los
     velos se inviertan a gris oscuro y sigan siendo legibles. */
  color: var(--surface);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  margin: 0 auto;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(var(--surface-rgb), 0.6);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--surface-rgb), 0.08);
}
.chat-head .dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.chat-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}
.chat-msg {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(8px);
  animation: msgIn 400ms ease forwards;
}
.chat-msg.user {
  align-self: flex-end;
  background: rgba(var(--surface-rgb), 0.08);
  color: rgba(var(--surface-rgb), 0.92);
  border: 1px solid rgba(var(--surface-rgb), 0.06);
}
.chat-msg.ia {
  align-self: flex-start;
  background: var(--primary);
  color: var(--surface);  /* not white: --primary flips to beige in dark mode */
}
.chat-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(var(--surface-rgb), 0.06);
  border-radius: var(--r-md);
  opacity: 0;
  animation: msgIn 200ms ease forwards;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: rgba(var(--surface-rgb), 0.5);
  border-radius: 50%;
  animation: typing 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes msgIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* ── Footer ─────────────────────────────────────────────────── */

footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  background: var(--surface);
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-brand p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.6;
}
.footer-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col a, .footer-col span {
  display: block;
  font-size: 14px;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.footer-col a {
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-col span {
  color: var(--ink-mute);
  opacity: 0.5;
  cursor: not-allowed;
}
.footer-base {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ── Feed (publicaciones) ───────────────────────────────────── */

.feed-hero {
  padding: 56px 0 32px;
  text-align: center;
}
.feed-hero h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  margin-bottom: 14px;
}
.feed-hero p.lead {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 32px;
}

/* Banda sticky que mantiene el buscador visible al hacer scroll. */
.feed-search-sticky {
  position: sticky;
  top: 64px; /* justo debajo de la nav top (≈64px) */
  z-index: 50;
  padding: 12px 0;
  background: rgba(245, 241, 235, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
}
/* Cuando el feed está por debajo (al scrollear), se ve un borde sutil */
.feed-search-sticky.scrolled { border-bottom-color: var(--line); }

.feed-search {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}

/* Filtros rápidos por tipo (chips) bajo el buscador */
.feed-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0 16px;
}

.feed-filter {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
}
.feed-filter:hover {
  border-color: var(--primary);
  color: var(--ink);
}
.feed-filter.on {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.feed-filter.on:hover { color: white; }

/* (El estado deshabilitado de los CTAs de publicación vive ahora en la regla
   unificada de .btn, arriba en «Buttons».) */

/* (Pack M-19 fix retirado: el modo "preview del dueño" se simplificó
   a "hidden" — el líder dueño no ve sus CTAs. Mantener vacío por si
   en futuro queremos preview interactivo opcional.) */

/* Pack F flow fix: estado "info enviada" del botón Dame más info.
   El texto se mantiene "Dame más info" pero se ve grisáceo/opaco
   indicando que ya se pulsó. El click sigue funcionando (abre el
   chat para LEER la respuesta del líder, sin escribir). */
.btn.info-sent {
  opacity: 0.55;
  background: var(--surface-2, #ECEAE3);
  border-color: var(--line-strong);
  color: var(--ink-mute);
  cursor: pointer;
}
.btn.info-sent:hover {
  opacity: 0.75;
  background: var(--surface-2, #ECEAE3);
}

/* Pack G: botones de visibilidad en modal Nueva publicación
   (Pública / VIP). Cards seleccionables con estado .np-vis-on. */
.np-vis-btn {
  appearance: none;
  text-align: left;
  background: var(--surface, #fff);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--t-base, 0.18s ease);
}
.np-vis-btn:hover {
  border-color: var(--line-strong);
  background: var(--bg, #F5F1EB);
}
.np-vis-btn.np-vis-on {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10);
}

/* F-046: se eliminó el "badge de origen" (.pub-origin-icon) de las
   publicaciones — el contenido ya es propiedad del líder. */

/* Pack F: card de SOLO TEXTO (texto sin thumbnail). Acabado
   tipográfico — el título se hace protagonista en lugar del thumb. */
.feed-card-text .feed-thumb-text {
  aspect-ratio: 16 / 5;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.18));
  display: grid;
  place-items: center;
  position: relative;
}
.feed-card-text .feed-thumb-text::before {
  content: "“";
  font-family: var(--serif, Georgia, serif);
  font-size: 96px;
  color: rgba(var(--primary-rgb), 0.35);
  line-height: 1;
  user-select: none;
}
.feed-card-text .feed-title-text {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 10px 0 8px;
  color: var(--ink);
}
.feed-card-text .feed-resumen-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Texto sin imagen: sin franja de color arriba (el cuerpo empieza
   directamente con el autor + título + texto). */
.feed-card.feed-card--solo-texto .feed-thumb,
#feed-grid .feed-card.feed-card--solo-texto .feed-thumb,
#mis-pubs .feed-card.feed-card--solo-texto .feed-thumb {
  display: none;
}
.feed-card--solo-texto .feed-title-text {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 4px 0 8px;
  color: var(--ink);
}
/* Sin imagen → el caption se recorta a un nº de líneas cuya altura ≈ la de un
   thumb de imagen/vídeo (≈420px), de modo que la tarjeta de texto NO sea más
   grande que una de media. -webkit-line-clamp añade los "…" en el corte. Si
   desborda, JS añade "… más"/"… menos" que alterna .expanded. */
.feed-card--solo-texto .feed-resumen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 19;
  overflow: hidden;
  white-space: pre-wrap;
}
.feed-card--solo-texto .feed-resumen.expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
@media (max-width: 640px) {
  .feed-card--solo-texto .feed-resumen { -webkit-line-clamp: 24; }
}
/* No hay thumb donde apoyar la barra de acciones (eliminar/editar/
   publicar): flota en la esquina inferior derecha de la tarjeta, a la
   derecha de la fila de métricas (que queda a la izquierda). */
.feed-card.feed-card--solo-texto { position: relative; }
.feed-card.feed-card--solo-texto > .ig-cell-action-bar { bottom: 14px; }

/* Sentinel de infinite scroll */
#feed-sentinel {
  font-style: italic;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .feed-filters {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 16px 4px;
  }
  .feed-filter { scroll-snap-align: start; }
}
.feed-search input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  font-size: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  transition: all var(--t-base);
  box-shadow: var(--shadow-sm);
}
.feed-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12), var(--shadow-sm);
}
/* type="search" (usado para frenar el autorrelleno de Chrome) añade una "x"
   y decoración nativas en WebKit; las ocultamos para que la caja se vea igual. */
.feed-search input[type="search"]::-webkit-search-cancel-button,
.feed-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.feed-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}

.feed-filters-row {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 32px;
}
.feed-filters-row::-webkit-scrollbar { display: none; }

.chips {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip.active {
  background: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
  border-color: var(--ink);
}
.chip.active:hover { background: var(--ink-hover); }

.feed-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.feed-controls select {
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238E8C85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Pastillas de formato (Vídeo / Imagen / Audio / Texto) */
.tipo-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 18px 32px 4px;
  background: rgba(245, 241, 235, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.tipo-pills::-webkit-scrollbar { display: none; }
.tipo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--t-base);
  font-family: var(--sans);
}
.tipo-pill:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
  transform: translateY(-1px);
}
.tipo-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.28);
}
.tipo-pill.active:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}
.tipo-pill svg {
  flex-shrink: 0;
}

/* Grid */

/* Layout 2 columnas: sidebar buscador/filtros + feed estilo Instagram.
   Hereda el max-width 1200px y padding 32px del .container, así el
   sidebar queda alineado verticalmente con el logo "Serclai" del nav.
   El contenido del grid se ancla a la izquierda — el espacio sobrante
   a la derecha es intencional (estilo Twitter/IG con sidebar fija). */
.feed-layout {
  display: block;
  padding-top: 20px;
  padding-bottom: 80px;
}
.feed-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
  box-sizing: border-box;
}

/* ── Sidebar logo ── */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  padding: 4px 10px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.sidebar-logo .logo-mark { color: var(--ink); }

/* ── Sidebar nav links (IG-style) ── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}
.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-nav-link:hover { background: var(--surface); color: var(--ink); }
.sidebar-nav-link.active { color: var(--ink); font-weight: 600; }
.sidebar-nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
/* Avatar grande para el perfil en la parte superior del sidebar */
.sidebar-nav-avatar-lg {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
}
.sidebar-nav-perfil-top {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding: 10px 10px 12px !important;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sidebar-nav-avatar-fb {
  display: grid;
  place-items: center;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
}

/* Botones Acceder/Empezar en sidebar (home sin nav top) */
.sidebar-auth-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
}
.sidebar-auth-btns .btn {
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 8px 12px;
}

/* Enlaces institucionales (Sobre / Legal / contacto) subidos del pie al final
   del sidebar fijo. margin-top:auto los ancla al fondo → siempre visibles sin
   tener que llegar al footer tras el feed infinito. */
.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;               /* separación entre grupos */
}
.sidebar-footer-group {
  display: flex;
  flex-direction: column;
  gap: 9px;                /* separación entre enlaces del grupo */
}
.sidebar-footer a {
  display: block;          /* cada enlace en su propia línea, robusto */
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--t-fast);
}
.sidebar-footer a:hover { color: var(--ink); }
.sidebar-footer-contact a { color: var(--ink-mute); font-size: 12.5px; }
.sidebar-footer-copy {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* Badges de descarga (App Store + Google Play) dentro del pie de la barra
   lateral: botones contorneados, compactos y apilados a ancho completo, para
   que encajen con los enlaces del pie en vez de dominar con un bloque sólido.
   Los selectores llevan .sidebar-footer-apps para ganar en especificidad a
   `.sidebar-footer a` (que fuerza display:block y color de enlace). */
.sidebar-footer-apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}
.sidebar-footer-apps .app-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  justify-content: flex-start;
  padding: 7px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sidebar-footer-apps .app-badge:hover {
  background: transparent;
  border-color: var(--ink-soft);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}
.sidebar-footer-apps .app-badge-icon {
  width: 20px;
  height: 20px;
}
.sidebar-footer-apps .app-badge-icon svg { width: 18px; height: 18px; }
.sidebar-footer-apps .app-badge-small {
  font-size: 9.5px;
  letter-spacing: 0.02em;
  opacity: 0.75;
  margin-bottom: 1px;
}
.sidebar-footer-apps .app-badge-big {
  font-size: 13px;
  font-weight: 600;
}

/* ── Global sidebar (todas las páginas salvo home) ──────────────── */
/* Solo desktop ≥901px — mobile usa el bottom nav */
@media (min-width: 901px) {
  .serclai-gsidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: var(--bg);
    border-right: 1px solid var(--line);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 200;
    overflow-y: auto;
    box-sizing: border-box;
  }

  body.has-gsidebar {
    padding-left: 260px;
    box-sizing: border-box;
  }

  /* Oculta la barra azul superior cuando el gsidebar está activo */
  body.has-gsidebar .nav { display: none !important; }

  /* ── Modo iconos: cuando hay un 2º nivel de navegación (app/espacio) ── */
  /* El sidebar global colapsa a 64px mostrando solo iconos + avatar.     */
  body.has-gsidebar.sidebar-icons {
    padding-left: 64px;
  }
  body.has-gsidebar.sidebar-icons .serclai-gsidebar {
    width: 64px;
    padding: 16px 0;
    align-items: center;
    gap: 4px;
  }
  /* Ocultar todo el texto */
  body.has-gsidebar.sidebar-icons .serclai-gsidebar span:not(.logo-mark) { display: none; }
  /* Logo: solo el icono centrado */
  body.has-gsidebar.sidebar-icons .gsidebar-logo {
    justify-content: center;
    padding: 4px 0 12px;
    width: 100%;
    margin-bottom: 4px;
  }
  /* Links: centrados sin texto */
  body.has-gsidebar.sidebar-icons .gsidebar-link {
    justify-content: center;
    padding: 10px 0;
    width: 100%;
  }
  /* Perfil top: avatar un poco más pequeño, centrado */
  body.has-gsidebar.sidebar-icons .gsidebar-avatar-lg {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  body.has-gsidebar.sidebar-icons .gsidebar-perfil-top {
    padding: 8px 0 12px;
    width: 100%;
    justify-content: center;
  }

  .gsidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
    font-size: 15px;
    padding: 4px 10px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }

  .gsidebar-logo .logo-mark { color: var(--ink); }

  .gsidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
  }

  .gsidebar-link:hover { background: var(--surface); color: var(--ink); }
  .gsidebar-link.active { color: var(--ink); font-weight: 600; }

  .gsidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .gsidebar-avatar-fb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }

  /* Avatar grande + negrita para el perfil en top del gsidebar */
  .gsidebar-avatar-lg {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .gsidebar-perfil-top {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink) !important;
    padding: 10px 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  .serclai-gsidebar { display: none; }
}

.feed-sidebar .feed-search {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}
.feed-sidebar .feed-search:focus-within {
  border-color: var(--primary);
}
.feed-sidebar .feed-search svg { color: var(--ink-mute); flex-shrink: 0; }
.feed-sidebar .feed-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
}
.feed-sidebar .feed-search input::placeholder { color: var(--ink-mute); }
/* Filtros vertical: una columna en vez del row horizontal. */
.feed-filters-vertical {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feed-filters-vertical .feed-filter {
  text-align: left;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast);
}
.feed-filters-vertical .feed-filter:hover { background: var(--surface); color: var(--ink); }
.feed-filters-vertical .feed-filter.on {
  background: var(--primary-bg);
  color: var(--primary-hover);
  font-weight: 600;
}
/* En oscuro la regla genérica fuerza el texto de .feed-filter.on a navy (#1F2A38,
   pensado para el relleno beige de la píldora); en la lista vertical el relleno es
   --primary-bg (azul) y «Todo» quedaba navy sobre azul, ilegible. */
html.theme-dark .feed-filters-vertical .feed-filter.on { color: var(--ink) !important; }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .feed-filters-vertical .feed-filter.on { color: var(--ink) !important; }
}
/* Responsive: en móvil/tablet, sidebar vuelve al flujo normal. */
@media (max-width: 900px) {
  .feed-layout {
    padding: 20px 16px 60px;
  }
  /* En mobile, anula el padding-left del sidebar fijo */
  body.has-gsidebar { padding-left: 0 !important; }
  .feed-sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    padding: 12px 0 !important;
    gap: 12px;
    overflow: visible;
  }
  /* El buscador ocupa TODO el ancho del sidebar, alineado con los botones
     (Dame más info / Contactar) de arriba. Sin esto, el `margin:0 auto` +
     max-width:580px de la regla base .feed-search actúan como auto-márgenes
     en la columna flex y lo dejaban centrado a su ancho de contenido
     (~269px), más estrecho que los botones full-width. */
  .feed-sidebar .feed-search {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .feed-filters-vertical {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .feed-filters-vertical::-webkit-scrollbar { display: none; }
  .feed-filters-vertical .feed-filter { white-space: nowrap; flex-shrink: 0; }

  /* En móvil: logo y nav del sidebar se ocultan (bottom nav lo cubre). Los
     enlaces institucionales también: el footer de página + la bottom-nav ya
     los cubren, y meterlos en la tira superior de móvil ensuciaría. */
  .sidebar-logo,
  .sidebar-nav,
  .sidebar-footer { display: none; }

  /* En móvil los botones auth van en fila, antes de los filtros */
  .sidebar-auth-btns {
    flex-direction: row;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    order: -1;
  }
  .sidebar-auth-btns .btn { flex: 1; }

  /* Perfil de líder en móvil: hero → CTAs/buscador/filtros → feed.
     El hero y el #feed-grid viven AMBOS dentro de .feed-content, así que
     con un simple order:1/2 el sidebar (CTAs + buscador + filtros) caía
     DETRÁS de todo el feed (al final del scroll infinito). Con
     display:contents promovemos los hijos de .feed-content a items del
     .feed-layout para poder intercalar el sidebar ENTRE el hero y el grid:
       hero (order 0) → sidebar (order 2) → #feed-grid (order 3). */
  .lider-page .feed-layout { display: flex; flex-direction: column; }
  .lider-page .feed-content { display: contents; }
  .lider-page .feed-sidebar { order: 2; }
  .lider-page #feed-grid { order: 3; }
}

/* Columna derecha: el feed centrado en el espacio disponible */
.feed-content {
  max-width: 614px;
  margin: 0 auto;
  width: 100%;
}

.feed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}


/* Row de líderes coincidentes al buscar (aparece arriba del grid). */
.feed-lideres-row {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.feed-lideres-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.feed-lideres-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.feed-lideres-list::-webkit-scrollbar { display: none; }
.feed-lider-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.feed-lider-chip:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.feed-lider-chip-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.feed-lider-chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feed-lider-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.feed-lider-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.feed-lider-chip-nombre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.feed-lider-chip-esp {
  font-size: 11.5px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ── Referentes en la industria (beta) ──────────────────────────────── */
/* Carrusel del Inicio: reutiliza .feed-lideres-list + .feed-lider-chip. */
.feed-referentes-row {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
/* El chip seleccionado/hover sube 1px (translateY) y el carrusel recorta en
   vertical (overflow-x fuerza overflow-y:auto). Sin hueco arriba, el borde
   superior del chip se corta → damos 4px de padding-top, simétrico al de abajo. */
.feed-referentes-row .feed-lideres-list {
  padding-top: 4px;
}
.feed-referentes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.feed-referentes-vertodos {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.feed-referentes-vertodos:hover { text-decoration: underline; }

/* [Paridad apps 24/09] Filas de descubrimiento del Inicio (Referentes y Culturas)
   como la app (CulturaViews.swift `HomeRowMetrics`): chip de ANCHO FIJO 216 para
   que siempre asome el siguiente, esquinas de 16, imagen redonda de 48 y dos
   líneas de subtítulo reservadas; al final, un «+» redondo de 44 en lugar del
   «Ver todos» de la cabecera. Solo en estas filas: el chip de la búsqueda de
   líderes (.feed-lideres-row) no cambia. */
.feed-home-row .feed-lideres-list { gap: 10px; align-items: center; }
.feed-home-row .feed-lider-chip {
  width: 216px;
  min-height: 76px;
  padding: 12px;
  border-radius: 16px;
  border-width: 0.5px;
  align-items: center;
}
.feed-home-row .feed-lider-chip-avatar { width: 48px; height: 48px; }
.feed-home-row .feed-lider-chip-nombre { font-size: 14px; max-width: none; }
.feed-home-row .feed-lider-chip-esp {
  font-size: 12px;
  max-width: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.6em;
  line-height: 1.3;
}
.feed-home-row .feed-referentes-header { font-weight: 400; font-size: 13px; letter-spacing: 1.2px; }
.feed-row-mas {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  margin-right: 2px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.feed-row-mas:hover { border-color: var(--line-strong); transform: scale(1.04); }
/* Ficha de una cultura (modal compartido serclai-modal.js). */
.cultura-poster {
  display: block;
  max-width: 190px;
  max-height: 190px;
  margin: 0 auto 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  object-fit: contain;
}
.cultura-fundadores { margin-bottom: 16px; }
.cultura-fund-titulo { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.cultura-fund-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.cultura-fund {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 13px;
}
.cultura-fund img, .cultura-fund span {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; background: var(--primary-bg);
}
.cultura-desc { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.cultura-desc p { margin: 0 0 10px; }
.cultura-desc img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.cultura-lista { display: flex; flex-direction: column; }
.cultura-fila {
  display: flex; align-items: center; gap: 12px; padding: 10px 4px;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; cursor: pointer; font: inherit; color: var(--ink);
}
.cultura-fila .feed-lider-chip-avatar { width: 52px; height: 52px; }
.cultura-fila-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cultura-fila-txt small { color: var(--ink-soft); font-size: 13px; line-height: 1.35; }

/* Pantalla "Ver todos": cabecera + filas. */
.referentes-head { margin: 8px 0 24px; }
.referentes-back {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 10px;
}
.referentes-back:hover { color: var(--primary); }
.referentes-head h1 {
  font-family: var(--display);
  font-size: 26px;
  margin: 0;
  color: var(--ink);
}
.referentes-list { display: flex; flex-direction: column; gap: 12px; }
.referente-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.referente-row:hover { border-color: var(--primary); transform: translateY(-1px); }
.referente-row-avatar {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; background: var(--bg);
}
.referente-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.referente-row-fallback,
.ref-avatar-fallback,
.feed-lider-avatar-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--primary); color: #fff;
  font-weight: 600;
}
.referente-row-body { min-width: 0; }
.referente-row-name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.referente-row-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.referente-row-desc {
  font-size: 13.5px; color: var(--ink-soft); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Perfil de referente (layout tipo LinkedIn, PALETA Serclai). */
/* Pila de tarjetas separadas; acentos en --primary (azul marino Serclai) y
   --primary. Usa --surface/--bg/--ink para respetar el tema claro/oscuro. */
.ref-profile { display: flex; flex-direction: column; gap: 12px; }
.ref-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.ref-intro { overflow: hidden; }
.ref-cover {
  height: 150px;
  background: linear-gradient(120deg, var(--primary), var(--accent));
  background-size: cover; background-position: center;
  position: relative;
}
.ref-cover-edit {
  position: absolute; right: 12px; top: 12px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: var(--shadow-md);
}
.ref-cover-edit:hover { border-color: var(--primary); color: var(--primary); }
.ref-head { padding: 0 24px 20px; position: relative; }
.ref-avatar {
  width: 120px; height: 120px; margin-top: -60px;
  border-radius: 50%; overflow: hidden;
  border: 4px solid var(--surface); background: var(--bg);
}
.ref-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ref-headline { padding-top: 12px; }
.ref-name {
  font-family: var(--display);
  font-size: 24px; margin: 0; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.ref-check { color: var(--primary); flex-shrink: 0; }
.ref-titular { font-size: 16px; color: var(--ink); margin: 6px 0 2px; }
.ref-meta { font-size: 13.5px; color: var(--ink-mute); margin: 0; }
.ref-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ref-btn {
  border-radius: var(--r-pill);
  padding: 8px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent;
  font-family: var(--sans); text-decoration: none;
  display: inline-flex; align-items: center;
}
.ref-btn-primary { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.ref-btn-primary:hover { opacity: 0.92; }
.ref-btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.ref-btn-ghost:hover { background: var(--bg); }
/* Estado "info enviada" del CTA del referente (lo aplica serclai-cta.js con
   .info-sent, igual que en el perfil público — ver .btn.info-sent). */
.ref-btn.info-sent { opacity: 0.55; background: var(--surface-2, #ECEAE3);
  border-color: var(--line-strong); color: var(--ink-mute); }
.ref-section { padding: 20px 24px; }
.ref-section h2 {
  font-family: var(--display); font-size: 18px; margin: 0 0 12px; color: var(--ink);
}
.ref-about { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; white-space: pre-line; }
.ref-exp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ref-exp-cargo { font-weight: 600; font-size: 15px; color: var(--ink); }
.ref-exp-sub { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.ref-exp-empresa { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.ref-exp-fecha { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.ref-exp-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
.ref-subh { font-size: 14px; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.ref-section-head { display: flex; align-items: center; justify-content: space-between; }
.ref-vertodos { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.ref-vertodos:hover { text-decoration: underline; }
/* Publicaciones: fila horizontal con scroll (swipe). */
/* Carrusel de publicaciones del referente — mismo look que el muro de
   Comunidades (.mcar-*): la primera tarjeta entera + un asomo de la siguiente
   (flex-basis 78%), snap nativo al arrastrar en móvil y flechas en hover en
   desktop. Ratio 4:5 estilo Instagram, con tope de alto. */
.ref-pubs-carousel { position: relative; }
.ref-pubs-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ref-pubs-row::-webkit-scrollbar { display: none; }
.ref-pub-card { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }
/* La celda hospeda una .feed-card REAL (el componente del Inicio), así que la
   tarjeta manda en su propio aspecto y aquí solo se ajusta la caja. */
.ref-pub-card > .feed-card { width: 100%; margin: 0; height: 100%; }
/* Celda de altura fija: el cuerpo del post no estira la tarjeta — al pulsar
   "… más" el texto se despliega DENTRO, con scroll (clampResumen({scroll:true})).
   El resumen ocupa el hueco que queda bajo la miniatura, así que siempre tiene
   un alto concreto contra el que decidir si hace falta el "… más". */
.feed-card--compact { display: flex; flex-direction: column; }
/* La miniatura NO se encoge y mide LO MISMO sea cual sea el tipo. La celda
   tiene altura fija (la fila iguala todas) y el cuerpo se comía el resto, así
   que la miniatura de un vídeo quedaba aplastada (438×246) mientras la de una
   publicación mixta llegaba a 420: la parte de arriba se veía distinta en cada
   tarjeta, y encima un vídeo vertical de Instagram (720×1280, `object-fit:
   contain`) salía casi todo negro.
   El suelo se expresa en `cqw` —ancho de la propia tarjeta— para reproducir el
   mismo alto que da `aspect-ratio: 4/5` topado en 420px, que es lo que la
   miniatura mediría si el flex no la comprimiera. Medido en prod: 438×420 en
   escritorio y 227×283 (4:5 exacto) en móvil, idéntico en vídeo y en mixto. */
.feed-card--compact { container-type: inline-size; }
.feed-card--compact .feed-thumb { flex: 0 0 auto; min-height: min(420px, 125cqw); }
.feed-card--compact .feed-body {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.feed-card--compact .feed-resumen {
  flex: 1 1 auto; min-height: 0; overflow: hidden; overscroll-behavior: contain;
}
/* Los chips de tema y los botones no se comprimen para dejar sitio al texto. */
.feed-card--compact .feed-tags,
.feed-card--compact .feed-cta-row { flex: 0 0 auto; }
.ref-pubs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 20px;
  line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; }
.ref-pubs-arrow.prev { left: 8px; }
.ref-pubs-arrow.next { right: 8px; }
@media (hover: hover) { .ref-pubs-carousel:hover .ref-pubs-arrow { display: flex; } }
/* En los extremos no hay a dónde ir: se oculta ‹ en la primera publicación y › en
   la última (la clase la pone referente.html según el scroll). !important para
   ganar a la regla de :hover de arriba. */
.ref-pubs-arrow--oculta { display: none !important; }
/* Productos. */
.ref-prod-list, .ref-acred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ref-prod-item { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ref-prod-item:last-child, .ref-acred-item:last-child { border-bottom: none; padding-bottom: 0; }
.ref-prod-nombre { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.ref-prod-nombre:hover { color: var(--primary); }
.ref-prod-frase { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.ref-prod-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; }
/* Acreditaciones. */
.ref-acred-item { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ref-acred-titulo { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ref-acred-sub { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.ref-acred-sub a { color: var(--primary); text-decoration: none; }
.ref-acred-sub a:hover { text-decoration: underline; }
/* Secciones nuevas (próximamente). */
.ref-soon h2 { opacity: 0.7; }
.ref-soon-note { font-size: 13px; color: var(--ink-mute); font-style: italic; margin: 0;
  display: inline-block; padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); }

/* ── Entradas de sección (unificadas) + editor ───────────────────────── */
.ref-entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ref-entry { display: flex; align-items: flex-start; gap: 8px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ref-entry:last-child { border-bottom: none; padding-bottom: 0; }
.ref-entry-body { flex: 1; min-width: 0; }
.ref-entry-head { font-weight: 600; font-size: 15px; color: var(--ink); }
.ref-entry-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.ref-entry-ctrls { display: flex; gap: 4px; flex-shrink: 0; order: 2; }
.ref-entry-btn, .ref-avatar-edit {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 13px;
  display: grid; place-items: center; padding: 0; line-height: 1;
}
.ref-entry-btn:hover, .ref-avatar-edit:hover { border-color: var(--primary); color: var(--primary); }
.ref-add-btn {
  margin-top: 14px; background: transparent; color: var(--primary);
  border: 1px dashed var(--primary); border-radius: var(--r-pill);
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--sans);
}
.ref-add-btn:hover { background: var(--bg); }
.ref-avatar { position: relative; }
.ref-avatar-edit { position: absolute; right: 2px; bottom: 2px; box-shadow: var(--shadow-md); }
/* Modal del formulario de entrada. */
.ref-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.ref-modal[hidden] { display: none; }
.ref-modal-box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; }
.ref-form { padding: 22px 24px; }
.ref-form h3 { font-family: var(--display); font-size: 18px; margin: 0 0 16px; color: var(--ink); }
.ref-form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }
.ref-form-input { display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--sans);
  font-size: 14px; color: var(--ink); background: var(--bg); box-sizing: border-box; }
.ref-form-input:focus { outline: none; border-color: var(--primary); }
.ref-form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* F-056: sin cursor de mano — el cuerpo de la tarjeta no responde al clic
   (F-038 C le quitó el role="button"/tabindex). Lo clicable de dentro trae su
   propio cursor: los <button>/<a> por la regla global de `button`, y el resto
   (.feed-tag--clickable, .caption-hash, .feed-thumb-play, .ig-dot…) por regla
   propia. En app.html/espacio.html la tarjeta SÍ es un <button> con handler,
   pero ahí la mano se la da esa misma regla global, no esta.
   text-align/width/font-family se quedan: son los resets de esos <button>. */
.feed-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--t-base);
  text-align: left;
  width: 100%;
  font-family: inherit;
}
/* Flash de "te he llevado aquí" — se aplica brevemente cuando llegamos
   al feed con ?pid=X desde un preview de publicación en el chat. */
@keyframes feed-card-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 107, .50); border-color: var(--primary); }
  60%  { box-shadow: 0 0 0 8px rgba(255, 107, 107, .12); border-color: var(--primary); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);    border-color: var(--line); }
}
.feed-card-flash {
  animation: feed-card-flash-anim 1.6s ease-out;
}
.feed-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Cap de altura: evita thumbnails kilométricas en pantallas anchas */
  max-height: 420px;
  background: linear-gradient(135deg, var(--primary-bg), var(--surface-2));
  overflow: hidden;
  display: block;
}

/* ── UNA COLUMNA, el mismo ancho para todas — Inicio y los dos perfiles ──
   El Inicio (`.feed-grid--inicio`) y las dos rejillas de perfil en formato de 1
   columna (`.feed-grid--perfil`) enseñan la publicación ENTERA de una pantalla:
   la media, el pie y los botones, sin cortes.

   [2026-09-17] Quien decide el ancho es la proporción MÁS ALTA que puede traer
   una publicación (9:16, un reel), no la de cada una: con un ancho por tarjeta,
   una 4:5 salía mucho más ancha que el reel de al lado y la columna bailaba.
   Con un ancho único, la media llena su tarjeta de borde a borde (eso es lo que
   quita las franjas grises) y el alto sale de ESE ancho, así que ninguna
   proporción se deforma ni se recorta: la 9:16 llena la pantalla justa y las más
   anchas ocupan menos, dejando asomar el arranque de la siguiente —que es lo que
   cuenta que esto es un feed.

   Y la referencia es LA MEDIA, no la tarjeta: un vertical ocupa la pantalla
   ENTERA y el pie —caption y botones— cae por debajo del pliegue. Antes se le
   reservaban 190 px al pie y el vídeo se quedaba pequeño para dejarlo ver;
   manda lo que se ve, que es el vídeo. Por eso lo único que se descuenta es el
   hueco de la rejilla (y en móvil la bottom-nav, que tapa el final del
   viewport). Tampoco hay ya `min-height` de pantalla en la tarjeta: forzarlo
   dejaba un pie vacío gigante bajo una 4:5.

   El mosaico 3-up queda FUERA: ahí manda la baldosa. */
.feed-grid--inicio,
.feed-grid--perfil:not([data-density="3"]) {
  --feed-ar-max: 0.5625;   /* 9:16 — la proporción que peor cabe */
}
.feed-grid--inicio .feed-card,
.feed-grid--perfil:not([data-density="3"]) .feed-card {
  width: min(100%, calc((100dvh - 24px) * var(--feed-ar-max)));
  margin-inline: auto;
}
@media (max-width: 720px) {
  /* 70px de bottom-nav + el hueco de la rejilla (16px en móvil): lo que tapa la
     barra no es pantalla útil. */
  .feed-grid--inicio .feed-card,
  .feed-grid--perfil:not([data-density="3"]) .feed-card {
    width: min(100%, calc((100dvh - 86px) * var(--feed-ar-max)));
  }
}
/* Un post de SOLO TEXTO no tiene media, pero sí un suelo de alto (abajo): el
   cuerpo se lo queda entero. */
.feed-grid--perfil .feed-card .feed-body,
.feed-grid--inicio .feed-card .feed-body {
  flex: 1 1 auto;
}
/* Un post de SOLO TEXTO no tiene media que estirar: se le da el mismo cuerpo de
   pantalla para que la lectura no salte entre tarjetas altas y tarjetas de tres
   líneas (y NO el pantallazo completo, que sería un mar de blanco). */
.feed-grid--perfil .feed-card--solo-texto,
.feed-grid--inicio .feed-card--solo-texto {
  min-height: 62vh;
}
/* [Paridad apps] …salvo donde manda la caja 4:5 que crece (ver .feed-cinta). */
#feed-grid:not([data-density="3"]).feed-grid--inicio .feed-card--solo-texto,
#feed-grid:not([data-density="3"]).feed-grid--perfil .feed-card--solo-texto,
#mis-pubs:not([data-density="3"]).feed-grid--perfil .feed-card--solo-texto { min-height: 0; }
/* En el mosaico manda la baldosa: ni techo de ventana ni alto mínimo. */
[data-serclai-mosaic][data-density="3"].feed-grid--perfil .feed-thumb {
  flex: 0 0 auto;
  max-height: none;
}
[data-serclai-mosaic][data-density="3"].feed-grid--perfil .feed-card--solo-texto {
  min-height: 0;
}
.feed-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
  /* Mejor calidad de render — evita el blurring agresivo del browser
     cuando escala el video. Usa el algoritmo más nítido disponible. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Carrusel IG estilo Instagram — scroll horizontal con snap.
   Las flechas izq/der navegan entre imágenes/videos del post. */
.ig-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.ig-carousel-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* F-038 (D): sin cursor "manito" (grab/grabbing). Se navega con las flechas
     ‹ › / los puntos (web) o deslizando (móvil); el arrastre con ratón sigue
     funcionando pero con el cursor normal. */
  width: 100%;
  height: 100%;
  /* Soporte para iOS Safari (touch fluido) */
  -webkit-overflow-scrolling: touch;
  /* Evitamos que el navegador secuestre el gesto horizontal */
  overscroll-behavior-x: contain;
  /* Evita selección de texto durante el drag con ratón */
  user-select: none;
  -webkit-user-select: none;
}
.ig-carousel-track::-webkit-scrollbar { display: none; }
.ig-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  max-height: 80vh;
}
.ig-slide img,
.ig-slide video {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  pointer-events: none; /* el drag se procesa en el track, no en la img */
}

/* Carrusel embebido en el feed: ocupa el feed-thumb,
   sin mín de 60vh para no romper el aspect ratio de la card. */
.feed-thumb .ig-carousel,
.feed-ig-carousel {
  height: 100%;
}
.feed-ig-carousel .ig-slide {
  min-height: 0;
  max-height: 100%;
  height: 100%;
}
.feed-ig-carousel .ig-slide img,
.feed-ig-carousel .ig-slide video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover; /* rellena la caja uniforme, sin bandas laterales (como iOS/Android) */
  background: #000;
}
/* Flechas en el feed: más pequeñas, solo en hover de la card */
.feed-ig-carousel .ig-carousel-nav {
  width: 28px;
  height: 28px;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, background var(--t-fast), transform var(--t-fast);
}
.feed-card:hover .feed-ig-carousel .ig-carousel-nav {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .feed-ig-carousel .ig-carousel-nav {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Contador "N/M" del carrusel. En el modal va en top-right (estilo
   IG), pero en el feed lo movemos a top-LEFT para no solaparnos con
   el icono de origen IG (que vive en top-right por defecto). */
.ig-carousel-count {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(31, 30, 29, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
}
/* El contador del carrusel va al TOP-LEFT del thumb, justo donde antes iba el
   badge de tipo (que se ha quitado): es el indicador de página "actual/total".
   No choca con el icono de origen IG (top-right), la fecha (bottom-left) ni el
   mute (bottom-right). */
.feed-thumb .ig-carousel-count,
.feed-ig-carousel .ig-carousel-count {
  right: auto;
  left: 12px;
  transform: none;
  top: 12px;
}
/* El carrusel del feed nunca lleva botón mute (ig_carousel no es video
   directo), así que el count puede quedarse en 12px right. */
.ig-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1f1e1d;
  border: 0;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ig-carousel-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.ig-carousel-nav.prev { left: 12px; }
.ig-carousel-nav.next { right: 12px; }
.ig-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.ig-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--t-fast);
}
.ig-dot.active { background: #fff; }
.ig-dot:hover { background: rgba(255, 255, 255, 0.8); }
/* Videos horizontales (YouTube, MP4) → 16:9. (P-011 retiró la regla gemela
   [data-tipo="reel"] 9:16: un reel ahora es data-tipo="video"; en los 3 feeds
   reales el marco uniforme #feed-grid/#mis-pubs de abajo fuerza 9:16 con más
   especificidad, así que los reels siguen viéndose verticales sin esa regla.) */
.feed-card[data-tipo="video"] .feed-thumb {
  aspect-ratio: 16 / 9;
}

/* ── Feeds de publicaciones — la MEDIA manda, como en iOS ───────────────────
   En el feed de inicio (#feed-grid de index.html), el perfil público del líder
   (#feed-grid de lider.html) y el perfil propio (#mis-pubs de lider-perfil.html),
   la caja de media ABRAZA su contenido en vez de imponer un marco uniforme:
   antes el marco era 9:16 con object-fit:contain y bandas negras, y al crecer
   la tarjeta a pantalla completa la media quedaba flotando en un mar negro.
   Ahora la proporción REAL de la media (`--media-ar`, que escribe
   serclai-pubcard.js al cargar la imagen/vídeo) define la caja. El mosaico 3-up
   queda FUERA (`:not([data-density="3"])`): ahí manda la baldosa. NO afecta a
   previews de contenido en la app, comunidad ni espacio, que conservan su marco
   original.

   [2026-09-17] La media va SIEMPRE de borde a borde de la tarjeta. Antes el
   ancho salía del ALTO de la ventana (`(100dvh - 190px) * --media-ar`, centrado)
   para que un post entrara de una pantalla: en cuanto la ventana era más baja
   que lo que pedía la proporción —un 4:5 en una ventana de 820px, cualquier
   vertical— la caja se estrechaba y aparecían franjas del color de la tarjeta a
   los dos lados. Es el mismo fallo que iOS cerró en BC-12/BC-13: un cuadro que
   no cabe de alto sacrifica ANCHO, y la banda no es del contenido sino del
   cuadro, que no llega al borde. En las apps la lista no acota el alto y la
   media llena el ancho siempre; aquí ya no lo acota tampoco: el ancho es el de
   la tarjeta y el alto sale de la proporción. Que la publicación quepa entera en
   una pantalla lo resuelve el ANCHO de la columna (arriba), no un tope aquí. */
#feed-grid:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text),
#mis-pubs:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text) {
  /* La proporción la hereda de la tarjeta (ahí la escribe serclai-pubcard.js);
     el 4:5 de reserva es para la media que nunca la reporta — un audio sin
     portada— y para el rato que va de pintar la tarjeta a cargar la media. */
  aspect-ratio: var(--media-ar, 0.8);
  width: 100%;
  height: auto;
  max-height: none;
}
/* La caja ya mide lo que la media: cover y contain son equivalentes (salvo
   redondeos) y cover evita el ribete de 1px del letterbox residual. */
#feed-grid:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text) img,
#mis-pubs:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text) img {
  object-fit: cover;
}
.feed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
  transition: transform var(--t-slow);
}
/* Quitamos el hover-zoom: con object-fit:contain el scale(1.04) se ve
   raro sobre las bandas negras, además el usuario pidió "no zoom". */
.feed-card:hover .feed-thumb img { transform: none; }

.feed-thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(31,30,29,0) 30%, rgba(31,30,29,0.45) 100%);
  transition: background var(--t-base);
  /* F-056: es un <div> y SÍ se clica (reproduce inline en el Inicio). Antes
     heredaba la mano de .feed-card; al quitarla de ahí, la necesita propia. */
  cursor: pointer;
}
.feed-card:hover .feed-thumb-play {
  background: linear-gradient(180deg, rgba(31,30,29,0.1) 0%, rgba(31,30,29,0.55) 100%);
}
.feed-thumb-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgba(31,30,29,0.3);
  transition: transform var(--t-base);
  pointer-events: none;
}
.feed-card:hover .feed-thumb-play-btn {
  transform: scale(1.08);
  background: white;
}
.feed-thumb-play-btn svg {
  color: var(--ink);
  margin-left: 3px;
}

.feed-thumb-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Pack K-29: previews nativos en el feed.
   - .feed-thumb-video → <video> que muestra el primer frame
     como poster automático (preload=metadata) y se reproduce al
     entrar en viewport (auto-play en bucle, muted).
   - .feed-thumb-audio → cover stylizado para audios cuando el
     líder no ha subido portada — icono grande sobre gradient.
   - .feed-thumb-audio-el → reproductor de audio que se inyecta
     cuando el usuario clickea la card de audio (anclado al pie
     del thumb, sin tapar el cover de fondo). */
.feed-thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.feed-thumb-audio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-bg), var(--surface-2));
}
/* P-058: el icono de audio (🎙/auriculares) se retiró de los audios con
   <audio> real — solo la onda reactiva marca ese hueco. P-093: el placeholder
   del embed de Spotify (.feed-thumb-audio-spotify / .feed-thumb-audio-icon),
   su último usuario, se retiró con el render de externas del feed. */
.feed-thumb-audio-el {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  width: calc(100% - 24px);
  z-index: 3;
}
/* Cuando la card está reproduciendo video, el play-overlay debe
   ocultarse para no tapar la imagen reproducida. */
.feed-card.playing .feed-thumb-play { opacity: 0; pointer-events: none; }

.feed-thumb-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(31, 30, 29, 0.82);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.feed-thumb-tag.ejercicio {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--danger);
  border: 1px solid rgba(var(--primary-rgb), 0.45);
}

/* Pack I: badge "Pendiente / En curso / Hecho" en cards de ejercicio. */
.feed-thumb-ej-state {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.feed-thumb-ej-state.pendiente {
  background: rgba(31, 30, 29, 0.72);
  color: #fff;
}
.feed-thumb-ej-state.en-curso {
  background: rgba(var(--primary-rgb), 0.92);
  color: #fff;
}
.feed-thumb-ej-state.hecho {
  background: rgba(var(--primary-rgb), 0.92);
  color: #fff;
}
.feed-card.ejercicio {
  border: 1px solid rgba(var(--primary-rgb), 0.22);
}

/* P-065: .feed-thumb-duration retirado (badge de la esquina). */

/* Fecha de publicación — esquina inferior izquierda del thumb. */
.feed-thumb-fecha {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(31, 30, 29, 0.78);
  color: white;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  z-index: 2;
  transition: opacity .18s;
}

/* Cuando aparece la barra de controles del vídeo (hover en desktop o
   vídeo en pausa en móvil), el badge de fecha (abajo-izq) y el de
   duración (abajo-der) se solapan con el tiempo de reproducción y los
   botones de la .vc-bar. Los ocultamos solo en esos estados para que no
   se superpongan los textos; mientras el vídeo reproduce (barra oculta)
   los badges siguen visibles con normalidad. */
/* [P-135] Acotado a un vídeo SUELTO (`.vc-wrap` HIJO DIRECTO del thumb). Antes
   era descendente (`:has(.vc-wrap…)`) y en un MIXTO (carrusel con un slide de
   vídeo, cuyo `.vc-wrap` está anidado en `.ig-slide`) ocultaba la fecha aunque la
   barra de controles no estuviera sobre ella → la fecha del Mixto "no se veía". */
.feed-thumb:has(> .vc-wrap):hover .feed-thumb-fecha,
.feed-thumb:has(> .vc-wrap.vc-paused) .feed-thumb-fecha {
  opacity: 0;
  pointer-events: none;
}

/* [P-135 · P-158] Fecha en publicaciones de SOLO TEXTO: como no hay thumb (está
   display:none), la fecha vive como hijo directo de la tarjeta. [P-158] va
   arriba-DERECHA, junto al menú ⋮ (que está en top:10px/right:10px, ~30px de
   ancho) → la anclamos a su izquierda con right:46px. Antes estaba arriba-izq,
   encima del autor, y necesitaba empujar el cuerpo hacia abajo; ya no. */
.feed-card--solo-texto > .feed-fecha-texto {
  position: absolute;
  top: 14px;
  right: 46px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(31, 30, 29, 0.06);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Botón mute/unmute estilo Instagram. Lo ponemos en la esquina
   INFERIOR derecha del thumb (no la superior) para no solapar con
   el icono de origen (IG / YouTube / Spotify) que ya vive en
   top-right. Igual que en la app oficial de IG. Click → toggle
   audio del video sin abrir el modal. */
.feed-thumb-mute {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 30, 29, 0.72);
  color: white;
  border: 0;
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 3;
  transition: transform .12s ease, background .12s ease;
  padding: 0;
}
.feed-thumb-mute:hover {
  background: rgba(31, 30, 29, 0.92);
  transform: scale(1.08);
}
.feed-thumb-mute:active {
  transform: scale(0.94);
}
.feed-thumb-mute svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ── [Paridad apps 24/09] Cinta de identidad ARRIBA de la tarjeta ─────────────
   La monta serclai-pubcard.js (layoutCard) moviendo el `.feed-lider` de las cuatro
   plantillas. Medidas de iOS (PublicationCard `identityRibbon`): avatar 34, nombre
   14 semibold, especialidad 11 DEBAJO; 12 arriba, 10 abajo; ⋯ al extremo derecho. */
.feed-cinta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 10px;
  min-width: 0;
}
.feed-cinta > .feed-lider { flex: 1 1 auto; min-width: 0; }
.feed-cinta .feed-lider-avatar { width: 34px; height: 34px; }
.feed-cinta .feed-lider-info { line-height: 1.25; }
.feed-cinta .feed-lider-name { font-size: 14px; }
.feed-cinta .feed-lider-spec { font-size: 11px; color: var(--ink-soft); }
/* El ⋯ de la cinta: tinta plena, sin círculo oscuro (el de sobre la media sí lo
   lleva porque va encima de una foto). Abre hacia abajo, sobre la media. */
.feed-cinta > .vc-cellmenu { position: relative; inset: auto; flex: 0 0 auto; }
.feed-cinta > .vc-cellmenu .vc-cellmore {
  background: transparent; color: var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  width: 32px; height: 32px; font-size: 20px;
}
.feed-cinta > .vc-cellmenu .vc-cellmore:hover { background: transparent; }
.feed-cinta > .vc-cellmenu .vc-menu { top: calc(100% + 4px); bottom: auto; right: 0; left: auto; }
/* Texto-solo: la fecha va en la cinta, a la izquierda del ⋯. */
.feed-card--solo-texto > .feed-fecha-texto { top: 21px; }
/* VÍDEO: la identidad va SOBRE el cuadro, arriba-izquierda, sin fondo y en crema
   con sombra (iOS `identityOverlay`: avatar 30, nombre 13). No ocupa todo el ancho
   para que el resto del cuadro siga recibiendo el toque de play/pausa. */
.feed-cinta--sobre {
  position: absolute;
  top: 0; left: 0;
  max-width: calc(100% - 60px);
  z-index: 7;
  padding: 8px 10px;
  pointer-events: none;
}
.feed-cinta--sobre > .feed-lider { pointer-events: auto; }
.feed-cinta--sobre .feed-lider-avatar { width: 30px; height: 30px; }
.feed-cinta--sobre .feed-lider-name { font-size: 13px; color: #F5F1EB; }
.feed-cinta--sobre .feed-lider-spec { color: rgba(245, 241, 235, 0.85); }
.feed-cinta--sobre .feed-lider-name,
.feed-cinta--sobre .feed-lider-spec { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
/* Mosaico 3-up: la baldosa es solo la portada. */
[data-serclai-mosaic][data-density="3"] .feed-cinta { display: none !important; }

/* [Paridad apps] Cuadro de proporción DECLARADA (data-ar-fijo, ver pubcard): la
   media va ENTERA dentro del cuadro y lo que sobra, en negro (iOS
   `mediaContainsInBox`). El audio llena el suyo (su portada de onda). */
#feed-grid:not([data-density="3"]) .feed-thumb[data-ar-fijo="1"],
#mis-pubs:not([data-density="3"]) .feed-thumb[data-ar-fijo="1"] { background: #000; }
#feed-grid:not([data-density="3"]) .feed-thumb[data-ar-fijo="1"] > img,
#mis-pubs:not([data-density="3"]) .feed-thumb[data-ar-fijo="1"] > img { object-fit: contain; }
/* Texto-solo: caja MÍNIMA 4:5 que crece con el texto (iOS `textBoxFloorAspect`);
   sustituye al suelo de 62vh, que en escritorio dejaba un mar vacío. */
#feed-grid:not([data-density="3"]) .feed-card--solo-texto,
#mis-pubs:not([data-density="3"]) .feed-card--solo-texto { container-type: inline-size; }
#feed-grid:not([data-density="3"]) .feed-card--solo-texto > .feed-body,
#mis-pubs:not([data-density="3"]) .feed-card--solo-texto > .feed-body {
  min-height: calc(125cqw - 56px);
}

.feed-body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.feed-lider {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: opacity .15s;
}
a.feed-lider:hover { opacity: .85; }
a.feed-lider:hover .feed-lider-name { text-decoration: underline; text-underline-offset: 2px; }
a.feed-lider:hover .feed-lider-avatar { box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Bloque autor en el modal de detalle de publicación */
a.md-lider-link { transition: opacity .15s; }
a.md-lider-link:hover { opacity: .85; }
a.md-lider-link:hover .md-lider-nombre { text-decoration: underline; text-underline-offset: 2px; }
a.md-lider-link:hover .md-lider-av { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.feed-lider-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-bg);
  flex-shrink: 0;
  object-fit: cover;
}
.feed-lider-info {
  font-size: 12px;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.feed-lider-name {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-lider-spec {
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-resumen {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.feed-resumen.expanded {
  -webkit-line-clamp: unset;
  display: block;
  max-height: none;
  overflow: visible;
}
/* Botón "… más" / "… menos" estilo Instagram: discreto, en gris,
   inline justo después del texto truncado. Sin background, sin
   peso visual extra — parece un span del propio caption. */
.feed-resumen-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.5;
  vertical-align: baseline;
}
/* Inline con el texto — aparece justo después del último carácter */
.feed-resumen-toggle.is-needed { display: inline; }
.feed-resumen-toggle:hover { color: var(--ink); }

.feed-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  align-items: center;
}
/* Chip "+N más" cuando hay tags que no caben en 1 línea */
.feed-tag-more {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-mute);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* CTAs Dame más info / Contactar dentro de cada card */
.feed-cta-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.feed-cta-btn {
  flex: 1;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
/* ── Mensajes (dashboard líder y perfil cliente) ────────────── */
.msg-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.msg-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.msg-tab:hover { color: var(--ink); }
.msg-tab.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--primary);
}
.msg-count {
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
}
.msg-tab.active .msg-count { background: var(--primary); color: #fff; }
/* P-115: el globito de AVISOS usa el MISMO rojo que el del avatar
   (styles.css: badge del avatar), no el gris/navy de .msg-count. Por ID para
   ganar incluso a `.msg-tab.active .msg-count`. Aplica a usuario y líder. */
#cnt-notifs, #cnt-avisos-lider,
.msg-tab.active #cnt-notifs, .msg-tab.active #cnt-avisos-lider {
  background: linear-gradient(180deg, #FF4C4F 0%, #E5384D 100%);
  color: #fff;
}

.msg-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.msg-filter-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}
.msg-filter-btn:hover { background: var(--surface-2); }
.msg-filter-btn.active {
  background: var(--ink);
  color: var(--surface);  /* not #fff: --ink flips to cream in dark mode */
  border-color: var(--ink);
}

.msg-pill {
  font-size: 11px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.msg-pill.info { background: var(--primary-bg); color: var(--primary-hover); }
.msg-pill.contacto { background: #E8F4EC; color: #2D5F3F; }

/* Estado "Solicitud enviada" del botón Dame más info (legacy) */
.btn.sent,
.feed-cta-btn.sent {
  background: var(--surface-2) !important;
  color: var(--ink-mute) !important;
  border-color: var(--line) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.btn.sent::before,
.feed-cta-btn.sent::before {
  content: "✓ ";
  font-weight: 600;
}
/* Estado "Leer conversación": activo, en otro tono para distinguirlo */
.btn.convo,
.feed-cta-btn.convo {
  background: #E8F4EC !important;
  color: #2D5F3F !important;
  border-color: #7FA88E !important;
  cursor: pointer !important;
}
.btn.convo:hover,
.feed-cta-btn.convo:hover {
  background: #D5E9DC !important;
}
.btn.convo::before,
.feed-cta-btn.convo::before {
  content: "💬 ";
}
.btn.btn-sm { font-size: 13px; padding: 8px 14px; }
.feed-tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
/* F-052: etiqueta de tema clicable (es un <button>, resetea el look nativo y
   añade cursor + hover). */
.feed-tag--clickable {
  border: 1px solid transparent;
  font-family: inherit;
  line-height: normal;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.feed-tag--clickable:hover { background: var(--primary-bg); color: var(--primary-hover); }

.feed-empty {
  grid-column: 1 / -1;
  padding: 80px 24px;
  text-align: center;
  color: var(--ink-mute);
}
.feed-empty h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.feed-skeleton {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.feed-skeleton .sk-thumb {
  aspect-ratio: 4 / 3;
  background: linear-gradient(90deg, var(--surface-2), var(--bg), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.feed-skeleton .sk-body { padding: 18px 20px; }
.feed-skeleton .sk-line {
  height: 12px;
  background: linear-gradient(90deg, var(--surface-2), var(--bg), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}
.feed-skeleton .sk-line.short { width: 50%; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modal de detalle (cuando la URL es null) */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 30, 29, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  animation: fadeIn 200ms ease;
}
.modal-backdrop.open { display: flex; }
/* Bloqueo de scroll del fondo mientras hay un modal abierto: antes, al hacer
   scroll sobre el modal (o su zona de backdrop), se movía la página de detrás.
   :has() ya se usa en este archivo; cubre TODOS los .modal-backdrop de la
   plataforma sin tocar cada apertura. overscroll-behavior evita el encadenado
   al llegar al final del scroll interno de la tarjeta. */
:root:has(.modal-backdrop.open) { overflow: hidden; }
.modal-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  /* Antes 580px (estrecho). Ahora 720px para que los carruseles
     portrait 4:5 y los vídeos 9:16 tengan espacio suficiente para
     verse sin recortar arriba/abajo. En mobile sigue siendo 100%. */
  max-width: 720px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  animation: slideUp 280ms ease;
}
.modal-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  object-fit: cover;
  display: block;
}
/* Previsualización grande de la imagen de perfil antes de subirla.
   Aditivo (no toca el avatar en sí): marco circular amplio que se
   muestra en un modal al seleccionar una imagen nueva. */
.avatar-preview-frame {
  width: clamp(200px, 64vw, 300px);
  height: clamp(200px, 64vw, 300px);
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 3px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.avatar-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Visor de imágenes de perfil (imagen-zoom.js): clicar un avatar marcado con
   data-imagen-zoom lo amplía en un lightbox. */
[data-imagen-zoom] { cursor: zoom-in; }
.fz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 30, 29, 0.82);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1600; /* sobre modales (200) y overlays de captura (1500) */
  padding: 28px;
  cursor: zoom-out;
  overflow: auto; /* imagen grande + ficha pueden exceder el alto en portátiles */
  animation: fadeIn 160ms ease;
}
.fz-overlay.open { display: flex; }
.fz-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: min(94vw, 940px);
  animation: slideUp 220ms ease;
}
.fz-img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}
/* Mini-ficha de persona bajo la imagen (comunidades): nombre → perfil + info */
.fz-card {
  margin-top: -14px; /* solapa ligeramente la imagen, estilo tarjeta */
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 22px 13px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: 92%;
  cursor: default;
}
.fz-nombre {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
}
a.fz-nombre-link { cursor: pointer; }
a.fz-nombre-link:hover { color: var(--primary); text-decoration: underline; }
.fz-info {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.fz-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #1f1e1d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fz-close:hover { background: #fff; }
.modal-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.modal-media:empty { display: none; }
.modal-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Pack K-29: medios en el detalle del modal.
   - .modal-video → <video> nativo a aspect 16/9, controles.
   - .modal-audio-wrap → cover grande + reproductor en pie.
   - .modal-thumb usado para `imagen` (imagen completa). */
.modal-video {
  width: 100%;
  max-height: 80vh;
  background: #000;
  object-fit: contain;
  display: block;
}
/* Cuando el modal-media contiene un <video>, dejamos que el ratio lo
   decida el video real (portrait para vídeos 9:16, landscape para clips
   normales). Sin imposiciones de aspect-ratio. */
.modal-media:has(> .modal-video),
.modal-media:has(> .modal-media-wrap > .modal-video) {
  aspect-ratio: auto;
  height: auto;
  max-height: 82vh;
  background: #000;
  display: block;
}
/* Fallback shown in place of a native <video> whose source failed to load
   or decode (see the error listener in web/espacio.html openModal). */
.modal-media-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 28px 20px;
  text-align: center;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 14px;
}
.modal-media-error strong { color: var(--ink); font-size: 15px; }
.modal-media-error a {
  margin-top: 6px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.modal-audio-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  background: #1a1a1a;
}
.modal-audio-cover {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}
.modal-audio-cover-placeholder {
  background: linear-gradient(135deg, var(--primary-bg), var(--surface-2));
  display: grid; place-items: center;
}
.modal-audio-cover-placeholder span {
  font-size: 88px;
  opacity: 0.78;
}
.modal-audio-el {
  width: 100%;
  margin: 0;
  border-radius: 0;
}
/* En `imagen` queremos que la imagen NO se recorte a 16:9 —
   que se vea entera con padding negro a los lados si hace falta. */
.modal-media:has(> .modal-thumb) {
  aspect-ratio: auto;
  max-height: 78vh;
  background: #0a0a0a;
  display: grid;
  place-items: center;
}
/* Cuando el modal contiene un wrap (audio, carrusel, IG embed,
   etc.) NO queremos imponer aspect-ratio 16:9: dejamos que el
   contenido decida su altura (típicamente 78vh máximo). Esto evita
   que los carruseles portrait se vean recortados arriba/abajo. */
.modal-media:has(> .modal-media-wrap) {
  aspect-ratio: auto;
  max-height: 80vh;
  height: auto;
  background: #000;
  display: block;
  overflow: hidden;
}
/* Carrusel dentro del modal: que se ajuste al contenido (max 78vh)
   y que las imágenes se vean completas. */
.modal-media-wrap > .ig-carousel {
  height: 78vh;
  max-height: 78vh;
  background: #000;
}
/* Contador de slides en el modal: moverlo al fondo para no solaparse
   con el botón de cerrar (top-right) del modal-card. */
.modal-media-wrap .ig-carousel-count,
.modal-media .ig-carousel-count {
  top: auto;
  bottom: 14px;
  right: 14px;
}
.modal-media-wrap > .ig-carousel .ig-slide {
  min-height: 0;
  height: 78vh;
  max-height: 78vh;
}
.modal-media-wrap > .ig-carousel .ig-slide img,
.modal-media-wrap > .ig-carousel .ig-slide video {
  width: 100%;
  height: 100%;
  max-height: 78vh;
  object-fit: contain; /* IMPORTANTE: contain, no cover — imagen entera */
}
.modal-media:has(> .modal-thumb) .modal-thumb {
  width: 100%;
  height: auto;
  max-height: 78vh;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
}
.modal-body { padding: 32px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  /* La "×" (SVG stroke=currentColor) debe ser SIEMPRE oscura: el círculo es
     blanco fijo en ambos temas, pero --ink se vuelve claro en modo oscuro y
     dejaba la cruz casi invisible. Color fijo oscuro = contraste garantizado. */
  color: #1F2A38;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
  border: 1px solid var(--line);
  transition: all var(--t-fast);
}
.modal-close:hover { background: white; transform: scale(1.05); }

/* ── Modal detalle: split layout estilo Instagram ─────────────────────
   Solo #modal (detalle de publicación). Los demás modals no cambian.
   Desktop: media izq. fija | info/caption dcha. scrollable.
   Mobile ≤680px: stack vertical (media arriba, body abajo). ────────── */
#modal .modal-card {
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border-radius: 12px;
}

/* Panel izquierdo: media */
#modal .modal-media {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 90vh;
  max-height: 90vh;
  aspect-ratio: auto;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
}
#modal .modal-media:empty { display: none; }
/* Sin media → body ocupa todo el ancho */
#modal .modal-media:empty + .modal-body {
  flex: 1 1 auto;
  width: 100%;
  border-left: none;
}
/* Anular aspect-ratio/height del CSS base para todos los casos */
#modal .modal-media,
#modal .modal-media:has(> .modal-video),
#modal .modal-media:has(> .modal-media-wrap > .modal-video),
#modal .modal-media:has(> .modal-thumb),
#modal .modal-media:has(> .modal-media-wrap) {
  aspect-ratio: auto;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Wrap interior: llenar el panel */
#modal .modal-media .modal-media-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Imágenes y vídeos nativos: contain dentro del panel */
#modal .modal-media .modal-thumb,
#modal .modal-media .modal-video {
  max-height: 90vh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Carrusel IG: altura completa del panel */
#modal .modal-media .modal-media-wrap > .ig-carousel,
#modal .modal-media .modal-media-wrap > .ig-carousel .ig-slide {
  height: 90vh;
  max-height: 90vh;
}
#modal .modal-media .modal-media-wrap > .ig-carousel .ig-slide img,
#modal .modal-media .modal-media-wrap > .ig-carousel .ig-slide video {
  max-height: 90vh;
}
/* Contador de slides: fondo de panel */
#modal .modal-media .ig-carousel-count {
  top: auto;
  bottom: 14px;
  right: 14px;
}

/* Panel derecho: info + caption */
#modal .modal-body {
  flex: 0 0 360px;
  width: 360px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 56px 26px 28px; /* padding-top 56px deja espacio al botón ✕ */
  border-left: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
}
/* Título más pequeño en panel estrecho */
#modal .modal-body h2.serif {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* Móvil: contenedor del vídeo INLINE bajo la descripción (YouTube/Vimeo en
   16:9; vídeo nativo a su proporción con tope de altura). Igual idea que la
   previsualización inline del PDF. */
.modal-media-inline {
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.modal-media-inline iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.modal-media-inline video {
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  background: #000;
}

/* ── Mobile: stack vertical ── */
@media (max-width: 680px) {
  #modal .modal-card {
    flex-direction: column;
    max-height: 94vh;
    overflow-y: auto;
    border-radius: var(--r-xl);
  }
  #modal .modal-media,
  #modal .modal-media:has(> .modal-video),
  #modal .modal-media:has(> .modal-media-wrap > .modal-video),
  #modal .modal-media:has(> .modal-thumb),
  #modal .modal-media:has(> .modal-media-wrap) {
    height: auto;
    max-height: 55vh;
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  #modal .modal-media .modal-media-wrap > .ig-carousel,
  #modal .modal-media .modal-media-wrap > .ig-carousel .ig-slide {
    height: 55vh;
    max-height: 55vh;
  }
  #modal .modal-body {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    padding: 20px;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
  }
  #modal .modal-media:empty + .modal-body {
    width: 100%;
    border-top: none;
  }
  #modal .modal-body h2.serif {
    font-size: 24px;
  }
}

/* ── Visor de material de la «Vista previa del cliente» (app.html, #cp-media-modal) ──
   Cuando hay media (vídeo/imagen/audio/doc) + texto → split lado a lado
   (media a la izquierda, texto a la derecha con el formato del líder), igual que
   el espacio real del cliente. Sin media (solo texto) → columna a ancho completo. */
#cp-media-modal .modal-card.cpm-card { max-width: 900px; flex-direction: column; }
#cp-media-modal .modal-card.cpm-split { max-width: 1080px; flex-direction: row; }
#cp-media-modal .cpm-split #cpm-media {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 92vh;
  overflow: hidden;
}
#cp-media-modal .cpm-split #cpm-media > * { max-width: 100%; max-height: 92vh; }
#cp-media-modal .cpm-split #cpm-body {
  flex: 0 0 380px;
  width: 380px;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
  #cp-media-modal .modal-card.cpm-split { max-width: 900px; flex-direction: column; }
  #cp-media-modal .cpm-split #cpm-media { max-height: 60vh; }
  #cp-media-modal .cpm-split #cpm-body {
    flex: 0 0 auto;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Tabs (espacio cliente) */
.feed-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.feed-tab {
  padding: 12px 4px;
  margin-right: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--t-fast);
  cursor: pointer;
}
.feed-tab:hover { color: var(--ink-soft); }
.feed-tab.active {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

/* Header del espacio cliente */
.espacio-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255, 255, 255, 0.92);
}
.espacio-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.espacio-lider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.espacio-lider img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.espacio-lider-info { line-height: 1.25; }
.espacio-lider-name { font-weight: 600; font-size: 14px; }
.espacio-lider-spec { font-size: 12px; color: var(--ink-mute); }

/* Líder publish form (dashboard) */
.publish-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 24px;
}
.publish-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Grid de previews de imágenes en el modal "Nueva publicación"
   (cuando tipo=imagen y el líder ha seleccionado múltiples). Cada
   celda muestra la miniatura + crucecita para eliminar + estado
   de upload (subiendo / OK / error). */
#np-images-grid {
  display: none;
}
#np-images-grid.has-items {
  display: grid !important;
}
.np-img-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.np-img-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.np-img-tile .np-img-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  z-index: 2;
}
.np-img-tile .np-img-remove:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}
.np-img-tile .np-img-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  pointer-events: none;
}
.np-img-tile.uploaded .np-img-state { display: none; }
.np-img-tile.error .np-img-state { background: rgba(192, 47, 47, 0.85); }
.np-img-tile .np-img-order {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
/* Toggle de tema (claro / oscuro / sistema) en la pestaña Configuración */
.theme-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.theme-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button[aria-checked="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.theme-toggle button span:first-child {
  font-size: 14px;
  line-height: 1;
}

/* Indicador "▶" para tiles de video en el grid de previews */
.np-img-tile .np-img-vid {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
}
.tema-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tema-toggle {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-fast);
}
.tema-toggle:hover { border-color: var(--ink-soft); }
.tema-toggle.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
}

.visibility-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--bg);
}
.visibility-toggle button {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all var(--t-fast);
}
.visibility-toggle button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Lista de publicaciones del del (dashboard) */
.pub-row {
  display: flex;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  align-items: center;
  background: var(--surface);
}
.pub-row-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.pub-row-info { flex: 1; min-width: 0; }
.pub-row-title {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-row-meta {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  gap: 8px;
}
.pub-row-vis {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.pub-row-vis.publico { color: var(--success); }
.pub-row-vis.contenido { color: var(--primary); }

/* Clientes (#mis-clientes) en móvil: la fila no cabe en una sola línea
   (nombre + email + "Acceso a N producto" + Editar + Eliminar). El
   `.pub-row-info` se comprimía a 0px y un nombre largo se SOLAPABA con el
   texto de la derecha.
   Dejamos que la fila ENVUELVA: avatar + nombre + email ocupan la 1ª
   línea (info rellena el ancho restante tras el avatar) y los controles
   bajan a la 2ª. El `-100px` (avatar 80 + gap 16 + 4 de holgura) evita
   que el avatar caiga a su propia línea por redondeo. Scoped a
   `#mis-clientes` para no tocar el resto de `.pub-row` (listado de pubs). */
@media (max-width: 720px) {
  #mis-clientes .pub-row { flex-wrap: wrap; row-gap: 8px; }
  #mis-clientes .pub-row-info { flex-basis: calc(100% - 100px); }
}

/* Accesos del cliente: chips de los contenidos a los que tiene acceso. Cada
   chip salta al editor del contenido. Se renderizan dentro de `.pub-row-info`
   (bajo el email) y envuelven si hay varios. */
.cl-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cl-contenido-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--primary);
  background: var(--primary-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color var(--t-base), filter var(--t-base);
}
.cl-contenido-chip:hover {
  border-color: var(--primary);
  filter: brightness(0.98);
}
.cl-accesos-empty {
  font-size: 12px;
  color: var(--ink-mute);
}

/* ── Editor de contenido (dashboard lider) ─────────────────── */

.contenidos-list {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}
.contenidos-list-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--t-base);
  cursor: pointer;
}
.contenidos-list-row:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.contenidos-list-actions { flex-shrink: 0; margin-left: auto; }
.contenidos-list-portada {
  width: 80px; height: 50px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--primary-bg);
  flex-shrink: 0;
}
/* Contenidos activos: thumb cuadrado de 72px (misma altura que la card de
   Producto) para igualar el alto y dejar ver la imagen cuadrada completa. */
.contenidos-list-row .contenidos-list-portada { width: 72px; height: 72px; }
.contenidos-list-info { flex: 1; min-width: 0; }
.contenidos-list-titulo {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.contenidos-list-meta { font-size: 12px; color: var(--ink-mute); }
.contenidos-list-actions { display: flex; gap: 6px; align-items: center; }
.btn-archivar-contenido {
  background: none; border: 1px solid var(--line); color: var(--ink-mute);
  padding: 4px 11px; border-radius: 14px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .15s; flex-shrink: 0; white-space: nowrap;
}
.btn-archivar-contenido:hover { border-color: var(--primary); color: var(--primary); }

/* Sección "Archivados" colapsable bajo la lista de contenidos */
.contenidos-archived-section { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.contenidos-archived-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 4px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-mute); background: none; border: none;
  cursor: pointer; text-align: left; transition: color .15s;
}
.contenidos-archived-toggle:hover { color: var(--ink); }
.contenidos-archived-chev { transition: transform .2s; display: inline-flex; }
.contenidos-archived-section.is-open .contenidos-archived-chev { transform: rotate(90deg); }
.contenidos-archived-count {
  margin-left: auto; font-size: 11px; color: var(--ink-mute);
  background: var(--surface); padding: 1px 7px; border-radius: 10px; font-weight: 500;
}
.contenidos-archived-body { display: none; }
.contenidos-archived-section.is-open .contenidos-archived-body { display: grid; gap: 10px; padding: 8px 0 4px; }
.contenidos-archived-row {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  opacity: .65; transition: opacity .15s;
}
.contenidos-archived-row:hover { opacity: 1; }
.contenidos-archived-info { flex: 1; min-width: 0; }
.contenidos-archived-titulo { font-family: var(--serif); font-size: 15px; letter-spacing: -.01em; }
.contenidos-archived-meta { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.btn-desarchivar-contenido {
  background: none; border: 1px solid var(--line); color: var(--ink-mute);
  padding: 4px 11px; border-radius: 14px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .15s; flex-shrink: 0; white-space: nowrap;
}
.btn-desarchivar-contenido:hover { border-color: var(--primary); color: var(--primary); }

/* Editor de un contenido individual */
.contenido-editor-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.contenido-editor-portada {
  width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  object-fit: cover;
  display: block;
}
.ed-portada-wrap {
  position: relative;
  width: 120px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--primary-bg);
  cursor: pointer;
  overflow: hidden;
}
.ed-portada-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ed-portada-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.ed-portada-wrap:hover .ed-portada-overlay { opacity: 1; }
.ed-portada-btn {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  background: white;
  color: var(--ink);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.ed-portada-btn:hover { opacity: 0.85; }
.ed-portada-btn.danger { background: var(--danger); color: white; }
.ed-portada-wrap:not([data-has-img]) .ed-portada-btn.danger { display: none; }
.ed-portada-spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: var(--r-md);
}
.ed-portada-spinner.is-active { display: flex; }
.ed-portada-spinner::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: ed-portada-spin 0.8s linear infinite;
}
@keyframes ed-portada-spin { to { transform: rotate(360deg); } }
.contenido-editor-info { flex: 1; min-width: 0; }

/* Título del contenido en el editor: que parta por palabras (con guion si
   hace falta — lang="es"), NUNCA a mitad de palabra como hacía `word-break`
   (p.ej. "acompañamie|nto"). En móvil bajamos el tamaño y encogemos la
   portada para dar sitio al título y que apenas tenga que partir. */
#ed-titulo-display {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 560px) {
  .contenido-editor-header { gap: 14px; }
  .contenido-editor-header .ed-portada-wrap,
  .contenido-editor-header .contenido-editor-portada { width: 84px; }
  #ed-titulo-display { font-size: 20px !important; }
}

.modulo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.modulo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background var(--t-fast);
  user-select: none;
}
.modulo-head:hover { background: var(--surface-2); }
.modulo-head-orden {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--primary);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}
/* El título y la descripción ocupan SOLO su texto (flex-start), dejando el resto
   de la cabecera como zona clicable para expandir/contraer (el handler de
   .modulo-head ya alterna al pulsar fuera del texto/botones). */
.modulo-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.modulo-head-titulo {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
.modulo-head-desc {
  font-size: 12px;
  color: var(--ink-mute);
}
.modulo-head-titulo[contenteditable],
.modulo-head-desc[contenteditable] {
  cursor: text;
  outline: none;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
  user-select: text;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.modulo-head-titulo[contenteditable]:hover,
.modulo-head-desc[contenteditable]:hover { background: var(--surface-2); }
.modulo-head-titulo[contenteditable]:focus,
.modulo-head-desc[contenteditable]:focus {
  background: var(--surface-2);
  box-shadow: 0 0 0 2px rgba(220,80,60,0.18);
}
.modulo-head-desc[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-mute);
  opacity: 0.45;
  pointer-events: none;
  font-style: italic;
}
.modulo-head-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
/* Botón «Expandir/Contraer» del editor (sustituye al chevron). */
.expand-toggle { min-width: 84px; text-align: center; }

.modulo-body {
  display: none;
  padding: 4px 20px 20px;
  border-top: 1px solid var(--line);
}
.modulo-card.open .modulo-body { display: block; }

.modulo-pubs {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.modulo-pub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.modulo-pub-tag {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.modulo-pub-tag.ejercicio {
  background: var(--primary-bg);
  color: var(--primary-hover);
}
.modulo-pub-titulo {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: 500;
}
/* Pack I: cuando el título es clicable (botón de editar). */
.modulo-pub-titulo-edit {
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  font-size: inherit;
  font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.modulo-pub-titulo-edit:hover {
  background: var(--primary-bg, rgba(var(--primary-rgb), 0.08));
  color: var(--primary);
}
/* Mini-previsualización del material en cada fila del editor */
.modulo-pub-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-bg), var(--surface-2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.modulo-pub-thumb img,
.modulo-pub-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modulo-pub-thumb .mp-thumb-icon {
  font-size: 16px;
  opacity: 0.85;
}

/* Mini-"screenshot" de documentos/textos: las primeras líneas del cuerpo
   pintadas como una hoja, en vez del icono genérico. Fondo claro tipo papel
   (se lee como un documento real, también en tema oscuro). Se usa en el thumb
   del editor (variante .doc-preview-mini) y en la previsualización del
   cliente (.feed-thumb, tarjeta grande). */
.doc-preview {
  position: absolute;
  inset: 0;
  background: #faf8f4;
  color: #2b2b2b;
  text-align: left;
  overflow: hidden;
  display: block;
  padding: 16px 16px 0;
  box-sizing: border-box;
}
.doc-preview-text {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Inter', system-ui, sans-serif;
}
.doc-preview-mini {
  padding: 4px 5px 0;
  border-radius: 6px;
}
.doc-preview-mini .doc-preview-text {
  -webkit-line-clamp: 3;
  font-size: 7px;
  line-height: 1.45;
}
/* Miniatura de la 1ª página de un PDF (la inserta _fillPdfThumb). Hoja blanca
   anclada arriba, para que se vea el encabezado del documento. Rellena tanto
   el thumb del editor (.modulo-pub-thumb) como la tarjeta (.feed-thumb). */
.pdf-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  display: block;
  z-index: 1;
}
.modulo-pub-thumb .mp-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.btn-mini {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-mini:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn-mini.danger { color: var(--danger); }
.btn-mini.danger:hover { border-color: var(--danger); }
.btn-mini.coral { background: var(--primary); color: white; border-color: var(--primary); }
.btn-mini.coral:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.empty-mini {
  font-size: 12px;
  color: var(--ink-mute);
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}

/* Form inline para añadir item de contenido dentro de un módulo */
.add-contenidoitem-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--sans);
}
.add-contenidoitem-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
}
.add-contenidoitem-toggle .plus { font-size: 16px; line-height: 1; }

.add-contenidoitem-form {
  display: none;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 8px;
}
.add-contenidoitem-form.open { display: block; }

/* Campo "Resumen / Texto" con editor enriquecido (TinyMCE en modal).
   El <textarea> queda oculto (guarda el HTML). Se muestra SIEMPRE una vista
   previa del texto (con su formato, no editable) y, en la cabecera, un botón
   con lápiz que abre el editor. */
.rt-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.rt-field-head label { margin: 0; }
.rt-edit-pencil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.rt-edit-pencil:hover { border-color: var(--primary); color: var(--primary); }
.rt-edit-pencil svg { flex: 0 0 auto; }
.rt-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  min-height: 46px;
  max-height: 220px;
  overflow: auto;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.rt-preview:hover { border-color: var(--primary); }
.rt-preview.is-empty { color: var(--ink-mute); }
.rt-preview-ph { font-style: italic; }
.rt-preview > :first-child { margin-top: 0; }
.rt-preview > :last-child { margin-bottom: 0; }
.rt-preview blockquote { border-left: 3px solid var(--primary); margin: 0 0 0 8px; padding: 4px 12px; opacity: .85; }
.rt-preview a { color: var(--ink-soft); }  /* enlaces en «Azul Cósmico» #44556B (paleta Serclai), no coral */
/* Imágenes incrustadas en el texto (pegadas o subidas): responsive, sin desbordar. */
.rt-preview img, .espacio-rich img { max-width: 100%; height: auto; border-radius: 8px; }

/* Los diálogos y menús de TinyMCE se montan en .tox-tinymce-aux, adosado a
   <body> con z-index 1300 por defecto. El editor de "Resumen / Texto" abre en un
   modal (z-index 3000), así que el diálogo "Insertar/editar enlace" quedaba
   DETRÁS del modal y solo se veía al cerrarlo con "Listo". Lo subimos por encima
   de cualquier modal para que aparezca al pulsar el botón de enlace. */
.tox.tox-tinymce-aux,
.tox-tinymce-aux { z-index: 3200 !important; }

/* Texto enriquecido del líder renderizado en el espacio del cliente (y formularios). */
.espacio-rich > :first-child { margin-top: 0; }
.espacio-rich > :last-child { margin-bottom: 0; }
.espacio-rich p { margin: 0 0 .7em; }
.espacio-rich h2 { font-family: 'Sora', sans-serif; font-size: 20px; margin: 1.2em 0 .4em; }
.espacio-rich h3 { font-family: 'Sora', sans-serif; font-size: 17px; margin: 1em 0 .4em; }
.espacio-rich ul, .espacio-rich ol { margin: .5em 0; padding-left: 1.4em; }
.espacio-rich blockquote { border-left: 3px solid var(--primary); margin: .6em 0 .6em 4px; padding: 4px 14px; opacity: .85; }
.espacio-rich a { color: var(--ink-soft); }  /* enlaces en «Azul Cósmico» #44556B (paleta Serclai) */

.add-contenidoitem-tipos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.add-contenidoitem-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--sans);
}
.add-contenidoitem-tipo:hover { border-color: var(--ink-soft); color: var(--ink); }
.add-contenidoitem-tipo.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
}
.add-contenidoitem-tipo svg { flex-shrink: 0; }

.add-contenidoitem-form .field {
  margin-bottom: 10px;
}
.add-contenidoitem-form .field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.add-contenidoitem-form input,
.add-contenidoitem-form textarea {
  font-size: 13px;
  padding: 8px 12px;
}

.add-contenidoitem-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.add-contenidoitem-seccion {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--bg);
  font-size: 11px;
}
.add-contenidoitem-seccion button {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-weight: 600;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: all var(--t-fast);
}
.add-contenidoitem-seccion button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Sección dentro de un módulo (editor lider) */
.seccion-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 8px 0;
  overflow: hidden;
}
.seccion-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.seccion-head:hover { background: var(--surface-2); }
.seccion-head-orden {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.seccion-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.seccion-head-titulo {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.seccion-head-desc {
  font-size: 11px;
  color: var(--ink-mute);
}
.seccion-head-titulo[contenteditable],
.seccion-head-desc[contenteditable] {
  cursor: text;
  outline: none;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
  user-select: text;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.seccion-head-titulo[contenteditable]:hover,
.seccion-head-desc[contenteditable]:hover { background: var(--surface-2); }
.seccion-head-titulo[contenteditable]:focus,
.seccion-head-desc[contenteditable]:focus {
  background: var(--surface-2);
  box-shadow: 0 0 0 2px rgba(220,80,60,0.18);
}
.seccion-head-desc.seccion-desc-empty::before {
  content: attr(data-placeholder);
  color: var(--ink-mute);
  opacity: 0.45;
  pointer-events: none;
  font-style: italic;
}

/* ── Editor de contenido: cabeceras de módulo/sección en móvil ──────────
   Las acciones (sec·pubs, reordenar, eliminar, chevron) tienen
   flex-shrink:0 y la columna de info `min-width:0`. En pantallas estrechas
   las acciones no caben, así que la info se comprimía a ~0px y el título y
   la descripción editables se partían letra a letra (texto en vertical).
   Damos a la info un ancho mínimo legible y dejamos que las acciones bajen
   a una segunda línea SOLO cuando no caben (flex-wrap). En pantallas con
   sitio no cambia nada: la info crece y nunca toca su mínimo, así que no
   hay salto de línea. */
@media (max-width: 720px) {
  .modulo-head,
  .seccion-head {
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: flex-end;
  }
  .modulo-head-info,
  .seccion-head-info { min-width: 140px; }
}

.seccion-body {
  display: none;
  padding: 4px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.seccion-card.open .seccion-body { display: block; }

/* Pack I: agrupador Contenido/Ejercicios dentro de una sección. */
.seccion-grupo {
  margin-top: 10px;
}
.seccion-grupo:first-child {
  margin-top: 6px;
}
.seccion-grupo-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 4px 6px;
}
.seccion-grupo-head .muted {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.ej-respuestas-btn {
  font-size: 11px !important;
  padding: 4px 9px !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease;
}
.ej-respuestas-btn:hover {
  background: var(--bg) !important;
}

/* Pack K-10 v5: modal del editor de producto en FULL-SCREEN absoluto.
   El modal vive directamente como hijo de <body> (al final del HTML).
   Cuando se abre, ponemos body.modal-producto-open y el CSS oculta
   TODOS los demás hijos directos de body — el modal queda solo. */

#modal-editor-producto.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 24px !important;
  margin: 0 !important;
}
#modal-editor-producto.modal-backdrop:not(.open) { display: none !important; }
#modal-editor-producto.modal-backdrop.open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#modal-editor-producto .modal-card {
  max-width: min(1280px, 95vw) !important;
  width: 95vw !important;
  max-height: 92vh !important;
  height: 92vh !important;
  margin: 0 !important;
}

/* Cuando el modal está abierto, escondemos TODO lo demás del body
   (nav, app-shell, hub-view, etc.) excepto el propio modal y los
   <script>/<style>/<noscript>. Bloqueamos también el scroll del
   body. Esta regla es bulletproof: independiente del JS, depende
   solo de la clase del <body>.
   Exceptuamos también los overlays de diálogo (serclaiConfirm/Alert/
   Prompt) y el contenedor de toasts, que se montan en <body>: sin esto
   el confirm de "Quitar imagen" (y cualquier alert/toast) quedaría
   oculto tras el modal y el usuario nunca podría responderlo. */
body.modal-producto-open { overflow: hidden !important; }
body.modal-producto-open > *:not(#modal-editor-producto):not(.serclai-dialog-overlay):not(#serclai-toast-wrap):not(script):not(style):not(noscript):not(link) {
  display: none !important;
}

/* Pack K: tabs del editor de producto. */
.prod-tab {
  background: transparent; border: 0; padding: 14px 18px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink-mute);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.prod-tab:hover { color: var(--ink-soft); }
.prod-tab.active {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: 600;
}
.prod-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 20px;
  display: flex; gap: 16px; align-items: center; margin-bottom: 10px;
  transition: border-color .12s ease;
}
.prod-card:hover { border-color: rgba(var(--primary-rgb), 0.35); }
.prod-card-thumb {
  width: 96px; height: 72px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg); flex-shrink: 0;
  display: grid; place-items: center; color: var(--ink-mute);
}
.prod-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Badge de "editar imagen" sobre la miniatura del producto: se insinúa al
   pasar el ratón, el div de la miniatura ya lleva data-prod-action="img". */
.prod-card-thumb-edit {
  position: absolute; right: 4px; bottom: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55); color: #fff;
  opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.prod-card-thumb:hover .prod-card-thumb-edit { opacity: 1; }
.prod-card-info { flex: 1; min-width: 0; }
.prod-card-titulo { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.prod-card-meta { font-size: 12px; color: var(--ink-mute); }
.prod-card-precio { font-weight: 600; color: var(--primary); white-space: nowrap; }
.prod-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.prod-card-badge-draft {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: rgba(0,0,0,0.05); color: var(--ink-mute);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; margin-left: 8px;
}
.prod-card-badge-pub {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.12); color: var(--primary);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; margin-left: 8px;
}
.prod-card-badge-warn {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: rgba(234, 179, 8, 0.15); color: #92710a;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; margin-left: 8px; cursor: default;
}
html.theme-dark .prod-card-badge-warn { background: rgba(234,179,8,0.2); color: #fcd34d; }

.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Acordeón de módulos en espacio cliente ──────────────────── */
.espacio-modulo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.espacio-modulo-head {
  padding: 22px 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: background var(--t-fast);
  user-select: none;
}
.espacio-modulo-head:hover { background: var(--surface-2); }
.espacio-modulo-head-orden {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--primary);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  line-height: 1;
}
.espacio-modulo-head-info { flex: 1; }
.espacio-modulo-head-titulo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.espacio-modulo-head-meta {
  font-size: 13px;
  color: var(--ink-mute);
}
.espacio-modulo-chevron {
  color: var(--ink-mute);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.espacio-modulo.open .espacio-modulo-chevron { transform: rotate(180deg); }
.espacio-modulo-body {
  display: none;
  padding: 8px 26px 28px;
  border-top: 1px solid var(--line);
}
.espacio-modulo.open .espacio-modulo-body { display: block; }

/* Secciones dentro de un módulo (espacio cliente) */
.espacio-seccion {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.espacio-seccion-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.espacio-seccion-head:hover { background: var(--surface-2); }
.espacio-seccion-head-info { flex: 1; }
.espacio-seccion-head-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.espacio-seccion-head-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.espacio-seccion-chevron {
  color: var(--ink-mute);
  transition: transform .2s;
  flex-shrink: 0;
}
.espacio-seccion.open .espacio-seccion-chevron { transform: rotate(180deg); }
.espacio-seccion-body {
  display: none;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--line);
}
.espacio-seccion.open .espacio-seccion-body { display: block; }

/* ── Contenidos (espacio cliente) ───────────────────────────── */

/* P-070 (2): tarjetas ahora son filas horizontales (miniatura+título), no
   tiles verticales → una sola columna. */
.contenidos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px 0 40px;
}

/* P-070 (2): re-layout — miniatura del Contenido A LA IZQUIERDA del título
   (antes: banner superior a todo lo ancho). */
.contenido-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  text-align: left;
  width: 100%;
  font-family: inherit;
  display: block;
}
.contenido-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
/* Cabecera comprimida (siempre visible): miniatura + título + acciones. */
.contenido-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
/* Chevron › que despliega el panel de detalles en el sitio. */
.contenido-card-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: transform var(--t-fast, .15s), background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.contenido-card-toggle:hover { background: var(--surface-2); color: var(--ink); }
.contenido-card.open .contenido-card-toggle { transform: rotate(90deg); }
/* Panel de detalles: plegado por defecto, se abre con .open en la tarjeta. */
.contenido-card-details {
  display: none;
  padding: 0 16px 14px 94px; /* 16 + 64 miniatura + 14 gap = alineado con el título */
}
.contenido-card.open .contenido-card-details { display: block; }
.contenido-card-details .contenido-card-desc {
  -webkit-line-clamp: unset;
  display: block;
  margin-bottom: 2px;
}
.contenido-card-portada {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md, 10px);
  background: linear-gradient(135deg, var(--primary-bg) 0%, var(--surface-2) 100%);
  overflow: hidden;
}
.contenido-card-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* P-070 (3): control Archivar / Desarchivar siempre visible (antes solo al hover). */
.contenido-card-arch {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2, rgba(0,0,0,.06));
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  opacity: 1;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.contenido-card-arch:hover { background: var(--primary); color: #fff; }

/* Título de la página del espacio de un líder: SU NOMBRE (como la barra superior de las apps). */
.espacio-lider-titulo { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 0; }

/* ── Sección PRODUCTOS del espacio del cliente ─────────────────────────────
   Tarjeta por producto: nombre + botones Contenidos / Comunidades / Zoom. */
.productos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px 0 8px;
}
.producto-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.producto-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.producto-card-highlight {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.22);
}
.producto-card-head { display: flex; align-items: center; gap: 14px; }
/* Columna central (a la altura de la imagen): nombre arriba + botones debajo. El
   Archivar va fuera de esta columna, como último hijo de .producto-card-head, para
   quedar centrado verticalmente en el alto del chip. */
/* Alto = alto de la imagen (64px): nombre pegado arriba y botones pegados abajo, así la
   base de los botones queda alineada con la base de la imagen. */
.producto-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 64px; }
/* Sin botones (contenido sin comunidad) → el nombre se centra en el alto de la imagen. */
.producto-card-main.is-single { justify-content: center; }
.producto-card-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: var(--r-md, 10px); overflow: hidden;
  background: linear-gradient(135deg, var(--primary-bg) 0%, var(--surface-2) 100%);
}
.producto-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producto-card-title { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
/* Archivar el producto entero (esquina de la cabecera), estilo del de contenido. */
.producto-card-arch {
  flex-shrink: 0; padding: 5px 12px; border-radius: 999px;
  background: var(--surface-2, rgba(0,0,0,.06)); color: var(--ink-mute);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.producto-card-arch:hover { background: var(--primary); color: #fff; }
.producto-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.producto-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb), 0.30);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; font-family: inherit;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.producto-btn:hover { background: var(--primary); color: #fff; }
.producto-card[data-sin-destinos] { cursor: pointer; }  /* sin destinos: tocarla avisa con un toast */
/* Panel desplegable (lista de contenidos o de comunidades del producto). */
.producto-panel {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Selector de Contenidos del producto: filas apiladas (imagen + título + Archivar),
   estilo hub-cont-row. Alineadas al borde de contenido de la tarjeta. */
.producto-cont-list { flex-direction: column; gap: 0; padding-top: 4px; }
.producto-cont-list .hub-cont-row { padding-left: 0; padding-right: 0; }
/* Chip reutilizable (contenido del producto / comunidad vinculada). */
.espacio-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2, rgba(0,0,0,.04));
  color: var(--ink); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; font-family: inherit;
  transition: border-color var(--t-fast, .15s), background var(--t-fast, .15s);
}
.espacio-chip:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); }
/* Botón «Comunidades» en la tarjeta del contenido SUELTO. */
.contenido-card-comus-btn {
  flex-shrink: 0;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb), 0.30);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary); font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.contenido-card-comus-btn:hover { background: var(--primary); color: #fff; }
.contenido-card-comus {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 16px 14px;
}
/* P-070 (4): globito rojo con pendientes por completar.
   P-090: rojo REAL (mismo degradado que .nav-chip-badge), no var(--primary). */
.contenido-card-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF4C4F 0%, #E5384D 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.contenido-card-lider-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.contenido-card-lider-inline img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.contenido-card-lider-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: -0.01em;
}

.contenido-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contenido-card-titulo {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contenido-card-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contenido-progress-bar {
  margin-top: 10px;
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}
.contenido-progress-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width var(--t-base);
  border-radius: 2px;
}
.contenido-progress-text {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
  font-weight: 500;
}

.feed-card.completado::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--success);
  color: white;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.feed-card.completado { position: relative; }
.feed-card.completado .feed-thumb { opacity: 0.85; }

/* Breadcrumb / cabecera de contenido */
.contenido-header {
  margin: 24px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contenido-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  width: fit-content;
  transition: color var(--t-fast);
}
.contenido-back:hover { color: var(--ink); }
/* [Paridad apps 24/09] El chevron de «atrás» va en una diana redonda de 34 con la
   tinta al 6 % (ChatHeaderButton.swift). Aquí se conserva el rótulo al lado porque
   dice ADÓNDE vuelve («Mis espacios», «Volver a productos»). */
.contenido-back, .sidebar-back { color: var(--ink); gap: 10px; }
.contenido-back > svg:first-child, .sidebar-back > svg:first-child {
  box-sizing: content-box;
  width: 16px; height: 16px; padding: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  stroke-width: 2.4;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.contenido-back:hover > svg:first-child, .sidebar-back:hover > svg:first-child {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.sidebar-back:hover { background: transparent; }
.contenido-titulo {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.contenido-desc {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  /* Ancho completo del contenedor: mismo margen leading que trailing, texto justificado. */
  text-align: justify;
}
.contenido-section-title {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 32px 0 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   Rediseño «Mis contenidos» (UI-only) — detalle de contenido, filas de
   módulo/lección y taller de Ejercicios. Reutiliza el flujo de datos y
   los reproductores existentes; sólo cambia la presentación.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero único: portada REAL + título una sola vez sobre un velo oscuro. */
.contenido-hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-bg), var(--surface-2));
  min-height: 190px;
  display: flex;
  align-items: flex-end;
}
.contenido-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.contenido-hero.has-img .contenido-hero-img { display: block; }
.contenido-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,42,56,0.05) 0%, rgba(31,42,56,0.32) 45%, rgba(31,42,56,0.82) 100%);
}
/* Sin portada el fondo es claro → apenas velo, y el título va en tinta. */
.contenido-hero:not(.has-img) .contenido-hero-scrim {
  background: linear-gradient(180deg, rgba(31,42,56,0) 0%, rgba(31,42,56,0.16) 100%);
}
.contenido-hero-body {
  position: relative;
  padding: 26px 28px;
  width: 100%;
}
.contenido-hero .contenido-titulo {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 38px);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.contenido-hero:not(.has-img) .contenido-titulo {
  color: var(--ink);
  text-shadow: none;
}
@media (max-width: 680px) {
  .contenido-hero { min-height: 150px; }
  .contenido-hero-body { padding: 18px 18px; }
}

/* Tu progreso (nivel contenido) — sólo si hay piezas (total>0). */
.contenido-progreso { margin: 18px 0 4px; }
.contenido-progreso-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.contenido-progreso-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.contenido-progreso-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.contenido-progreso-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--success);
  transition: width var(--t-base);
}
.btn.contenido-continuar.btn-sm { padding: 6px 16px; font-size: 13px; }

/* Fila de acciones bajo la descripción (Zoom + certificación). */
.contenido-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Módulos: póster real + progreso; menos cajas anidadas. */
.espacio-modulo-thumb {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-bg), var(--surface-2));
}
.espacio-modulo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.espacio-modulo-thumb-num {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(31,42,56,0.82);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.espacio-modulo-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.espacio-modulo-progress-bar {
  flex: 1;
  max-width: 240px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.espacio-modulo-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--success);
  transition: width var(--t-base);
}
.espacio-modulo-progress-text {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 600;
}
@media (max-width: 680px) {
  .espacio-modulo-head { padding: 16px 16px; gap: 14px; }
  .espacio-modulo-thumb { width: 60px; height: 60px; }
}

/* Aplanar las secciones dentro de un módulo: menos marcos. */
.espacio-modulo-body .espacio-seccion {
  border: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: 2px;
}
.espacio-modulo-body .espacio-seccion + .espacio-seccion {
  border-top: 1px solid var(--line);
}
.espacio-modulo-body .espacio-seccion-head { padding: 12px 2px; }
.espacio-modulo-body .espacio-seccion-head:hover { background: transparent; }
.espacio-modulo-body .espacio-seccion-body { border-top: 0; padding: 0 2px 12px; }

/* ── Lecciones como filas dentro del detalle (menos cajas) ─────────── */
#vista-contenido .feed-grid { display: flex; flex-direction: column; gap: 8px; }
#vista-contenido .feed-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border-radius: var(--r-md);
  padding: 8px 14px 8px 8px;
  min-height: 0;
}
#vista-contenido .feed-card:hover { transform: none; }
#vista-contenido .feed-thumb {
  width: 84px;
  height: 60px;
  aspect-ratio: auto;
  max-height: none;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
/* En la fila, el estado va en el marcador de la izquierda y el tipo se
   deduce del propio thumb → ocultamos las chapas flotantes del thumb. */
#vista-contenido .feed-thumb-tag,
#vista-contenido .feed-thumb-ej-state { display: none; }
#vista-contenido .feed-thumb-play { background: linear-gradient(180deg, rgba(31,30,29,0) 40%, rgba(31,30,29,0.35) 100%); }
/* El play blanco se perdía sobre miniaturas claras (p.ej. camisa blanca del vídeo).
   Círculo OSCURO + icono blanco + aro blanco → contraste tanto en claro como en oscuro. */
#vista-contenido .feed-thumb-play-btn {
  width: 34px; height: 34px;
  background: rgba(31,30,29,0.72);
  border: 1.5px solid rgba(255,255,255,0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
#vista-contenido .feed-card:hover .feed-thumb-play-btn { background: rgba(31,30,29,0.85); }
#vista-contenido .feed-thumb-play-btn svg { width: 15px; height: 15px; color: #fff; }
#vista-contenido .feed-body { padding: 0; gap: 3px; flex: 1; min-width: 0; }
#vista-contenido .feed-title { font-size: 15px; -webkit-line-clamp: 2; }
#vista-contenido .feed-resumen { -webkit-line-clamp: 1; font-size: 12.5px; }
#vista-contenido .feed-card.completado::after { display: none; }
#vista-contenido .feed-card.completado .feed-thumb { opacity: 1; }

/* Marcador de estado (✓ hecho / icono de tipo pendiente) a la izquierda. */
.feed-lesson-state { display: none; }
#vista-contenido .feed-lesson-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
}
#vista-contenido .feed-card.completado .feed-lesson-state,
#vista-contenido .feed-card.ej-hecho .feed-lesson-state {
  background: var(--success);
  color: #fff;
}

/* ── Taller de Ejercicios: espacio tranquilo y amable ─────────────── */
.ejercicio-modal { max-width: 660px; }
.ejercicio-body { padding: 30px 32px 32px; }
@media (max-width: 680px) { .ejercicio-body { padding: 22px 18px 24px; } }
.ejercicio-tagrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ejercicio-tag {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  font-size: 11px;
}
.ejercicio-titulo {
  font-size: 25px;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ejercicio-consigna-card {
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.ejercicio-consigna {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
}
.ejercicio-consigna.espacio-rich { white-space: normal; }
.ejercicio-recurso { margin-bottom: 20px; }
.ejercicio-recurso:empty { display: none; }
.ejercicio-field { margin-bottom: 20px; }
.ejercicio-textarea {
  width: 100%;
  min-height: 160px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
}
.ejercicio-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.ejercicio-saved { font-size: 12px; }

/* Lista vertical de publicaciones dentro de un contenido */
.contenido-pubs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.contenido-pub {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--t-base);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.contenido-pub:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.contenido-pub-thumb {
  position: relative;
  width: 160px;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.contenido-pub-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contenido-pub-thumb-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(31, 30, 29, 0.82);
  color: white;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contenido-pub-body { min-width: 0; }
.contenido-pub-titulo {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
  line-height: 1.3;
}
.contenido-pub-resumen {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contenido-pub-meta {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 720px) {
  .contenidos-grid { grid-template-columns: 1fr; }
  .contenido-pub { grid-template-columns: 1fr; }
  .contenido-pub-thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* ── Password toggle (mostrar/ocultar contraseña) ────────────── */

.password-wrap {
  position: relative;
  /* Wrap se comporta como bloque ancho del padre — si el padre es un
     grid cell o flex item el wrap se estira, así que el input también
     debe llenarlo para que el ojito (posicionado al right del wrap)
     quede dentro del input. */
  display: block;
  width: 100%;
}
.password-wrap input {
  padding-right: 44px !important;
  /* Sin width:100% + box-sizing, en contextos de grid/flex el wrap se
     estiraba pero el input mantenía su tamaño intrínseco — el ojito
     quedaba flotando fuera del borde derecho del input. */
  width: 100%;
  box-sizing: border-box;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--t-fast);
  padding: 0;
}
.password-toggle:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.password-toggle .icon-hide { display: none; }
.password-toggle.show .icon-show { display: none; }
.password-toggle.show .icon-hide { display: block; }

/* ── Configuración: dropdown engranaje ──────────────────────── */

.gear-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.gear-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.gear-menu {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 80;
  padding: 6px;
}
.gear-menu.open { display: block; }
.gear-menu a, .gear-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast);
  font-family: var(--sans);
}
.gear-menu a:hover, .gear-menu button:hover { background: var(--surface-2); color: var(--ink); }
.gear-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 0;
}

/* Hashtag en captions */
.caption-hash {
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.caption-hash:hover { text-decoration: underline; }

/* Sugerencias buscador */
.feed-search-suggestions {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  margin-top: 6px;
  display: none;
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
}
.feed-search-suggestions.open { display: block; }
.feed-search-suggestion {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.feed-search-suggestion:hover, .feed-search-suggestion.active {
  background: var(--surface-2);
  color: var(--ink);
}
.feed-search-suggestion small { color: var(--ink-mute); margin-left: 6px; }

/* ── Bottom nav (4 botones: Home / IA / Mi espacio / Perfil) ── */

.serclai-bnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  font-family: var(--sans);
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .serclai-bnav {
    background: rgba(var(--bg-rgb), 0.96);
  }
}
html.theme-dark .serclai-bnav {
  background: rgba(var(--bg-rgb), 0.96);
}
.serclai-bnav-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 720px;
  margin: 0 auto;
}
.bnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color var(--t-fast);
}
.bnav-btn svg { color: inherit; }
.bnav-btn:hover { color: var(--ink-soft); }
.bnav-btn.active {
  color: var(--primary);
}
/* Avatar mini en el tab Perfil (espejo del nav-chip de desktop) */
.bnav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--ink-mute);
  display: block;
}
.bnav-btn.active .bnav-avatar {
  border-color: var(--primary);
}
.bnav-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #f3ede7);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
body.has-bnav { padding-bottom: 70px; }
@media (max-width: 720px) {
  .serclai-bnav { display: block; }
}

/* ── [Paridad apps 24/09] Cabecera tipo app en móvil (Inicio / Perfil) ────────
   La monta serclai-nav.js (mountAppBar) en las páginas con <html data-appbar>.
   «+» (solo quien publica) · marca · lupa, botones redondos de 44. La lupa
   despliega el buscador y los filtros, plegados por defecto en móvil. */
.m-appbar { display: none; }
@media (max-width: 720px) {
  .m-appbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 140;
    height: 56px;
    margin-top: calc(-1 * env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 10px 0;
    box-sizing: content-box;
    background: rgba(var(--bg-rgb), 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
  .m-appbar-lado { display: flex; align-items: center; }
  .m-appbar-lado--dcha { justify-content: flex-end; }
  .m-appbar-marca {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--display); font-weight: 700; font-size: 18px;
    color: var(--ink); text-decoration: none;
  }
  .m-appbar-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; background: transparent; color: var(--ink); cursor: pointer;
    transition: background var(--t-fast);
  }
  .m-appbar-btn:hover, .m-appbar-btn[aria-expanded="true"] {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
  /* Plegado por defecto: el buscador y los filtros salen con la lupa. */
  html[data-appbar]:not([data-app]):not(.m-buscar-abierto) [data-appbar-plegable] { display: none !important; }
  /* El «+» de la cabecera sustituye al FAB y al botón grande de «Mi perfil». */
  html.has-m-appbar #home-fab-newpub,
  html.has-m-appbar [data-appbar-duplicado] { display: none !important; }
}

/* ── Badges de novedades en el nav (Comunidades / Contenido) ───────
   Mismo lenguaje visual que el badge del avatar (Avisos): pill rojo.
   - .bnav-badge → esquina del botón del bottom-nav (icono apilado).
   - .snav-count → pill al final del link en los sidebars (icono+texto).
   Se muestran solo cuando hay > 0 (serclai-nav._paintNavCount).      */
.bnav-btn { position: relative; }
.bnav-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(180deg, #FF4C4F 0%, #E5384D 100%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.snav-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FF4C4F 0%, #E5384D 100%);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}
/* gsidebar colapsado a iconos (dentro de /app): el pill pasa a dot en
   la esquina del icono para no desbordar la columna estrecha. */
body.has-gsidebar.sidebar-icons .gsidebar-link { position: relative; }
body.has-gsidebar.sidebar-icons .gsidebar-link .snav-count {
  position: absolute;
  top: 3px;
  right: 3px;
  margin: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 16px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ── [Paridad apps 24/09] Barra de pestañas FLOTANTE (solo móvil ≤ 720px) ──
   Como el tab bar de iOS 26 / Android: una píldora de cristal separada del borde,
   SOLO iconos (el rótulo sigue en el DOM para lectores de pantalla, oculto a la
   vista) y la pestaña activa dentro de un círculo de 44 relleno de tinta.
   Sustituye a la barra superior con logo + hamburguesa. Escritorio no cambia
   (.serclai-bnav sigue display:none por encima de 720px). La carcasa nativa no la
   monta (data-no-bnav, serclai-nav.js) y los chats a pantalla completa la ocultan
   (comunidades: body.chat-open). */
@media (max-width: 720px) {
  .serclai-bnav {
    top: auto;
    left: 50%;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(var(--bg-rgb), 0.72);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  :root .serclai-bnav, html.theme-dark .serclai-bnav { background: rgba(var(--bg-rgb), 0.72); }
  .serclai-bnav-inner {
    display: flex;
    gap: 4px;
    max-width: none;
    margin: 0;
  }
  .bnav-btn {
    width: 52px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    color: var(--ink);
  }
  .bnav-btn:hover { color: var(--ink); }
  .bnav-btn .bnav-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .bnav-btn svg { width: 22px; height: 22px; }
  /* Activa: círculo de 44 en tinta, icono en el color del fondo. */
  .bnav-btn.active {
    color: var(--bg);
    background: transparent;
  }
  .bnav-btn.active::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: var(--ink);
    z-index: -1;
  }
  .bnav-btn { isolation: isolate; }
  .bnav-avatar { width: 26px; height: 26px; border-color: var(--line-strong); }
  .bnav-btn.active .bnav-avatar { border-color: var(--bg); }
  .bnav-badge { top: 1px; left: auto; right: 4px; margin-left: 0; }
  .bnav-btn--perfil .nav-chip-badge { top: 2px; right: 4px; }

  /* El contenido deja sitio abajo para que la píldora no tape nada; arriba ya
     no hay barra, solo el área segura del notch. */
  body.has-bnav {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* Ocultar el nav desktop en móvil (la barra flotante lo reemplaza) */
  body.has-bnav .nav { display: none !important; }
}
@media (max-width: 720px) {
  /* ── app-sidebar: barra horizontal compacta en móvil ────────── */
  .app-sidebar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 12px !important;
    gap: 2px !important;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--line);
    position: relative;
    /* Fade derecha para indicar que hay más tabs scrollables */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .app-sidebar::-webkit-scrollbar { display: none; }
  .sidebar-back, .sidebar-eyebrow { display: none !important; }
  .sidebar-section { flex-direction: row; gap: 2px; flex-shrink: 0; align-items: center; }
  .sidebar-link {
    flex-direction: column !important;
    flex-shrink: 0;
    gap: 3px;
    padding: 6px 8px !important;
    font-size: 10px !important;
    text-align: center;
    min-width: 52px;
    max-width: 72px;
    white-space: nowrap;
    border-radius: var(--r-sm) !important;
  }
  .sidebar-icon { width: 18px !important; height: 18px !important; }
}

/* ── App badges (App Store + Google Play) ───────────────────── */

.app-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
  border: 1px solid var(--ink);
  transition: all var(--t-base);
  text-decoration: none;
  min-width: 152px;
}
.app-badge:hover {
  background: var(--ink-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.app-badge-icon {
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.app-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}
.app-badge-small {
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 2px;
}
.app-badge-big {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--sans);
}

.app-badge-light {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.app-badge-light:hover {
  background: var(--surface-2);
  border-color: var(--ink);
}

/* ── Smart banner (sticky en mobile, cerrable) ─────────────── */

.app-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
  padding: 10px 16px;
  font-family: var(--sans);
  animation: slideDown 280ms ease;
}
.app-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.app-banner-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app-banner-text {
  flex: 1;
  line-height: 1.2;
  min-width: 0;
}
.app-banner-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 1px;
}
.app-banner-sub {
  font-size: 12px;
  opacity: 0.7;
}
.app-banner-cta {
  background: var(--primary);
  color: var(--surface);  /* not white: --primary flips to beige in dark mode */
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast);
  text-decoration: none;
  flex-shrink: 0;
}
.app-banner-cta:hover { background: var(--primary-hover); }
.app-banner-close {
  background: transparent;
  border: 0;
  color: rgba(var(--surface-rgb), 0.65);
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: color var(--t-fast);
  flex-shrink: 0;
}
.app-banner-close:hover { color: var(--surface); }

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Bloque destacado app (espacio cliente) ─────────────────── */

.app-cta-block {
  margin: 24px 0 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-hover) 100%);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.app-cta-block::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(217,119,87,0.25), transparent 70%);
  pointer-events: none;
}
.app-cta-info { flex: 1; min-width: 0; position: relative; }
.app-cta-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral-soft);
  font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--sans);
}
.app-cta-title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.app-cta-sub {
  font-size: 14px;
  opacity: 0.78;
  margin-bottom: 18px;
  max-width: 420px;
}

@media (max-width: 720px) {
  .app-cta-block { flex-direction: column; align-items: stretch; padding: 24px; }
  .app-cta-title { font-size: 22px; }
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .nav-links > a:not(.btn) { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 16px; min-width: 0; }
  .sidebar-footer { display: none; }
  .app-main { padding: 24px; min-width: 0; }
  .feed-grid { gap: 16px; }
  .feed-filters-row { padding: 0 24px; }
  .publish-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 32px 24px; }
  .feed-grid { grid-template-columns: 1fr; }
  .feed-hero { padding: 32px 0 20px; }
  .feed-controls { display: none; }
  #btn-nueva-pub, #btn-nuevo-producto, #stripe-keys-save-btn { width: 100%; }

  /* Product cards: 2 filas en móvil — thumb+título en fila 1, precio+acción en fila 2 */
  .prod-card { flex-wrap: wrap; padding: 14px 16px; gap: 6px 12px; align-items: flex-start; }
  .prod-card-thumb { width: 64px; height: 48px; }
  .prod-card-info { flex: 1 1 calc(100% - 76px); min-width: 0; }
  .prod-card-precio { order: 3; font-size: 13px; flex: 1 1 auto; margin-top: 2px; }
  .prod-card-actions { order: 4; flex-shrink: 0; margin-top: 2px; }
}

/* ── iOS fix: evitar zoom automático al enfocar inputs ──────── */
@media (max-width: 900px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ── Mobile (≤480px) — ajustes finos ─────────────────────────── */
@media (max-width: 480px) {
  /* Nav top */
  .container { padding: 0 16px; }
  .nav-inner { height: 56px; }

  /* Logo más pequeño en mobile */
  .logo { font-size: 16px; }

  /* Tablas/cards no se salen de pantalla */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hub/app: menos padding lateral */
  .hub-view { padding: 20px 16px 80px; }

  /* Modales: ocupan pantalla completa */
  .modal-inner { width: 100% !important; max-width: 100% !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0; margin: auto 0 0; }

  /* Pack subscription table: scroll horizontal si no cabe */
  #subs-rows { overflow-x: auto; }

  /* Botones no se salen */
  .btn { white-space: nowrap; max-width: 100%; }

  /* IA page */
  .ia-shell { padding: 24px 16px 80px; }
  .ia-lider-list { grid-template-columns: 1fr; }
}

/* ── Safe area iOS (notch + home indicator) ──────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body.has-bnav { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .serclai-bnav { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  /* Móvil: la barra flotante ya reserva su hueco y el área segura (ver arriba). */
  @media (max-width: 720px) {
    body.has-bnav { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .serclai-bnav { padding: 6px; }
  }
}

/* ── Player de vídeo personalizado (sin barra de buffer) ─────────
   Reemplaza los controles nativos del <video> en el modal con una
   interfaz limpia de 2 estados: reproducido (blanco) y pendiente
   (gris 30 %). Sin línea de buffering, que creaba confusión. ─── */
.vc-wrap {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
/* Cuando el wrap está dentro del modal */
.modal-media-wrap > .vc-wrap {
  width: 100%;
  max-height: 80vh;
}
.modal-media-wrap > .vc-wrap > .modal-video {
  display: block;
  max-height: 80vh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Override para el panel lateral del modal desktop */
#modal .modal-media-wrap > .vc-wrap { max-height: 90vh; }
#modal .modal-media-wrap > .vc-wrap > .modal-video { max-height: 90vh; }
/* Dentro de feed-thumb (position:absolute, llena el thumb) */
.feed-thumb > .vc-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.feed-thumb > .vc-wrap > video {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* Cuando el modal-media contiene el custom player: corregir sizing */
.modal-media.has-vc {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: 82vh;
  background: #000;
  display: block !important;
}
#modal .modal-media.has-vc {
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* Barra de controles */
.vc-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  color: #fff;
  z-index: 5;
  opacity: 0;
  transition: opacity .22s;
}
.vc-wrap:hover .vc-bar,
.vc-wrap.vc-paused .vc-bar { opacity: 1; }
/* Botones */
.vc-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.9;
}
.vc-btn:hover { opacity: 1; }
/* ⋮ kebab (F-009): velocidad + Imagen-en-imagen (PiP) + gestión (Mi perfil).
   El botón vive en la .vc-bar; el menú flota por encima, alineado a la derecha. */
.vc-more { font-size: 18px; line-height: 1; }
.vc-menu {
  position: absolute;
  right: 8px;
  bottom: calc(100% - 6px);
  min-width: 184px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  padding: 4px;
  display: none;
  z-index: 10;
}
.vc-menu.open { display: block; }
.vc-menu-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background .1s;
}
.vc-menu-item:hover { background: var(--line); }
.vc-menu-speed { justify-content: space-between; }
.vc-menu-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.vc-menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.vc-menu-danger { color: var(--danger); }
/* F-047: ⋮ suelto para celdas NO-vídeo (imagen/carrusel/texto) de Mi perfil.
   Mismo menú que el del vídeo, con un botón redondo visible sobre la media. */
.vc-cellmenu { position: absolute; bottom: 10px; right: 10px; z-index: 6; }
/* P-071 (A): en tarjetas de SOLO TEXTO no hay .feed-thumb (está oculto), así
   que el ⋮ se ancla a la tarjeta entera en la esquina inferior — justo sobre
   la fila de CTAs. Lo subimos arriba-derecha SOLO en ese caso. */
.feed-card--solo-texto > .vc-cellmenu { top: 10px; bottom: auto; }
/* P-091: la dirección de apertura del menú de celda va POR TIPO (la regla única
   de P-071 (B) forzaba "hacia abajo" para todos y el overflow:hidden de
   .feed-thumb/.feed-card lo recortaba en Imagen y Mixto):
   · Imagen y Mixto (⋮ abajo-derecha sobre la media): hacia ARRIBA, dentro del
     cuadro de la media, donde sí hay sitio.
   · Solo texto (⋮ arriba-derecha de la tarjeta): hacia la IZQUIERDA del ⋮ —
     con textos cortos la tarjeta es baja y hacia abajo no cabe; a lo ancho sí.
   El kebab de la barra de vídeo (.vc-bar .vc-more) sigue igual, sin tocar. */
.vc-cellmenu .vc-menu { bottom: calc(100% + 4px); top: auto; right: 0; }
.feed-card--solo-texto > .vc-cellmenu .vc-menu { right: calc(100% + 4px); left: auto; top: 0; bottom: auto; }
.vc-cellmore {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  opacity: 1; font-size: 18px; line-height: 1;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vc-cellmore:hover { background: rgba(0,0,0,0.82); }
/* Táctil (sin hover): un toque en el vídeo revela la barra → el ⋮ es alcanzable. */
.vc-wrap.vc-show .vc-bar { opacity: 1; }
/* Tiempo */
.vc-time {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
/* Barra de progreso: solo 2 colores, SIN buffer */
.vc-track {
  flex: 1;
  height: 20px; /* zona touch generosa */
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
.vc-track-inner {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}
.vc-played {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: #fff;
  border-radius: 3px;
  width: 0%;
}
/* F-073: se retiró todo el CSS de pantalla completa NATIVA y el botón de cerrarla
   (los selectores del API Fullscreen y su ✕): ahora el ⛶ abre el visor overlay,
   que trae su propia ✕ y su barra siempre visible. Aquellos selectores nunca
   volverían a dispararse y aquel ✕ quedaba como control muerto oculto. */

/* P-013: la lista de velocidades es un OVERLAY dentro del cuadro del vídeo —
   posicionada respecto al .vc-wrap (feed) o al #feed-visor (pantalla completa),
   pegada al borde derecho y por encima del <video>, justo sobre la .vc-bar. Antes
   (F-049→F-058→F-065) flotaba FUERA del menú (dentro con scroll, luego a la
   izquierda con `right:100%`, luego con `position:fixed` calculado): en vista
   normal el `transform` del `.feed-card:hover` crea un contexto de recorte y la
   lista quedaba invisible. Al vivir DENTRO del cuadro (dentro del overflow del
   propio .vc-wrap) ya no se sale ni la recortan los ancestros; si las 13
   velocidades no caben en un vídeo corto, `max-height` (al alto del cuadro) +
   `overflow-y:auto` le dan scroll interno. El posicionamiento es 100% CSS: el JS
   solo alterna la clase .open (ver placeSpeedList retirado en serclai-video-player.js). */
.vc-menu-sub {
  display: none;
  position: absolute;
  right: 8px;                     /* pegada al borde derecho, alineada con el ⋮ */
  bottom: 44px;                   /* justo por encima de la .vc-bar */
  max-height: calc(100% - 52px);  /* nunca más alta que el cuadro (menos la barra) */
  overflow-y: auto;
  min-width: 74px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  padding: 4px;
  z-index: 12;                    /* por encima del <video>, la barra (5) y el menú (10) */
}
.vc-menu-sub.open { display: block; }
/* Compactas a propósito, con `line-height` FIJO (no `normal`): así el alto de cada
   opción es estable y `max-height`+`overflow-y` reparten bien las 13 velocidades. */
.vc-menu-subitem {
  justify-content: center;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.vc-menu-subitem.is-active { background: var(--line); font-weight: 700; }

/* F-050: saltar ±10 s superpuestos en el centro del cuadro. */
.vc-skip {
  all: unset;
  position: absolute; top: 50%; transform: translateY(-50%);
  /* Por DEBAJO del .vc-bar (z-index: 5) a propósito. La barra crea contexto de
     apilado, así que su ⋮ (z-index: 10) y la lista de velocidades (11) quedan
     atrapados dentro de ese 5: con el skip en 6 se pintaba ENCIMA de la lista y
     tapaba dos velocidades (visto en la captura de F-058). El vídeo no lleva
     z-index, así que con 4 los ±10 s siguen por encima de la imagen. */
  z-index: 4;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .22s;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vc-skip span { font-size: 11px; font-weight: 700; }
.vc-skip:hover { background: rgba(0,0,0,0.72); }
.vc-back10 { left: 14%; }
.vc-fwd10 { right: 14%; }
/* [Publicaciones] Los ±10 s solo tienen sentido en la tarjeta que está DELANTE
   (activa) del carrusel de publicaciones del referente; en las que solo asoman de
   lado se ocultan —no tiene sentido avanzar/retroceder un vídeo que no ves—
   (Jordi 25/09). La clase .ref-pub-card--activa la pone referente.html. */
.ref-pub-card:not(.ref-pub-card--activa) .vc-skip { display: none; }
.vc-wrap:hover .vc-skip,
.vc-wrap.vc-paused .vc-skip,
.vc-wrap.vc-show .vc-skip { opacity: 1; }

/* ⚠️ F-061 + F-051 B: el .vc-wrap que mount() intercala entre la slide y su
   vídeo ROMPE la cadena de porcentajes. `.feed-ig-carousel .ig-slide video` es
   `width: 100%; height: 100%` (:4003) y esos porcentajes resolvían contra la
   slide, que tiene caja. Con el wrap enmedio —que solo trae `max-width: 100%`,
   sin ancho ni alto— ambos pasan a `auto` y el vídeo se dibuja a su tamaño
   INTRÍNSECO: medido, 300×150 dentro de una slide de 496×420, un recuadro
   pequeño flotando en negro, con la barra y los ±10 s anclados a esa caja
   encogida. Eso es cargarse F-051 B (que el vídeo del mixto se vea).
   Es el mismo problema que ya resolvía `.feed-thumb > .vc-wrap` (:7357) para el
   vídeo suelto; faltaba el equivalente de la slide. */
.ig-slide > .vc-wrap {
  width: 100%;
  height: 100%;
}

/* F-061: el reproductor sobre un <audio>.

   Un <audio> sin `controls` no ocupa NADA (el navegador no lo pinta), así que el
   .vc-wrap que mount() le crea alrededor se quedaría sin caja: la barra
   (position:absolute; bottom:0) saldría aplastada y los ±10 s (top:50%)
   apilados en una línea. Se le da el hueco de la portada —que es justo donde se
   esperan los mandos— y fondo transparente, para que la portada y el 🎙 sigan
   viéndose por debajo (el .vc-wrap normal pinta negro para el letterbox del
   vídeo, aquí no hay nada que letterboxear). */
.feed-thumb-audio .vc-wrap,
.ig-slide-audio .vc-wrap {
  position: absolute;
  inset: 0;
  background: transparent;
}
/* El .vc-wrap del audio se ancla a la slide, que es `static` por defecto. */
.ig-slide-audio { position: relative; }
/* [P-029] Waveform del audio: canvas decorativo que sustituye la "pantalla negra".
   Va por encima de la portada/icono pero por debajo de la barra (.vc-bar z-index:5)
   y de los mandos. No captura el toque → el tap sobre el wrap sigue alternando play. */
.feed-thumb-audio canvas.vc-wave,
.ig-slide-audio canvas.vc-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* ⚠️ EL APRENDIZAJE DEL MÓVIL (F-048/F-050, y sigue en pie tras F-061):
   en TÁCTIL NO HAY HOVER. buildKebab cablea un toggle de `.vc-show` al tocar el
   medio (pointerType==="touch"); sin una regla que revele los controles con esa
   clase, el ⋮ (velocidad/PiP) y los ±10 s quedan INALCANZABLES en el móvil —
   que es justo donde más se usa Serclai. Ya pasó una vez.
   Aquí vivían las reglas de la desaparecida capa mini. F-061 la retiró: las
   slides y los audios montan ya el reproductor completo, así que el medio vive
   dentro de un .vc-wrap y lo cubren las reglas de `.vc-wrap.vc-show` de arriba
   (.vc-bar y .vc-skip). La necesidad no desapareció: cambió de sitio.

   ⚠️ Y ojo con el DISPARO, que es la mitad que se olvida: el toggle de `.vc-show`
   tiene que colgar del .vc-wrap, NO del medio. Un <audio> sin `controls` es
   `display: none` y el vídeo de una slide es `pointer-events: none` (:3988): ni
   uno ni otro reciben el toque jamás. Colgado del medio, estas reglas existen y
   no se disparan nunca — que es igual de inalcanzable. Ver buildKebab. */

/* ── ig-slide audio / text (Mixto builder) ─────────────────── */
.ig-slide-audio {
  background: #0d0d0d;
  flex-direction: column;
  gap: 16px;
}
.ig-slide-audio .ig-slide-audio-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  width: 100%;
}
.ig-slide-audio audio {
  width: 90%;
  max-width: 360px;
}
.ig-slide-text {
  background: var(--bg-dark, #0d0d0d);
  padding: 0;
}
.ig-slide-text .ig-slide-text-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  text-align: center;
}
.ig-slide-text .ig-slide-text-inner p {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.5;
  color: #fff;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.feed-ig-carousel .ig-slide-text .ig-slide-text-inner p {
  font-size: 14px;
}
.feed-ig-carousel .ig-slide-audio .ig-slide-audio-inner {
  gap: 8px;
  padding: 16px;
  font-size: 28px;
}
.feed-ig-carousel .ig-slide-audio audio { max-width: 200px; }

/* P-093: el CSS del «Mixto Builder» del modal huérfano Nueva publicación
   (#pub-mixto-builder / .mixto-*) se eliminó junto con el modal; el composer
   vivo (serclai-newpub.js) usa sus propias clases np-*. */

/* ── Google-Forms-style Form Builder (gf-*) ────────────────────── */
/* Full-screen overlay */
.gf-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: var(--bg);
  font-family: var(--sans);
}
/* ── Top nav ── */
.gf-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  position: relative;
}
.gf-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: 13px; padding: 6px 8px;
  border-radius: var(--r-sm); transition: color .15s, background .15s;
  font-family: var(--sans);
}
.gf-back:hover { color: var(--ink); background: var(--line); }
.gf-nav-title {
  font-size: 18px; font-weight: 600; color: var(--ink);
  border: none; background: transparent; outline: none;
  padding: 4px 8px; border-radius: var(--r-sm);
  flex: 1; min-width: 0;
  font-family: var(--sans);
  transition: background .15s;
}
.gf-nav-title:hover { background: var(--line); }
.gf-nav-title:focus { background: var(--surface); border-bottom: 2px solid var(--primary); border-radius: 0; }
.gf-tabs {
  display: flex; gap: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.gf-tab {
  padding: 0 24px; height: 64px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  font-family: var(--sans); border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 6px;
}
.gf-tab:hover { color: var(--primary); }
.gf-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.gf-tab-badge {
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
}
.gf-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.gf-save-indicator {
  font-size: 12px; color: var(--ink-mute);
  transition: opacity .3s;
}
/* ── Tab contents ── */
.gf-tab-content { display: none; flex: 1; overflow: hidden; }
.gf-tab-content.active { display: flex; }
/* ── Preguntas tab layout ── */
.gf-preguntas-layout {
  display: flex; flex: 1; overflow: hidden;
  padding: 24px 0; gap: 0;
}
.gf-preguntas-scroll {
  flex: 1; overflow-y: auto; padding: 0 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
/* #gf-questions es un hijo flex de .gf-preguntas-scroll, que centra a sus
   hijos (align-items:center). Sin un ancho explícito, este contenedor NO se
   estira: encoge al ancho por defecto de los <input> del título (~300px), lo
   que colapsa TODAS las tarjetas de pregunta y recorta los títulos largos
   (el líder «no ve las preguntas»). La tarjeta de cabecera se libra porque es
   hija directa del scroll. Lo estiramos al 100% y recentramos las tarjetas
   para que queden a 680px igual que la cabecera. */
#gf-questions {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
/* ── Form header card ── */
.gf-header-card {
  width: 100%; max-width: 680px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  border-top: 8px solid var(--primary);
}
.gf-header-body { padding: 20px 24px 24px; }
.gf-form-titulo-inp {
  width: 100%; border: none; outline: none;
  font-size: 28px; font-weight: 600; color: var(--ink);
  background: transparent; font-family: var(--sans);
  border-bottom: 1px solid transparent;
  padding: 4px 0; margin-bottom: 8px;
  transition: border-color .15s;
}
.gf-form-titulo-inp:focus { border-bottom-color: var(--primary); }
.gf-form-desc-inp {
  width: 100%; border: none; outline: none;
  font-size: 14px; color: var(--ink-soft);
  background: transparent; font-family: var(--sans);
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: border-color .15s;
}
.gf-form-desc-inp:focus { border-bottom-color: var(--primary); }
/* Imagen de cabecera (banner) del formulario, estilo Google Forms */
.gf-header-banner { position: relative; width: 100%; line-height: 0; }
.gf-header-banner img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.gf-header-banner-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.gf-header-banner-act {
  background: rgba(0,0,0,.55); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 5px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans);
}
.gf-header-banner-act:hover { background: rgba(0,0,0,.74); }
.gf-header-banner-act.danger:hover { background: var(--danger, #c0392b); }
.gf-header-banner-add {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--ink-soft);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); margin-bottom: 14px;
}
.gf-header-banner-add:hover { border-color: var(--primary); color: var(--primary); }
.gf-form-desc-hint { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; }
/* ── Question card ── */
.gf-q-card {
  width: 100%; max-width: 680px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.gf-q-card:hover { border-color: var(--line-strong); }
.gf-q-card.gf-active {
  border-left: 6px solid var(--primary);
  cursor: default;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.gf-q-card.gf-seccion { border-top: 4px solid var(--primary); }
/* Drag handle */
.gf-q-drag {
  text-align: center; padding: 4px 0 0;
  color: var(--ink-mute); font-size: 12px;
  letter-spacing: 2px; cursor: grab;
  user-select: none;
  opacity: 0; transition: opacity .15s;
}
.gf-q-card:hover .gf-q-drag,
.gf-q-card.gf-active .gf-q-drag { opacity: 1; }
.gf-q-card.dragging { opacity: .5; }
/* Question main area */
.gf-q-inner { padding: 16px 20px 0; }
.gf-q-top-row {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px;
}
.gf-q-title-area { flex: 1; display: flex; align-items: center; gap: 6px; }
.gf-q-title-inp {
  flex: 1; border: none; outline: none;
  background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; font-family: var(--sans);
  padding: 6px 0; border-bottom: 1px solid var(--line);
  transition: border-color .15s;
}
.gf-q-title-inp:focus { border-bottom-color: var(--primary); }
.gf-q-title-inp::placeholder { color: var(--ink-mute); font-weight: 400; }
/* In inactive state: title is read-only looking */
.gf-q-card:not(.gf-active) .gf-q-title-inp { border-bottom-color: transparent; pointer-events: none; }
.gf-q-img-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-mute); padding: 6px; border-radius: 50%;
  transition: color .15s, background .15s;
  display: none;
}
.gf-q-card.gf-active .gf-q-img-btn { display: flex; }
.gf-q-img-btn:hover { color: var(--ink); background: var(--line); }
/* Type selector */
.gf-q-type-wrap { display: none; min-width: 200px; }
.gf-q-card.gf-active .gf-q-type-wrap { display: block; }
.gf-q-type-sel {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  font-size: 13px; cursor: pointer; font-family: var(--sans);
}
.gf-q-type-sel:focus { outline: none; border-color: var(--primary); }
/* Description field */
.gf-q-desc-row { margin-bottom: 8px; }
.gf-q-desc-inp {
  width: 100%; border: none; outline: none; background: transparent;
  color: var(--ink-soft); font-size: 13px; font-family: var(--sans);
  padding: 4px 0; border-bottom: 1px dashed var(--line);
  transition: border-color .15s;
}
.gf-q-desc-inp:focus { border-bottom-color: var(--primary); }
/* Image in question */
.gf-q-image { margin-bottom: 12px; position: relative; display: inline-block; }
.gf-q-image img { max-width: 100%; max-height: 240px; border-radius: var(--r-sm); }
.gf-q-image-del {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.6); color: #fff; border: 0;
  border-radius: 50%; width: 24px; height: 24px;
  cursor: pointer; font-size: 12px; display: grid; place-items: center;
}
/* ── Question content areas ── */
.gf-q-content { margin-bottom: 8px; }
/* Preview (inactive) */
.gf-q-preview { font-size: 13px; color: var(--ink-mute); padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
/* Options list */
.gf-opts-list { display: flex; flex-direction: column; gap: 4px; }
.gf-opt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.gf-opt-icon { font-size: 16px; color: var(--ink-mute); flex-shrink: 0; width: 22px; text-align: center; }
.gf-opt-inp {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--ink); font-family: var(--sans);
  padding: 3px 0; border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.gf-opt-inp:focus { border-bottom-color: var(--primary); }
.gf-opt-inp.otro { color: var(--ink-soft); font-style: italic; cursor: default; background: transparent; }
.gf-opt-del {
  background: transparent; border: 0; cursor: pointer; color: var(--ink-mute);
  padding: 4px; border-radius: 50%; font-size: 14px;
  transition: color .15s, background .15s;
  display: none;
}
.gf-q-card.gf-active .gf-opt-del { display: flex; }
.gf-opt-del:hover { color: var(--ink); background: var(--line); }
.gf-opt-add-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; color: var(--ink-mute); font-size: 13px;
}
.gf-opt-add-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; color: var(--ink-soft); padding: 3px 0;
  font-family: var(--sans); text-align: left;
  transition: color .15s;
}
.gf-opt-add-btn:hover { color: var(--primary); }
.gf-opt-otro-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; color: var(--primary); padding: 3px 0;
  font-family: var(--sans); text-decoration: underline; text-underline-offset: 2px;
}
/* Scale */
.gf-scale-config { display: flex; flex-direction: column; gap: 10px; }
.gf-scale-range { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.gf-scale-sel {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); cursor: pointer; font-size: 13px;
}
.gf-scale-labels { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gf-scale-label-inp {
  flex: 1; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); color: var(--ink-soft);
  font-size: 12px; font-family: var(--sans);
}
.gf-scale-preview {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-soft);
}
.gf-scale-dot {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; font-size: 12px; color: var(--ink-mute);
}
/* Grid */
.gf-grid-config { display: flex; gap: 24px; flex-wrap: wrap; }
.gf-grid-col { flex: 1; min-width: 160px; }
.gf-grid-col-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.gf-grid-item { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gf-grid-inp {
  flex: 1; padding: 5px 8px; border: none; border-bottom: 1px solid var(--line);
  outline: none; background: transparent; color: var(--ink); font-size: 13px; font-family: var(--sans);
}
.gf-grid-inp:focus { border-bottom-color: var(--primary); }
.gf-grid-del { background: transparent; border: 0; cursor: pointer; color: var(--ink-mute); font-size: 13px; padding: 3px; }
.gf-grid-del:hover { color: var(--danger, #c0392b); }
.gf-grid-add { font-size: 12px; color: var(--primary); background: transparent; border: 0; cursor: pointer; padding: 4px 0; font-family: var(--sans); }
/* Date/time preview */
.gf-date-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-mute); font-size: 13px;
}
/* File upload */
.gf-file-config { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.gf-file-types { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-file-type-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.gf-file-type-chk input { accent-color: var(--primary); }
.gf-file-note { font-size: 12px; color: var(--ink-mute); }
/* Section block */
.gf-seccion-inputs { display: flex; flex-direction: column; gap: 8px; }
.gf-seccion-title {
  font-size: 20px; font-weight: 600; border: none; outline: none;
  background: transparent; color: var(--ink); font-family: var(--sans);
  padding: 4px 0; border-bottom: 1px solid var(--line); width: 100%;
}
.gf-seccion-desc { font-size: 14px; color: var(--ink-soft); border: none; outline: none; background: transparent; font-family: var(--sans); padding: 4px 0; border-bottom: 1px dashed var(--line); width: 100%; }
/* Validation panel */
.gf-validation-panel {
  margin-top: 8px; padding: 12px; background: var(--bg);
  border-radius: var(--r-sm); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.gf-val-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gf-val-sel {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font-size: 12px; cursor: pointer;
}
.gf-val-inp { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 12px; font-family: var(--sans); width: 100px; }
.gf-val-err-msg { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 12px; font-family: var(--sans); flex: 1; min-width: 180px; }
/* Logic panel */
.gf-logic-panel { margin-top: 8px; padding: 12px; background: var(--bg); border-radius: var(--r-sm); border: 1px solid var(--line); }
.gf-logic-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.gf-logic-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--ink-soft); }
.gf-logic-sel { padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 12px; cursor: pointer; }
/* ── Question action bar ── */
.gf-q-bar {
  display: none; align-items: center; gap: 4px;
  padding: 8px 12px; border-top: 1px solid var(--line);
  justify-content: flex-end;
}
.gf-q-card.gf-active .gf-q-bar { display: flex; }
.gf-q-action {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-mute); padding: 8px; border-radius: 50%;
  transition: color .15s, background .15s; font-size: 16px;
}
.gf-q-action:hover { color: var(--ink); background: var(--line); }
.gf-q-bar-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.gf-q-req-label { font-size: 13px; color: var(--ink-soft); }
/* Toggle switch (Google-style) */
.gf-toggle { display: inline-flex; align-items: center; gap: 0; cursor: pointer; }
.gf-toggle input { display: none; }
.gf-toggle-track {
  width: 36px; height: 20px; background: var(--line-strong); border-radius: 10px;
  position: relative; transition: background .2s;
}
.gf-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: left .2s;
}
/* Switch en ON → verde (indica claramente "activado"). */
.gf-toggle input:checked + .gf-toggle-track { background: #27AE60; }
.gf-toggle input:checked + .gf-toggle-track::after { left: 18px; }
/* Three-dot menu */
.gf-more-menu {
  position: absolute; z-index: 9999;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: 0 4px 16px rgba(0,0,0,.15);
  padding: 4px; min-width: 200px;
}
.gf-more-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; background: none; border: 0;
  border-radius: var(--r-sm); font-size: 13px; color: var(--ink);
  cursor: pointer; font-family: var(--sans); text-align: left;
  transition: background .1s;
}
.gf-more-menu button:hover { background: var(--line); }
.gf-more-menu .gf-menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
/* ── Right sidebar ── */
.gf-sidebar {
  width: 52px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: 8px;
}
.gf-sidebar-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.gf-sb-btn {
  width: 40px; height: 40px; background: transparent; border: 0;
  border-radius: 50%; cursor: pointer; color: var(--ink-soft);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  transition: color .15s, background .15s;
}
.gf-sb-btn:hover { color: var(--primary); background: var(--line); }
.gf-sb-sep { width: 28px; height: 1px; background: var(--line); margin: 2px auto; }
/* ── Respuestas tab ── */
.gf-resp-layout {
  flex: 1; overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
.gf-resp-header-card {
  width: 100%; max-width: 680px; background: var(--surface);
  border-radius: var(--r-md); border: 1px solid var(--line);
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.gf-resp-count { font-size: 28px; font-weight: 700; color: var(--primary); }
.gf-resp-label { font-size: 13px; color: var(--ink-mute); }
.gf-resp-toggle-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gf-resp-sub-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line);
  width: 100%; max-width: 680px;
}
.gf-resp-stab {
  padding: 10px 20px; background: transparent; border: 0; cursor: pointer;
  font-size: 14px; color: var(--ink-soft); font-family: var(--sans);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.gf-resp-stab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.gf-resp-stab-content { width: 100%; max-width: 680px; }
/* Charts */
.gf-chart-card {
  width: 100%; max-width: 680px; background: var(--surface);
  border-radius: var(--r-md); border: 1px solid var(--line);
  padding: 20px 24px;
}
.gf-chart-q-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.gf-chart-q-count { font-size: 12px; color: var(--ink-mute); margin-bottom: 16px; }
.gf-chart-bar { display: flex; flex-direction: column; gap: 8px; }
.gf-bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gf-bar-label { width: 140px; text-align: right; color: var(--ink-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-bar-track { flex: 1; height: 20px; background: var(--line); border-radius: 10px; overflow: hidden; }
.gf-bar-fill { height: 100%; background: var(--primary); border-radius: 10px; transition: width .4s; }
.gf-bar-val { font-size: 12px; color: var(--ink-mute); width: 32px; }
.gf-text-answers { display: flex; flex-direction: column; gap: 6px; }
/* Respuesta de texto en el Resumen: tope de altura (pantalla) y, superado, scroll. */
.gf-text-answer { padding: 8px 12px; background: var(--bg); border-radius: var(--r-sm); font-size: 13px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow-y: auto; }
/* Individual responses */
.gf-ind-nav {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: 13px; color: var(--ink-soft);
}
.gf-ind-nav-btn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); cursor: pointer; font-size: 14px; color: var(--ink);
  display: grid; place-items: center; transition: background .15s;
}
.gf-ind-nav-btn:hover { background: var(--line); }
.gf-ind-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.gf-ind-answer { margin-bottom: 18px; }
.gf-ind-q { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
/* Caja de respuesta legible: preparada para respuestas largas (30+ líneas):
   respeta saltos de línea, parte palabras largas y, si es enorme, hace scroll. */
.gf-ind-a {
  font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; line-height: 1.55; max-height: 45vh; overflow-y: auto;
}
/* ── Configuración tab ── */
.gf-cfg-layout {
  flex: 1; overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.gf-cfg-card {
  width: 100%; max-width: 680px; background: var(--surface);
  border-radius: var(--r-md); border: 1px solid var(--line); padding: 20px 24px;
}
.gf-cfg-section-title {
  font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--ink);
}
.gf-cfg-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line); gap: 16px;
}
.gf-cfg-row:last-child { border-bottom: none; }
.gf-cfg-row-info { flex: 1; }
.gf-cfg-row-label { font-size: 14px; color: var(--ink); font-weight: 500; }
.gf-cfg-row-desc { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.gf-cfg-inp {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font-size: 14px; font-family: var(--sans); margin-top: 8px;
}
.gf-cfg-inp:focus { outline: none; border-color: var(--primary); }
/* ── Form builder responsive (F-204) — leader authoring overlay only ── */
@media (max-width: 720px) {
  /* Top bar: take the centered tab strip out of absolute positioning and
     drop it onto its own full-width second row (also scrolls horizontally
     if the tabs are still too wide). */
  .gf-nav {
    flex-wrap: wrap;
    height: auto;
    row-gap: 0;
    padding: 6px 12px;
  }
  .gf-tabs {
    position: static;
    transform: none;
    left: auto;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--line);
  }
  .gf-tab {
    padding: 0 14px;
    height: 48px;
    flex-shrink: 0;
  }
  /* Tighter authoring-canvas gutters on narrow screens. */
  .gf-preguntas-layout { padding: 12px 0; }
  .gf-preguntas-scroll { padding: 0 12px; }
  /* Narrow the block-type rail (buttons shrink in step so nothing clips). */
  .gf-sidebar { width: 44px; padding-top: 4px; }
  .gf-sidebar-wrap { padding: 4px; border-radius: 20px; }
  .gf-sb-btn { width: 36px; height: 36px; }
}
/* ── Form-fill (espacio) styles fm-* ── */
.fm-overlay {
  position: fixed; inset: 0; z-index: 1500; background: var(--bg);
  display: flex; flex-direction: column; overflow-y: auto;
}
.fm-body {
  flex: 1; padding: 24px 16px; max-width: 640px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.fm-header-card {
  background: var(--surface); border-radius: var(--r-md);
  border: 1px solid var(--line); border-top: 8px solid var(--primary);
  padding: 20px 24px;
}
.fm-form-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.fm-form-desc { font-size: 14px; color: var(--ink-soft); white-space: pre-wrap; }
/* Banner / imagen de cabecera del formulario (vista del cliente) */
.fm-header-banner { width: 100%; border-radius: var(--r-md); overflow: hidden; margin-bottom: 12px; line-height: 0; }
.fm-header-banner img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.fm-q-card {
  background: var(--surface); border-radius: var(--r-md);
  border: 1px solid var(--line); padding: 20px 24px;
}
.fm-q-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; line-height: 1.5; }
.fm-q-desc { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.fm-q-req { color: var(--primary); }
/* Feedback del líder bajo la respuesta del cliente (recuadro). */
.fm-feedback {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(var(--primary-rgb), .07);
  border: 1px solid rgba(var(--primary-rgb), .22);
  border-left: 3px solid var(--primary); border-radius: 10px;
}
.fm-feedback-label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--primary); margin-bottom: 4px;
}
/* Crece con el texto hasta el alto de pantalla y, superado el tope, hace scroll. */
.fm-feedback-text { font-size: 14px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 70vh; overflow-y: auto; }
.fm-inp {
  width: 100%; padding: 9px 12px; border: none; border-bottom: 1px solid var(--line-strong);
  outline: none; background: transparent; color: var(--ink);
  font-size: 14px; font-family: var(--sans); box-sizing: border-box;
  transition: border-color .15s;
}
.fm-inp:focus { border-bottom-color: var(--primary); border-bottom-width: 2px; }
/* Auto-crece con el texto (JS _fmAutoGrow). Tope = alto de pantalla; luego scroll. */
.fm-textarea { min-height: 80px; resize: none; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--bg); }
.fm-textarea:focus { border-color: var(--primary); }
.fm-radios, .fm-checks { display: flex; flex-direction: column; gap: 6px; }
.fm-radio-item, .fm-check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; transition: border-color .12s, background .12s;
  font-size: 14px; color: var(--ink);
}
.fm-radio-item:hover, .fm-check-item:hover { border-color: var(--line-strong); background: var(--bg); }
.fm-radio-item.selected, .fm-check-item.selected {
  border-color: var(--primary); background: rgba(233,89,68,.06);
}
.fm-radio-item input, .fm-check-item input { display: none; }
.fm-scale-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fm-scale-lbl { font-size: 11px; color: var(--ink-mute); }
.fm-scale-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.fm-scale-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: transparent; cursor: pointer; font-size: 13px; color: var(--ink-soft);
  transition: all .12s; font-family: var(--sans);
}
.fm-scale-btn:hover { border-color: var(--primary); color: var(--primary); }
.fm-scale-btn.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.fm-select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 14px; cursor: pointer; font-family: var(--sans); }
.fm-select:focus { outline: none; border-color: var(--primary); }
.fm-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fm-grid-table th { font-weight: 600; padding: 6px 10px; text-align: center; color: var(--ink-soft); font-size: 12px; }
.fm-grid-table td { padding: 8px 10px; border-top: 1px solid var(--line); }
.fm-grid-table td:first-child { color: var(--ink); }
.fm-grid-table td:not(:first-child) { text-align: center; }
.fm-grid-radio, .fm-grid-check { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.fm-file-drop {
  border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 28px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; font-size: 13px; color: var(--ink-mute);
}
.fm-file-drop:hover { border-color: var(--primary); background: rgba(233,89,68,.04); }
.fm-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fm-file-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 10px; background: var(--bg); border-radius: var(--r-sm); }
.fm-file-del { background: transparent; border: 0; cursor: pointer; color: var(--ink-mute); font-size: 13px; padding: 2px; margin-left: auto; }
.fm-otro-inp { margin-top: 6px; width: 100%; padding: 6px 0; border: none; border-bottom: 1px solid var(--line); outline: none; background: transparent; font-size: 13px; font-family: var(--sans); color: var(--ink); }
.fm-otro-inp:focus { border-bottom-color: var(--primary); }
.fm-section-card { background: transparent; border: none; padding: 8px 0; }
.fm-section-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.fm-section-desc { font-size: 13px; color: var(--ink-soft); }
.fm-nav-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.fm-required-err { font-size: 12px; color: var(--danger, #c0392b); margin-top: 4px; display: none; }
.fm-required-err.visible { display: block; }
.fm-success {
  text-align: center; padding: 60px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.fm-success-icon { font-size: 56px; }
.fm-success-title { font-size: 22px; font-weight: 700; }
.fm-success-msg { font-size: 14px; color: var(--ink-soft); max-width: 380px; }
.fb-q-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.fb-q-card:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12); }
.fb-q-card.fb-seccion { border-left: 3px solid var(--primary); background: var(--bg); }
.fb-q-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 0;
}
.fb-q-tipo {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
}
.fb-q-move { display:flex; gap:2px; margin-left:auto; }
.fb-q-move button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-mute);
  padding: 2px 5px;
  border-radius: var(--r-sm);
  transition: color .1s, background .1s;
}
.fb-q-move button:hover { color: var(--ink); background: var(--line); }
.fb-q-move button:disabled { opacity: .25; cursor: not-allowed; }
.fb-q-del {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-mute);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: color .1s;
}
.fb-q-del:hover { color: var(--danger, #c0392b); }
.fb-q-body { padding: 8px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.fb-q-titulo {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  box-sizing: border-box;
  transition: border-color .15s;
}
.fb-q-titulo:focus { outline:none; border-color: var(--primary); }
.fb-q-titulo::placeholder { color: var(--ink-mute); font-weight: 400; }
.fb-q-desc {
  width: 100%;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  box-sizing: border-box;
  resize: vertical;
  min-height: 48px;
}
.fb-q-desc:focus { outline:none; border-color: var(--primary); }
.fb-q-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fb-q-required { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.fb-q-required input { accent-color: var(--primary); cursor:pointer; }
.fb-q-desc-toggle { font-size:11px; color:var(--primary); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; }
.fb-options { display:flex; flex-direction:column; gap:4px; }
.fb-option-row { display:flex; align-items:center; gap:6px; }
.fb-option-icon { color:var(--ink-mute); font-size:13px; flex-shrink:0; width:18px; text-align:center; }
.fb-option-input {
  flex:1;
  font-size:13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  box-sizing: border-box;
}
.fb-option-input:focus { outline:none; border-color:var(--primary); }
.fb-option-del {
  background:transparent; border:0; cursor:pointer;
  font-size:14px; color:var(--ink-mute); padding: 2px 4px;
}
.fb-option-del:hover { color:var(--danger, #c0392b); }
.fb-add-opt {
  font-size:12px; color:var(--primary); background:none; border:none;
  cursor:pointer; padding:0; text-decoration:none; margin-top:2px;
  align-self:flex-start; font-family:var(--sans);
}
.fb-add-opt:hover { text-decoration:underline; }
.fb-escala-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fb-escala-row label { font-size:12px; color:var(--ink-soft); }
.fb-escala-select {
  font-size:12px; padding:4px 8px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink); cursor:pointer;
}
.fb-footer {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.fb-add-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--sans);
}
.fb-add-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg, rgba(233,89,68,.04)); }
.fb-type-menu {
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 4px;
  min-width: 180px;
}
.fb-type-menu button {
  display:flex; align-items:center; gap:8px;
  width:100%; padding: 8px 12px;
  background: none; border: 0;
  border-radius: var(--r-sm);
  font-size:13px; color:var(--ink); cursor:pointer;
  font-family: var(--sans); text-align:left;
  transition: background .1s;
}
.fb-type-menu button:hover { background: var(--line); }
.fb-type-menu .fb-type-sep {
  height:1px; background:var(--line); margin: 4px 0;
}
/* Responses modal */
.fm-resp-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 20px; flex-wrap:wrap; gap:12px;
}
.fm-resp-list { display:flex; flex-direction:column; gap:12px; }
.fm-resp-item {
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); padding:16px;
}
.fm-resp-who { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.fm-resp-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--primary); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:600;
  overflow:hidden; flex-shrink:0;
}
.fm-resp-avatar img { width:100%; height:100%; object-fit:cover; }
.fm-resp-name { font-size:13px; font-weight:600; }
.fm-resp-date { font-size:11px; color:var(--ink-mute); margin-left:auto; }
.fm-resp-answer { margin-bottom:10px; }
.fm-resp-answer:last-child { margin-bottom:0; }
.fm-resp-q { font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:3px; }
.fm-resp-a { font-size:13px; color:var(--ink); white-space:pre-wrap; }
.fm-resp-empty { text-align:center; padding:32px; color:var(--ink-mute); font-size:14px; }

/* Anti "guardar como" en media (disuasión, global). Quita el menú de
   long-press en iOS Safari ("Guardar en Fotos"/"Compartir") y evita selección.
   Complementa controlslist="nodownload" y el listener de contextmenu (app.html).
   NO es seguridad real: la URL del fichero sigue siendo accesible. */
video, audio {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   UI del creador/editor de publicaciones — estilo moderno unificado.
   Compartido por el componente serclai-newpub.js (index + lider-perfil).
   Scoped a .pubform (crear + editar comparten el mismo look & feel).
   Solo usa tokens del sistema → se adapta a light/dark automáticamente.
   ═══════════════════════════════════════════════════════════════ */
.pubform { --pf-gap: 20px; }
.pubform .pf-head { margin-bottom: 24px; }
.pubform .pf-title {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 7px; color: var(--ink);
}
.pubform .pf-sub { font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); margin: 0; max-width: 48ch; }
.pubform .field { margin-bottom: var(--pf-gap); }
.pubform .field > label,
.pubform .pf-label {
  display: block; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pubform .pf-hint { font-size: 12.5px; color: var(--ink-mute); margin: -3px 0 9px; line-height: 1.45; }
.pubform .pf-foot-hint { font-size: 11px; color: var(--ink-mute); margin-top: 7px; }
.pubform input[type="text"],
.pubform input[type="url"],
.pubform textarea {
  width: 100%; box-sizing: border-box;
  padding: 13px 15px; font-size: 15px; color: var(--ink);
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.pubform input::placeholder, .pubform textarea::placeholder { color: var(--ink-mute); opacity: .85; }
.pubform input[type="text"]:focus,
.pubform input[type="url"]:focus,
.pubform textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}
.pubform textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

/* Tipo — pills scrollables estilo Instagram */
.pubform .np-tipos { display:flex; gap:8px; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 4px; }
.pubform .np-tipos::-webkit-scrollbar { display:none; }
.pubform .np-tipo-chip {
  flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center;
  min-height:40px; padding:0 20px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong); background:var(--surface);
  color:var(--ink-soft); font-size:14px; font-weight:600; line-height:1; cursor:pointer;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s, transform .08s;
}
.pubform .np-tipo-chip:hover { border-color:var(--primary); color:var(--ink); background:var(--surface-2); }
.pubform .np-tipo-chip:active { transform:scale(.96); }
.pubform .np-tipo-chip.active { background:var(--primary); color:var(--bg); border-color:var(--primary); box-shadow:var(--shadow-sm); }
.pubform .np-tipo-chip.active:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:var(--bg); }

/* Contenido — tiles de captura + dropzone */
.pubform .pf-captiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(108px, 1fr)); gap:10px; }
.pubform .pf-captiles:empty { display:none; }
.pubform .pf-captile {
  appearance:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:18px 12px; border-radius:var(--r-md); border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink); cursor:pointer; font: inherit;
  transition:border-color .15s, background .15s, transform .06s, box-shadow .15s;
}
.pubform .pf-captile:hover { border-color:var(--primary); background:var(--surface-2); box-shadow:var(--shadow-sm); }
.pubform .pf-captile:active { transform:scale(.98); }
.pubform .pf-captile svg { width:24px; height:24px; }
.pubform .pf-captile span { font-size:13px; font-weight:600; }
.pubform .pf-captile.primary { border-color:var(--primary); background:var(--primary-bg); color:var(--ink); }
/* Pestaña de captura SELECCIONADA (p.ej. Texto mientras se escribe el slide) */
.pubform .pf-captile.active { border-color:var(--primary); background:var(--primary); color:var(--bg); box-shadow:var(--shadow-sm); }
.pubform .pf-captile.active:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:var(--bg); }
/* Preview del mixto/imagen: tira horizontal con scroll (refleja el carrusel final) */
#np-images-grid.np-strip { display:flex !important; gap:8px; overflow-x:auto; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:thin; }
#np-images-grid.np-strip .np-img-tile { flex:0 0 92px; width:92px; scroll-snap-align:start; }
/* Reordenar arrastrando */
#np-images-grid .np-img-tile { cursor:grab; }
#np-images-grid .np-img-tile.np-img-dragging { opacity:.45; cursor:grabbing; }
#np-images-grid .np-img-tile.np-img-drop { outline:2px solid var(--primary); outline-offset:1px; }
.pubform .pf-dropzone {
  display:flex; align-items:center; justify-content:center; gap:10px; text-align:center;
  margin-top:10px; padding:15px 16px; border:1.5px dashed var(--line-strong); border-radius:var(--r-md);
  background:var(--surface-2); color:var(--ink-mute); font-size:13px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.pubform .pf-dropzone:hover { border-color:var(--primary); color:var(--ink-soft); background:var(--surface); }
.pubform .pf-dropzone svg { width:20px; height:20px; flex-shrink:0; stroke:currentColor; }
.pubform .pf-dropzone b { color:var(--ink-soft); font-weight:600; }

/* Temas — caja de chips */
.pubform .pf-tags-box {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:8px 10px; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2); min-height:52px; cursor:text;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.pubform .pf-tags-box:focus-within { border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.14); }
.pubform .pf-tags-box input { flex:1; min-width:140px; border:0; outline:0; background:transparent; font-size:14px; padding:4px; color:var(--ink); }
.pubform .pf-tags-suggest {
  display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-md); margin-top:6px;
  box-shadow:var(--shadow-md); max-height:220px; overflow-y:auto; z-index:20;
}

/* Bloque agrupado (editar: Contenido = portada + carrusel) */
.pubform .pf-group {
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px; background:var(--surface-2); margin-bottom: var(--pf-gap);
}
.pubform .pf-group > .pf-label:first-child { margin-bottom:12px; }
.pubform .pf-group .field:last-child { margin-bottom:0; }

/* Footer de acciones */
.pubform .pf-foot {
  display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
}
.pubform .pf-foot .btn { min-width:130px; }
@media (max-width:520px){
  .pubform .pf-foot { flex-direction:column-reverse; }
  .pubform .pf-foot .btn { width:100%; }
  .pubform .pf-title { font-size:22px; }
}

/* Overlay de captura desde cámara/micro (Pack G+) — compartido por serclai-newpub.js */
@keyframes cap-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Mientras el editor de Texto está a pantalla completa, quita el backdrop-filter del
   modal (si no, su bloque contenedor atrapa el position:fixed del editor). */
.modal-backdrop.np-fs-host { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modal-backdrop.np-fs-host .modal-card { transform: none !important; }
/* Fuerza el editor de Texto a ocupar TODO el viewport en pantalla completa
   (TinyMCE fija un width explícito al entrar; lo sobrescribimos). */
html.tox-fullscreen body .tox-tinymce.tox-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; transform: none !important; max-width: none !important; max-height: none !important; }
/* Cámara a pantalla completa (imagen/vídeo) estilo IG: el recuadro 16:9 pasa a
   ocupar todo el viewport y los controles se superponen abajo. Solo se activa
   en modo cámara (clase .cap-full la pone openCapture; en audio no). */
#cap-overlay.cap-full{ padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
#cap-overlay.cap-full .modal-card{ max-width:none !important; max-height:none !important; width:100% !important; height:100vh; height:100dvh; margin:0 !important; border-radius:0 !important; background:#000; display:flex; flex-direction:column; overflow:hidden; }
#cap-overlay.cap-full .modal-body{ padding:0 !important; flex:1; display:flex; flex-direction:column; position:relative; }
#cap-overlay.cap-full #cap-title{ position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); left:16px; right:60px; margin:0 !important; z-index:3; color:#fff; font-size:16px; text-shadow:0 1px 6px rgba(0,0,0,.7); }
#cap-overlay.cap-full #cap-preview-wrap{ position:absolute !important; inset:0; aspect-ratio:auto !important; border-radius:0 !important; height:100%; }
#cap-overlay.cap-full #cap-video{ width:100%; height:100%; object-fit:cover; }
#cap-overlay.cap-full #cap-controls{ position:absolute; left:0; right:0; bottom:0; margin:0 !important; z-index:4; justify-content:center !important; gap:14px; padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); }
#cap-overlay.cap-full #cap-info{ display:none; }
#cap-overlay.cap-full .modal-close{ z-index:5; background:rgba(0,0,0,.45); color:#fff; }
#cap-overlay.cap-full #cap-error{ position:absolute; left:16px; right:16px; bottom:96px; z-index:6; margin:0; }