/* --- ESTILOS ESPECÍFICOS PARA BLOG Y COMUNIDAD (GRID 3 COLUMNAS) --- */

.blog-page {
    padding-top: 100px; 
    background-color: #f8fafc; 
    min-height: 100vh;
    color: var(--text-dark);
}

/* --- BLOG HERO --- */
.blog-hero {
    text-align: center;
    padding: 50px 20px 40px;
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 15px; color: var(--text-dark); letter-spacing: -1px; }
.blog-hero p { font-size: 1.1rem; color: var(--text-grey); line-height: 1.6; margin-bottom: 25px; }

.btn-new-post {
    background: var(--brand-teal); color: white; border: none; padding: 12px 25px; border-radius: 50px;
    font-size: 1rem; font-weight: 700; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px var(--accent-glow);
}
.btn-new-post:hover { background: var(--brand-orange); box-shadow: 0 4px 15px rgba(227, 110, 38, 0.3); transform: translateY(-2px); }

/* --- BLOG LAYOUT (GRID CON SIDEBAR A LA IZQUIERDA) --- */
.blog-container {
    max-width: 1400px; /* Ancho extendido para las 3 columnas */
    margin: 0 auto;
    padding: 0 5% 80px;
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar izquierda, Feed derecha */
    gap: 40px;
    align-items: start;
}

/* --- SIDEBAR --- */
.blog-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 30px; }
.widget { background: white; border: 1px solid #e2e8f0; border-radius: 20px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.widget h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; color: var(--text-dark); }
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { margin-bottom: 15px; }
.category-list li:last-child { margin-bottom: 0; }
.category-list a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--text-grey); font-weight: 500; font-size: 0.95rem; transition: 0.2s; }
.category-list a:hover { color: var(--brand-teal); transform: translateX(5px); }
.category-list a span { background: #f1f5f9; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; color: #94a3b8; }

.top-users { display: flex; flex-direction: column; gap: 15px; }
.user-row { display: flex; align-items: center; gap: 12px; }
.avatar-small { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.user-name { font-weight: 700; font-size: 0.95rem; margin: 0 0 2px 0; }
.user-points { font-size: 0.8rem; color: var(--brand-orange); font-weight: 600; }

/* --- FEED DE POSTS (3 COLUMNAS) --- */
.blog-feed {
    display: grid;
    /* Esto genera las 3 columnas automáticamente y las hace responsive */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px;
}

/* POST CARD EN GRID */
.post-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: 0.3s; cursor: pointer;
    display: flex; flex-direction: column;
}
.post-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.08); transform: translateY(-5px); }

.post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.post-meta h4 { margin: 0 0 2px 0; font-size: 0.95rem; color: var(--text-dark); }
.post-meta span { font-size: 0.8rem; color: var(--text-grey); }

.post-content { flex: 1; /* Para que el footer siempre baje al fondo */ }
.post-content h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; color: #0f172a; line-height: 1.3;}

/* TRUCO CSS: Cortar el texto a 4 líneas en la tarjeta */
.post-content p {
    font-size: 0.95rem; color: #475569; line-height: 1.5; margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.post-image { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; }

.post-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 15px; margin-top: auto;}
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { background: #f1f5f9; color: var(--text-grey); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.tag.tip { background: rgba(37, 126, 119, 0.1); color: var(--brand-teal); }
.tag.sport { background: rgba(227, 110, 38, 0.1); color: var(--brand-orange); }

.post-interactions { display: flex; gap: 10px; }
.action-btn { background: none; border: none; display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--text-grey); font-weight: 600; cursor: pointer; transition: 0.2s; padding: 5px; z-index: 2; position: relative;}
.action-btn:hover { color: var(--brand-teal); }
.action-btn.like:hover { color: var(--brand-magenta); }
.icon { font-size: 1.1rem; }

/* =========================================
   MODALES (POPUPS)
========================================= */

.blog-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
    z-index: 1000; display: none; justify-content: center; align-items: center; padding: 20px;
}
.blog-modal-overlay.active { display: flex; animation: fadeIn 0.3s ease; }

.blog-modal-content {
    background: white; border-radius: 20px; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-height: 90vh; overflow-y: auto; width: 100%;
}

.blog-modal-close {
    position: absolute; top: 20px; right: 20px; background: #f1f5f9; border: none; width: 35px; height: 35px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: 0.2s; z-index: 10;
}
.blog-modal-close:hover { background: #e2e8f0; color: var(--brand-orange); }

/* Modal Leer Post: Anulamos el límite de líneas para leer todo */
.read-post-modal { max-width: 800px; padding: 40px; }
#postModalContent .post-content p { -webkit-line-clamp: unset; display: block; font-size: 1.05rem; }
#postModalContent h3 { font-size: 1.8rem; margin-top: 10px; margin-bottom: 20px;}
#postModalContent .post-image { height: auto; max-height: 400px; object-fit: cover;}

.modal-reply-section { margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 20px;}
.modal-reply-section h4 { margin-bottom: 15px;}
.reply-box { display: flex; gap: 10px; }
.reply-box input { flex: 1; padding: 12px 20px; border-radius: 50px; border: 1px solid #e2e8f0; background: #f8fafc; cursor: text; }
.btn-reply { background: var(--brand-teal); color: white; border: none; padding: 0 25px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: 0.2s;}
.btn-reply:hover { background: var(--brand-orange); }

/* Modal Auth (Family Friendly) */
.auth-modal { max-width: 450px; padding: 40px; text-align: center; }
.auth-modal-body { display: flex; flex-direction: column; align-items: center; }
.auth-icon { font-size: 4rem; margin-bottom: 10px; animation: wave 2s infinite; display: inline-block; transform-origin: 70% 70%;}
.auth-modal-body h2 { font-size: 2rem; margin-bottom: 15px; color: var(--text-dark); }
.auth-modal-body p { color: var(--text-grey); line-height: 1.6; margin-bottom: 30px; font-size: 1.05rem; }

.auth-buttons { display: flex; flex-direction: column; gap: 15px; width: 100%; margin-bottom: 20px;}
.btn-primary-auth { background: var(--brand-teal); color: white; border: none; padding: 15px; border-radius: 12px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: 0.2s;}
.btn-primary-auth:hover { background: var(--brand-orange); box-shadow: 0 5px 15px rgba(227, 110, 38, 0.3); transform: translateY(-2px);}
.btn-secondary-auth { background: transparent; border: 2px solid var(--brand-teal); color: var(--brand-teal); padding: 13px; border-radius: 12px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: 0.2s;}
.btn-secondary-auth:hover { background: #f0fdfa; }
.auth-modal-body small { color: #94a3b8; font-size: 0.85rem;}

@keyframes wave { 0% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } 60% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .blog-container { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; order: -1; margin-bottom: 20px;} /* Sidebar pasa arriba en móvil */
    .post-footer { flex-direction: column; align-items: flex-start; gap: 15px; }
    .post-interactions { width: 100%; justify-content: flex-end; }
    .read-post-modal { padding: 20px;}
}