/*
 * 4.0.91 - EL VISOR DE PUBLICACIONES (ver App\Libraries\Social\VisorDePublicacion y
 * js/classicspark-publicacion.js). Encima del muro (`.cs491-pv--capa`) y como página en el enlace
 * compartible (`.cs491-pv--pagina`).
 *
 *   ordenador:  [ escena            | barra  ]
 *               [ (fotos, video,    | panel  ]   panel de 420 px
 *               [  enlace)          |        ]
 *   teléfono:   barra / escena / panel, una debajo de otra
 *
 * Claro por defecto (Eudes: «mejor con el fondo blanco, similar al modal»); `data-tema="oscuro"`
 * con el botón del sol y la luna.
 *
 * 4.0.92 - El panel crece con la pantalla (420-560 px); una sola barra en la página y encima del muro;
 * la página ocupa justo la pantalla bajo el menú, sin el pie; sólo texto: el texto en la escena, en
 * una hoja; sin comentarios: «La conversación aún está en silencio».
 */

.cs491-pv{
  --cs491-escena:#efe7eb;--cs491-panel:#fff;--cs491-linea:#ecdfe4;--cs491-texto:#2c2631;--cs491-suave:#7f7584;
  --cs491-boton:#fff;--cs491-boton-linea:#e6d7dc;--cs491-vino:#c90035;--cs491-burbuja:#f7f1f3;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,32vw,560px);grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"escena barra" "escena panel";
  color:var(--cs491-texto);background:var(--cs491-panel);font-family:gilroy-regular,Arial,sans-serif
}
.cs491-pv[data-tema="oscuro"]{
  --cs491-escena:#0d0b0f;--cs491-panel:#18151b;--cs491-linea:#2c2731;--cs491-texto:#efeaf1;--cs491-suave:#a69daa;
  --cs491-boton:#231f27;--cs491-boton-linea:#36303b;--cs491-vino:#ff4f78;--cs491-burbuja:#221e26
}
.cs491-pv--capa{position:fixed;z-index:1040;inset:0}
/* 4.0.93 - El enlace compartible es el visor a pantalla completa, como encima del muro: tapa el menú y
   el pie del sitio (Eudes: «la vista del modal se ve mejor, más limpia»). */
.cs491-pv--pagina{position:fixed;z-index:1040;inset:0}
.cs491-pv__logo{display:inline-flex;align-items:center;flex:none;margin-right:4px}
.cs491-pv__logo img{display:block;width:128px;height:auto}
.cs491-pv[data-tema="oscuro"] .cs491-pv__logo img{filter:brightness(0) invert(1) opacity(.9)}
body.cs491-pv-abierto{overflow:hidden!important}

