/* ============================================================
   AMPARA — Ajustes de producción (páginas con nav/footer/sidebar
   compartido: default.html, default-badge.html, ...)
   Se cargó porque varios bloques estáticos/enlaces se comentaron
   (default.html Fase 9d) y luego se repitió el mismo patrón en
   otras páginas del template (mismo header, mismo app-footer,
   mismo right-chat). Cada regla actúa solo si sus selectores
   existen en el DOM de la página, así que enlazarlo en más de
   una página es seguro: en default-badge.html, por ejemplo, la
   regla 1 (columna col-xl-4 del feed) simplemente no encuentra
   nada que ocultar y no hace nada.
   ============================================================ */

/* 1) El sidebar derecho (Solicitudes / Comunidades / ONGs / Eventos)
      quedó vacío porque esas 4 tarjetas están comentadas.
      ANTES solo se ocultaba en escritorio (min-width:992px), pero
      como Bootstrap apila esa columna a ancho completo por debajo
      de 992px (col-lg-4 sin col-sm/col-md), en tablet y celular
      se veía un bloque vacío igual. Ahora se oculta SIEMPRE,
      en cualquier dispositivo, y el feed toma el 100% del ancho
      disponible en todos los breakpoints. */
.feed-body .col-xl-4.col-xxl-3.col-lg-4 {
  display: none !important;
}
.feed-body .col-xl-8.col-xxl-9.col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) El ícono de campana de notificaciones (con la clase ms-auto)
      quedó comentado. Sin él, "Inicio" y los íconos que siguen
      (chat, ajustes, avatar) se pegan al buscador en vez de
      quedar alineados a la derecha. Empujamos "Inicio" con
      margin-left:auto para recuperar esa alineación.
      Esto solo aplica en escritorio porque center-menu-icon
      ya viene oculto en mobile por el template base. */
@media (min-width: 992px) {
  .nav-header > a[href="default.html"].center-menu-icon {
    margin-left: auto !important;
  }
}

/* 3) Barra inferior móvil (app-footer): quedaron solo 2 de 5 íconos
      (Inicio y Avatar). Centramos con separación fija en vez de
      space-between para que no queden pegados a los bordes.
      En pantallas muy angostas (celulares viejos, ~320-360px)
      bajamos el gap para que no se vea forzado; en pantallas
      más anchas (tablets en modo mobile) lo dejamos más amplio. */
.app-footer {
  justify-content: center !important;
  gap: 64px;
}
@media (max-width: 360px) {
  .app-footer {
    gap: 40px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .app-footer {
    gap: 90px;
  }
}
/* Respeta el "notch"/barra de gestos en iPhones y Android recientes
   para que los íconos no queden pegados al borde inferior real. */
.app-footer {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* 4) Chat lateral derecho: ya solo queda la sección CONTACTOS
      (COMUNIDADES y PÁGINAS están comentadas), más el nuevo
      widget "MI RANKING". Ajustamos su comportamiento responsive:
      en escritorio se mantiene con scroll propio; en tablet/mobile
      (donde el template lo convierte en panel deslizante vía
      .chat-active-btn) evitamos que el contenido se desborde. */
.middle-sidebar-right-content {
  min-height: auto !important;
}
@media (max-width: 991px) {
  .right-chat.nav-wrap {
    max-width: 100vw;
  }
  .middle-sidebar-right-content {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* 5) Widget "MI RANKING" — ajustes finos para que no se rompa
      en pantallas angostas: evita que el nombre largo del usuario
      de arriba empuje la barra de progreso fuera de la tarjeta,
      y reduce un poco el padding en celulares chicos. */
#mi-ranking-card {
  overflow: hidden;
}
#mi-ranking-card p {
  word-break: break-word;
}
@media (max-width: 400px) {
  #mi-ranking-card {
    padding: 10px !important;
  }
  #mi-ranking-card .w45 {
    width: 38px !important;
    height: 38px !important;
  }
}

/* 6) Evita scroll horizontal accidental en pantallas muy angostas
      (algunos elementos del template, como el owl-carousel o
      imágenes sin max-width, pueden empujar el ancho de la
      página). Regla de seguridad global solo para esta página. */
html, body {
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
/* 7) Dropdown de búsqueda en vivo */
.form-group.icon-input,
.form-group.searchbox {
  position: relative;
}
.ampara-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1050;
  padding: 8px 0;
}
.ampara-search-dropdown.activo { display: block; }
.ampara-search-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.ampara-search-item:hover { background: #f5f5f5; }
.ampara-search-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ampara-search-seccion {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #999;
  text-transform: uppercase;
}
.ampara-search-vacio {
  padding: 14px;
  font-size: 12px;
  color: #999;
  text-align: center;
}