/* ═══════════════════════════════════════════════════════════════
   ESCRITORIO (>=1024px) — menú lateral, panel derecho y barra superior de Styelitt.
   Se carga DESPUÉS de los estilos de cada página y funciona solo (no depende de feed.css), así lo usan todas las secciones:
   Explorar (listar_posts.html), Scrools (scrools.html) y las que sigan.
   Usa los colores del tema (claro/oscuro). Poco dorado a propósito: el acento es el color del texto.
   ═══════════════════════════════════════════════════════════════ */

/* en celular y tablet pequeña estos paneles no existen */
.ed-lateral, .ed-derecha { display: none; }

/* esqueletos de carga */
.ed-esq {
  height: 40px; border-radius: 12px;
  background: linear-gradient(90deg, var(--w04) 0%, var(--w09, var(--w07)) 50%, var(--w04) 100%);
  background-size: 200% 100%; animation: edBrillo 1.3s linear infinite;
}
@keyframes edBrillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ed-esq { animation: none; } }

@media (min-width: 1024px) {

  /* ── el buscador y el carrusel de móvil sobran en Explorar: arriba ya hay una barra de búsqueda ── */
  .sf-search, .sf-vip-wrap { display: none !important; }

  /* ═════════ MENÚ LATERAL (fijo) ═════════ */
  .ed-lateral {
    display: flex; flex-direction: column; gap: 16px;
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 500;
    padding: 20px 14px 16px; overflow-y: auto;
    border-right: 1px solid var(--border-sub);
    background: var(--k527, var(--k97, var(--bg)));
    -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .ed-lateral > * { flex-shrink: 0; }   /* nada se encoge: si la ventana es baja, el menú se desplaza */
  .ed-logo {
    display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px;
    text-decoration: none; color: var(--text);
    font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  }
  .ed-logo__marca { width: 26px; height: 26px; fill: var(--text); flex-shrink: 0; }
  .ed-logo__img { display: block; height: 46px; width: auto; max-width: 100%; }
  .ed-nav { display: flex; flex-direction: column; gap: 2px; }
  .ed-nav a {
    display: flex; align-items: center; gap: 15px; padding: 11px 14px; border-radius: 14px;
    text-decoration: none; font-family: 'Montserrat', sans-serif;
    font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: -.005em;
    transition: background .2s ease, color .2s ease;
  }
  .ed-nav a svg {
    width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .ed-nav a:hover { background: var(--w05); color: var(--text); }
  .ed-nav a.active { background: var(--w07); color: var(--text); font-weight: 700; }
  .ed-nav a.active svg { stroke-width: 2.1; }

  .ed-lateral .ed-publicar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--text); color: var(--bg); font: 700 14.5px 'Montserrat', sans-serif; margin-top: 2px;
    transition: opacity .2s ease, transform .2s ease;
  }
  .ed-lateral .ed-publicar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .ed-lateral .ed-publicar:hover { opacity: .9; transform: translateY(-1px); }

  /* clubs */
  .ed-clubs { display: flex; flex-direction: column; gap: 6px; }
  .ed-clubs__cab { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
  .ed-clubs__cab h5 { margin: 0; font: 700 11.5px 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .7px; color: var(--muted2); }
  .ed-clubs__cab a { font-size: 11.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
  .ed-clubs__cab a:hover { color: var(--text); }
  .ed-clubs__lista { display: flex; flex-direction: column; gap: 2px; }
  .ed-club {
    display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 12px;
    text-decoration: none; color: var(--text); transition: background .2s ease;
  }
  .ed-club:hover { background: var(--w05); }
  .ed-club__img {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; object-fit: cover; background: var(--w09, var(--w07));
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--muted);
  }
  .ed-club__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ed-club__nombre { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-club__miembros { font-size: 11px; color: var(--muted); }
  .ed-club__mio { width: 7px; height: 7px; border-radius: 50%; background: var(--text); opacity: .55; flex-shrink: 0; }
  .ed-vacio { padding: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .ed-vacio a { color: var(--text); font-weight: 700; }

  .ed-lateral .sf-sidebar-footer { display: block; margin-top: auto; padding: 6px 10px 0; font-size: 11px; color: var(--muted2); line-height: 1.5; }

  /* ═════════ PANEL DERECHO (fijo) ═════════ */
  .ed-derecha {
    display: flex; flex-direction: column; gap: 14px;
    position: fixed; top: 0; right: 0; bottom: 0; width: 336px; z-index: 500;
    padding: 24px 18px; overflow-y: auto;
    border-left: 1px solid var(--border-sub);
    background: var(--k363, var(--k97, var(--bg)));
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .ed-derecha > * { flex-shrink: 0; }
  .ed-widget { background: var(--surface, var(--w04)); border: 1px solid var(--border-sub); border-radius: 20px; padding: 16px 16px 12px; }
  .ed-widget .sf-widget__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .ed-widget .sf-widget__head a { font-size: 11.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
  .ed-widget .sf-widget__head a:hover { color: var(--text); }
  .ed-widget h5 {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -.01em;
  }
  .ed-widget .dot-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
  .ed-ico-llama { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ed-lista { display: flex; flex-direction: column; gap: 2px; }

  .ed-tema {
    display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px;
    background: none; border: none; width: 100%; text-align: left; cursor: pointer; color: var(--text);
    font-family: inherit; transition: background .2s ease;
  }
  .ed-tema:hover { background: var(--w05); }
  .ed-tema__n { width: 18px; font-size: 12.5px; font-weight: 800; color: var(--muted2); text-align: center; flex-shrink: 0; }
  .ed-tema__info { display: flex; flex-direction: column; min-width: 0; }
  .ed-tema__tag { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-tema__cuenta { font-size: 11.5px; color: var(--muted); }

  .ed-persona {
    display: flex; align-items: center; gap: 11px; padding: 8px 8px; border-radius: 12px;
    text-decoration: none; color: var(--text); transition: background .2s ease;
  }
  .ed-persona:hover { background: var(--w05); }
  .ed-persona__foto { position: relative; flex-shrink: 0; }
  .ed-persona__foto img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; background: var(--w09, var(--w07)); }
  .ed-persona__punto { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--bg2, var(--bg)); }
  .ed-persona__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ed-persona__nombre { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-persona__sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-persona__sub.verde { color: #22a05a; }
  .ed-pct {
    flex-shrink: 0; min-width: 52px; text-align: center; padding: 5px 10px; border-radius: 999px;
    background: var(--w07); font-size: 12px; font-weight: 800; color: var(--text);
  }
  .ed-boton-linea {
    display: block; margin: 6px 4px 2px; padding: 10px; text-align: center; text-decoration: none;
    border: 1px solid var(--border-sub); border-radius: 12px; color: var(--text); font-size: 12.5px; font-weight: 700;
  }
  .ed-boton-linea:hover { background: var(--w05); }
  .ed-elite p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 8px 0 14px; }
  .ed-elite .ed-boton-solido {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
    background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 700;
  }

  /* ═════════ EXPLORAR (listar_posts.html) ═════════ */
  .sf-dtop__plus { background: var(--text); color: var(--bg); }
  .sf-dtop__plus:hover { filter: none; opacity: .9; }
  .sf-dtop__avatar { border-color: var(--border-sub); cursor: pointer; }
  .sf-dtop__chevron { display: none; }
  .sf-dhero { margin-top: 18px; }
  .sf-dhero__title { color: var(--text); font-size: 28px; letter-spacing: -.01em; }
  .sf-dtab { color: var(--muted); }
  .sf-dtab:hover { color: var(--text); }
  .sf-dtab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 700; }
  .sf-dpersonalizar { text-decoration: none; }
  .sf-dpersonalizar:hover { color: var(--text); }
  #hnClassicRow.ed-historias { max-width: 680px; margin: 0 auto 14px; padding: 4px 4px 0; }
  #hnClassicRow.ed-historias { min-height: 93px; }   /* alto de la fila ya cargada: no empuja el feed al llegar las historias */
  #hnClassicRow.ed-historias .hn-classic-track { gap: 16px; }
  .sf-dcomposer__opt i { color: var(--muted); }
  .sf-dcomposer__publish { background: var(--text); color: var(--bg); }
  .sf-dcomposer__publish:hover { filter: none; opacity: .9; }

  /* ═════════ SCROOLS (scrools.html) ═════════ */
  .page-root { display: block; height: 100vh; padding: 0 336px 0 264px; }
  .page-root .scrools-feed {
    position: relative; inset: auto; width: 100%; height: 100vh; padding-top: 84px; scroll-padding-top: 84px;
    box-sizing: border-box;
  }
  .page-root .scrool-item {
    height: calc(100vh - 112px); max-width: 420px; margin: 0 auto 28px; border-radius: 28px;
  }
  .page-root .empty-scrool { height: calc(100vh - 140px); margin: 0 auto; }
  .page-root .sf-chrome {
    left: 264px; right: 336px; height: 84px; z-index: 600;
    background: var(--k88, var(--bg)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-sub);
  }
  .page-root .sf-tabs-bar { padding: 0 24px; height: 84px; }
  .page-root .sf-tabs {
    display: grid; height: 84px; gap: 0 18px; align-items: center;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    grid-template-areas: "buscar titulo acciones" "buscar pildoras acciones";
  }
  .page-root .sf-icon-btn--mobile-search {
    grid-area: buscar; justify-self: start; width: 100%; max-width: 300px; height: 42px; border-radius: 14px; padding: 0 14px;
    justify-content: flex-start; gap: 10px; color: var(--muted); background: var(--w05); font-size: 13px; font-weight: 500;
  }
  .page-root .sf-icon-btn--mobile-search::after { content: "Buscar en Scrools"; font-family: 'Montserrat', sans-serif; }
  .page-root .sf-icon-btn--mobile-search:hover { color: var(--text); }
  .page-root .sf-dtitle {
    display: block; grid-area: titulo; text-align: center; align-self: end;
    font-family: 'Playfair Display', serif; font-size: 15px; letter-spacing: .42em; padding-left: .42em; color: var(--text); font-weight: 700;
  }
  .page-root .sf-pill-tabs { grid-area: pildoras; align-self: start; margin: 5px auto 0; max-width: none; padding: 3px; box-shadow: none; background: var(--w07); }
  .page-root .sf-pill-tab { color: var(--muted); padding: 5px 14px; font-size: 12px; }
  .page-root .sf-pill-tab.active { background: var(--text); color: var(--bg); }
  .page-root .sf-tabs-right { grid-area: acciones; justify-self: end; gap: 10px; }
  .page-root .sf-tabs-right .sf-icon-btn--mobile-menu { background: var(--text); color: var(--bg); border-color: transparent; }
  .page-root .sf-tabs-right .ed-acc { display: inline-flex; }
  .page-root #btnPlus i { display: none; }
  .page-root #btnPlus::before { content: "+"; font: 400 24px/1 'Montserrat', sans-serif; }
  .page-root .sf-dtop__avatar { width: 38px; height: 38px; cursor: pointer; }
  .page-root .hashtag-filter-bar { grid-column: 1 / -1; }
  /* Comentarios: un panel AL LADO del video (el video a la izquierda, los comentarios a la derecha), nunca encima.
     El panel empieza debajo de la barra de arriba, así su botón ✕ siempre se ve. También cierra con Esc. */
  #commentsOverlay {
    top: 96px; bottom: 16px; left: auto; right: 336px; width: 380px; max-width: none; padding: 0;
    align-items: stretch; justify-content: stretch; z-index: 550;
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
  }
  #commentsOverlay .comments-sheet {
    pointer-events: auto; width: 100%; height: 100%; border-radius: 22px; border: 1px solid var(--border-sub);
    background: var(--k97, var(--bg)); box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  }
  #commentsOverlay .comments-title { color: var(--text); font-weight: 500; }
  body:has(#commentsOverlay.open) .page-root { padding-right: calc(336px + 396px); }
}

/* pantalla justa (1024–1279 px): no cabe video + comentarios, así que el panel va sobre el video, con su ✕ a la vista */
@media (min-width: 1024px) and (max-width: 1279px) {
  #commentsOverlay { width: calc(100vw - 264px - 336px - 32px); right: 336px; }
  body:has(#commentsOverlay.open) .page-root { padding-right: 336px; }
}

@media (max-width: 1023px) { .ed-acc { display: none !important; } }

/* ── el botón "+" de arriba no hacía nada en escritorio (la publicación se crea con "Nueva publicación" del menú): se quita ── */
@media (min-width: 1024px) {
  .sf-dtop__plus { display: none !important; }
}

/* ── "Subir video" del menú de StyLive (la regla vive en stylive_escritorio.css; aquí solo para las pantallas que no la cargan) ── */
@media (min-width: 1024px) {
  .ed-subir {
    display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; border-radius: 999px; cursor: pointer;
    background: none; border: 1px solid var(--border); color: var(--text); font: 700 14px 'Montserrat', sans-serif;
  }
  .ed-subir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  .ed-subir:hover { background: var(--w07); }
}

/* ── lista "Explorar" del menú de StyLive ── */
@media (min-width: 1024px) {
  .ed-seccion__tit { margin: 4px 0 4px; padding: 0 14px; font: 700 11.5px 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .7px; color: var(--muted2); }
  .ed-seccion a i { width: 22px; font-size: 17px; text-align: center; flex-shrink: 0; }
  .ed-seccion a { padding: 9px 14px; font-size: 14.5px; }
}

/* Altos típicos de las cajas que se llenan después de cargar (la primera visita; luego se usa el alto real guardado) */
@media (min-width: 1024px) {
  #edClubs { min-height: 300px; }
  #edCoincidencias { min-height: 270px; }
  #edAuge, #edEnLinea { min-height: 58px; }
}