/* Community v7 · comentarios más compactos y compositor estilo Instagram */

/* El bloque de ordenación pasa a ser secundario, no una gran barra de navegación. */
#communityPostDetail .post-comments,
#footballMatchDetail .post-comments {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(22, 20, 17, 0.08) !important;
  border-radius: 1rem !important;
  background: #fff !important;
  padding-top: 0 !important;
}

#communityPostDetail .post-comments__head,
#footballMatchDetail .post-comments__head {
  display: flex !important;
  min-height: 2.75rem;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  padding: 0.5rem 0.78rem !important;
  border-bottom: 1px solid rgba(22, 20, 17, 0.07);
  color: #716d66;
  background: #fff;
  font-size: 0.66rem !important;
  font-weight: 700;
  text-transform: none !important;
}

#communityPostDetail .post-comments__head > span:first-child,
#footballMatchDetail .post-comments__head > span:first-child {
  color: #191714;
  font-size: 0.69rem !important;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none !important;
}

#communityPostDetail .comment-order-switch,
#footballMatchDetail .comment-order-switch {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  align-items: center;
  gap: 0.18rem !important;
  margin-left: auto;
  border: 0 !important;
  border-radius: 999px;
  background: #f6f4ef !important;
  padding: 0.16rem !important;
}

#communityPostDetail .comment-order-switch button,
#footballMatchDetail .comment-order-switch button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 1.65rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #77726b !important;
  background: transparent !important;
  padding: 0.28rem 0.52rem !important;
  font-size: 0.61rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-transform: none !important;
  white-space: nowrap;
}

#communityPostDetail .comment-order-switch button.is-selected,
#footballMatchDetail .comment-order-switch button.is-selected {
  color: #8c590b !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(42, 32, 18, 0.09) !important;
}

#communityPostDetail .post-comments__head > small,
#footballMatchDetail .post-comments__head > small,
#communityPostDetail .community-comment-steps,
#footballMatchDetail .community-comment-steps {
  color: #99938b !important;
  font-size: 0.57rem !important;
}

/* Lista continua, como Instagram: sin una tarjeta independiente por comentario. */
#communityPostDetail .post-comments__list,
#footballMatchDetail .post-comments__list {
  display: grid;
  gap: 0 !important;
  background: #fff;
}

#communityPostDetail .post-comment-thread,
#footballMatchDetail .post-comment-thread {
  display: grid;
  gap: 0 !important;
  min-width: 0;
  border-bottom: 1px solid rgba(22, 20, 17, 0.065);
}

#communityPostDetail .post-comment-thread:last-child,
#footballMatchDetail .post-comment-thread:last-child {
  border-bottom: 0;
}

#communityPostDetail .post-comment,
#footballMatchDetail .post-comment,
body[data-theme="light"] #communityPostDetail .post-comment,
body[data-theme="light"] #footballMatchDetail .post-comment {
  display: grid !important;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2rem !important;
  gap: 0.55rem !important;
  align-items: start !important;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  color: #171512 !important;
  background: #fff !important;
  padding: 0.62rem 0.76rem 0.58rem !important;
  box-shadow: none !important;
}

#communityPostDetail .post-comment > .avatar,
#footballMatchDetail .post-comment > .avatar {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem;
  border: 1px solid rgba(22, 20, 17, 0.1) !important;
  background: #f3f0e9 !important;
  font-size: 0.61rem !important;
  box-shadow: none !important;
}

#communityPostDetail .post-comment > .avatar img,
#footballMatchDetail .post-comment > .avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.instagram-comment__content {
  min-width: 0;
}

.instagram-comment__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.24rem;
  line-height: 1.12;
}

