/* ==== ESTILOS PARA comunidad.html ==== */

/* CONTENEDOR PRINCIPAL FLEX */
.layout {
  display: flex;
  gap: 24px;
}

/* CONTENIDO CENTRAL (BANNER + PUBLICACIONES) */
.content-left {
  flex: 1;
  max-width: 900px;
  margin: 0 auto;
}


/* HERO DE LA COMUNIDAD */
.comunidad-hero {
  background-color: var(--color-sidebar);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  margin-bottom: 24px;
}
.banner-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.banner-wrap .banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comunidad-info {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 16px;
}
.comunidad-info .icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--color-acento);
  object-fit: cover;
  margin-top: -130px;

}
.comunidad-info .info-texto {
  flex: 1;
}
.comunidad-info .info-texto .titulo {
  font-size: 1.5rem;
  color: var(--color-acento);
  margin-bottom: 8px;
}
.comunidad-info .info-texto .descripcion {
  font-size: 1rem;
  color: var(--color-texto);
  margin-bottom: 4px;
  
}
.comunidad-info .info-texto .meta {
  font-size: 0.875rem;
  color: var(--color-texto);
}

/* BOTÓN FAVORITO (ESTRELLA) */
.btn-fav {
  background: var(--color-acento-claro);
  color: var(--color-acento);
  border: none;
  padding: 6px 10px;
  border-radius: var(--radio);
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--transicion);
  margin-left: auto;
}


/* NAVEGACION INTERNA */
.subnav {
  display: flex;
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: 20px;
}
.subnav__item {
  padding: 10px 16px;
  background: #000000;
  border: none;
  cursor: pointer;
  font-weight: 500;
  border-top-left-radius: var(--radio);
  border-top-right-radius: var(--radio);
  transition: var(--transicion);
  color: var(--color-texto);
}
.subnav__item.active,
.subnav__item:hover {
  background: var(--color-acento);
  color: #fff;
}

/* CONTENIDO DE PESTAÑAS */
.tab-content {
  display: block;
}
.tab-content.hidden {
  display: none;
}

/* ================================
   HILOS DEL FORO
   ================================ */
.hilo {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  outline: none; /* para focus personalizado */
}

.hilo:hover,
.hilo:focus-visible {
  box-shadow: var(--sombra-suave);
  transform: translateY(-3px);
  border-color:#0f0529;
}

/* Encabezado del hilo con grid para alinear contenido */
.hilo__header {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Avatar mejor definido y accesible */
.avatar-small {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-borde);
}

/* Nombre de usuario con enlace y estado hover/focus */
.username {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-acento);
  text-decoration: none;
}

.username:hover,
.username:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Título con énfasis semántico */
.hilo__title {
  font-size: 1rem;
  margin: 0.3rem 0;
  color: var(--color-texto);
  line-height: 1.3;
  font-weight: 500; /* peso ligero para que se vea más delgado */
}

/* Descripción con truncado y lectura accesible */
.post-desc {
  font-size: 0.9rem;
  color: #646464 !important;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
    line-clamp: 3;            /* aún en proceso de adopción :contentReference[oaicite:0]{index=0} */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Indicador de nuevo mensaje */
.hilo.new .hilo__title::after {
  content: " • Nuevo";
  color: var(--color-accent);
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

/* Accesibilidad: foco visible y contraste */
.hilo:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* ================================
   Responsive & ajustes finos
   ================================ */
@media (max-width: 600px) {
  .hilo {
    padding: 0.75rem;
  }
  .hilo__header {
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
  }
  
  .hilo__title {
    font-size: 1rem;
  }
  .post-desc {
    font-size: 0.8125rem;
  }
}

/* LISTA DE MIEMBROS */
.miembros-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.miembros-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-sidebar);
  padding: 12px;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
}
.miembros-list .role-creator {
  font-size: 0.875rem;
  color: var(--color-acento);
  margin-left: auto;
}
.member-actions .btn {
  font-size: 0.75rem;
  padding: 4px 8px;
  margin-left: 8px;
}

/* MODAL GENERICO */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal.hidden {
  display: none;
}
.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}
.modal__window {
  position: relative;
  background: var(--color-sidebar);
  border-radius: var(--radio);
  padding: 24px;
  width: 90%;
  max-width: 500px;
  box-shadow: var(--sombra-suave);
  z-index: 10;
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.modal__title {
  margin-bottom: 16px;
  font-size: 1.25rem;
  color: var(--color-texto);
}
.modal__form .modal__field {
  margin-bottom: 12px;
}
.modal__form label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--color-texto);
}
.modal__form input[type="text"],
.modal__form textarea,
.modal__form select,
.modal__form input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 0.875rem;
  transition: var(--transicion);
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal__submit {
  background: var(--color-acento);
  color: #fff;
}
.modal__submit:hover {
  background: var(--color-acento-claro);
}

