/* ============================================================
   kp-compose.css — Modal "Crear publicación" (#socialComposeModal)
   Estilo limpio y elegante; misma lógica de perfil.js.
   ============================================================ */
#socialComposeModal {
  --cp-rose: #ff4f8b; --cp-deep: #c8124e; --cp-ink: #2a1020; --cp-muted: #8a7282;
  --cp-line: rgba(42, 16, 32, .09); --cp-card: #fff; --cp-soft: #faf6f8;
  --cp-grad: linear-gradient(135deg, #ff5a8f 0%, #e11d63 100%);
}
body.dark-theme #socialComposeModal {
  --cp-ink: #fbe9f2; --cp-muted: #c9a9ba; --cp-line: rgba(255, 255, 255, .1);
  --cp-card: #24111e; --cp-soft: #2e1627;
}

#socialComposeModal .kp-compose-card {
  display: flex !important; flex-direction: column !important;
  width: min(560px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 40px) !important;
  padding: 0 !important; overflow: hidden !important;
  border-radius: 24px !important; background: var(--cp-card) !important;
  border: 1px solid var(--cp-line) !important; box-shadow: 0 30px 80px rgba(40, 6, 28, .28) !important;
}

/* Cabecera */
#socialComposeModal .kp-compose-card-header {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; position: relative;
  padding: 16px 56px !important; margin: 0 !important; border-bottom: 1px solid var(--cp-line) !important;
  background: var(--cp-card) !important;
}
#socialComposeModal .kp-compose-card-title {
  margin: 0 !important; font-size: 1.05rem !important; font-weight: 800 !important;
  color: var(--cp-ink) !important; letter-spacing: -.01em; font-family: inherit !important;
}
#socialComposeModal .kp-compose-close {
  position: absolute !important; right: 12px; top: 50%; transform: translateY(-50%);
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: var(--cp-soft) !important; color: var(--cp-ink) !important; border: 0 !important;
  font-size: .95rem !important;
}

/* Cuerpo */
#socialComposeModal .kp-compose-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 12px !important; display: flex; flex-direction: column; gap: 14px;
}
#socialComposeModal .kp-compose-body > * { margin: 0 !important; }

#socialComposeModal .kp-compose-user-row { display: flex; align-items: center; gap: 12px; }
#socialComposeModal .kp-compose-avatar {
  width: 46px !important; height: 46px !important; border-radius: 50% !important;
  border: 2px solid #fff !important; box-shadow: 0 0 0 2px var(--cp-rose) !important; object-fit: cover;
}
#socialComposeModal .kp-compose-user-name { font-weight: 800 !important; font-size: 1rem !important; color: var(--cp-ink) !important; }

/* Audiencia: control segmentado */
#socialComposeModal .kp-audience { padding: 0 !important; border: 0 !important; background: none !important; }
#socialComposeModal .kp-audience-label { display: none !important; }
#socialComposeModal .kp-audience-options {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important;
  padding: 4px; border-radius: 14px; background: var(--cp-soft);
}
#socialComposeModal .kp-aud-opt {
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px !important;
  min-height: 40px !important; padding: 0 6px !important; border-radius: 11px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--cp-muted) !important; font-size: .82rem !important; font-weight: 700 !important;
}
#socialComposeModal .kp-aud-ico { width: auto !important; height: auto !important; background: none !important; color: inherit !important; }
#socialComposeModal .kp-aud-ico svg { width: 16px; height: 16px; }
#socialComposeModal .kp-aud-name { font-size: inherit !important; white-space: nowrap; }
#socialComposeModal .kp-aud-opt.is-on {
  background: var(--cp-card) !important; color: var(--cp-deep) !important;
  box-shadow: 0 2px 8px rgba(40, 6, 28, .1) !important;
}
#socialComposeModal .kp-aud-opt[data-aud="anon"].is-on { color: #7c3aed !important; }
#socialComposeModal .kp-audience-preview {
  margin-top: 8px !important; padding: 0 4px !important; background: none !important; border: 0 !important;
  font-size: .8rem !important; color: var(--cp-muted) !important; line-height: 1.4;
}
#socialComposeModal .kp-compose-anon-banner {
  border-radius: 14px !important; padding: 10px 12px !important; font-size: .8rem !important;
  background: rgba(124, 58, 237, .08) !important; color: #5b21b6 !important; border: 0 !important; gap: 8px;
}

