/* ==========================================================================
   CENTRO SOCIAL WIFITO — estilos base (con la imagen anterior y la nueva).
   Lo propio de la imagen nueva está en imagen-nueva.css (bloque CENTRO SOCIAL).
   ========================================================================== */

/* ---- Siluetas grises mientras carga (skeleton) ---- */
@keyframes soc-brillo { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
.soc-skel span, .soc-skel .soc-skel-l, .soc-skel .soc-skel-av, .soc-skel .soc-skel-img {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--tabla-header, #eef1f5) 0, var(--borde, #e2e6ec) 60px, var(--tabla-header, #eef1f5) 120px);
  background-size: 640px 100%; animation: soc-brillo 1.3s linear infinite;
}
.soc-skel-post { display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.soc-skel-cab { display: flex; align-items: center; gap: 10px; }
.soc-skel .soc-skel-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.soc-skel .soc-skel-l { height: 12px; width: 45%; }
.soc-skel .soc-skel-l.l2 { width: 85%; }
.soc-skel .soc-skel-l.l3 { width: 60%; }
.soc-skel .soc-skel-img { height: 180px; width: 100%; border-radius: 12px; }
.soc-skel-com { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.soc-skel-com span { height: 34px; }
.soc-skel-com span:nth-child(2) { width: 80%; }
.soc-skel-com span:nth-child(3) { width: 60%; }
@media (prefers-reduced-motion: reduce) { .soc-skel span, .soc-skel .soc-skel-l, .soc-skel .soc-skel-av, .soc-skel .soc-skel-img { animation: none; } }

/* ---- Estado vacío ---- */
.soc-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 12px; color: var(--texto-sub); }
.soc-vacio > i { font-size: 34px; opacity: .55; }
.soc-vacio p { margin: 0; font-size: 14px; }

/* ---- Tarjeta de publicación: conteos arriba y botones con texto ---- */
.feed-card-conteos { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.feed-card-conteos.hidden { display: none; }
.feed-card-conteos .feed-card-resumen { margin: 4px 2px 2px; }
.feed-card-comentarios-n { margin-left: auto; background: none; border: 0; padding: 4px 2px; color: var(--texto-sub); font: inherit; font-size: 13px; cursor: pointer; }
.feed-card-comentarios-n:hover { text-decoration: underline; }
.feed-card-comentarios-n.hidden { display: none; }
.feed-comentario-autor { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.feed-comentario-autor:hover { text-decoration: underline; }

/* ---- Chat: no leídos, "Visto", "Escribiendo…", tarjeta del anuncio ---- */
.chat-directo-noleido .chat-directo-item-usuario, .chat-directo-noleido .chat-directo-item-ultimo { font-weight: 800; color: var(--texto); }
.chat-directo-item-ultimo-fila .chat-badge-noleidos { margin-left: auto; }
.cs-visto { align-self: flex-end; margin: -2px 6px 6px auto; font-size: 11.5px; color: var(--texto-sub); display: flex; align-items: center; gap: 4px; justify-content: flex-end; width: max-content; }
.cs-visto i { color: var(--primario, #2563eb); font-size: 14px; }
.cs-escribiendo { display: flex; align-items: center; gap: 8px; margin: 4px 10px 8px; font-size: 12.5px; color: var(--texto-sub); }
.cs-puntos { display: inline-flex; gap: 3px; padding: 8px 10px; border-radius: 16px; background: var(--tabla-header, #eef1f5); }
.cs-puntos i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: cs-salto 1.1s infinite ease-in-out; }
.cs-puntos i:nth-child(2) { animation-delay: .15s; }
.cs-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes cs-salto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.cs-mk-mini { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px; max-width: 280px; text-align: left; border: 1px solid var(--borde); border-radius: 12px; background: var(--card-bg, #fff); color: var(--texto); cursor: pointer; font: inherit; }
.cs-mk-mini:hover { border-color: var(--primario, #2563eb); }
.cs-mk-foto { flex: none; width: 54px; height: 54px; border-radius: 9px; overflow: hidden; background: var(--tabla-header); display: flex; align-items: center; justify-content: center; color: var(--texto-sub); }
.cs-mk-foto img { width: 100%; height: 100%; object-fit: cover; }
.cs-mk-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-mk-txt small { font-size: 11px; color: var(--texto-sub); }
.cs-mk-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-mk-txt span { font-weight: 800; color: var(--primario, #2563eb); font-size: 13px; }
.cs-btn-supervision { margin: 0 0 10px; }
.cs-hoja .cs-hoja-box { max-width: 760px; width: calc(100% - 24px); max-height: 88vh; overflow: auto; position: relative; }
.cs-hoja .cs-en-hoja { box-shadow: none; border: 0; margin: 0; padding: 0; }
.cs-hoja.hidden { display: none; }

/* ---- Buscador global ---- */
html.cs-sin-scroll, html.cs-sin-scroll body { overflow: hidden; }
.cs-buscar-ov { position: fixed; inset: 0; z-index: 7000; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.cs-buscar-ov.hidden { display: none; }
.cs-buscar-caja { width: 100%; max-width: 620px; max-height: 80vh; display: flex; flex-direction: column; background: var(--card-bg, #fff); color: var(--texto); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.cs-buscar-barra { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.cs-buscar-barra > i { font-size: 20px; color: var(--texto-sub); }
.cs-buscar-barra input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: inherit; padding: 6px 0; }
.cs-kbd, .cs-buscar-ayuda kbd { font: 600 11px/1 ui-monospace, monospace; border: 1px solid var(--borde); border-radius: 6px; padding: 3px 6px; color: var(--texto-sub); background: var(--tabla-header); }
.cs-buscar-cerrar { border: 0; background: transparent; color: var(--texto-sub); font-size: 20px; cursor: pointer; padding: 4px; border-radius: 8px; display: none; }
.cs-buscar-res { overflow-y: auto; padding: 6px 8px 10px; }
.cs-res-grupo + .cs-res-grupo { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 6px; }
.cs-res-tit { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-sub); padding: 8px 8px 4px; display: flex; align-items: center; gap: 6px; }
.cs-res-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; border-radius: 10px; cursor: pointer; }
.cs-res-item:hover, .cs-res-item.activo { background: var(--tabla-header); }
.cs-res-item > .ti-chevron-right { margin-left: auto; color: var(--texto-sub); }
.cs-av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.cs-av img { width: 100%; height: 100%; object-fit: cover; }
.cs-res-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cs-res-txt b, .cs-res-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-res-txt small { color: var(--texto-sub); font-size: 12.5px; }
.cs-res-mini { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--tabla-header); display: inline-flex; align-items: center; justify-content: center; color: var(--texto-sub); }
.cs-res-mini img { width: 100%; height: 100%; object-fit: cover; }
.cs-res-ico { width: 40px; height: 40px; border-radius: 50%; }
.cs-lupa { border: 0; background: transparent; color: inherit; font-size: 19px; cursor: pointer; border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.cs-lupa:hover { background: var(--tabla-header); }
.cs-lupa-feed { margin-left: 8px; vertical-align: middle; font-size: 18px; width: 34px; height: 34px; }
@media (max-width: 700px) {
  .cs-buscar-ov { padding: 0; align-items: stretch; }
  .cs-buscar-caja { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .cs-buscar-cerrar { display: inline-flex; }
  .cs-kbd { display: none; }
}

/* ---- Centro de notificaciones ---- */
.ws-buzon-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-right: 34px; }
.ws-buzon-cab h2 { margin: 0; }
.ws-buzon-filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 0 8px; }
.ws-buzon-filtros::-webkit-scrollbar { display: none; }
.ws-buzon-filtro { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--texto-sub); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ws-buzon-filtro.activo { background: var(--primario, #2563eb); border-color: transparent; color: #fff; }
.ws-buzon-fn:not(:empty) { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.ws-buzon-item { position: relative; }
.ws-buzon-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--primario, #2563eb); flex: none; margin-left: auto; align-self: center; }

/* ---- WifiMarket: Guardar, Guardados y aviso plegable ---- */
.mk-guardar.activo { color: var(--primario, #2563eb); border-color: currentColor; }
.mk-aviso-plegable { display: block; }
.mk-aviso-plegable > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; }
.mk-aviso-plegable > summary::-webkit-details-marker { display: none; }
.mk-aviso-plegable > summary span { flex: 1; min-width: 0; }
.mk-aviso-plegable > div { margin-top: 6px; }
.mk-aviso-flecha { transition: transform .2s; }
.mk-aviso-plegable[open] .mk-aviso-flecha { transform: rotate(180deg); }

/* ---- Perfil: las pestañas y "Editar perfil" solo existen con la imagen nueva ---- */
.cs-perfil-tabs, .cs-editar, #cs-cuenta-vacia, .cs-stat-ico, .cs-comp-foto { display: none; }

/* ===== Feed › pestañas Publicaciones · Notificaciones (lo pidió el dueño) ===== */
.ft-oculto { display: none !important; }
.feed-tabs { display: flex; gap: 6px; margin: 4px 0 10px; border-bottom: 1px solid var(--borde); }
.feed-tabs [data-ft] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--texto-sub); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.feed-tabs [data-ft].activo { color: var(--primario); border-bottom-color: var(--primario); }
.feed-tabs-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
.feed-notif { background: var(--card-bg); border: 1px solid var(--borde); border-radius: 14px; padding: 10px; margin-bottom: 12px; }
.feed-notif-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.feed-notif-filtros { display: flex; gap: 6px; }
.feed-notif-filtros button { border: 1px solid var(--borde); background: var(--bg); color: var(--texto); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.feed-notif-filtros button.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.feed-notif-filtros button b { margin-left: 2px; }
.feed-notif-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed-notif-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border: 0; background: none; border-radius: 10px; text-align: left; font: inherit; color: var(--texto); cursor: pointer; }
.feed-notif-item:hover { background: var(--bg); }
.feed-notif-item.nueva { background: rgba(37, 99, 235, .07); }
.feed-notif-icono { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--primario); font-size: 19px; }
.feed-notif-icono.t-reaccion { color: #ef4444; }
.feed-notif-icono.t-comentario { color: #16a34a; }
.feed-notif-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-notif-texto { font-size: 14px; overflow-wrap: anywhere; }
.feed-notif-item.nueva .feed-notif-texto { font-weight: 600; }
.feed-notif-tiempo { font-size: 12px; color: var(--texto-sub); }
.feed-notif-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--primario); flex-shrink: 0; }
.ws-pub-modal .feed-card { margin: 0; box-shadow: none; }

/* ===== Reacciones a comentarios ===== */
.feed-com-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-com-acc { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 12px; color: var(--texto-sub); flex-wrap: wrap; }
.feed-com-react { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--texto-sub); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.feed-com-react .reacc-emoji { display: none; }
.feed-com-react.activo .reacc-emoji { display: inline; }
.feed-com-resumen { border: 1px solid var(--borde); background: var(--card-bg); border-radius: 999px; padding: 1px 7px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; color: var(--texto-sub); }
.feed-com-reacc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed-com-reacc-lista li { display: flex; align-items: center; gap: 8px; }
.feed-com-reacc-lista li span { flex: 1; }
.feed-com-reacc-lista small { color: var(--texto-sub); }
.ws-pub-modal { text-align: left; }
@media (max-width: 600px) { .ws-pub-modal .feed-card { border: 0; padding: 0; } }