/* ==========================================================
   Vonpy · comunidades estilo red social (2026-10-26)
   ========================================================== */

/* ---------- Portada con foto + logo con imagen ---------- */
.cmty-logo.has-img, .cmty-logo:has(img) { background: var(--card); }
.cmty-head .vp-cover.has-img { height: 210px; background-size: cover; background-position: center; }
.cmty-head .vp-head-row { margin-top: -52px; }
.cmty-head .vp-head-row h1 { text-shadow: 0 1px 0 var(--card); }
@media (max-width: 640px) {
  .cmty-head .vp-cover.has-img { height: 140px; }
  .cmty-head .vp-head-row { margin-top: -40px; }
}
.vp-cmty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.vp-cmty-actions .btn, .vp-join { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.vp-join.is-in { background: var(--accent-soft, rgba(253,85,1,.12)); color: var(--accent, #fd5501); border-color: transparent; }
.vp-join.is-in:hover span { visibility: hidden; position: relative; }
.vp-join.is-in:hover span::after { content: 'Salir'; visibility: visible; position: absolute; left: 0; }
.vp-join-form { display: inline; margin: 0; }

/* ---------- Publicar al instante ---------- */
.vp-composer { padding: 12px 14px 8px; }
.vp-composer .sx-composer-top { display: flex; gap: 10px; align-items: flex-start; }
.vp-composer-text {
  flex: 1; min-height: 42px; resize: none; border: 0; outline: 0; border-radius: 22px;
  padding: 10px 16px; font: inherit; font-size: 1rem; line-height: 1.4;
  background: var(--bg); color: var(--text); transition: background .15s ease, border-radius .15s ease;
}
.vp-composer-text:hover { filter: brightness(.98); }
.vp-composer.is-open .vp-composer-text { border-radius: 14px; min-height: 80px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.vp-composer-more { display: none; padding: 8px 0 0 52px; }
.vp-composer.is-open .vp-composer-more { display: grid; gap: 8px; }
.vp-composer-where { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); }
.vp-composer-where select { border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.vp-composer-url { width: 100%; border-radius: 10px; padding: 9px 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.vp-composer-preview { position: relative; max-width: 320px; }
.vp-composer-preview img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.vp-composer-preview .vp-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.vp-composer-hint { margin: 0; }
.vp-composer-acts { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; }
.vp-composer-acts .vp-act {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: .92rem; background: none; border: 0; cursor: pointer; text-decoration: none; font-family: inherit;
}
.vp-composer-acts .vp-act:hover { background: var(--bg); text-decoration: none; }
.vp-composer-send { margin-left: auto; padding: 8px 20px; }
.vp-composer-send:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) {
  .vp-composer-acts .vp-act span { display: none; }
  .vp-composer-acts .vp-hide-sm { display: none; }
  .vp-composer-more { padding-left: 0; }
}
.vp-guest-cta { display: flex; align-items: center; gap: 14px; }
.vp-guest-cta > i { font-size: 1.8rem; color: var(--accent, #fd5501); }
.vp-guest-cta > div { flex: 1; }
.vp-guest-cta p { margin: 2px 0 0; }

/* ---------- Comentar desde el feed ---------- */
.vp-qc { border-top: 1px solid var(--line); margin: 4px -2px 0; padding: 8px 2px 2px; }
.vp-qc-row { display: flex; align-items: flex-end; gap: 8px; }
.vp-qc-row .av { flex: 0 0 auto; margin-bottom: 4px; }
.vp-qc textarea {
  flex: 1; resize: none; min-height: 36px; max-height: 200px; border: 0; outline: 0;
  border-radius: 18px; padding: 8px 14px; font: inherit; font-size: .95rem; line-height: 1.35;
  background: var(--bg); color: var(--text);
}
.vp-qc textarea:focus { box-shadow: 0 0 0 2px var(--vp-ring, rgba(253,85,1,.18)); }
.vp-qc-send { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent, #fd5501); color: #fff; }
.vp-qc-send:disabled { background: transparent; color: var(--muted); cursor: default; }
.vp-qc.busy { opacity: .6; pointer-events: none; }
.vp-qc-list { display: grid; gap: 8px; }
.vp-qc-list:not(:empty) { margin-bottom: 8px; }
.vp-qc-item { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; animation: vpIn .25s ease; }
.vp-qc-item > small { grid-column: 2; padding-left: 12px; font-size: .75rem; }
.vp-qc-bubble { background: var(--bg); border-radius: 16px; padding: 7px 12px; max-width: 100%; overflow-wrap: anywhere; }
.vp-qc-bubble .author { font-weight: 700; font-size: .85rem; }
.vp-qc-text { font-size: .95rem; }
.vp-qc-img { display: block; max-width: 220px; border-radius: 10px; margin-top: 6px; }
@keyframes vpIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vp-toast-bad { background: #c92a2a !important; color: #fff !important; }

/* ---------- Listado de comunidades con portada ---------- */
.vp-page-head h1 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vp-page-head p { margin: 0 0 14px; }
.vp-cmty-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vp-cmty-card { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.vp-cmty-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,15,40,.10); }
.vp-cc-cover { display: block; height: 96px; background: linear-gradient(120deg, #ff7a33, #fd5501) center / cover no-repeat; }
.vp-cc-body { padding: 0 14px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: end; }
.vp-cc-body > .cmty-logo { margin-top: -28px; box-shadow: 0 0 0 4px var(--card); }
.vp-cc-name { display: grid; color: inherit; text-decoration: none; padding-top: 6px; min-width: 0; }
.vp-cc-name:hover { text-decoration: none; }
.vp-cc-name strong { font-size: 1.02rem; }
.vp-cc-name span { color: var(--muted); font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-cc-name small { color: var(--accent); font-weight: 600; margin-top: 2px; }
.vp-cc-body .vp-join-form, .vp-cc-body > .vp-join { grid-column: 1 / -1; margin-top: 10px; }
.vp-cc-body .vp-join { width: 100%; justify-content: center; }

/* ---------- Elegir logo y portada ---------- */
.vp-img-fields { margin-bottom: 6px; }
.vp-banner-pick {
  position: relative; height: 120px; border-radius: 12px; margin-bottom: 40px;
  background: linear-gradient(120deg, #ff7a33, #fd5501) center / cover no-repeat;
}
.vp-pick-btn {
  position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.vp-pick-btn input, .vp-icon-pick input { display: none; }
.vp-icon-pick {
  position: absolute; left: 14px; bottom: -34px; width: 76px; height: 76px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 4px var(--card); display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 26px;
}
.vp-icon-pick > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vp-icon-pick label {
  position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent, #fd5501); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer;
  box-shadow: 0 0 0 3px var(--card);
}
.vp-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }