/* ==== TARJETAS DE PUBLICACIÓN (POST CARD) ==== */
.post-card {
  background: var(--color-surface, #0a0014);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 0.90rem;                         /* antes 20px */
  margin-bottom: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* ==== HEADER: comunidad ==== */
.post-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;                              /* antes 10px */
  margin-bottom: 0.75rem;                   /* antes 16px */
}

.community-icon {
  width: 1.75rem;                           /* antes 36px */
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-borde);
}

.community-name {
  font-size: 0.875rem;                      /* antes 1rem */
  font-weight: 600;
  color: var(--color-acento);
  white-space: nowrap;
}

/* ==== META: autor & tiempo ==== */
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;                              /* antes 8px */
  font-size: 0.75rem;                       /* antes 0.85rem */
  color: var(--color-texto-muted, #777);
  margin-bottom: 0.5rem;                    /* antes 8px */
}

.avatar-small {
  width: 1.5rem;                            /* antes 28px */
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-borde);
}

.post-author {
  font-weight: 500;
  color: var(--color-texto);
}

.post-time {
  color: var(--color-texto-muted, #999);
}

/* ==== BODY: título y descripción ==== */
.post-card__body {
  margin-bottom: 0.75rem;                   /* antes 16px */
}

.post-title {
  font-size: 1rem;                          /* antes 1.2rem */
  font-weight: 600;
  margin: 0.25rem 0;                        /* antes 8px 0 */
  color: var(--color-texto);
  line-height: 1.3;
}

.post-desc {
  font-size: 0.875rem;                      /* antes 0.95rem */
  color: var(--color-texto-alt, #797979);
  margin-bottom: 0.5rem;                    /* antes 10px */
  white-space: pre-line;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== STATS: votos y comentarios ==== */
.post-card__stats {
  display: flex;
  align-items: center;
  gap: 0.1rem;           /* ajusta si quieres menos o más espacio */
  font-size: 0.875rem;

  justify-content: flex-start;  /* fuerza alineación izquierda */
}



.vote-btn {
  background: none;
  border: none;
  font-size: 1rem;                          /* antes 1.1rem */
  cursor: pointer;
  transition: transform 0.15s ease;
  color: var(--color-texto-muted, #888);
}

.vote-btn.voted {
  color: var(--color-acento);
  font-weight: bold;
}

.vote-btn:hover {
  transform: scale(1.15);
}

.vote-count {
  font-weight: 500;
  color: var(--color-texto);
}


.comment-count {
  margin-left: 0;         /* quita cualquier separación automática */
  font-size: 0.8125rem;
  color: var(--color-texto-muted, #777);
}

/* ==== ADJUNTOS: límite de altura ==== */
.hilo__imagen,
.hilo__video,
.hilo__audio {
  display: block;
  /* Límite máximo de ancho y alto */
  max-width: 300px;    /* tu ancho máximo */
  max-height: 460px;   /* tu alto máximo */
  /* Que mantenga proporción */
  width: auto;
  height: auto;
  margin: 0.5rem auto 0;
  border-radius: var(--radio);
}


/* ==== OCULTAR AVATAR PROPIO ==== */
.post-meta .avatar-small {
  display: none !important;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 600px) {
  .post-card {
      background: var(--color-surface, #07000f);

    padding: 0.6rem;
  }
  .post-card__header,
  .post-card__stats {
    gap:0.1rem;
  }
  .post-title {
    font-size: 0.88rem;
  }
  .post-desc {
    font-size: 0.8125rem;
  }
}
/* Base para los botones de voto */
.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

/* Tamaño uniforme de iconos */
.icon-up,
.icon-down {
  width: 1.5em;
  height: 1.5em;
}

/* Animaciones que alteran la intensidad del drop-shadow */
@keyframes glow-up {
  from { filter: drop-shadow(0 0 4px rgba(46,125,50,0.6)); }
  to   { filter: drop-shadow(0 0 12px rgba(46,125,50,0.9)); }
}
@keyframes glow-down {
  from { filter: drop-shadow(0 0 4px rgba(198,40,40,0.6)); }
  to   { filter: drop-shadow(0 0 12px rgba(198,40,40,0.9)); }
}

/* Asegura que el SVG sea inline-flex para centrar bien */
.vote-btn svg {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

/* Flecha arriba activa: verde con glow desde la propia forma */
.vote-up.voted-up svg.icon-up {
  color: #2e7d32;
  animation: glow-up 1s ease-in-out infinite alternate;
  transform: scale(1.1);
}

/* Flecha abajo activa: rojo con glow desde la propia forma */
.vote-down.voted-down svg.icon-down {
  color: #c62828;
  animation: glow-down 1s ease-in-out infinite alternate;
  transform: scale(1.1);
}

/* Hover (no activo) simplemente escala un poco el SVG */
.vote-up:hover svg.icon-up:not(:where(.voted-up)) ,
.vote-down:hover svg.icon-down:not(:where(.voted-down)) {
  transform: scale(1.05);
}
/* estilos.css (o donde tengas tus reglas de .ordenacion) */

/* Asegúrate de que la barra use flexbox */
.ordenacion.filtro-principal {
  display: flex;
  align-items: center;
}

/* Estilo para el botón "Vista" */
.btn-vista {
  margin-left: auto;         /* lo empuja al extremo derecho */
  background-color: #2a282b !important; /* gris */
  color: #aaaaaa;               /* texto blanco */
  border: none;
  padding: 0.5rem 1rem !important;
  border-radius: 0.25rem !important;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-vista:hover {
  background-color: #5a6268; /* gris más oscuro al hover */
}
/* POPOVER VISTA */
/* POPOVER VISTA MEJORADO */
.popover-vista {
  position: absolute;
  top: calc(100% + 0.5rem);      /* separa un poco del botón */
  right: 1rem;
  background: #2a282b;
  color: #afafaf;
  border-radius: 0.25rem;
  padding: 0.5rem 0;
  width: 10rem;                  /* un pelín más ancho para respirar */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 100;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;          /* evitar clicks cuando está oculto */
}

/* Flecha triangular */
.popover-vista::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 1.25rem;
  border: 0.5rem solid transparent;
  border-bottom-color: #272829;
}

/* Mostrar con animación */
.popover-vista:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.popover-vista.hidden {
  display: none;
}

.popover-title {
  margin: 0 1rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: #e0e0e0;
}

.popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 0.15s;
}

.popover-list li:hover {
  background: rgba(255,255,255,0.1);
}

.popover-list .icon {
  display: inline-flex;
}
/* ==== VISTA COMPACTA CORREGIDA ==== */
#posts-list.compact-view .post-card {
  position: relative;
  padding: 0.5rem;
  padding-right: 6rem;        /* +1rem más de espacio a la derecha */
}

#posts-list.compact-view .post-card__body {
  margin-right: 1rem;         /* separa el texto de la miniatura */
}

/* Oculta la descripción */
#posts-list.compact-view .post-desc {
  display: none;
}

/* Miniatura absoluta a la derecha, centrada verticalmente */
#posts-list.compact-view .hilo__imagen,
#posts-list.compact-view .hilo__video,
#posts-list.compact-view .hilo__audio {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  margin: 0;
  border-radius: var(--radio);
  flex-shrink: 0;
}

/* Ajuste opcional para los stats */
#posts-list.compact-view .post-card__stats {
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  /* ==== VISTA COMPACTA CORREGIDA (MÓVIL) ==== */
  #posts-list.compact-view .post-card {
    position: relative;
    padding: 0.5rem;
    padding-right: 5rem;      /* espacio para la miniatura */
  }

  #posts-list.compact-view .post-card__body {
    margin-right: 0;
  }

  /* Oculta la descripción */
  #posts-list.compact-view .post-desc {
    display: none;
  }

  /* Miniatura absoluta a la derecha, centrada verticalmente */
  #posts-list.compact-view .hilo__imagen,
  #posts-list.compact-view .hilo__video,
  #posts-list.compact-view .hilo__audio {
    position: absolute;
    top: 50%;
    right: 0.5rem;           /* un poco menos en móvil si quieres */
    transform: translateY(-50%);
    width: 4rem;             /* ajusta al gusto para móvil */
    height: 4rem;
    object-fit: cover;
    margin: 0;
    border-radius: var(--radio);
    flex-shrink: 0;
  }

  /* Ajuste opcional para los stats */
  #posts-list.compact-view .post-card__stats {
    margin-top: 0.5rem;
  }
}
#posts-list {
  margin: 0 0 0.5rem 0 !important;  /* 0 arriba/derecha/izq, 0.5rem abajo */
  padding: 0 !important;
  display: block;    /* en caso de que antes fuera flex/grid con gap */
  gap: 0 !important; /* anula cualquier gap en grid/flex */
}
/* Espacio solo entre tarjetas */
.post-card + .post-card {
  margin-top: 0.1rem;  /* ajusta a lo que necesites */
}
/* bookmark: cuando está activo, relleno en dorado */
.bookmark-btn.bookmarked .icon-bookmark-filled {
  color: gold;
}
/* ==== FAVORITOS POPUP === */
.popover-favoritos {
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
}