.instagram-comment__meta > strong {
  display: inline !important;
  min-width: 0;
  overflow: hidden;
  color: #171512 !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-comment__time {
  display: inline !important;
  color: #8c8780 !important;
  font-size: 0.64rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.instagram-comment__meta .community-level-badge {
  display: inline-flex !important;
  min-height: 1.2rem !important;
  align-items: center;
  border: 1px solid rgba(193, 132, 34, 0.2) !important;
  border-radius: 999px !important;
  color: #765018 !important;
  background: #fff6df !important;
  padding: 0.12rem 0.38rem !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

#communityPostDetail .post-comment p,
#footballMatchDetail .post-comment p {
  margin: 0.16rem 0 0 !important;
  color: #171512 !important;
  font-size: 0.84rem !important;
  line-height: 1.26 !important;
}

#communityPostDetail .post-comment__image,
#footballMatchDetail .post-comment__image {
  width: min(100%, 15rem) !important;
  margin-top: 0.36rem !important;
  overflow: hidden;
  border: 1px solid rgba(22, 20, 17, 0.08) !important;
  border-radius: 0.62rem !important;
  background: #f6f4ef !important;
}

#communityPostDetail .post-comment__image img,
#footballMatchDetail .post-comment__image img {
  width: 100%;
  max-height: 12rem !important;
  object-fit: contain;
}

#communityPostDetail .post-comment__actions,
#footballMatchDetail .post-comment__actions {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.68rem !important;
  margin-top: 0.24rem !important;
}

#communityPostDetail .post-comment__actions button,
#footballMatchDetail .post-comment__actions button {
  min-height: 1.45rem !important;
  border: 0 !important;
  color: #77726b !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.63rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-transform: none !important;
}

.instagram-comment__like {
  display: grid;
  width: 2rem;
  min-width: 2rem;
  min-height: 2.75rem;
  justify-items: center;
  align-content: start;
  gap: 0.1rem;
  border: 0;
  color: #26231f;
  background: transparent;
  padding: 0.08rem 0 0;
}

.instagram-comment__like svg {
  display: block;
  width: 1.32rem;
  height: 1.32rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.instagram-comment__like.is-active {
  color: #ed1b3a;
}

.instagram-comment__like.is-active svg {
  fill: currentColor;
  stroke: currentColor;
}

.instagram-comment__like small {
  display: block;
  color: #77726b !important;
  font-size: 0.59rem !important;
  font-weight: 650;
  line-height: 1;
}

.instagram-comment__like small:empty {
  display: none;
}

#communityPostDetail .post-comment-replies,
#footballMatchDetail .post-comment-replies {
  display: grid;
  gap: 0 !important;
  margin: 0 0 0 2.65rem !important;
  border-left: 1px solid rgba(22, 20, 17, 0.075) !important;
  padding-left: 0.28rem !important;
}

#communityPostDetail .comment-quote,
#footballMatchDetail .comment-quote {
  margin-top: 0.22rem;
  border: 0 !important;
  border-left: 2px solid rgba(193, 132, 34, 0.38) !important;
  border-radius: 0 !important;
  color: #77726b !important;
  background: transparent !important;
  padding: 0.2rem 0.45rem !important;
  font-size: 0.62rem !important;
  box-shadow: none !important;
}

/* Compositor: solo avatar, comentario, archivo y publicar. Sin fila de emojis. */
body.community-detail-with-dock .mobile-content,
body.football-detail-with-comment-dock .mobile-content {
  padding-bottom: calc(var(--mobile-nav-height) + 4.45rem + env(safe-area-inset-bottom)) !important;
}

.community-comment-dock,
.football-comment-dock {
  gap: 0 !important;
  border-top: 1px solid rgba(22, 20, 17, 0.09) !important;
  background: rgba(255, 255, 255, 0.985) !important;
  padding: 0.42rem 0.62rem 0.5rem !important;
  box-shadow: 0 -0.25rem 0.9rem rgba(31, 24, 13, 0.045) !important;
}

.community-comment-dock .comment-emoji-row,
.football-comment-dock .comment-emoji-row {
  display: none !important;
}

.community-comment-dock__row,
.football-comment-dock__row {
  display: grid !important;
  grid-template-columns: 2.05rem minmax(0, 1fr) 2.3rem auto !important;
  gap: 0.36rem !important;
  align-items: center !important;
}

