/* ============================================ */
/* tarjetas.css - Muro, Post-Card, Categorías, Herramientas, Recursos */
/* ============================================ */

/* Secciones y animación */
.seccion { display: none; animation: fadeIn 0.3s ease; }
.seccion.activa { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.titulo-seccion { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 8px; }
.subtitulo-seccion { font-size: 0.95rem; color: var(--color-texto-secundario); text-align: center; margin-bottom: 24px; }
.cargando { text-align: center; color: var(--color-texto-secundario); padding: 40px; }
.sin-resultados { text-align: center; padding: 40px; color: var(--color-texto-secundario); }

/* Muro */
.muro { display: flex; flex-direction: column; gap: 16px; }

/* Post-Card */
.post-card {
    background: var(--color-blanco); border-radius: var(--radio-borde-grande);
    box-shadow: 0 1px 3px var(--color-sombra); overflow: hidden;
    transition: var(--transicion); cursor: pointer;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--color-sombra-hover); }
.post-card-imagen {
    width: 100%; max-height: 350px; object-fit: contain;
    background: #0f172a; display: block;
}
.post-card-cuerpo { padding: 16px 20px 12px; }
.post-card-etiqueta {
    display: inline-block; background: #e8f0fe; color: var(--color-primario);
    font-size: 0.78rem; font-weight: 600; padding: 4px 12px;
    border-radius: 50px; margin-bottom: 10px;
}
.post-card-titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.post-card-extracto {
    font-size: 0.9rem; color: var(--color-texto-secundario);
    margin-bottom: 12px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px solid var(--color-borde);
    font-size: 0.82rem; color: var(--color-texto-claro);
}
.post-card-meta-izq { display: flex; gap: 16px; }
.post-card-leer-mas { color: var(--color-primario); font-weight: 600; cursor: pointer; }
.post-card-leer-mas:hover { text-decoration: underline; }
.post-card-interacciones {
    display: flex; gap: 20px; padding: 10px 20px 14px;
    font-size: 0.85rem; color: var(--color-texto-secundario);
}
.post-card-interacciones span { cursor: pointer; transition: var(--transicion); user-select: none; }
.post-card-interacciones span:hover { color: var(--color-primario); }

/* Categorías */
.categorias-grid { padding: 10px 0; }
.grid-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.categoria-card {
    background: var(--color-blanco); border-radius: var(--radio-borde);
    padding: 20px 16px; text-align: center; cursor: pointer;
    transition: var(--transicion); border: 2px solid transparent;
}
.categoria-card:hover { border-color: var(--color-primario); transform: translateY(-2px); box-shadow: 0 4px 12px var(--color-sombra); }
.categoria-icono { font-size: 2.5rem; margin-bottom: 10px; }
.categoria-nombre { font-weight: 600; font-size: 0.95rem; }
.categoria-desc { font-size: 0.78rem; color: var(--color-texto-claro); }

/* Herramientas */
.herramientas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.herramienta-card {
    background: var(--color-blanco); border-radius: var(--radio-borde);
    padding: 20px; cursor: pointer; transition: var(--transicion);
    border-left: 4px solid var(--color-primario);
}
.herramienta-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--color-sombra-hover); }
.herramienta-icono { font-size: 2rem; margin-bottom: 10px; }
.herramienta-nombre { font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.herramienta-desc { font-size: 0.82rem; color: var(--color-texto-secundario); margin-bottom: 12px; }
.herramienta-badge {
    display: inline-block; background: #e8f0fe; color: var(--color-primario);
    font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 50px;
}

/* Recursos */
.recursos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.recurso-card {
    background: var(--color-blanco); border-radius: var(--radio-borde);
    padding: 20px; cursor: pointer; transition: var(--transicion);
    border-top: 4px solid #34a853;
}
.recurso-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--color-sombra-hover); }
.recurso-icono { font-size: 2rem; margin-bottom: 10px; }
.recurso-nombre { font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.recurso-desc { font-size: 0.82rem; color: var(--color-texto-secundario); margin-bottom: 12px; }
.recurso-tipo { font-size: 0.75rem; color: var(--color-texto-claro); font-weight: 500; }

/* Dos columnas en calculadoras */
.calculadoras-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.calc-columna {
    background: rgba(15,23,42,0.5);
    border-radius: 12px;
    padding: 14px;
}

/* Descargas organizadas por categorías */
.descarga-categoria { margin-bottom: 20px; }
.descarga-categoria h3 { margin-bottom: 10px; }
.descargas-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .calculadoras-dos-columnas { grid-template-columns: 1fr; }
}