/* Botón "Crear post" */
.crear-post,
.btn.crear-post {
  background: var(--color-acento);
  color: white;
  padding: 8px 14px;
  font-size: 0.9rem;
  border-radius: var(--radio);
  border: none;
  cursor: pointer;
  transition: var(--transicion);
}
.crear-post:hover,
.btn.crear-post:hover {
  background: var(--color-acento-claro);
}
/* ==== SUBMENÚ “Mis comunidades” ULTRA‑COMPACTO ==== */
.submenu-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-fast);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 180px;             /* ancho fijo más reducido */
}

.submenu-list.open {
  max-height: 200px;        /* espacio para varios ítems */
}

.submenu-list li {
  padding: 4px 8px;         /* menos espacio vertical y horizontal */
  display: flex;
  align-items: center;
  gap: 6px;
}

.submenu-list li a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;       /* texto más pequeño */
  padding: 0;
  width: 100%;
}

.submenu-list li a:hover {
  background: var(--color-accent-light);
}

.submenu-icon {
  width: 20px;               /* icono pequeño */
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}
/* Submenú “Mis comunidades” */
.has-submenu {
  position: relative;
}
.submenu-toggle {
  background: none;
  border: none;
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: background var(--transition-fast);
}
.submenu-toggle:hover,
.submenu-toggle.open {
  background: var(--color-accent-light);
}
.submenu-list {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-fast);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.submenu-list.open {
  max-height: 240px; /* suficiente para ~6 ítems */
}
.submenu-list li {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.submenu-list li a {
  text-decoration: none;
  color: var(--color-text);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition-fast);
}
.submenu-list li a:hover {
  background: var(--color-accent-light);
}
.submenu-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* “Ver más…” dentro del submenú */
.ver-mas-item {
  text-align: center;
}
#btn-ver-mas {
  background: none;
  border: none;
  color: var(--color-accent);
  font-weight: 500;
  cursor: pointer;
  padding: 8px;
  transition: color var(--transition-fast);
}
#btn-ver-mas:hover {
  color: var(--color-accent-light);
}

/* Dropdown en filtros generales */
.dropdown.open .dropdown-menu {
  display: block;
}
.dropdown.open .dropdown-toggle {
  background: var(--color-accent-light);
}

/* Errores inline en formularios */
.field-error {
  display: block;
  margin-top: 4px;
  color: red;
  font-size: 0.85rem;
}

/* Cabecera de cada tarjeta de comunidad */
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.comunidad-icono {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent);
}
/* Sidebar derecho profesional */
.content-right .sidebar-right {
  background: #0c0016;
  border: none;
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  position: sticky;
  top: 80px;
  width: 320px;
  margin-left: 1px;
}
.sidebar-right__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 12px;
  margin-bottom: 8px;
}
.sidebar-right__header h2 {
  font-size: 1.25rem;
  color: var(--color-acento);
  margin: 0;
}
.ver-comunidad {
  background: var(--color-acento);
  color: #fff;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--transicion);
}
.ver-comunidad:hover {
  background: var(--color-acento-claro);
}
.sidebar-right__stats {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}
.sidebar-right__stats li {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 6px 0;
}
.sidebar-right__stats small {
  color: #666;
}
.sidebar-right__stats strong {
  color: var(--color-texto);
}
.sidebar-right__markers h3,
.sidebar-right__rules h3 {
  font-size: 1.05rem;
  margin-top: 16px;
  margin-bottom: 4px;
  color: var(--color-texto);
}
.marker {
  background: var(--color-acento-light);
  color: var(--color-acento);
  padding: 4px 8px;
  border: 1px solid #381792 !important;   /* ← aquí agregamos el borde */
  border-radius: var(--radio);
  font-size: 0.85rem;
  margin: 2px 4px;
  display: inline-block;
}
.rules-list {
  /* mostramos numeración en PC y móvil */
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 0.5em;
}
 .rules-list li {
  /* conservamos el fondo y borde, pero permitimos marcadores */
  display: list-item;
  margin-bottom: 0.2em;
}