/* ------------------------------------------------------------------ la barra */
.cs491-pv__barra{grid-area:barra;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:12px 16px;border-bottom:1px solid var(--cs491-linea);border-left:1px solid var(--cs491-linea);background:var(--cs491-panel)}
.cs491-pv__barra nav{display:flex;flex:none;align-items:center;gap:8px;margin-left:auto}
.cs491-pv__tema,.cs491-pv__volver,.cs491-pv__compartir{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--cs491-boton-linea);border-radius:999px;background:var(--cs491-boton);color:var(--cs491-texto);
  font:12px gilroy-semibold,Arial,sans-serif;text-decoration:none;cursor:pointer
}
.cs491-pv__tema{width:40px;padding:0;font-size:16px}
.cs491-pv__tema:hover,.cs491-pv__volver:hover{border-color:var(--cs491-vino);color:var(--cs491-vino);text-decoration:none}
/* «Volver al perfil» o «Cerrar» en píldora blanca y la acción principal en vino, como la cabecera C. */
.cs491-pv__volver{flex:none;color:var(--cs491-vino)}
.cs491-pv__compartir,.cs491-pv__compartir:hover{border-color:#c90035;background:#c90035;color:#fff}

/* ------------------------------------------------------------------ la escena */
.cs491-pv__escena{grid-area:escena;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;min-height:0;background:var(--cs491-escena)}
.cs491-pv__fondo{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(38px) saturate(1.15);opacity:.42;transform:scale(1.1)}
.cs491-pv[data-tema="oscuro"] .cs491-pv__fondo{opacity:.28}
.cs491-pv__foto{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:28px 76px 112px}
.cs491-pv__foto img{display:block;max-width:100%;max-height:100%;border-radius:6px;object-fit:contain;box-shadow:0 22px 60px rgba(30,10,20,.22)}
.cs491-pv:not(.cs491-pv--con-fotos) .cs491-pv__foto,.cs491-pv__escena>.cs491-pv__foto:only-child{padding-bottom:28px}
.cs491-pv__flecha{position:absolute;z-index:2;top:calc(50% - 46px);display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--cs491-boton-linea);border-radius:50%;background:var(--cs491-boton);color:var(--cs491-texto);font-size:17px;box-shadow:0 8px 24px rgba(30,10,20,.14);cursor:pointer}
.cs491-pv__flecha:hover{color:var(--cs491-vino)}
.cs491-pv__flecha--antes{left:18px}
.cs491-pv__flecha--despues{right:18px}
.cs491-pv__contador{position:absolute;z-index:2;top:16px;left:50%;padding:6px 12px;border-radius:999px;background:rgba(20,14,22,.62);color:#fff;font:12px gilroy-semibold,Arial,sans-serif;transform:translateX(-50%)}
.cs491-pv__tira{position:absolute;z-index:2;right:0;bottom:0;left:0;display:flex;justify-content:center;gap:8px;overflow-x:auto;padding:14px 18px 18px;scrollbar-width:thin}
.cs491-pv__tira button{flex:0 0 64px;height:64px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:10px;background:var(--cs491-boton);opacity:.62;cursor:pointer}
.cs491-pv__tira button.is-actual{border-color:var(--cs491-vino);opacity:1}
.cs491-pv__tira img{width:100%;height:100%;object-fit:cover}
/* Video o enlace: en grande, al centro. */
.cs491-pv__contenido{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:28px 44px}
.cs491-pv__contenido>.cs2766-post-card__media{width:100%;max-width:1100px;height:auto!important;max-height:100%!important;margin:0!important;border-radius:12px;background:#000}
.cs491-pv__contenido>.cs2766-post-card__media video{display:block;width:100%;max-height:calc(100vh - 140px);border-radius:12px}
.cs491-pv__contenido>.cs2795-link-card{display:flex!important;flex-direction:column;width:min(760px,100%);max-height:100%;margin:0!important;overflow:hidden;border:1px solid var(--cs491-linea)!important;border-radius:18px!important;background:var(--cs491-panel)!important;color:var(--cs491-texto)!important;box-shadow:0 22px 60px rgba(30,10,20,.16)}
.cs491-pv__contenido>.cs2795-link-card>img{width:100%!important;height:auto!important;max-height:52vh!important;object-fit:cover}
.cs491-pv__contenido>.cs2795-link-card>span{padding:20px 22px!important}
.cs491-pv__contenido>.cs2795-link-card strong{font-size:22px!important;line-height:1.25!important}
.cs491-pv__contenido>.cs2795-link-card small,.cs491-pv__contenido>.cs2795-link-card p{color:var(--cs491-suave)!important}

/* ------------------------------------------------------------------ el panel */
.cs491-pv__panel{grid-area:panel;display:flex;flex-direction:column;overflow-y:auto;min-width:0;border-left:1px solid var(--cs491-linea);background:var(--cs491-panel)}
.cs491-pv__tarjeta>.cs2766-post-card{margin:0!important;padding:18px 20px 6px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--cs491-texto)}
/* Lo que ya está en la escena no se repite en el panel, ni «Ver publicación». */
.cs491-pv--con-fotos .cs491-pv__tarjeta .cs2766-post-card__fotos,
.cs491-pv--con-fotos .cs491-pv__tarjeta .cs2766-post-card__media,
.cs491-pv__tarjeta .cs2766-post-card__actions>.is-primary,
.cs491-pv .cs2766-comments-more{display:none!important}
.cs491-pv__tarjeta .cs2766-post-card__actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.cs491-pv__tarjeta .cs2766-post-card__copy{font-size:16px;line-height:1.6}
.cs491-pv__conversacion{display:flex;flex:1;flex-direction:column;min-height:0;border-top:1px solid var(--cs491-linea)}
.cs491-pv__conversacion-cabeza{padding:16px 20px 6px}
.cs491-pv__conversacion-cabeza small{display:block;color:var(--cs491-vino);font:10px gilroy-bold,Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.cs491-pv__conversacion-cabeza strong{display:block;margin-top:3px;font:17px gilroy-semibold,Arial,sans-serif}
.cs491-pv__conversacion-cabeza b{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:4px;padding:0 6px;border-radius:999px;background:rgba(201,0,53,.1);color:var(--cs491-vino);font-size:11px}
.cs491-pv__conversacion>.cs2766-post-card__discussion{display:flex;flex:1;flex-direction:column;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.cs491-pv__conversacion .cs2766-comments-list{flex:1;margin:0!important;padding:8px 20px 12px!important}
.cs491-pv__conversacion .cs2766-comment:nth-child(n){display:flex!important}
.cs491-pv__silencio{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;padding:24px 28px;color:var(--cs491-suave);font-size:13px;line-height:1.5;text-align:center}
.cs491-pv__silencio[hidden]{display:none}
.cs491-pv__silencio i{display:grid;place-items:center;width:46px;height:46px;margin-bottom:6px;border-radius:50%;background:rgba(201,0,53,.08);color:var(--cs491-vino);font-size:19px}
.cs491-pv__silencio strong{color:var(--cs491-texto);font:15px gilroy-semibold,Arial,sans-serif}
.cs491-pv__silencio:not([hidden])~.cs2766-comments-list{flex:0 0 auto}
.cs491-pv__mas{align-self:center;min-height:36px;margin:0 20px 12px;padding:0 16px;border:1px solid var(--cs491-boton-linea);border-radius:999px;background:var(--cs491-boton);color:var(--cs491-vino);font:12px gilroy-semibold,Arial,sans-serif;cursor:pointer}
.cs491-pv__conversacion .cs2766-comment-composer{position:sticky;bottom:0;display:flex!important;align-items:flex-end;gap:8px;margin:0!important;padding:12px 16px!important;border-top:1px solid var(--cs491-linea);background:var(--cs491-panel)!important}
.cs491-pv__conversacion .cs2766-comment-composer textarea{flex:1;width:auto!important;min-width:0;min-height:44px;padding:10px 12px;font:14px gilroy-regular,Arial,sans-serif;max-height:160px;border:1px solid var(--cs491-boton-linea)!important;border-radius:12px!important;background:var(--cs491-burbuja)!important;color:var(--cs491-texto)!important}
.cs491-pv__conversacion .cs2766-comment-composer__actions{display:flex;flex:none;gap:8px}
.cs491-pv__conversacion .cs2766-comment-composer textarea:focus{border-color:var(--cs491-vino)!important;outline:0}

/* Sólo texto: el texto, en una hoja grande en la escena; la letra según lo largo que sea. */
.cs491-pv__hoja{position:relative;z-index:1;display:flex;align-items:center;width:min(820px,calc(100% - 64px));max-height:calc(100% - 64px);overflow-y:auto;padding:52px 56px 48px;border:1px solid var(--cs491-linea);border-left:6px solid var(--cs491-vino);border-radius:22px;background:var(--cs491-panel);box-shadow:0 26px 70px rgba(94,0,25,.12)}
.cs491-pv__hoja::before{content:"\201C";position:absolute;top:2px;left:24px;color:var(--cs491-vino);font:96px/1 Georgia,serif;opacity:.22}
.cs491-pv__hoja>.cs2766-post-card__copy{margin:0!important;padding:0!important;color:var(--cs491-texto)!important;font-family:gilroy-regular,Arial,sans-serif;white-space:normal}
.cs491-pv__hoja.is-corta>.cs2766-post-card__copy{font-size:34px!important;line-height:1.3!important;letter-spacing:-.01em}
.cs491-pv__hoja.is-media>.cs2766-post-card__copy{font-size:24px!important;line-height:1.45!important}
.cs491-pv__hoja.is-larga{align-items:flex-start}
.cs491-pv__hoja.is-larga>.cs2766-post-card__copy{font-size:18px!important;line-height:1.7!important}
.cs491-pv--con-texto .cs491-pv__escena{background:radial-gradient(ellipse at 85% 10%,rgba(201,0,54,.16),transparent 55%),linear-gradient(135deg,#fdf3f6 0%,#f6dde5 100%)}
.cs491-pv[data-tema="oscuro"].cs491-pv--con-texto .cs491-pv__escena{background:radial-gradient(ellipse at 85% 10%,rgba(201,0,54,.22),transparent 55%),linear-gradient(135deg,#141117 0%,#1f1520 100%)}

/* Música: la portada en grande con el disco asomando, qué es, y «Escuchar» o «Ver la vitrina». */
.cs491-pv__musica{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px;max-width:560px;text-align:center}
.cs491-pv__disco{position:relative;width:min(340px,42vh);aspect-ratio:1;margin:0}
.cs491-pv__disco>img,.cs491-pv__disco>i{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:14px;object-fit:cover;box-shadow:0 26px 60px rgba(30,10,20,.3)}
.cs491-pv__disco>i{display:grid;place-items:center;background:linear-gradient(135deg,#c90035,#5e0019);color:#fff;font-size:72px}
.cs491-pv__vinilo{position:absolute;z-index:0;top:4%;right:-26%;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#c90035 0 12%,#1c171e 12.5% 15%,#2a242d 15.5% 100%);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.cs491-pv__musica-texto{display:flex;flex-direction:column;align-items:center;gap:6px;padding-right:12%}
.cs491-pv__musica-texto small{color:var(--cs491-vino);font:11px gilroy-bold,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.cs491-pv__musica-texto strong{color:var(--cs491-texto);font:clamp(24px,2.4vw,32px)/1.2 gilroy-semibold,Arial,sans-serif;letter-spacing:-.02em}
.cs491-pv__musica-texto p{margin:0;color:var(--cs491-suave);font-size:15px;line-height:1.5}
.cs491-pv__escuchar{display:inline-flex;align-items:center;gap:9px;margin-top:12px;min-height:46px;padding:0 22px;border:0;border-radius:999px;background:#c90035;color:#fff;font:14px gilroy-semibold,Arial,sans-serif;box-shadow:0 12px 28px rgba(201,0,53,.28);cursor:pointer}
.cs491-pv__escuchar:hover{background:#a3002c}
.cs491-pv--con-musica .cs491-pv__tarjeta .cs-feed-music-card__body{display:none!important}

/* Sin escena: el panel al centro, más ancho. */
.cs491-pv--sin-escena{grid-template-columns:minmax(0,1fr);grid-template-areas:"barra" "panel";background:var(--cs491-escena)}
.cs491-pv--sin-escena .cs491-pv__escena{display:none}
.cs491-pv--sin-escena .cs491-pv__barra,.cs491-pv--sin-escena .cs491-pv__panel{width:min(760px,100%);margin:0 auto;border-right:1px solid var(--cs491-linea)}

/* ------------------------------------------------------------------ fondo oscuro: la tarjeta y la conversación */
.cs491-pv[data-tema="oscuro"] .cs491-pv__panel :is(.cs2766-post-card__copy,.cs2766-post-card__link strong,.cs2766-post-card__author strong,.cs2766-post-card__byline a,.cs2766-comment strong,.cs2766-comment p,.cs2766-comment a){color:var(--cs491-texto)!important}
.cs491-pv[data-tema="oscuro"] .cs491-pv__panel :is(time,small,.cs2766-post-card__metrics,.cs2766-post-card__metrics a,.cs2766-post-card__metrics button,.cs-feed-comments-closed){color:var(--cs491-suave)!important}
.cs491-pv[data-tema="oscuro"] .cs491-pv__panel :is(.cs2766-post-card__actions button,.cs2766-post-card__actions a,.cs2766-post-card__manage button,.cs2766-post-card__link){border-color:var(--cs491-boton-linea)!important;background:var(--cs491-boton)!important;color:var(--cs491-texto)!important}
.cs491-pv[data-tema="oscuro"] .cs491-pv__panel .cs2766-post-card__actions .is-active{color:var(--cs491-vino)!important}
.cs491-pv[data-tema="oscuro"] .cs491-pv__panel :is(.cs2766-comment>div,.cs2766-comment__body,.cs2766-comment__bubble){background:var(--cs491-burbuja)!important}
.cs491-pv[data-tema="oscuro"] .cs491-pv__panel :is(.cs2766-post-card__metrics,.cs2766-post-card__actions,.cs2766-post-card__header){border-color:var(--cs491-linea)!important}

/* Con el panel estrecho, «Volver al perfil» se queda en su flecha para que quepan el logo y «Compartir». */
@media (max-width:1240px){ .cs491-pv--pagina .cs491-pv__volver span{display:none} }

/* ------------------------------------------------------------------ el teléfono */
@media (max-width:900px){
  .cs491-pv{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content;align-content:start;grid-template-areas:"barra" "escena" "panel";overflow-y:auto}
  .cs491-pv__logo{display:none}
  .cs491-pv--con-musica .cs491-pv__escena{height:auto;min-height:0;padding:28px 0 32px}
  .cs491-pv__disco{width:min(240px,60vw)}
  .cs491-pv__barra{position:sticky;z-index:5;top:0;border-left:0;padding:10px 12px}
  .cs491-pv__escena{height:62vh;min-height:320px}
  .cs491-pv__foto{padding:14px 14px 92px}
  .cs491-pv__flecha{width:40px;height:40px;font-size:14px}
  .cs491-pv__flecha--antes{left:8px}
  .cs491-pv__flecha--despues{right:8px}
  .cs491-pv__tira{padding:10px 12px 14px}
  .cs491-pv__tira button{flex-basis:52px;height:52px}
  .cs491-pv__contenido{padding:14px}
  .cs491-pv--con-texto .cs491-pv__escena{height:auto;min-height:0;overflow:visible;padding:18px 0}
  .cs491-pv__hoja{width:calc(100% - 28px);max-height:none;padding:40px 22px 26px}
  .cs491-pv__hoja.is-corta>.cs2766-post-card__copy{font-size:26px!important}
  .cs491-pv__hoja.is-media>.cs2766-post-card__copy{font-size:20px!important}
  .cs491-pv__hoja.is-larga>.cs2766-post-card__copy{font-size:17px!important}
  .cs491-pv__panel{overflow:visible;border-left:0}
  .cs491-pv--sin-escena .cs491-pv__barra,.cs491-pv--sin-escena .cs491-pv__panel{border-right:0}
  .cs491-pv--pagina .cs491-pv__volver span{display:none}
}