/* ─────────────────────────────────────────────────────────────
   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 {
  /* Altura del banner DEMO/STAGING (serclai-theme.js). 0 en prod normal:
     las vistas a pantalla completa restan esto vía calc() sin efecto alguno
     cuando el banner no se pinta. El banner lo sobreescribe con su altura. */
  --sdb-h: 0px;

  /* 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: #FFFFFF;     /* cards y modales */
  --surface-2: #EBE5DA;   /* sidebar, secciones — derivado natural
                             entre bg y accent (no introduce hue nuevo). */

  /* Color — Tinta */
  --ink: #1F2A38;         /* azul marino casi negro */
  --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-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;

  /* Aliases retrocompatibles — toda la app sigue usando --coral. */
  --coral: var(--primary);
  --coral-soft: #44556B;
  --coral-bg: var(--primary-bg);
  --coral-rgb: var(--primary-rgb);

  /* 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;
    --ink: #F5F1EB;
    --ink-soft: #D7C8B6;
    --ink-mute: #8A93A1;
    --line: #44556B;
    --line-strong: #6B7A92;
    --primary: #D7C8B6;
    --primary-bg: #3A4B5F;
    --primary-hover: #E8DDC9;
    --primary-rgb: 215, 200, 182;
    --coral: var(--primary);
    --coral-soft: #D7C8B6;
    --coral-bg: var(--primary-bg);
    --coral-rgb: var(--primary-rgb);
    --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;
  --ink: #F5F1EB;
  --ink-soft: #D7C8B6;
  --ink-mute: #8A93A1;
  --line: #44556B;
  --line-strong: #6B7A92;
  --primary: #D7C8B6;
  --primary-bg: #3A4B5F;
  --primary-hover: #E8DDC9;
  --primary-rgb: 215, 200, 182;
  --coral: var(--primary);
  --coral-soft: #D7C8B6;
  --coral-bg: var(--primary-bg);
  --coral-rgb: var(--primary-rgb);
  --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(--coral); 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: white;
}
.btn:hover { background: #2D2C2A; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-coral { background: var(--coral); }
.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(--coral);
}

.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(--coral); 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(--coral);
  font-weight: 600;
}
.nav-links > a.nav-top-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--coral);
  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: white;
}

/* ── 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(--coral);
  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(--coral);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

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

.auth-shell {
  min-height: calc(100vh - var(--sdb-h, 0px));
  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: calc(100vh - var(--sdb-h, 0px));
}
.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: var(--sdb-h, 0px);
  height: calc(100vh - var(--sdb-h, 0px));
  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, #cursos, …). */