.community-comment-dock__avatar,
.football-comment-dock__avatar {
  width: 2.05rem !important;
  height: 2.05rem !important;
  border-color: rgba(22, 20, 17, 0.1) !important;
  background: #f3f0e9 !important;
  font-size: 0.58rem !important;
}

.community-comment-dock textarea,
.football-comment-dock textarea,
.community-comment-dock__form textarea,
.football-comment-dock .post-comment-form textarea {
  width: 100% !important;
  min-width: 0 !important;
  height: 2.62rem !important;
  min-height: 2.62rem !important;
  max-height: 5rem !important;
  resize: none !important;
  overflow-y: auto !important;
  border: 1px solid rgba(22, 20, 17, 0.14) !important;
  border-radius: 999px !important;
  color: #171512 !important;
  background: #fff !important;
  padding: 0.58rem 0.82rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  box-shadow: none !important;
}

.community-comment-dock__image,
.football-comment-dock .community-comment-dock__image,
.football-comment-dock .comment-image-input {
  position: relative;
  display: grid !important;
  width: 2.3rem !important;
  height: 2.3rem !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(22, 20, 17, 0.13) !important;
  border-radius: 50% !important;
  color: #4b4741 !important;
  background: #fff !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.community-comment-dock__image::before,
.football-comment-dock .comment-image-input::before {
  content: none !important;
  display: none !important;
}

.community-comment-dock__image svg,
.football-comment-dock .community-comment-dock__image svg,
.football-comment-dock .comment-image-input svg {
  display: block;
  width: 1.18rem;
  height: 1.18rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-comment-dock__submit,
.football-comment-dock button[type="submit"] {
  min-width: 0 !important;
  min-height: 2.3rem !important;
  border: 0 !important;
  color: #a56b0f !important;
  background: transparent !important;
  padding: 0 0.1rem !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.community-comment-dock__submit:disabled,
.football-comment-dock button[type="submit"]:disabled {
  visibility: hidden;
  width: 0;
  padding: 0 !important;
  opacity: 0;
}

/* No redimensionamos toda la app al aparecer el teclado: el dock sube sobre él. */
body.keyboard-open .bottom-nav,
body.ios-keyboard-open .bottom-nav {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.keyboard-open .community-comment-dock,
body.ios-keyboard-open .community-comment-dock,
body.keyboard-open .football-comment-dock,
body.ios-keyboard-open .football-comment-dock {
  bottom: calc(var(--keyboard-offset) + env(safe-area-inset-bottom)) !important;
}

body.keyboard-open.community-detail-with-dock .mobile-content,
body.ios-keyboard-open.community-detail-with-dock .mobile-content,
body.keyboard-open.football-detail-with-comment-dock .mobile-content,
body.ios-keyboard-open.football-detail-with-comment-dock .mobile-content {
  padding-bottom: calc(var(--keyboard-offset) + 4rem + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 520px) {
  #communityPostDetail .post-comment,
  #footballMatchDetail .post-comment {
    grid-template-columns: 2.12rem minmax(0, 1fr) 1.85rem !important;
    gap: 0.48rem !important;
    padding: 0.56rem 0.68rem 0.52rem !important;
  }

  #communityPostDetail .post-comment > .avatar,
  #footballMatchDetail .post-comment > .avatar {
    width: 2.12rem !important;
    height: 2.12rem !important;
    min-width: 2.12rem;
  }

  #communityPostDetail .post-comments__head,
  #footballMatchDetail .post-comments__head {
    padding-inline: 0.68rem !important;
  }

  #communityPostDetail .comment-order-switch button,
  #footballMatchDetail .comment-order-switch button {
    padding-inline: 0.42rem !important;
    font-size: 0.58rem !important;
  }

  .community-comment-dock,
  .football-comment-dock {
    padding-right: calc(0.55rem + env(safe-area-inset-right)) !important;
    padding-left: calc(0.55rem + env(safe-area-inset-left)) !important;
  }
}