/* Texto */
#socialComposeModal .kp-cmp-textwrap { position: relative; }
#socialComposeModal .kp-compose-textarea {
  width: 100% !important; box-sizing: border-box; min-height: 110px !important; resize: none !important;
  padding: 4px 2px 22px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 1.12rem !important; line-height: 1.5 !important; color: var(--cp-ink) !important; outline: none !important;
}
#socialComposeModal .kp-compose-textarea::placeholder { color: var(--cp-muted); opacity: .8; }
#socialComposeModal .kp-cmp-counter { position: absolute; right: 2px; bottom: 0; font-size: .72rem; color: var(--cp-muted); }
#socialComposeModal .kp-cmp-counter.is-near { color: var(--cp-deep); font-weight: 700; }

/* Vista previa de foto y audio */
#socialComposeModal .kp-compose-media-preview { border-radius: 16px !important; overflow: hidden; }
#socialComposeModal .kp-compose-voice-preview { border-radius: 16px !important; background: var(--cp-soft) !important; }

/* Herramientas */
#socialComposeModal .kp-cmp-tools {
  display: flex !important; align-items: center; gap: 6px !important;
  padding: 8px 8px 8px 14px !important; border: 1px solid var(--cp-line); border-radius: 16px;
  flex-wrap: nowrap !important;
}
#socialComposeModal .kp-cmp-tools-label { margin-right: auto; font-size: .85rem; font-weight: 700; color: var(--cp-ink); }
#socialComposeModal .kp-cmp-tool {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border-radius: 12px; border: 0; background: transparent; color: var(--cp-deep);
  font-family: inherit; font-weight: 700; font-size: .8rem; line-height: 1; cursor: pointer; transition: background .15s ease;
}
#socialComposeModal .kp-cmp-tool:hover { background: var(--cp-soft); }
#socialComposeModal #modalAddPhotoBtn { color: #16a34a; }
#socialComposeModal #modalAddVoiceBtn { color: #e11d63; }
#socialComposeModal #modalAddEmojiBtn { color: #d97706; }
#socialComposeModal .kp-cmp-tool span { color: var(--cp-ink); }

/* Panel de emojis */
#socialComposeModal .kp-emoji-picker-panel {
  border-radius: 16px !important; border: 1px solid var(--cp-line) !important;
  background: var(--cp-card) !important; box-shadow: 0 10px 30px rgba(40, 6, 28, .08) !important;
}

/* Ambiente */
#socialComposeModal .kp-compose-vibe-section { padding: 0 !important; background: none !important; border: 0 !important; }
#socialComposeModal .kp-compose-option-label {
  margin: 0 0 8px !important; font-size: .85rem !important; font-weight: 700 !important;
  color: var(--cp-ink) !important; text-transform: none !important; letter-spacing: 0 !important;
}
#socialComposeModal .kp-compose-option-label span { font-weight: 500; color: var(--cp-muted); margin-left: 4px; }
#socialComposeModal .kp-compose-vibe-chips {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
  overflow-x: auto; margin: 0 -18px; padding: 2px 18px 4px; scrollbar-width: none;
}
#socialComposeModal .kp-compose-vibe-chips::-webkit-scrollbar { display: none; }
#socialComposeModal .kp-vibe-chip {
  flex: 0 0 auto; height: 34px !important; padding: 0 12px !important; margin: 0 !important;
  border-radius: 999px !important; border: 1px solid var(--cp-line) !important;
  background: var(--cp-card) !important; color: var(--cp-ink) !important; box-shadow: none !important;
  font-size: .8rem !important; font-weight: 600 !important; white-space: nowrap; transform: none !important;
}
#socialComposeModal .kp-vibe-chip.selected-vibe {
  background: rgba(255, 79, 139, .1) !important; border-color: var(--cp-rose) !important; color: var(--cp-deep) !important;
}

/* Pie con Publicar */
#socialComposeModal .kp-cmp-footer {
  flex: 0 0 auto; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cp-line); background: var(--cp-card);
}
#socialComposeModal .kp-compose-submit {
  width: 100% !important; height: 50px !important; margin: 0 !important; border: 0 !important;
  border-radius: 14px !important; background: var(--cp-grad) !important; color: #fff !important;
  font-size: 1rem !important; font-weight: 800 !important; box-shadow: 0 10px 24px rgba(225, 29, 99, .28) !important;
  transition: opacity .2s ease, transform .15s ease;
}
#socialComposeModal .kp-compose-submit:disabled {
  opacity: 1; background: var(--cp-soft) !important; color: var(--cp-muted) !important;
  box-shadow: none !important; cursor: not-allowed;
}
#socialComposeModal .kp-compose-submit.is-ready:active { transform: scale(.98); }