.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(--coral-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); }
.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(--coral);
  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(--coral);
  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(--coral);
}
.notif-card-unread {
  background: var(--coral-bg);
  border-left-color: var(--coral);
}
.notif-card-unread:hover {
  background: var(--coral-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(--coral);
  font-weight: 500;
}
.notif-cuerpo a {
  color: var(--coral);
  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 /portal. 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(--coral-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(--coral);
  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(--coral);
  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 curso ya comprado (/portal?...&curso=). */
.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(--coral);
  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(--coral);
  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 {
  background: #c46647;
  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(--coral);
  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(--coral)}
.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(--coral-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(--coral-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;
  bottom: 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(--coral); 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(--coral-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(--coral);
  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(--coral);
  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(--coral); }
.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(--coral); }
.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(--coral);
  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(--coral);
  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(--coral);
}
.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(--coral) 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(--coral);
  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(--coral);
  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(--coral) 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(--coral);
  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(--coral);
  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="reel"]     { background: rgba(217, 67, 67, .85); }
.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 */
.imported-badge.is-tipo[data-tipo="podcast"]  { background: rgba(30, 215, 96, .9); color: #0a3d20; }   /* Spotify green */
.imported-badge.is-tipo[data-tipo="articulo"] { background: rgba(255, 100, 25, .9); } /* Substack orange */
.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(--coral); border-color: var(--coral); }
.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(--coral);
}
.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(--coral);
  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;
  color: white;
  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(255, 255, 255, 0.6);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-head .dot {
  width: 8px;
  height: 8px;
  background: var(--coral);
  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(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-msg.ia {
  align-self: flex-start;
  background: var(--coral);
  color: white;
}
.chat-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  opacity: 0;
  animation: msgIn 200ms ease forwards;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 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(--coral);
  color: var(--ink);
}
.feed-filter.on {
  background: var(--coral);
  border-color: var(--coral);
  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(--coral);
  background: rgba(var(--primary-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10);
}

/* Ícono de origen de publicación importada (IG, Spotify, YouTube,
   Substack). Pack C Fase 8. Aparece en la esquina superior-derecha
   de la thumb si origen != 'serclai'. */
.pub-origin-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.pub-origin-icon[data-origen="serclai"] { color: var(--coral); }
.pub-origin-icon[data-origen="spotify"]   { background: #1DB954; }
.pub-origin-icon[data-origen="youtube"]   { background: #FF0000; }
.pub-origin-icon[data-origen="substack"]  { background: #FF6719; }
.pub-origin-icon svg { display: block; }

/* Pack F: card de SOLO TEXTO (articulo 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;
}

/* 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(--coral);
  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: white;
  border-color: var(--ink);
}
.chip.active:hover { background: #2D2C2A; }

.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 / Foto / Podcast / 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(--coral);
  border-color: var(--coral);
  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: calc(100vh - var(--sdb-h, 0px));
  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(--coral); }

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

/* ── 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: calc(100vh - var(--sdb-h, 0px));
    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/portal) ── */
  /* 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(--coral); }

  .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(--coral);
    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(--coral);
}
.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(--coral-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) */
  .sidebar-logo,
  .sidebar-nav { 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(--coral);
  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(--coral);
  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;
}

.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);
  cursor: pointer;
  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(--coral); }
  60%  { box-shadow: 0 0 0 8px rgba(255, 107, 107, .12); border-color: var(--coral); }
  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(--coral-bg), var(--surface-2));
  overflow: hidden;
  display: block;
}
.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;
  cursor: grab;
  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:active { cursor: grabbing; }
.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); }
/* Reels: portrait completo 9:16 (igual que IG Reels). */
.feed-card[data-tipo="reel"] .feed-thumb {
  aspect-ratio: 9 / 16;
  max-height: 420px;
}
/* Videos horizontales (YouTube, MP4) → 16:9 */
.feed-card[data-tipo="video"] .feed-thumb {
  aspect-ratio: 16 / 9;
}

/* ── Feeds de publicaciones — marco uniforme estilo Reels ───────────────────
   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 del líder (#mis-pubs de
   lider-perfil.html), TODAS las publicaciones comparten el MISMO marco 9:16 →
   altura uniforme post a post. object-fit:contain mantiene la proporción real
   de cada media y letterboxea con bandas NEGRAS lo que no encaje (a los lados
   si es horizontal/cuadrado, arriba/abajo si es panorámico): nunca se recorta
   ni se deforma. En móvil el marco ocupa 66vh (una historia por pantalla,
   dejando ~10% de la siguiente como continuidad); en desktop se mantiene el cap
   de 420px. El selector con #id gana en especificidad a las reglas por tipo, así
   que unifica reel/vídeo/foto/carrusel/mixto. NO afecta a previews de curso en
   la app, comunidad ni portal, que conservan su marco original. */
#feed-grid .feed-thumb:not(.feed-thumb-text),
#mis-pubs .feed-thumb:not(.feed-thumb-text) {
  aspect-ratio: 9 / 16;
  max-height: 420px;
}
#feed-grid .feed-thumb:not(.feed-thumb-text) img,
#mis-pubs .feed-thumb:not(.feed-thumb-text) img {
  object-fit: contain;
}
@media (max-width: 640px) {
  #feed-grid .feed-thumb:not(.feed-thumb-text),
  #mis-pubs .feed-thumb:not(.feed-thumb-text) {
    max-height: 66vh;
  }
}
.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);
}
.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 podcasts 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 podcast (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(--coral-bg), var(--surface-2));
}
.feed-thumb-audio-spotify {
  background: linear-gradient(135deg, #1DB95433, var(--surface-2));
}
.feed-thumb-audio-icon {
  font-size: 56px;
  opacity: 0.78;
  filter: drop-shadow(0 2px 8px rgba(31,30,29,0.18));
}
.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.alumnos {
  background: var(--coral);
  color: white;
}
.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);
}