.rule-toggle {
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-texto);
  cursor: pointer;
  transition: color var(--transicion);
}
.rule-toggle:hover {
  color: var(--color-acento);
}
.rule-desc {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
}
/* === Ocultar “Acerca de” en desktop y mostrar sidebar === */
@media (min-width: 601px) {
  /* Oculta la pestaña “Acerca de” */
  .subnav__item[data-tab="acerca"] {
    display: none !important;
  }
  /* Asegura que la sección “Acerca de” esté oculta */
  #acerca {
    display: none !important;
  }
  /* Muestra el sidebar derecho */
  aside.content-right {
    display: block !important;
  }
}

/* === En móvil, ocultar sidebar y mostrar “Acerca de” === */
@media (max-width: 600px) {
  /* Oculta el sidebar derecho */
  aside.content-right {
    display: none !important;
  }
  /* Muestra la pestaña “Acerca de” */
  .subnav__item[data-tab="acerca"] {
    display: inline-flex !important;
  }
}

/* ====== MÓVIL OPTIMIZADO (≤600px) ====== */
@media (max-width: 600px) {
  /* 1) Layout en columna única y full width */
  .layout {
    flex-direction: column;
    gap: 16px;
    padding: 0 12px;
  }
  .content-left {
    max-width: 100%;
    margin: 0;
  }

  /* 2) Hero compacto y centrado */
  .comunidad-hero {
    margin-bottom: 16px;
    border-radius: 10px;
  }
  .banner-wrap {
    height: 140px;
  }
  .comunidad-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px;
  }
.comunidad-info .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-acento);
  object-fit: cover;
  margin-top: -50px;

}
  .comunidad-info .titulo {
    font-size: 1.25rem;
  }
  .comunidad-info .descripcion,
  .comunidad-info .meta {
    font-size: 0.875rem;
  }
  .btn-fav {
    margin: 8px 0 0;
    padding: 4px 8px;
    font-size: 1rem;
  }

  /* 3) Subnav horizontal scroll y botones más pequeños */
  .subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }
  .subnav__item {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  /* 4) Hilos: tarjetas más estrechas y texto reducido */
  .hilo {
    padding: 0.75rem;
    border-radius: 8px;
  }
  .hilo__header {
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .hilo__title {
    font-size: 1rem;
  }
@media (max-width: 600px) {
  .post-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}
  /* 5) Miembros: lista compacta */
  .miembros-list li {
    gap: 8px;
    padding: 8px;
  }
  .avatar-small {
    width: 1.5rem;
    height: 1.5rem;
  }
  .member-actions .btn {
    font-size: 0.7rem;
    padding: 3px 6px;
  }

  /* 6) Tab-content: márgenes internos más suaves */
  .tab-content {
    padding: 0 4px;
  }

  /* 7) Modal: ocupa casi toda la pantalla */
  .modal__window {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
  }
  .modal__title {
    font-size: 1.1rem;
  }
  .modal__form label,
  .modal__form input,
  .modal__form textarea,
  .modal__form select {
    font-size: 0.85rem;
  }

  /* 8) Botón Crear post: más pequeño y centrado */
  .crear-post,
  .btn.crear-post {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  /* 9) Sidebar “Acerca de”: ocupa todo el ancho */
  #acerca .sidebar-right {
    padding: 16px;
    margin: 0 -12px;
    border-radius: 0;
    box-shadow: none;
  }
}
/* — Tamaño de fecha/hora en hilos — */
.hilo__header time {
  font-size: 0.75rem;    /* reduce el tamaño para desktop */
  color: #fff !important;    /* ahora la fecha de publicación será blanca */
}

/* — Versión aún más compacta para móvil — */
@media (max-width: 600px) {
  .hilo__header time {
    font-size: 0.7rem;   /* un pelín más pequeño en móvil */
    color: #808080 !important;
  }
}
/* Base común ajustada */
.btn-danger,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;      /* menos padding */
  font-size: 0.85rem;            /* fuente más pequeña */
  font-weight: 500;
  border-radius: 0.5rem;         /* esquinas algo redondeadas */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

/* Verde amigable “Unirse” */
.btn-success {
  background-color: #66bb6a;     /* verde medio, agradable */
  color: #fff;
  border-color: #66bb6a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-success:hover {
  background-color: #57a05b;     /* un poco más oscuro */
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.btn-success:active {
  background-color: #4a8b50;     /* tono más intenso al click */
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Rojo “Abandonar” igualmente ajustado */
.btn-danger {
  background-color: #ef5350;     /* rojo suave */
  color: #fff;
  border-color: #ef5350;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-danger:hover {
  background-color: #d64541;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.btn-danger:active {
  background-color: #c0392b;
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
/* Botón “Vetar” en gris */
button[data-action="vetar"] {
  background-color: #6c757d;    /* gris Bootstrap “secondary” */
  border: 1px solid #6c757d;
  color: #fff;
}

/* Hover un poco más oscuro */
button[data-action="vetar"]:hover {
  background-color: #5a6268;
  border-color:     #545b62;
}
/* ====== ESTILOS COMUNES A AMBOS MODALES ====== */
.modal .modal__window {
  padding: 1.5rem;
  max-width: 700px;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background-color .2s, border-radius .2s;
}

/* — Modal de expulsión (“botar”): fondo rojo suave y bordes redondeados — */
.modal-botar .modal__window {
  background-color: #f8d7da;   /* rojo pálido */
  border-radius: 0.75rem;       /* menos “cuadrado” */
}

/* — Modal de veto: fondo gris y bordes redondeados — */
.modal-vetar .modal__window {
  background-color: #e2e3e5;   /* gris clarito */
  border-radius: 0.75rem;
}

/* ====== BOTONES “Confirmar” de  ntro de cada modal ====== */
/* Botón Expulsar (botar) */
.modal-botar #confirm-action {
  background-color: #dc3545;  /* rojo Bootstrap */
  border: 1px solid #dc3545;
  color: #fff;
  border-radius: 0.5rem;
  padding: 2px 0.9rem;       /* arriba/abajo 0.6rem, izquierda/derecha 1.2rem */

}
.modal-botar #confirm-action:hover {
  background-color: #c82333;
  border-color:     #bd2130;
}

/* Botón Vetar mejorado */
.modal-vetar #confirm-action {
  background-color: #6c757d;   /* gris Bootstrap “secondary” */
  border: 1px solid #6c757d;
  color: #fff;
  border-radius: 0.5rem;

  /* --- Ajustes nuevos --- */
  padding: 2px 0.9rem;       /* arriba/abajo 0.6rem, izquierda/derecha 1.2rem */
}
.modal-vetar #confirm-action:hover {
  background-color: #5a6268;
  border-color:     #545b62;
}
.hilo__img {
  display: block;
  max-width: 25%;
  margin: 0.5rem auto 0;
  border-radius: 8px;
}
/* ======= BOTÓN FAVORITO MEJORADO ======= */
.btn-fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-acento);  /* fondo claro por defecto */
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 1.5rem;
  color: #000000;             /* icono en acento */
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}
/* Icono SVG más detallado */
.btn-fav::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  mask: url("data:image/svg+xml,%3Csvg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  background-color: currentColor;
  transition: background-color 0.2s ease;
}



