/* ─────────────────────────────────────────────────────────────
   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 en dark
       #1F2A38  azul marino    — primary y bg en dark
       #2B2B2B  casi negro     — tinta extra para dark mode
  */

  /* Color — Fondos */
  --bg: #F5F1EB;          /* crema cálida, base de toda la app */
  --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 */
    --bg: #1F2A38;
    --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 {
  --bg: #1F2A38;
  --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) .btn-coral, :root:not(.theme-light) .btn-coral:hover,
  :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: #1F2A38 !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(31, 42, 56, 0.85) !important; }
  :root:not(.theme-light) .nav.scrolled,
  :root:not(.theme-light) .feed-search-sticky.scrolled { background: rgba(31, 42, 56, 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 .btn-coral, html.theme-dark .btn-coral:hover,
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: #1F2A38 !important; }
html.theme-dark .nav,
html.theme-dark .feed-search-sticky,
html.theme-dark .feed-filters,
html.theme-dark .tipo-pills { background: rgba(31, 42, 56, 0.85) !important; }
html.theme-dark .nav.scrolled,
html.theme-dark .feed-search-sticky.scrolled { background: rgba(31, 42, 56, 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(--primary); 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.

   Móvil: barra superior .serclai-bnav — siempre centrado (sólo se
   renderiza en móvil y tiene sitio de sobra: logo + hamburguesa). */
.serclai-bnav .bnav-toggle { position: relative; }
.serclai-bnav .bnav-toggle .logo-soon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* 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); }
.btn-coral:hover { background: var(--primary-hover); }

/* Estado deshabilitado genérico para .btn (p.ej. CTAs de migración
   de plataformas aún no disponibles: YouTube, Substack, Spotify). */
.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.btn:disabled:hover, .btn[disabled]:hover {
  transform: none;
  box-shadow: none;
  background: var(--primary);
}

.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); }
/* P-038: líder con lista de Contenidos + archivar en el hub */
.hub-card-lider .hub-lider-head:hover { background: var(--surface-2); 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 L-1: banner de avisos en /espacio. Compacto, color coral, click
   lleva a /perfil?tab=notificaciones. Solo aparece si hay no-leídas. */
.notif-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-bg);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: var(--r-md);
  color: var(--primary-hover);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-family: var(--sans);
}
.notif-banner:hover {
  background: rgba(var(--primary-rgb), 0.12);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.10);
}
.notif-banner-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary-hover);
}
.notif-banner-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.notif-banner-text strong {
  font-weight: 700;
  font-size: 15px;
}
.notif-banner-cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  transition: background .12s ease;
}
.notif-banner:hover .notif-banner-cta {
  background: var(--primary-hover);
}

/* ── 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; }

/* Estado deshabilitado de los CTAs de publicación. Aplica a feed,
   modal y vista de líder. Mantenemos el texto pero se ve "apagado"
   y no captura clicks. */
.btn.is-disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* (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(--primary); }

/* ── 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);
}

/* ── 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(--primary); }

  .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); }
.feed-search-hint {
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.5;
  padding: 0 2px;
  margin-top: -2px;
}
/* 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;
}
/* 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; }

/* 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; } }
/* 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 publicación por pantalla — Inicio y los dos perfiles ──────────
   El Inicio (`.feed-grid--inicio`) y las dos rejillas de perfil en formato de 1
   columna (`.feed-grid--perfil`) llenan la ventana con un solo post, como en
   iOS: allí la media va por proporción y sin techo fijo, así que al hacer scroll
   solo cabe una publicación. Aquí cabían DOS —una entera y el arranque de la
   siguiente— porque el cap de 420 px dejaba la media a poco más de media
   pantalla en una columna de 614 px.

   El ANCHO no se toca (la columna sigue siendo la misma y la media conserva su
   4:5). El modelo es el de iOS: la TARJETA reclama el alto de una pantalla
   (min-height contra el viewport, descontando solo el hueco de la rejilla —y en
   móvil la barra inferior—) y la MEDIA es flexible: absorbe el sobrante hasta su
   propio techo. Un techo solo en la media no basta: encoger la media acerca la
   siguiente tarjeta al borde y el sliver reaparece; con el min-height en la
   tarjeta, la siguiente arranca siempre por debajo del pliegue.

   El Inicio comparte el «una por pantalla» pero NO el mosaico: la rejilla de 3 y
   la lectura al tocar una baldosa son solo del perfil, por eso el modificador va
   aparte (`--inicio` sin `data-serclai-mosaic`). */
.feed-grid--perfil .feed-card,
.feed-grid--inicio .feed-card {
  min-height: calc(100dvh - 24px);
}
/* El sobrante del pantallazo lo absorbe el CUERPO, no la media: la caja de
   media mide exactamente lo que su proporción manda (reglas #feed-grid /
   #mis-pubs de abajo) y estirarla rompería el «sin bandas, sin recortes». */