.popover-favoritos label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-texto-alt, #797979);
  cursor: pointer;
}

.popover-favoritos input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-acento);
  border: 1px solid var(--color-borde);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.popover-favoritos input[type="checkbox"]:hover {
  transform: scale(1.1);
}

.popover-favoritos input[type="checkbox"]:checked {
  box-shadow: 0 0 0 2px rgba( var(--color-acento-rgb, 46,125,50), 0.3 );
}
/* Botón “guardar” transparente y negro */
.save-btn {
  background: transparent; /* quita fondo blanco */
  border: none;            /* sin borde */
  color: #808080;          /* icono gris claro */
  padding: 0.2em;          /* un poquitín de espacio */
  cursor: pointer;
}

/* Botón “guardar” transparente y negro */
.save-btn {
  background: transparent; /* quita fondo blanco */
  border: none;            /* sin borde */
  color: #808080;          /* icono gris claro */
  padding: 0.2em;          /* un poquitín de espacio */
  cursor: pointer;
  display: inline-flex;    /* para centrar y permitir transforms */
  align-items: center;
  justify-content: center;
}

/* Asegúrate de que el SVG use currentColor y sea más grande */
.save-btn svg {
  width: 1.3em;            /* un poquito más grande */
  height: 1.3em;
  fill: none;              /* sin relleno inicial */
  stroke: currentColor;    /* trazo igual al color del botón */
  transform-origin: center center; /* centro para el zoom */
}