/* Móvil: pantalla completa */
@media (max-width: 560px) {
  #socialComposeModal { padding: 0 !important; align-items: stretch !important; }
  #socialComposeModal .kp-compose-card {
    width: 100vw !important; max-height: none !important; height: 100dvh !important;
    border-radius: 0 !important; border: 0 !important;
  }
  #socialComposeModal .kp-compose-card-header { justify-content: flex-start; padding: 14px 56px 14px 18px !important; }
  #socialComposeModal .kp-cmp-tool span { display: none; }
  #socialComposeModal .kp-cmp-tool { width: 42px; padding: 0; justify-content: center; }
  #socialComposeModal .kp-aud-opt { font-size: .76rem !important; }
}
#socialComposeModal .kp-compose-anon-banner { display: none !important; }

/* ── Caja "¿Qué quieres compartir hoy?" en el muro ── */
.kp-composer {
  border-radius: 20px !important; border: 1px solid rgba(42,16,32,.08) !important;
  box-shadow: 0 6px 22px rgba(40,6,28,.05) !important; padding: 14px 16px 8px !important; background: #fff !important;
}
body.dark-theme .kp-composer { background: #24111e !important; border-color: rgba(255,255,255,.08) !important; }
.kp-composer-header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px !important; border-bottom: 1px solid rgba(42,16,32,.07) !important; margin: 0 !important; }
.kp-composer-avatar { width: 44px !important; height: 44px !important; border: 2px solid #fff !important; box-shadow: 0 0 0 2px #ff4f8b !important; }
.kp-composer-input-trigger {
  flex: 1; height: 44px !important; padding: 0 18px !important; text-align: left;
  border-radius: 999px !important; border: 0 !important; background: #f6f1f4 !important;
  color: #8a7282 !important; font-size: .95rem !important; font-weight: 500 !important;
}
body.dark-theme .kp-composer-input-trigger { background: #2e1627 !important; color: #c9a9ba !important; }
.kp-composer-quick-actions { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 6px !important; margin: 0 !important; border: 0 !important; }
.kp-composer-action {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  height: 40px; border-radius: 12px !important; border: 0 !important; background: transparent !important;
  font-size: .86rem !important; font-weight: 700 !important; color: inherit;
}
.kp-composer-action:hover { background: #f6f1f4 !important; }
.kp-composer-action .ca-icon { display: inline-flex; font-size: 0 !important; }

/* ── Anuncio fijado / sin anuncio ── */
#feedAdBadge { border-radius: 999px !important; font-size: .7rem !important; letter-spacing: .04em; padding: 5px 10px !important; }
.kp-noad-card {
  display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px !important; border-radius: 20px !important;
  border: 1px dashed rgba(255,79,139,.4) !important; background: linear-gradient(135deg,#fff5f9,#fff) !important;
}
body.dark-theme .kp-noad-card { background: linear-gradient(135deg,#321628,#24111e) !important; }
.kp-noad-ico { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#ff5a8f,#e11d63); }
.kp-noad-text { flex: 1 1 180px; display: flex; flex-direction: column; gap: 3px; }
.kp-noad-text strong { font-size: 1rem; color: var(--ink, #2a1020); }
.kp-noad-text span { font-size: .85rem; color: var(--muted, #8a7282); }
.kp-noad-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border-radius: 12px; background: linear-gradient(135deg,#ff5a8f,#e11d63); color: #fff !important;
  font-weight: 800; font-size: .9rem; text-decoration: none; box-shadow: 0 8px 18px rgba(225,29,99,.25);
}
@media (max-width: 480px) { .kp-noad-btn { width: 100%; justify-content: center; } }
.kp-composer-input-trigger { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Reel en el compositor */
#socialComposeModal .kp-video-preview { position: relative; border-radius: 16px; overflow: hidden; background: #000; max-height: 360px; display: flex; justify-content: center; }
#socialComposeModal .kp-video-preview[hidden] { display: none !important; }
#socialComposeModal .kp-video-preview video { width: 100%; max-height: 360px; object-fit: contain; }
#socialComposeModal .kp-video-badge { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; }
#socialComposeModal #modalAddVideoBtn { color: #7c3aed; }