.feed-grid--perfil .feed-card .feed-body,
.feed-grid--inicio .feed-card .feed-body {
  flex: 1 1 auto;
}
@media (max-width: 720px) {
  /* La bottom-nav (70px) tapa el final del viewport: la pantalla útil es más
     corta y la tarjeta debe llenar ESA, no la ventana entera. */
  .feed-grid--perfil .feed-card,
  .feed-grid--inicio .feed-card {
    /* 70px de bottom-nav + el hueco de la rejilla (16px en móvil): con -94px la
       siguiente tarjeta asomaba 8px por encima de la barra. */
    min-height: calc(100dvh - 84px);
  }
}
/* 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;
}
/* 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 {
  min-height: 0;
}
[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: contain;
  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: contain; /* sin zoom — imagen completa con bandas si hace falta */
  background: #000;     /* las bandas (top/bottom) en negro */
}
/* 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; 9:16 hasta entonces) define la
   caja: llena el alto disponible de la ventana y su ancho sale de la
   proporción, centrada. Sin bandas y sin recortes — es el `mediaBoxSize` de
   iOS escrito en CSS. 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. */
#feed-grid:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text),
#mis-pubs:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text) {
  --media-ar: 0.5625;   /* 9:16 hasta que la media diga la suya */
  aspect-ratio: var(--media-ar);
  width: min(100%, calc((100dvh - 190px) * var(--media-ar)));
  height: auto;
  max-height: none;
  margin-inline: auto;
}
/* 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;
}
@media (max-width: 720px) {
  /* El mismo descuento que la tarjeta: la bottom-nav recorta la pantalla útil. */
  #feed-grid:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text),
  #mis-pubs:not([data-density="3"]) .feed-thumb:not(.feed-thumb-text) {
    width: min(100%, calc((100dvh - 270px) * var(--media-ar)));
  }
}
.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: contain;
  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;
}

.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); }

.lider-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.lider-switcher::-webkit-scrollbar { display: none; }

.lider-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
  font-family: var(--sans);
}
.lider-tab:hover { border-color: var(--ink-soft); }
.lider-tab.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);  /* not white: --ink flips to cream in dark mode */
}
.lider-tab.todos { padding-left: 14px; }
.lider-tab img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.lider-tab-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 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: all var(--t-base);
  text-align: left;
  width: 100%;
  font-family: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.contenido-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.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; }
/* 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); }
.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;
  max-width: 640px;
}
.contenido-section-title {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 32px 0 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(31, 42, 56, 0.96);
  }
}
html.theme-dark .serclai-bnav {
  background: rgba(31, 42, 56, 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; }
}

/* ── 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);
}

/* ── Hamburger top nav (solo móvil ≤ 720px) ─────────────────────
   Desktop: no se toca (.serclai-bnav {display:none} por defecto).
   Móvil: barra SUPERIOR con logo Serclai + ≡ (50px);
   al abrirse, el panel baja como sheet sobre el contenido.        */

/* Botón hamburger — display:none en desktop, flex en móvil */
.bnav-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--sans);
  padding: 0 16px;
  gap: 0;
}
.bnav-toggle:hover { opacity: 0.8; }

/* Branding lado izquierdo */
.bnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

/* Backdrop oscuro (solo activo cuando el menú está abierto) */
.bnav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 148;
}
.bnav-backdrop.open { display: block; }

@media (max-width: 720px) {
  /* Nav en la parte SUPERIOR */
  .serclai-bnav {
    padding: 0;
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--line);
  }

  /* Mostrar el botón hamburger */
  .bnav-toggle { display: flex; }

  /* Ocultar el grid de ítems por defecto */
  .serclai-bnav-inner {
    display: none;
    position: fixed;
    left: 0; right: 0;
    top: 50px;
    bottom: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 6px 0 8px;
    z-index: 151;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
  }

  /* Menú abierto: mostrar los ítems como lista vertical */
  .serclai-bnav.bnav-open .serclai-bnav-inner { display: flex; }

  .serclai-bnav.bnav-open .bnav-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 13px 24px;
    font-size: 15px;
    border-radius: 0;
    color: var(--ink);
    width: 100%;
    max-width: none;
  }
  .serclai-bnav.bnav-open .bnav-btn.active {
    color: var(--primary);
    background: var(--primary-bg);
  }
  .serclai-bnav.bnav-open .bnav-btn svg { width: 20px; height: 20px; }
  .serclai-bnav.bnav-open .bnav-btn .bnav-avatar { width: 24px; height: 24px; }

  /* Padding del body: ARRIBA (nav en top) no abajo */
  body.has-bnav { padding-top: 54px; padding-bottom: 0; }

  /* Ocultar el nav desktop en móvil (hamburger lo reemplaza) */
  body.has-bnav .nav { display: none !important; }

  /* ── 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: nav en top — safe area superior (notch) */
  @media (max-width: 720px) {
    body.has-bnav {
      padding-top: calc(50px + env(safe-area-inset-top, 0px));
      padding-bottom: 0;
    }
    .serclai-bnav {
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: 0;
    }
  }
}

/* ── 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: contain;
  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%; }
.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;
}
/* ── 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;
}
.gf-toggle input:checked + .gf-toggle-track { background: var(--primary); }
.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; }
.gf-text-answer { padding: 8px 12px; background: var(--bg); border-radius: var(--r-sm); font-size: 13px; color: var(--ink); }
/* 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: 16px; }
.gf-ind-q { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.gf-ind-a { font-size: 14px; color: var(--ink); white-space: pre-wrap; }
/* ── 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-progress-bar { width: 100%; height: 4px; background: var(--line); border-radius: 2px; }
.fm-progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width .3s; }
.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); }
.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; }
.fm-textarea { min-height: 80px; resize: vertical; 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; }