/* Estado “guardado”: dorado intenso con relleno */
.save-btn.saved {
  color: gold;             /* icono dorado */
}

.save-btn.saved svg {
  fill: currentColor;      /* relleno dorado */
  stroke: none;            /* sin trazo para resaltar el relleno */
}

/* Animación de zoom “pop” en el SVG */
@keyframes popZoom {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Cuando agregas .animate al botón, aplica la animación al SVG */
.save-btn.animate svg {
  animation: popZoom 0.3s ease;
}

/* Para invertir colores con un filter, si lo prefieres */
.save-btn.invert svg {
  filter: invert(1);
}
/* Por defecto (desktop): todo en línea */
#favoritos-filtros button .mobile-break {
  display: inline;
}

/* Sólo en móvil: forzamos salto de línea */
@media (max-width: 768px) {
  #favoritos-filtros button .mobile-break {
    display: block;       /* salta a la siguiente línea */
    margin-top: 0.1em;    /* opcional: espacio entre líneas */
  }
}
/* Animación de glow más intenso */
@keyframes glow {
  0% {
    /* glow suave */
    text-shadow:
      0 0 6px var(--glow-color),
      0 0 12px var(--glow-color);
  }
  100% {
    /* glow potente */
    text-shadow:
      0 0 12px var(--glow-color),
      0 0 24px var(--glow-color),
      0 0 36px var(--glow-color);
  }
}

/* Estilos base para todos los roles */
.post-user[class*="role-"],
.user-info-username[class*="role-"] {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--role-color) !important;
  animation: glow 1.8s ease-in-out infinite alternate;
}

/* Variables de color por rol */
.post-user.role-Usuario,
.user-info-username.role-Usuario {
  --role-color: #b0afb1;
  --glow-color: rgba(176,175,177,0.8);
}

.post-user.role-Asistidor,
.user-info-username.role-Asistidor {
  --role-color: #40c4ff;
  --glow-color: rgba(64,196,255,0.8);
}

.post-user.role-Contribuidor,
.user-info-username.role-Contribuidor {
  --role-color: #ffab40;
  --glow-color: rgba(255,171,64,0.8);
}

.post-user.role-Importante,
.user-info-username.role-Importante {
  --role-color: #ffd740;
  --glow-color: rgba(255,215,64,0.8);
}

.post-user.role-Colaborador,
.user-info-username.role-Colaborador {
  --role-color: #1de9b6;
  --glow-color: rgba(29,233,182,0.8);
}

.post-user.role-Administrador,
.user-info-username.role-Administrador {
  --role-color: #d500f9;
  --glow-color: rgba(213,0,249,0.8);
}

.post-user.role-Creador,
.user-info-username.role-Creador {
  --role-color: #ff1744;
  --glow-color: rgba(255,23,68,0.8);
}