.feed-thumb-duration {
  position: absolute;
  bottom: 12px;
  right: 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);
}

/* 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. */
.feed-thumb:has(.vc-wrap):hover .feed-thumb-fecha,
.feed-thumb:has(.vc-wrap):hover .feed-thumb-duration,
.feed-thumb:has(.vc-wrap.vc-paused) .feed-thumb-fecha,
.feed-thumb:has(.vc-wrap.vc-paused) .feed-thumb-duration {
  opacity: 0;
  pointer-events: none;
}

/* 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(--coral-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 alumno) ─────────────── */
.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(--coral);
}
.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(--coral); 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: #fff;
  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(--coral-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;
}

.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 URL es null = seed demo) */

.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; }
.modal-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  /* Antes 580px (estrecho). Ahora 720px para que los carruseles
     portrait 4:5 y los reels 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;
  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;
}
.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 `foto` (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 reels, 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;
}
.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(--coral-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 `foto` (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);
  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;
  }
}

.modal-demo-banner {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--coral-bg);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--primary-hover);
  line-height: 1.5;
}

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

/* Tabs (portal 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(--coral);
}

/* Header del portal cliente */
.portal-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);
}
.portal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.portal-lider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal-lider img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.portal-lider-info { line-height: 1.25; }
.portal-lider-name { font-weight: 600; font-size: 14px; }
.portal-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: white;
}
.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=foto 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: white;
}

.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.alumnos { color: var(--coral); }

/* Clientes (#mis-alumnos) 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 el nombre largo (p.ej. el anónimo
   `demo-cliente-XXXX` en staging) 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-alumnos` para no tocar el resto de `.pub-row` (listado de pubs). */
@media (max-width: 720px) {
  #mis-alumnos .pub-row { flex-wrap: wrap; row-gap: 8px; }
  #mis-alumnos .pub-row-info { flex-basis: calc(100% - 100px); }
}

/* Accesos del cliente: chips de los cursos a los que tiene acceso. Cada
   chip salta al editor del curso. Se renderizan dentro de `.pub-row-info`
   (bajo el email) y envuelven si hay varios. */
.al-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.al-curso-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(--coral);
  background: var(--coral-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);
}
.al-curso-chip:hover {
  border-color: var(--coral);
  filter: brightness(0.98);
}
.al-accesos-empty {
  font-size: 12px;
  color: var(--ink-mute);
}

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

.cursos-list {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}
.cursos-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;
}
.cursos-list-row:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cursos-list-actions { flex-shrink: 0; margin-left: auto; }
.cursos-list-portada {
  width: 80px; height: 50px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--coral-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. */
.cursos-list-row .cursos-list-portada { width: 72px; height: 72px; }
.cursos-list-info { flex: 1; min-width: 0; }
.cursos-list-titulo {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cursos-list-meta { font-size: 12px; color: var(--ink-mute); }
.cursos-list-actions { display: flex; gap: 6px; align-items: center; }
.btn-archivar-curso {
  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-curso:hover { border-color: var(--coral); color: var(--coral); }

/* Sección "Archivados" colapsable bajo la lista de contenidos */
.cursos-archived-section { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.cursos-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;
}
.cursos-archived-toggle:hover { color: var(--ink); }
.cursos-archived-chev { transition: transform .2s; display: inline-flex; }
.cursos-archived-section.is-open .cursos-archived-chev { transform: rotate(90deg); }
.cursos-archived-count {
  margin-left: auto; font-size: 11px; color: var(--ink-mute);
  background: var(--surface); padding: 1px 7px; border-radius: 10px; font-weight: 500;
}
.cursos-archived-body { display: none; }
.cursos-archived-section.is-open .cursos-archived-body { display: grid; gap: 10px; padding: 8px 0 4px; }
.cursos-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;
}
.cursos-archived-row:hover { opacity: 1; }
.cursos-archived-info { flex: 1; min-width: 0; }
.cursos-archived-titulo { font-family: var(--serif); font-size: 15px; letter-spacing: -.01em; }
.cursos-archived-meta { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.btn-desarchivar-curso {
  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-curso:hover { border-color: var(--coral); color: var(--coral); }

/* Editor de un curso individual */
.curso-editor-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.curso-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(--coral-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; }
.curso-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) {
  .curso-editor-header { gap: 14px; }
  .curso-editor-header .ed-portada-wrap,
  .curso-editor-header .curso-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(--coral);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}
.modulo-head-info { flex: 1; min-width: 0; }
.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;
}
.modulo-chevron {
  color: var(--ink-mute);
  transition: transform var(--t-fast);
}
.modulo-card.open .modulo-chevron { transform: rotate(180deg); }

.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(--coral-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(--coral-bg, rgba(var(--primary-rgb), 0.08));
  color: var(--coral);
}
/* 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(--coral-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(--coral); color: white; border-color: var(--coral); }
.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 lección dentro de un módulo */
.add-leccion-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-leccion-toggle:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: var(--coral-bg);
}
.add-leccion-toggle .plus { font-size: 16px; line-height: 1; }

.add-leccion-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-leccion-form.open { display: block; }

.add-leccion-tipos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.add-leccion-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-leccion-tipo:hover { border-color: var(--ink-soft); color: var(--ink); }
.add-leccion-tipo.on {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.add-leccion-tipo svg { flex-shrink: 0; }

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

.add-leccion-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.add-leccion-seccion {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--bg);
  font-size: 11px;
}
.add-leccion-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-leccion-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(--coral);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.seccion-head-info { flex: 1; min-width: 0; }
.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;
}
.seccion-card.open .modulo-chevron { transform: rotate(180deg); }