/* Estado “activo” con animación de pulso */
.btn-fav.favorito--activo {
  background: var(--color-acento);
  color: #fff;
  animation: pulse 0.6s ease-out;
}
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Pequeño “tooltip” al mantener presionado */
.btn-fav[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-sidebar);
  color: var(--color-texto);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.btn-fav[data-tooltip]::after {
  opacity: 0;
}
/* ========================================
   Botones de Configuración (vertical, delgados, tonos violeta oscuro)
   ======================================== */
#config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

#config .btn {
  padding: 0.4rem 0.8rem;            /* más delgado */
  font-size: 0.9rem;
  font-weight: 400;
  border-radius: 0.25rem;            /* esquinas suaves */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  width: 100%;                       /* ancho completo */
  text-align: left;                  /* alineado a la izquierda */
}

/* Editar (violeta oscuro suave) */
#btn-edit {
  background-color: #4b3b65;
  color: #f0e6fa;
}
#btn-edit:hover {
  background-color: #3a2c54;
  transform: translateX(-2px);
}

/* Eliminar (vino muy oscuro) */
#btn-delete {
  background-color: #5c2f3b;
  color: #f8e6e0;
}
#btn-delete:hover {
  background-color: #4a2630;
  transform: translateX(-2px);
}

/* Vetados (gris azulado) */
#btn-vetados {
  background-color: #46364a;
  color: #e3dce6;
}
#btn-vetados:hover {
  background-color: #35273a;
  transform: translateX(-2px);
}

