/* ========================================================================
   INICIO - LAYOUT DE 3 COLUMNAS (index.html)
   ------------------------------------------------------------------------
   Columna izquierda (220px): mini-perfil del usuario si hay sesión activa,
     o 2 banners verticales de 200x600 si es visitante.
   Columna central: el contenido de siempre de la portada (sin cambios),
     es la más ancha.
   Columna derecha (220px): panel de "actividad en vivo" + 1 banner
     vertical de 200x600 debajo.
   Por debajo de 1180px de ancho se colapsa a una sola columna (las
   columnas laterales se ocultan) para no romper el sitio en tablet/móvil.
   ======================================================================== */

/* ---------- Títulos de la portada ~50% más bajos de alto ----------
   .seo-main-title (h1) no tenía ninguna regla propia (usaba el tamaño y
   márgenes por defecto del navegador para <h1>, bastante grandes). El h2
   .main__title sí tenía regla en styles.css (font-size: 2.5rem, margin:
   2rem), pero se usa solo en index.html, así que se sobreescribe acá para
   mantener los ajustes de esta página juntos. En ambos, gran parte de la
   altura venía de los márgenes verticales, no solo del tamaño de letra. */
.seo-main-title {
    font-size: 1.125rem;
    line-height: 1.2;
    margin: 0.65rem 0 0.5rem 0;
    font-weight: 700;
}

.main__title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin: 0.75rem 0 !important;
}

.tres-columnas-wrap {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.tres-columnas-wrap .col-centro {
    flex: 1 1 auto;
    min-width: 0; /* evita que el contenido central fuerce overflow del flex */
}

/* .main trae margin-top:80px en styles.css ("espacio para el header
   sticky"), pero .main se usa en más páginas — se acota acá el recorte a
   solo esta página. 80px -> 24px (~70% menos), y .col-lateral se ajusta al
   mismo valor más abajo para seguir alineado con el inicio del título.
   (El h1 .seo-main-title ya no trae su propio margin-top que compitiera
   por colapso de márgenes con este — ver ese bloque más arriba.) */
.tres-columnas-wrap .main {
    margin-top: 24px;
}

.col-lateral {
    flex: 0 0 220px;
    width: 220px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px; /* alinea con el margin-top de .main (espacio del header) */
}

/* ---------- Banners verticales (200x600) ---------- */
.banner-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 6px;
    width: 200px;
}

.banner-vertical__etiqueta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9ca3af;
    padding: 6px 0 0;
}

.banner-vertical img {
    display: block;
    width: 200px;
    height: 600px;
    object-fit: cover;
}

/* ---------- Mini-perfil (usuario logueado) ---------- */
.mini-perfil {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.mini-perfil__foto {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #5BCEFA;
    margin: 0 auto 0.6rem;
    display: block;
}

.mini-perfil__nombre {
    font-weight: 800;
    color: #0f172a;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-perfil__ubicacion {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.2rem;
}

.mini-perfil__acciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mini-perfil__btn {
    display: block;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0f172a;
    transition: background 0.15s ease;
}

.mini-perfil__btn:hover {
    background: #e2e8f0;
}

.mini-perfil__btn--primario {
    background: linear-gradient(135deg, #5BCEFA 0%, #F5A9B8 100%);
    color: #ffffff;
}

.mini-perfil__btn--primario:hover {
    filter: brightness(0.95);
}

/* ---------- Panel de actividad en vivo ---------- */
.actividad-panel {
    background: #0f172a;
    border-radius: 14px;
    padding: 1rem;
    color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.actividad-panel__titulo {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #ffffff;
}

.actividad-panel__titulo i {
    color: #facc15;
}

.actividad-panel__lista {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 672px; /* 420px + 60% */
    overflow-y: auto;
}

.actividad-panel__cargando,
.actividad-panel__vacio {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
    padding: 1rem 0;
}

.actividad-item {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Cuando el evento tiene un perfil real al que enlazar, renderEventoActividad()
   (inicio-3-columnas.js) usa <a class="actividad-item" href="/perfil/..."> en
   vez de <div>. Se resetean los estilos por defecto de link y se agrega un
   hover sutil para que se note que es clickeable. Si no hay usuario_id (caso
   "anuncio" sin cuenta asociada) sigue siendo un <div>, sin estos estilos. */
a.actividad-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

a.actividad-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.actividad-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.actividad-item__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #1e293b;
}

.actividad-item__avatar--generico {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.75rem;
}

.actividad-item__icono {
    color: #5BCEFA;
    font-size: 0.7rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.actividad-item__texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

.actividad-item__tiempo {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* ---------- Filtro de la portada: compacto y en una sola fila dentro de 3 columnas ----------
   .filter-container/.filter-group traen flex-wrap:nowrap !important,
   min-width:150px !important y flex-shrink:0 !important desde styles.css,
   pensados para cuando .main tenía hasta 1600px disponibles. Ahora que
   comparte ancho con las columnas laterales, esas 5 casillas + el botón no
   entraban sin desbordarse (flex-shrink:0 les impedía comprimirse). Acá se
   deja que se compriman entre sí (flex-shrink habilitado + min-width mucho
   más bajo) para que TODO quepa en una sola fila, sin pasar a una segunda
   línea. Se acota solo dentro de .tres-columnas-wrap para no afectar el
   mismo filtro en otras páginas. */
.tres-columnas-wrap .location-filter {
    padding: 0.85rem 1rem !important;
    max-width: 100% !important;
}

.tres-columnas-wrap .filter-container {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
}

.tres-columnas-wrap .filter-group {
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.tres-columnas-wrap .filter-group label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tres-columnas-wrap .filter-group select,
.tres-columnas-wrap #search-nombre {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.4rem !important;
    font-size: 0.78rem;
}

.tres-columnas-wrap .filter-button {
    flex: 0 0 auto !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tres-columnas-wrap .category-filter-container {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.tres-columnas-wrap .category-filter-btn {
    width: 100%;
    padding: 0.45rem 0.5rem;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Responsive: colapsar a una sola columna ---------- */
@media (max-width: 1180px) {
    .tres-columnas-wrap {
        display: block;
        padding: 0;
    }

    .col-lateral {
        display: none;
    }
}