/* ── Editor de curso: 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>. */
body.modal-producto-open { overflow: hidden !important; }
body.modal-producto-open > *:not(#modal-editor-producto):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(--coral); border-bottom-color: var(--coral); 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; }
.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(--coral); 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 portal alumno ────────────────────── */
.portal-modulo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.portal-modulo-head {
  padding: 22px 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: background var(--t-fast);
  user-select: none;
}
.portal-modulo-head:hover { background: var(--surface-2); }
.portal-modulo-head-orden {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--coral);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  line-height: 1;
}
.portal-modulo-head-info { flex: 1; }
.portal-modulo-head-titulo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.portal-modulo-head-meta {
  font-size: 13px;
  color: var(--ink-mute);
}
.portal-modulo-chevron {
  color: var(--ink-mute);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.portal-modulo.open .portal-modulo-chevron { transform: rotate(180deg); }
.portal-modulo-body {
  display: none;
  padding: 8px 26px 28px;
  border-top: 1px solid var(--line);
}
.portal-modulo.open .portal-modulo-body { display: block; }

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

/* ── Cursos (portal alumno) ─────────────────────────────────── */

.cursos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 8px 0 40px;
}

.curso-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: column;
}
.curso-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.curso-card-portada {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, var(--coral-bg) 0%, var(--surface-2) 100%);
  overflow: hidden;
}
.curso-card-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.curso-card:hover .curso-card-portada img { transform: scale(1.04); }
.curso-card-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,30,29,0.55) 100%);
  pointer-events: none;
}
.curso-card-lider-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.curso-card-lider-overlay img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  flex-shrink: 0;
}
.curso-card-lider-name {
  font-size: 12px;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.curso-card-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.curso-card-titulo {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.curso-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;
}
.curso-card-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.curso-card-meta strong { color: var(--ink-soft); font-weight: 600; }

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

.feed-card.completado .feed-thumb-tag.alumnos,
.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 curso */
.curso-header {
  margin: 24px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.curso-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);
}
.curso-back:hover { color: var(--ink); }
.curso-titulo {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.curso-desc {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 640px;
}
.curso-section-title {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 32px 0 12px;
}

/* Lista vertical de publicaciones dentro de un curso */
.curso-pubs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.curso-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%;
}
.curso-pub:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.curso-pub-thumb {
  position: relative;
  width: 160px;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.curso-pub-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.curso-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;
}
.curso-pub-body { min-width: 0; }
.curso-pub-titulo {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
  line-height: 1.3;
}
.curso-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;
}
.curso-pub-meta {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 720px) {
  .cursos-grid { grid-template-columns: 1fr; }
  .curso-pub { grid-template-columns: 1fr; }
  .curso-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-wrap { position: relative; }
.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(--coral);
  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(--coral);
}
/* 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(--coral);
}
.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(--coral);
    background: var(--coral-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: white;
  border: 1px solid var(--ink);
  transition: all var(--t-base);
  text-decoration: none;
  min-width: 152px;
}
.app-badge:hover {
  background: #2D2C2A;
  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: white;
  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(--coral);
  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(--coral);
  color: white;
  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(255,255,255,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: white; }

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

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

.app-cta-block {
  margin: 24px 0 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--ink) 0%, #2D2C2A 100%);
  color: white;
  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; }
/* Botón de velocidad: texto en vez de icono, ancho variable */
.vc-speed {
  width: auto;
  min-width: 30px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
/* 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%;
}
/* Pantalla completa */
.vc-wrap:fullscreen,
.vc-wrap:-webkit-full-screen {
  background: #000;
  width: 100vw;
  height: 100vh;
}
.vc-wrap:fullscreen > .modal-video,
.vc-wrap:-webkit-full-screen > .modal-video {
  max-height: 100vh;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vc-wrap:fullscreen .vc-bar,
.vc-wrap:-webkit-full-screen .vc-bar { opacity: 1; }

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

/* ── Mixto Builder (modal Nueva Publicación) — fancy ───────── */
#pub-mixto-builder, #np-mixto-builder { margin-top: 4px; }

.mixto-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-mute);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mixto-section-label::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
}
.mixto-section-label::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%238A93A1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