/* Colaboradores (verde-violáceo) */
#btn-collaborators {
  background-color: #3e3a5f;
  color: #e8e4fa;
}
#btn-collaborators:hover {
  background-color: #2d2a4b;
  transform: translateX(-2px);
}
/* ==== MODO OSCURO PARA MODALES ==== */
.modal__window {
  background-color: #000 !important;
  color: #afafaf !important;
}
/* Inputs, selects y textareas dentro del modal */
.modal__window input,
.modal__window select,
.modal__window textarea {
  background-color: #222 !important;
  color: #afafaf !important;
  border: 1px solid #444 !important;
}
/* Labels y titulos dentro del modal */
.modal__window label,
.modal__window .modal__title,
.modal__window h2 {
  color: #afafaf !important;
}
/* Botones dentro del modal */
.modal__window .btn,
.modal__window button {
  background-color: #333 !important;
  color: #afafaf !important;
  border-color: #555 !important;
  border-radius: 0.5rem;    /* <-- esquinas redondeadas */
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover ligeramente más claro y con leve “elevación” */
.modal__window .btn:hover,
.modal__window button:hover {
  background-color: #444 !important;
  transform: translateY(-1px);
}
/* Prevenir que la imagen de Cropper se recorte por tu CSS de página */
#cropper-banner-img,
.cropper-container img {
  max-width: 100% !important;
  height: auto !important;
}

/* Opcional: si quieres limitar la altura del viewport de recorte */
.cropper-container {
  max-height: 400px;
  width: 100%;
}
.topics-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
}
.topic-chip {
  background: #292929;
  padding: 2px 6px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  font-size: 0.9em;
}
.topic-chip button {
  background: none;
  border: none;
  margin-left: 4px;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
}
#topic-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 80px;
}
/* 1) Botón completamente transparente + puntero */
.vote-btn,
.action-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: #fff;           /* para que el SVG tome color blanco */
  cursor: pointer;       /* mano al pasar el ratón */
}

/* 2) SVG sin fondo y que pinte sus trazos con currentColor (blanco) */
.vote-btn svg,
.action-btn svg {
  background: none !important;
  fill: none;            /* quita cualquier relleno */
  stroke: currentColor;  /* pinta la línea de la flecha con el color del botón */
}

/* 3) Elimina cualquier efecto hover/focus que ponga fondo */
.vote-btn:hover,
.vote-btn:focus,
.action-btn:hover,
.action-btn:focus {
  background: transparent;
  outline: none;
}
/* Transición suave en el SVG */
.vote-btn svg,
.action-btn svg {
  transition: transform 0.2s ease-in-out;
    width: 2em;
  height: 2em;
}

/* Al pasar por encima, escala un 20% */
.vote-btn:hover svg,
.action-btn:hover svg {
  transform: scale(1.2);
}
/* Colorea la flecha hacia arriba de verde cuando está votada */
.vote-btn.vote-up.voted-up,
.action-btn.vote-up.voted-up {
  color: #4CAF50;  /* verde */
}

/* Colorea la flecha hacia abajo de rojo cuando está votada */
.vote-btn.vote-down.voted-down,
.action-btn.vote-down.voted-down {
  color: #F44336;  /* rojo */
}
/* Botón “guardar” transparente y con puntero */
.save-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: #fff;         /* para que el SVG tome blanco */
  cursor: pointer;
}

/* SVG dentro de “guardar” sin fondo, líneas en currentColor */
.save-btn svg {
  background: none !important;
  fill: none;
  stroke: currentColor;
  transition: transform 0.2s ease-in-out;
  width: 1.5em;  /* aumenta según necesites */
  height: 1.5em;
}

/* Escala al hover */
.save-btn:hover svg {
  transform: scale(1.2);
}