/* Per-type CSS custom props — consumed by card + icon */
.mixto-type-card[data-mtype="foto"]  { --mc: #3b82f6; --mc-a: rgba(59,130,246,.12); --mc-b: rgba(59,130,246,.06); }
.mixto-type-card[data-mtype="video"] { --mc: #a855f7; --mc-a: rgba(168,85,247,.12); --mc-b: rgba(168,85,247,.06); }
.mixto-type-card[data-mtype="audio"] { --mc: #10b981; --mc-a: rgba(16,185,129,.12);  --mc-b: rgba(16,185,129,.06); }
.mixto-type-card[data-mtype="texto"] { --mc: #f59e0b; --mc-a: rgba(245,158,11,.12);  --mc-b: rgba(245,158,11,.06); }

.mixto-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.mixto-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 20px 8px 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s cubic-bezier(.34,1.4,.64,1), box-shadow .2s;
  font-family: inherit;
  font-size: 0;
  outline: none;
  overflow: hidden;
}
/* Animated accent bottom line */
.mixto-type-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--mc, transparent);
  transform: scaleX(0);
  transform-origin: center bottom;
  transition: transform .25s cubic-bezier(.34,1.4,.64,1);
}
.mixto-type-card:hover::after, .mixto-type-card.active::after { transform: scaleX(1); }

.mixto-type-card:hover {
  border-color: var(--mc, var(--line-strong));
  background: var(--mc-b, rgba(255,255,255,.03));
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.11), 0 0 0 1px var(--mc-b, transparent) inset;
}
.mixto-type-card.active {
  border-color: var(--mc, var(--line-strong));
  background: var(--mc-b, rgba(255,255,255,.03));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 3px var(--mc-b, transparent);
}
.mixto-type-card:focus-visible { outline: 2px solid var(--mc, var(--ink)); outline-offset: 3px; }

/* Icon pill */
.mixto-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--mc-a, rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), background .2s;
}
.mixto-type-card:hover .mixto-type-icon  { transform: scale(1.1) translateY(-1px); background: var(--mc-a, rgba(255,255,255,.09)); }
.mixto-type-card.active .mixto-type-icon { transform: scale(1.05); background: var(--mc-a, rgba(255,255,255,.09)); }

.mixto-type-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: .1px;
  transition: color .18s;
}
.mixto-type-card:hover .mixto-type-label,
.mixto-type-card.active .mixto-type-label { color: var(--ink); }

/* Sub-panel — targets both modal variants */
#mixto-sub-panel, #np-mixto-sub {
  margin-top: 10px;
  padding: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2, var(--surface));
  animation: mixtoSubIn .22s cubic-bezier(.34,1.3,.64,1);
}
@keyframes mixtoSubIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mixto-sub-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-weight: 500;
}
.mixto-capture-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn-mixto-capture {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--ink);
  color: var(--surface);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  font-family: inherit;
  line-height: 1;
  text-align: center;
}
.btn-mixto-capture:hover  { opacity: .85; transform: translateY(-1px); }
.btn-mixto-capture:active { opacity: 1; transform: translateY(0); }

.btn-mixto-capture-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  font-family: inherit;
  line-height: 1;
  text-align: center;
}
.btn-mixto-capture-outline:hover {
  border-color: var(--ink);
  background: var(--surface-2, rgba(0,0,0,.04));
  transform: translateY(-1px);
}

#mixto-sub-cancel, #np-mixto-cancel {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: inline-block;
  transition: color .15s;
}
#mixto-sub-cancel:hover, #np-mixto-cancel:hover { color: var(--ink); }

#mixto-text-input, #np-mixto-text {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  resize: vertical;
  font-size: 14px;
  background: var(--surface);
  font-family: inherit;
  color: var(--ink);
  transition: border-color .15s;
  display: block;
  box-sizing: border-box;
}
#mixto-text-input:focus, #np-mixto-text:focus { border-color: var(--ink); outline: none; }

/* Slides strip */
.mixto-slides-area-label {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0 0 8px;
}
.mixto-slides-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 2px 10px;
  scrollbar-width: thin;
}
.mixto-slides-strip::-webkit-scrollbar { height: 4px; }
.mixto-slides-strip::-webkit-scrollbar-track { background: transparent; }
.mixto-slides-strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

.mixto-slide-thumb {
  flex-shrink: 0;
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-2, var(--surface));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform .15s cubic-bezier(.34,1.4,.64,1), box-shadow .15s;
}
.mixto-slide-thumb:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

.mixto-slide-thumb img,
.mixto-slide-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mixto-slide-thumb-icon { font-size: 24px; pointer-events: none; }
.mixto-slide-thumb-label {
  font-size: 9px;
  color: var(--ink-mute);
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  letter-spacing: .2px;
}
.mixto-slide-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, transform .12s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mixto-slide-remove:hover { background: #dc2626; transform: scale(1.15); }

.mixto-slide-num {
  position: absolute;
  bottom: 4px;
  left: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  pointer-events: none;
  line-height: 1;
}
/* Dashed "+ añadir" button at end of strip */
.mixto-add-more {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 2px dashed var(--line-strong);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: border-color .2s, background .2s;
  font-family: inherit;
  padding: 0;
}
.mixto-add-more:hover { border-color: var(--ink); background: var(--mc-b, rgba(0,0,0,.04)); }
.mixto-add-more svg { opacity: .4; transition: opacity .2s; }
.mixto-add-more:hover svg { opacity: .8; }
.mixto-add-more span { font-size: 9px; font-weight: 700; color: var(--ink-mute); letter-spacing: .2px; }

/* ── 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(--coral); 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(--coral); }
.gf-tab.active { color: var(--coral); border-bottom-color: var(--coral); }
.gf-tab-badge {
  background: var(--coral); 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(--coral);
}
.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(--coral); }
.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(--coral); }
/* 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(--coral); color: var(--coral); }
.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(--coral);
  cursor: default;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.gf-q-card.gf-seccion { border-top: 4px solid var(--coral); }
/* 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(--coral); }
.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(--coral); }
/* 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(--coral); }
/* 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(--coral); }
.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(--coral); }
.gf-opt-otro-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; color: var(--coral); 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(--coral); }
.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(--coral); 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(--coral); }
.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(--coral); }
.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(--coral); 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(--coral); }
.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(--coral); border-bottom-color: var(--coral); 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(--coral); 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(--coral); }
/* ── Form-fill (portal) 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(--coral);
  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 alumno) */
.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(--coral); 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(--coral); }
.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(--coral); 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(--coral); }
.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(--coral); 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(--coral); color: var(--coral); }
.fm-scale-btn.selected { background: var(--coral); border-color: var(--coral); 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(--coral); }
.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(--coral); 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(--coral); 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(--coral); }
.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(--coral); box-shadow: 0 0 0 2px var(--coral-light, rgba(233,89,68,.12)); }
.fb-q-card.fb-seccion { border-left: 3px solid var(--coral); 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(--coral); }
.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(--coral); }
.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(--coral); cursor:pointer; }
.fb-q-desc-toggle { font-size:11px; color:var(--coral); 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(--coral); }
.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(--coral); 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(--coral); color:var(--coral); background:var(--coral-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(--coral); 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;
}