/* Cuando está guardado, lo pintas de amarillo, por ejemplo */
.save-btn.saved {
  color: #FFD700;
}
/* 1) Botón guardar base idéntico a las flechas */
.save-btn {
  background: transparent;
  border: none;
  padding: 0.25em;      /* un poco de espacio para el fondo activo */
  margin: 0;
  color: #fff;          /* color blanco por defecto */
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

/* 2) SVG sin fondo, usa currentColor para stroke */
.save-btn svg {
  background: none !important;
  fill: none;
  stroke: currentColor;
  width: 1.5em;
  height: 1.5em;
  transition: transform 0.2s, stroke 0.2s;
}

/* 3) Efecto hover normal */
.save-btn:hover svg {
  transform: scale(1.2);
}

/* 4) Estado “guardado” */
.save-btn.saved {
  color: #FFD700;               /* dorado */
  background: rgba(255,215,0,0.2); /* fondo dorado muy suave */
}

/* 5) Si quieres el SVG relleno de dorado, cambias fill:currentColor */
.save-btn.saved svg {
  fill: currentColor;
  stroke: none;
}


/* Wrapper del botón y popover */
.vista-container {
  position: relative;      /* Contenedor relativo para posicionar el popover */
  display: flex;
  justify-content: flex-end; /* Empuja el botón hacia la derecha dentro de la barra */
  margin: 12px 0;
}

/* Wrapper del botón y popover */
.vista-container {
  position: relative;       /* Para posicionar el popover */
  display: flex;
  justify-content: flex-start; /* Botón en la izquierda */
  margin: 12px 0;
}

/* Botón Vista */
.btn-vista {
  background: #272430;         /* gris oscuro */
  color: #eee;              /* texto claro */
  border: 1px solid #110433;
  padding: 6px 12px;
  border-radius: 5%;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s, border-color 0.2s;
}
.btn-vista:hover {
  background: #0c0018;
  border-color: #0c0018;
}

/* Popover */
.popover-vista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;                  /* Alineado al borde izquierdo */
  right: auto;
  width: 220px;
  background: #2a2a2a;      /* fondo gris muy oscuro */
  color: #ddd;              /* texto claro */
  border: 1px solid #444;
  border-radius: 5%;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  z-index: 20;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Título del popover */
.popover-vista .popover-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

/* Lista de opciones */
.popover-vista .popover-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.popover-vista .popover-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.popover-vista .popover-list li:hover {
  background: rgba(255,255,255,0.05);
}

/* Checkbox “Guardados” */
.popover-vista .popover-favoritos {
  border-top: 1px solid #444;
  padding-top: 8px;
}
.popover-vista .popover-favoritos label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.popover-vista .popover-favoritos input {
  accent-color: #888;
}

/* Mostrar/ocultar */
.popover-vista.hidden {
  display: none;
}
/* — Layout por defecto (Tarjeta) — */
/* no hace falta tocar tu CSS existente, es el “modo tarjeta” */

/* ==== VISTA COMPACTA CORREGIDA PARA comunidad.css ==== */
#foro.compacta .hilo {
  position: relative;
  padding: 0.5rem;
  padding-right: 6rem;        /* espacio extra a la derecha para la miniatura */
}

/* Dejamos margen lateral en el “body” de cada hilo */
#foro.compacta .hilo__title,
#foro.compacta .hilo__header {
  margin-right: 1rem;
}

/* Oculta la descripción */
#foro.compacta .post-desc {
  display: none;
}

/* Miniatura absoluta a la derecha, centrada verticalmente */
#foro.compacta .hilo__img {
  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 controles debajo */
#foro.compacta .post-controls {
  margin-top: 0.5rem;
}

/* ==== VISTA COMPACTA CORREGIDA (MÓVIL ≤600px) ==== */
@media (max-width: 600px) {
  #foro.compacta .hilo {
    padding: 0.5rem;
    padding-right: 5rem;      /* un poco menos en móvil */
  }
  #foro.compacta .hilo__title,
  #foro.compacta .hilo__header {
    margin-right: 0;          /* ocupa todo el ancho */
  }
  #foro.compacta .post-desc {
    display: none;
  }
  #foro.compacta .hilo__img {
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
  }
  #foro.compacta .post-controls {
    margin-top: 0.5rem;
  }
}
/* Ocultar vista-container cuando la pestaña Miembros, Configuración o Acerca esté activa */
nav.subnav:has(> button.active[data-tab="miembros"]) + .vista-container,
nav.subnav:has(> button.active[data-tab="config"])   + .vista-container,
nav.subnav:has(> button.active[data-tab="acerca"])   + .vista-container {
  display: none !important;
}
@media (max-width: 768px) {
  .comunidad-hero {
    margin-top: -5rem; /* Ajusta el valor según lo que necesites */
  }
}
.hilo__video {
  display: block;        /* para que margin auto funcione */
  margin: 0.5rem auto;   /* centra horizontalmente y separa arriba */
  max-width: 30%;        /* tu ancho por defecto en desktop */
  border-radius: 4px;
}

/* Para dispositivos pequeños, ocupamos todo el ancho */
@media (max-width: 600px) {
  .hilo__video {
    max-width: 100%;
  }
}
/* 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);
}